@deot/docs-playground 1.1.1 → 1.1.3

package/dist/index.cjs

@@ -1,31 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#region \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-//#endregion
+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");
 let vue = require("vue");
 let _deot_vc = require("@deot/vc");
 let _deot_docs_locale = require("@deot/docs-locale");
 let highlight_js = require("highlight.js");
-highlight_js = __toESM(highlight_js);
+highlight_js = require_rolldown_runtime.__toESM(highlight_js);
 let _vue_repl = require("@vue/repl");
 let codemirror = require("codemirror");
 let _codemirror_lang_css = require("@codemirror/lang-css");
@@ -334,12 +316,6 @@ var files_preview_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region packages/playground/src/constants.ts
-var DEFAULT_ENTRY = "App.vue";
-/** 预览样式和默认 import map 共用的 npm CDN 前缀。 */
-var DEFAULT_CDN_URL = "https://cdn.jsdelivr.net/npm";
-var NEW_SFC_CODE = `<script setup lang="ts"><\/script>\n\n<template>\n  <div>\n    <slot />\n  <\/div>\n<\/template>\n`;
-//#endregion
 //#region packages/playground/src/editor/drag.ts
 var events = typeof document !== "undefined" && "ontouchstart" in document ? {
 	start: "touchstart",
@@ -595,7 +571,7 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const filename = nextFilename();
 			editorFiles.value = {
 				...editorFiles.value,
-				[filename]: NEW_SFC_CODE
+				[filename]: require_cdn.NEW_SFC_CODE
 			};
 			activeFilename.value = filename;
 			notifyFilesChange({
@@ -860,220 +836,6 @@ var resolvePlaygroundTitleId = (title, explicitId = "", isOccupied) => {
 	while (isOccupied(`${base}-${index}`)) index += 1;
 	return `${base}-${index}`;
 };
-//#endregion
-//#region packages/playground/src/core/preview-scroll.ts
-/** iframe 包装成功后挂在 `html` 上，供样式与 auto-height 识别。 */
-var PREVIEW_SCROLL_HTML_CLASS = "docs-playground-preview-scroll";
-/** Scroller 内容节点 class，auto-height 优先测量该节点。 */
-var PREVIEW_SCROLL_CONTENT_CLASS = "docs-playground-preview-scroll__content";
-/** 重评时先清掉 html class，避免 `await import` 期间仍套用 `height:100%`。 */
-var PREVIEW_SCROLL_RESET_CODE = `document.documentElement.classList.remove("${PREVIEW_SCROLL_HTML_CLASS}");`;
-/** 动态探测 `@deot/vc`；失败时为空对象，不阻断 DocsLink / 预览挂载。 */
-var PREVIEW_SCROLLER_IMPORT_CODE = "const __docsVc=await import(\"@deot/vc\").catch(()=>({}))";
-/**
-* Vue 的 `mount` 闭包的是 `createApp(root)` 时的根组件，改 `app._component` 不会生效。
-* 因此劫持 `app.mount`：等全部 useCode 注册完后，再 `createApp` 包一层 Scroller。
-* 前导分号避免接在 `app.component(...)` 后被 ASI 解析成调用返回值。
-*/
-var PREVIEW_SCROLLER_USE_CODE = [
-	";(()=>{",
-	PREVIEW_SCROLL_RESET_CODE,
-	"const __DocsScroller=__docsVc&&__docsVc.Scroller;",
-	"if(!__DocsScroller)return;",
-	"const UserApp=app._component;",
-	"app.mount=(container,...rest)=>{",
-	"const next=_createApp({",
-	"name:\"DocsPreviewRoot\",",
-	"setup(){return()=>__docsH(__DocsScroller,{",
-	"height:\"100%\",",
-	"native:false,",
-	"autoResize:true,",
-	"showBar:true,",
-	`contentClass:"${PREVIEW_SCROLL_CONTENT_CLASS}"`,
-	"},{default:()=>__docsH(UserApp)})}",
-	"});",
-	"next.config.errorHandler=app.config.errorHandler;",
-	"if(app._context&&next._context){",
-	"if(app._context.components)Object.assign(next._context.components,app._context.components);",
-	"if(app._context.directives)Object.assign(next._context.directives,app._context.directives);",
-	"}",
-	"window.__app__=next;",
-	`document.documentElement.classList.add("${PREVIEW_SCROLL_HTML_CLASS}");`,
-	"return next.mount(container,...rest)",
-	"}",
-	"})()"
-].join("");
-var PREVIEW_SCROLLER_STYLE = [
-	`html.${PREVIEW_SCROLL_HTML_CLASS},`,
-	`html.${PREVIEW_SCROLL_HTML_CLASS} body,`,
-	`html.${PREVIEW_SCROLL_HTML_CLASS} #app{`,
-	"height:100%;min-height:100%;margin:0;overflow:hidden",
-	"}",
-	`html.${PREVIEW_SCROLL_HTML_CLASS} #app>.vc-scroller,`,
-	`html.${PREVIEW_SCROLL_HTML_CLASS} #app>.vc-scroller>.vc-scroller__wrapper{`,
-	"height:100%;max-height:100%;box-sizing:border-box",
-	"}"
-].join("");
-var resolveSandboxContainer = (sandbox) => sandbox?.container ? (0, vue.unref)(sandbox.container) : null;
-var resolveScrollContent = (iframeDocument) => {
-	if (!iframeDocument.documentElement.classList.contains("docs-playground-preview-scroll")) return null;
-	return iframeDocument.querySelector(`.${PREVIEW_SCROLL_CONTENT_CLASS}`);
-};
-var useSandboxAutoHeight = (sandboxRef) => {
-	const height = (0, vue.ref)(24);
-	let container = null;
-	let iframe = null;
-	let containerObserver = null;
-	let contentObserver = null;
-	let scrollMountObserver = null;
-	let observedScrollNode = null;
-	let frameId = 0;
-	const cancelMeasure = () => {
-		if (!frameId) return;
-		cancelAnimationFrame(frameId);
-		frameId = 0;
-	};
-	const measureDocumentContent = (iframeWindow, iframeDocument) => {
-		const { body, documentElement } = iframeDocument;
-		const bodyStyle = iframeWindow.getComputedStyle(body);
-		const bodyMargins = (Number.parseFloat(bodyStyle.marginTop) || 0) + (Number.parseFloat(bodyStyle.marginBottom) || 0);
-		const rootTop = documentElement.getBoundingClientRect().top;
-		const bodyRect = body.getBoundingClientRect();
-		const collapsedTop = Math.max(0, bodyRect.top - rootTop);
-		let childrenBottom = 0;
-		for (const child of body.children) {
-			const rect = child.getBoundingClientRect();
-			const marginBottom = Number.parseFloat(iframeWindow.getComputedStyle(child).marginBottom) || 0;
-			childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
-		}
-		const scrollHeight = Math.max(body.scrollHeight, documentElement.scrollHeight);
-		const overflowingHeight = scrollHeight > (iframe?.clientHeight || 0) + 1 ? scrollHeight : 0;
-		return Math.ceil(Math.max(body.offsetHeight + bodyMargins + collapsedTop, bodyRect.height + bodyMargins + collapsedTop, childrenBottom, overflowingHeight));
-	};
-	const measureScrollContent = (scrollContent) => {
-		const contentStyle = scrollContent.ownerDocument.defaultView?.getComputedStyle(scrollContent);
-		const margins = contentStyle ? (Number.parseFloat(contentStyle.marginTop) || 0) + (Number.parseFloat(contentStyle.marginBottom) || 0) : 0;
-		let childrenBottom = 0;
-		const rootTop = scrollContent.getBoundingClientRect().top;
-		for (const child of scrollContent.children) {
-			const rect = child.getBoundingClientRect();
-			const marginBottom = Number.parseFloat(scrollContent.ownerDocument.defaultView?.getComputedStyle(child).marginBottom || "0") || 0;
-			childrenBottom = Math.max(childrenBottom, rect.bottom + marginBottom - rootTop);
-		}
-		return Math.ceil(Math.max(scrollContent.scrollHeight + margins, scrollContent.offsetHeight + margins, childrenBottom + margins));
-	};
-	const isEmptyPreviewApp = (iframeDocument) => {
-		const app = iframeDocument.getElementById("app");
-		return !!app && app.childElementCount === 0;
-	};
-	const measure = () => {
-		frameId = 0;
-		if (!iframe) return;
-		try {
-			const iframeWindow = iframe.contentWindow;
-			const iframeDocument = iframe.contentDocument;
-			if (!iframeWindow || !iframeDocument?.body) return;
-			const scrollContent = resolveScrollContent(iframeDocument);
-			if (!scrollContent && isEmptyPreviewApp(iframeDocument)) return;
-			const contentHeight = scrollContent ? measureScrollContent(scrollContent) : measureDocumentContent(iframeWindow, iframeDocument);
-			const nextHeight = Math.max(contentHeight, 24);
-			if (height.value !== nextHeight) height.value = nextHeight;
-		} catch {
-			if (height.value !== 24) height.value = 24;
-		}
-	};
-	const scheduleMeasure = () => {
-		if (frameId) return;
-		frameId = requestAnimationFrame(measure);
-	};
-	const disconnectContent = () => {
-		contentObserver?.disconnect();
-		contentObserver = null;
-		scrollMountObserver?.disconnect();
-		scrollMountObserver = null;
-		observedScrollNode = null;
-		cancelMeasure();
-	};
-	const observeContent = () => {
-		disconnectContent();
-		if (!iframe) return;
-		try {
-			const iframeWindow = iframe.contentWindow;
-			const iframeDocument = iframe.contentDocument;
-			const Observer = iframeWindow?.ResizeObserver;
-			if (!iframeWindow || !iframeDocument?.body || !Observer) {
-				scheduleMeasure();
-				return;
-			}
-			const observer = new Observer(scheduleMeasure);
-			observer.observe(iframeDocument.documentElement);
-			observer.observe(iframeDocument.body);
-			contentObserver = observer;
-			const attachScrollContent = (node) => {
-				if (!node || !contentObserver) return false;
-				if (observedScrollNode === node) return true;
-				if (observedScrollNode) contentObserver.unobserve(observedScrollNode);
-				observedScrollNode = node;
-				contentObserver.observe(node);
-				return true;
-			};
-			const syncScrollContent = () => {
-				attachScrollContent(resolveScrollContent(iframeDocument));
-				scheduleMeasure();
-			};
-			scrollMountObserver = new MutationObserver(syncScrollContent);
-			scrollMountObserver.observe(iframeDocument.documentElement, {
-				attributes: true,
-				attributeFilter: ["class"]
-			});
-			scrollMountObserver.observe(iframeDocument.body, {
-				childList: true,
-				subtree: true
-			});
-			syncScrollContent();
-		} catch {
-			if (height.value !== 24) height.value = 24;
-		}
-	};
-	const handleIframeLoad = () => observeContent();
-	const setIframe = (nextIframe) => {
-		if (iframe === nextIframe) return;
-		iframe?.removeEventListener("load", handleIframeLoad);
-		disconnectContent();
-		iframe = nextIframe;
-		if (!iframe) {
-			height.value = 24;
-			return;
-		}
-		iframe.addEventListener("load", handleIframeLoad);
-		iframe.style.height = "100%";
-		observeContent();
-	};
-	const syncIframe = () => setIframe(container?.querySelector("iframe") || null);
-	const setContainer = (nextContainer) => {
-		if (container === nextContainer) return;
-		containerObserver?.disconnect();
-		containerObserver = null;
-		container = nextContainer;
-		setIframe(null);
-		if (!container) return;
-		containerObserver = new MutationObserver(syncIframe);
-		containerObserver.observe(container, {
-			childList: true,
-			subtree: true
-		});
-		syncIframe();
-	};
-	(0, vue.watch)(() => resolveSandboxContainer(sandboxRef.value), setContainer, {
-		flush: "post",
-		immediate: true
-	});
-	(0, vue.onBeforeUnmount)(() => {
-		setContainer(null);
-		cancelMeasure();
-	});
-	return height;
-};
 var resolvePreviewBoxHeight = (contentHeight, verticalInset = 0, borderWidth = 1) => {
 	const content = Number.isFinite(contentHeight) ? Math.max(0, contentHeight) : 0;
 	const inset = Number.isFinite(verticalInset) ? Math.max(0, verticalInset) : 0;
@@ -1152,68 +914,6 @@ var scrollPlaygroundToViewportStart = (el) => {
 	});
 };
 //#endregion
-//#region packages/playground/src/core/runtime/error-guard.ts
-var UNKNOWN_RUNTIME_ERROR = "运行时发生未知错误";
-var MODULE_SPECIFIER_RE = /Failed to resolve module specifier|Error resolving module specifier/u;
-var forwardSandboxRuntimeError = (event) => {
-	if (!(event instanceof ErrorEvent) || event.error != null || !event.message) return;
-	event.stopImmediatePropagation();
-	if (event.message === "ResizeObserver loop limit exceeded" || event.message === "ResizeObserver loop completed with undelivered notifications.") return;
-	window.parent.postMessage({
-		action: "error",
-		value: event.message
-	}, "*");
-};
-var SANDBOX_RUNTIME_ERROR_CAPTURE_HTML = [
-	"<script>",
-	`window.addEventListener('error', ${forwardSandboxRuntimeError.toString()}, true);`,
-	"<\/script>"
-].join("\n");
-var toRuntimeErrorMessage = (value, message) => {
-	if (typeof value === "string" && value) return value;
-	if (value instanceof Error && value.message) return value.message;
-	if (value && typeof value === "object" && "message" in value) {
-		const valueMessage = value.message;
-		if (typeof valueMessage === "string" && valueMessage) return valueMessage;
-	}
-	if (typeof message === "string" && message) return message;
-	if (value !== null && value !== void 0) try {
-		return String(value);
-	} catch {
-		return UNKNOWN_RUNTIME_ERROR;
-	}
-	return UNKNOWN_RUNTIME_ERROR;
-};
-var normalizeRuntimeErrorMessage = (data) => {
-	if (!data || typeof data !== "object") return false;
-	const message = data;
-	if (message.action !== "error") return false;
-	message.value = toRuntimeErrorMessage(message.value, message.message);
-	return true;
-};
-var toErrorText = (value) => {
-	if (typeof value === "string" && value) return value;
-	if (value instanceof Error && value.message) return value.message;
-	return "";
-};
-var formatSandboxRuntimeError = (message, importMapTip) => {
-	if (!MODULE_SPECIFIER_RE.test(message)) return message;
-	return `${message.replace(/\. Relative references must.*$/u, "").replace(/\.$/u, "")}.\n${importMapTip}`;
-};
-var useSandboxRuntimeErrorGuard = (sandboxRef) => {
-	const error = (0, vue.ref)("");
-	if (typeof window === "undefined") return error;
-	const handleMessage = (event) => {
-		const iframe = resolveSandboxContainer(sandboxRef.value)?.querySelector("iframe");
-		if (!iframe || event.source !== iframe.contentWindow) return;
-		if (!normalizeRuntimeErrorMessage(event.data)) return;
-		error.value = event.data.value;
-	};
-	window.addEventListener("message", handleMessage, true);
-	(0, vue.onBeforeUnmount)(() => window.removeEventListener("message", handleMessage, true));
-	return error;
-};
-//#endregion
 //#region packages/playground/src/core/runtime/viewport.ts
 var DEFAULT_VIEWPORT_OPTIONS = ["auto", 375];
 var isValidViewport = (viewport) => {
@@ -1377,7 +1077,7 @@ var useSandboxTheme = (sandboxRef) => {
 		}
 		syncIframe();
 	};
-	(0, vue.watch)(() => resolveSandboxContainer(sandboxRef.value), setContainer, {
+	(0, vue.watch)(() => require_store.resolveSandboxContainer(sandboxRef.value), setContainer, {
 		flush: "post",
 		immediate: true
 	});
@@ -1396,6 +1096,73 @@ var useSandboxTheme = (sandboxRef) => {
 	});
 };
 //#endregion
+//#region packages/playground/src/core/runtime/height-bridge.ts
+/**
+* 只接收本宿主当前 iframe 的高度请求，应用重评时切换会话。
+* @param sandbox 预览容器。
+* @param maxHeight 当前可用高度，普通预览默认不限制。
+* @returns 所有有效请求的最大高度。
+*/
+function usePreviewHeightBridge(sandbox, maxHeight = () => Infinity) {
+	const height = (0, vue.ref)(0);
+	const requests = /* @__PURE__ */ new Map();
+	let source = null;
+	let session = "";
+	let disposed = false;
+	const sync = () => {
+		height.value = Math.max(0, ...requests.values());
+	};
+	const reset = () => {
+		requests.clear();
+		session = "";
+		source = null;
+		sync();
+	};
+	const handleMessage = async (event) => {
+		const current = require_store.resolveSandboxMessageSource(sandbox.value);
+		const data = event.data;
+		if (!current || event.source !== current || data?.action !== "docs:height" || typeof data.session !== "string") return;
+		if (data.operation === "start") {
+			reset();
+			source = current;
+			session = data.session;
+			return;
+		}
+		if (source !== current || session !== data.session) return;
+		if (data.operation === "stop") {
+			reset();
+			return;
+		}
+		if (!Number.isSafeInteger(data.id) || data.id <= 0) return;
+		if (data.operation === "release") {
+			requests.delete(data.id);
+			sync();
+			return;
+		}
+		if (data.operation !== "enable" || !Number.isFinite(data.height) || data.height <= 0) return;
+		const accepted = data.height <= maxHeight();
+		if (accepted) requests.set(data.id, data.height);
+		sync();
+		const receiver = source;
+		await (0, vue.nextTick)();
+		if (disposed || source !== receiver || session !== data.session) return;
+		receiver?.postMessage({
+			action: "docs:height:applied",
+			session,
+			id: data.id,
+			accepted
+		}, "*");
+	};
+	(0, vue.watch)(() => require_store.resolveSandboxMessageSource(sandbox.value), reset, { flush: "sync" });
+	if (typeof window !== "undefined") window.addEventListener("message", handleMessage);
+	(0, vue.onBeforeUnmount)(() => {
+		disposed = true;
+		if (typeof window !== "undefined") window.removeEventListener("message", handleMessage);
+		reset();
+	});
+	return height;
+}
+//#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$3 = {
@@ -1612,426 +1379,6 @@ var toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region packages/playground/src/cdn.ts
-var PREVIEW_STYLE_ASSETS = [
-	"@deot/style/dist/index.normalize-only.css",
-	"@deot/vc-components/dist/index.style.css",
-	"@deot/style/dist/index.css"
-];
-var BUILTIN_IMPORT_ASSETS = {
-	"@deot/vc": "@deot/vc/dist/index.js",
-	"@deot/vc-shared": "@deot/vc-shared/dist/index.js",
-	"@deot/vc-hooks": "@deot/vc-hooks/dist/index.js",
-	"@deot/vc-components": "@deot/vc-components/dist/index.js",
-	"@deot/helper-resize": "@deot/helper-resize/dist/index.js",
-	"@deot/helper-utils": "@deot/helper-utils/dist/index.js",
-	"@deot/helper-cache": "@deot/helper-cache/dist/index.js",
-	"@deot/helper-fp": "@deot/helper-fp/dist/index.js",
-	"@deot/helper-dom": "@deot/helper-dom/dist/index.js",
-	"@deot/helper-wheel": "@deot/helper-wheel/dist/index.js",
-	"@deot/helper-validator": "@deot/helper-validator/dist/index.js",
-	"@deot/helper-load": "@deot/helper-load/dist/index.js",
-	"@deot/helper-scheduler": "@deot/helper-scheduler/dist/index.js",
-	"@deot/helper-emitter": "@deot/helper-emitter/dist/index.js",
-	"@deot/helper-is": "@deot/helper-is/dist/index.js",
-	"@deot/helper-device": "@deot/helper-device/dist/index.js",
-	"@deot/helper-route": "@deot/helper-route/dist/index.js",
-	"@deot/helper-unicode": "@deot/helper-unicode/dist/index.js",
-	"@deot/helper": "@deot/helper/dist/index.js",
-	"normalize-wheel": "normalize-wheel-es/dist/index.mjs",
-	"photoswipe": "photoswipe/dist/photoswipe.esm.js",
-	"photoswipe/lightbox": "photoswipe/dist/photoswipe-lightbox.esm.js"
-};
-var normalizeCdnURL = (cdnURL = DEFAULT_CDN_URL) => {
-	return cdnURL.trim().replace(/\/+$/u, "") || "https://cdn.jsdelivr.net/npm";
-};
-var cdnJoin = (origin, asset) => `${origin}/${asset.replace(/^\/+/u, "")}`;
-var jsdelivrEsmURL = (asset) => cdnJoin(DEFAULT_CDN_URL, asset);
-var SASS_CDN_URL = jsdelivrEsmURL("sass/+esm");
-var cdnAsset = (cdnURL, asset) => cdnJoin(normalizeCdnURL(cdnURL), asset);
-var createBuiltinImports = (cdnURL = DEFAULT_CDN_URL) => ({
-	...Object.fromEntries(Object.entries(BUILTIN_IMPORT_ASSETS).map(([specifier, asset]) => [specifier, cdnAsset(cdnURL, asset)])),
-	"lodash-es": jsdelivrEsmURL("lodash-es/+esm"),
-	"vue": "https://play.vuejs.org/vue.runtime.esm-browser.js",
-	"vue/server-renderer": "https://play.vuejs.org/server-renderer.esm-browser.js"
-});
-var createBuiltinStyles = (cdnURL = DEFAULT_CDN_URL) => Object.fromEntries(PREVIEW_STYLE_ASSETS.map((asset) => [asset, cdnAsset(cdnURL, asset)]));
-//#endregion
-//#region packages/playground/src/import-map.ts
-/**
-* 站点级同步内存：`$docs.modules` / `$docs.styles` 与管理页 import、CSS 覆盖。
-*/
-var normalize = (value) => value.trim();
-var isSafePlaygroundHref = (href) => {
-	const next = href.trim();
-	if (!next) return false;
-	if (/^https?:\/\//iu.test(next)) return true;
-	return next.startsWith("/") && !next.startsWith("//");
-};
-var filterSafeHrefs = (value = {}) => Object.fromEntries(Object.entries(value).filter((entry) => typeof entry[1] === "string" && isSafePlaygroundHref(entry[1])));
-var sanitizeMap = (value = {}) => filterSafeHrefs(Object.fromEntries(Object.entries(value).map(([alias, url]) => [normalize(alias), normalize(url)]).filter(([alias]) => Boolean(alias))));
-var createMapStore = () => {
-	let data = {};
-	const snapshot = () => ({ ...data });
-	const drop = (alias) => {
-		if (data[alias] === void 0) return snapshot();
-		const next = { ...data };
-		delete next[alias];
-		data = next;
-		return snapshot();
-	};
-	return {
-		get: snapshot,
-		set: (value = {}) => {
-			data = sanitizeMap(value);
-		},
-		apply: (alias, url) => {
-			const nextAlias = normalize(alias);
-			const nextUrl = normalize(url);
-			if (!nextAlias) return snapshot();
-			if (!isSafePlaygroundHref(nextUrl)) return drop(nextAlias);
-			data = {
-				...data,
-				[nextAlias]: nextUrl
-			};
-			return snapshot();
-		},
-		remove: (alias) => {
-			const nextAlias = normalize(alias);
-			return nextAlias ? drop(nextAlias) : snapshot();
-		}
-	};
-};
-var siteModules = createMapStore();
-var siteStyles = createMapStore();
-var importOverrides = createMapStore();
-var styleOverrides = createMapStore();
-/**
-* 站点默认 import。合并时夹在内置 CDN 与实例 `builtinImportMap` 之间。
-*/
-var getPlaygroundSiteModules = siteModules.get;
-var setPlaygroundSiteModules = siteModules.set;
-/**
-* 站点默认预览 CSS。合并时夹在内置样式表与管理页覆盖之间。
-*/
-var getPlaygroundSiteStyles = siteStyles.get;
-var setPlaygroundSiteStyles = siteStyles.set;
-var getPlaygroundImportMapOverrides = importOverrides.get;
-var setPlaygroundImportMapOverrides = importOverrides.set;
-var applyPlaygroundImportMapOverride = importOverrides.apply;
-var removePlaygroundImportMapOverride = importOverrides.remove;
-var getPlaygroundStyleOverrides = styleOverrides.get;
-var setPlaygroundStyleOverrides = styleOverrides.set;
-var applyPlaygroundStyleOverride = styleOverrides.apply;
-var removePlaygroundStyleOverride = styleOverrides.remove;
-var clearPlaygroundMaps = () => {
-	[
-		siteModules,
-		siteStyles,
-		importOverrides,
-		styleOverrides
-	].forEach((store) => store.set());
-};
-//#endregion
-//#region packages/playground/src/core/scss.ts
-var SCHEME = "docs-playground";
-var STYLE_EXTS = [".scss", ".sass"];
-var VUE_SCSS_STYLE_RE = /<style\b[^>]*\blang\s*=\s*(['"]?)s[ac]ss\1/i;
-var LANG_ATTR_RE = /\s*lang\s*=\s*(['"]?)s[ac]ss\1/i;
-var SCSS_ERROR_MARK = "[playground-sass]";
-var INJECT_START = "/* docs-playground-scss-start */";
-var INJECT_END = "/* docs-playground-scss-end */";
-var EMPTY_JS = "export default {}\n";
-var boundStores = /* @__PURE__ */ new WeakSet();
-var wrappedCompilers = /* @__PURE__ */ new WeakSet();
-var testLoader;
-var loadedSass;
-var loadPromise;
-var fileCode = (value) => typeof value === "string" ? value : value.code;
-var playgroundPath = (url) => decodeURIComponent(url.pathname.replace(/^\/+/u, ""));
-var toPlaygroundUrl = (filename) => new URL(`${SCHEME}:///${filename.replace(/^\/+/u, "")}`);
-var basename = (path) => path.split("/").pop() || path;
-var scssSyntax = (filename, lang) => lang === "sass" || /\.sass$/i.test(filename) ? "indented" : "scss";
-var errorText = (item) => item instanceof Error ? item.message : String(item);
-var isScssFile = (filename) => /\.s[ac]ss$/i.test(filename);
-var vueSourceNeedsScss = (source) => VUE_SCSS_STYLE_RE.test(source);
-var resolveSassModule = async (url) => {
-	const mod = await import(
-		/* @vite-ignore */
-		url
-);
-	const sass = typeof mod.compileString === "function" ? mod : mod.default;
-	if (typeof sass?.compileString !== "function") throw new Error(`Sass module at ${url} does not export compileString`);
-	return sass;
-};
-var loadSass = () => {
-	loadPromise ??= (testLoader ?? (() => resolveSassModule(SASS_CDN_URL)))().then((sass) => {
-		loadedSass = sass;
-		return sass;
-	});
-	return loadPromise;
-};
-var isScssPartial = (filename) => isScssFile(filename) && basename(filename).startsWith("_");
-var filesNeedScss = (files) => Object.entries(files).some(([filename, value]) => isScssFile(filename) || /\.vue$/i.test(filename) && vueSourceNeedsScss(fileCode(value)));
-var whenSassReady = (files, run) => {
-	if (!filesNeedScss(files) || loadedSass) run();
-	else loadSass().then(run);
-};
-var toPlaygroundFileMap = (files) => Object.fromEntries(Object.entries(files).map(([filename, value]) => [filename, fileCode(value)]));
-var formatScssError = (filename, message) => `${SCSS_ERROR_MARK} ${filename}: ${message}`;
-var scssFail = (filename, error) => formatScssError(filename, errorText(error));
-var withUnderscore = (path) => {
-	const base = basename(path);
-	if (base.startsWith("_")) return path;
-	return `${path.slice(0, -base.length)}_${base}`;
-};
-var matchFileKey = (files, path) => [
-	path,
-	path.startsWith("src/") ? path : `src/${path}`,
-	path.replace(/^src\//u, "")
-].find((key) => files[key] !== void 0);
-var stylesheetCandidates = (requestPath) => {
-	if (isScssFile(requestPath)) return [requestPath, withUnderscore(requestPath)];
-	return STYLE_EXTS.flatMap((ext) => [
-		`${requestPath}${ext}`,
-		withUnderscore(`${requestPath}${ext}`),
-		`${requestPath}/index${ext}`,
-		withUnderscore(`${requestPath}/index${ext}`)
-	]);
-};
-var resolvePlaygroundStylesheet = (files, requestPath) => {
-	const found = [...new Set(stylesheetCandidates(requestPath).map((path) => matchFileKey(files, path)).filter((key) => Boolean(key)))];
-	if (found.length > 1) throw new Error(`Ambiguous Sass import "${requestPath}": ${found.join(", ")}`);
-	return found[0] ?? null;
-};
-var createPlaygroundImporter = (getFiles) => ({
-	canonicalize(url, context) {
-		if (/^[a-zA-Z][\w+.-]*:/u.test(url) && !url.startsWith(`${SCHEME}:`)) return null;
-		try {
-			const resolved = resolvePlaygroundStylesheet(getFiles(), playgroundPath(new URL(url, context.containingUrl ?? toPlaygroundUrl(""))));
-			return resolved ? toPlaygroundUrl(resolved) : null;
-		} catch {
-			return null;
-		}
-	},
-	load(canonicalUrl) {
-		const files = getFiles();
-		const key = playgroundPath(canonicalUrl);
-		return files[key] === void 0 ? null : {
-			contents: files[key],
-			syntax: scssSyntax(key)
-		};
-	}
-});
-var compileScssSource = (source, filename, sass, files, lang) => {
-	const importer = createPlaygroundImporter(() => files);
-	return sass.compileString(source, {
-		syntax: scssSyntax(filename, lang),
-		url: toPlaygroundUrl(filename),
-		importer,
-		importers: [importer]
-	}).css;
-};
-var rewriteVueSfcStyles = (source, filename, parse, sass, files) => {
-	const scssStyles = parse(source, { filename }).descriptor.styles.filter((style) => style.lang === "scss" || style.lang === "sass");
-	if (!scssStyles.length) return {
-		code: source,
-		errors: []
-	};
-	const errors = [];
-	let code = source;
-	for (const style of [...scssStyles].sort((left, right) => right.loc.start.offset - left.loc.start.offset)) {
-		const before = code.slice(0, style.loc.start.offset);
-		const after = code.slice(style.loc.end.offset);
-		const openStart = before.lastIndexOf("<style");
-		if (openStart < 0) {
-			errors.push(formatScssError(filename, "unable to locate <style> opening tag"));
-			continue;
-		}
-		try {
-			const css = compileScssSource(style.content, filename, sass, files, style.lang);
-			code = `${before.slice(0, openStart)}${before.slice(openStart).replace(LANG_ATTR_RE, "")}${css}${after}`;
-		} catch (error) {
-			errors.push(scssFail(filename, error));
-		}
-	}
-	return {
-		code,
-		errors
-	};
-};
-var appendParseErrors = (result, errors) => errors.length ? {
-	...result,
-	errors: [...result.errors, ...errors.map((item) => new Error(item))]
-} : result;
-var wrapCompiler = (compiler, getFiles) => {
-	if (wrappedCompilers.has(compiler)) return compiler;
-	const originalParse = compiler.parse.bind(compiler);
-	const wrapped = { ...compiler };
-	wrapped.parse = ((source, options) => {
-		const filename = options?.filename || "anonymous.vue";
-		if (!vueSourceNeedsScss(source)) return originalParse(source, options);
-		const rewritten = loadedSass ? rewriteVueSfcStyles(source, filename, originalParse, loadedSass, getFiles()) : {
-			code: source,
-			errors: [formatScssError(filename, "compiler is not loaded")]
-		};
-		return appendParseErrors(originalParse(rewritten.errors.length ? source : rewritten.code, options), rewritten.errors);
-	});
-	wrappedCompilers.add(wrapped);
-	return wrapped;
-};
-var withInjectedCss = (css, extra) => {
-	const start = css.indexOf(INJECT_START);
-	const end = start < 0 ? -1 : css.indexOf(INJECT_END, start);
-	const base = (start < 0 ? css : `${css.slice(0, start)}${end >= 0 ? css.slice(end + 30) : ""}`).trimEnd();
-	if (!extra.trim()) return base;
-	const block = `${INJECT_START}\n${extra.trim()}\n${INJECT_END}`;
-	return base ? `${base}\n${block}` : block;
-};
-var isStandaloneScssError = (item) => {
-	const text = errorText(item);
-	return text.startsWith(SCSS_ERROR_MARK) && /\.s[ac]ss:/i.test(text);
-};
-var syncScssErrors = (store, scssErrors) => {
-	const next = [...scssErrors, ...store.errors.filter((item) => !isStandaloneScssError(item))];
-	if (next.map(String).join("\0") === store.errors.map(String).join("\0")) return;
-	store.errors = next;
-};
-var applyStandaloneScss = (store, sass = loadedSass) => {
-	if (!sass) return [];
-	const fileMap = toPlaygroundFileMap(store.files);
-	const errors = [];
-	const injected = [];
-	for (const [filename, file] of Object.entries(store.files)) {
-		if (!isScssFile(filename) || !file.compiled) continue;
-		try {
-			const css = compileScssSource(file.code, filename, sass, fileMap);
-			file.compiled.css = css;
-			file.compiled.js = EMPTY_JS;
-			file.compiled.ssr = EMPTY_JS;
-			if (!isScssPartial(filename) && css.trim()) injected.push(css);
-		} catch (error) {
-			errors.push(scssFail(filename, error));
-		}
-	}
-	const main = store.files[store.mainFile];
-	if (main?.compiled) {
-		const next = withInjectedCss(main.compiled.css || "", injected.join("\n"));
-		if (next !== (main.compiled.css || "")) main.compiled.css = next;
-	}
-	syncScssErrors(store, errors);
-	return errors;
-};
-var bindPlaygroundScss = (store) => {
-	if (boundStores.has(store)) return;
-	boundStores.add(store);
-	const getFiles = () => toPlaygroundFileMap(store.files);
-	const installCompiler = () => {
-		if (typeof store.compiler?.parse === "function") store.compiler = wrapCompiler(store.compiler, getFiles);
-	};
-	installCompiler();
-	(0, vue.watch)(() => store.compiler, installCompiler);
-	(0, vue.watch)(() => [
-		store.mainFile,
-		store.files[store.mainFile]?.compiled?.css,
-		store.errors.map(String).join("\0"),
-		Object.entries(store.files).filter(([filename]) => isScssFile(filename)).map(([filename, file]) => `${filename}:${file.code}`).join("\n")
-	].join("\0"), () => {
-		if (loadedSass) applyStandaloneScss(store);
-	});
-	const originalSetFiles = store.setFiles.bind(store);
-	store.setFiles = async (newFiles, mainFile) => {
-		if (filesNeedScss(newFiles) && !loadedSass) await loadSass();
-		return originalSetFiles(newFiles, mainFile);
-	};
-};
-//#endregion
-//#region packages/playground/src/core/store.ts
-var DOCS_LINK_IMPORT_CODE = "import { h as __docsH } from \"vue\"";
-var DOCS_LINK_USE_CODE = [
-	PREVIEW_SCROLL_RESET_CODE,
-	"app.component(\"DocsLink\",{",
-	"props:{to:{type:String,default:\"\"}},",
-	"setup(props,{slots}){return()=>__docsH(\"a\",{",
-	"href:props.to,",
-	"style:{color:\"inherit\",textDecoration:\"none\"},",
-	"onClick(event){event.preventDefault();window.parent.postMessage({action:\"docs:navigate\",to:props.to},\"*\")}",
-	"},slots.default?.())}",
-	"})"
-].join("");
-var escapeHtmlAttr = (value) => value.replace(/&/gu, "&amp;").replace(/"/gu, "&quot;").replace(/'/gu, "&#39;").replace(/</gu, "&lt;").replace(/>/gu, "&gt;");
-/**
-* runtime 画布色。`previewInset` 露出的 padding、iframe chrome 和 sandbox
-* `html`/`body` 必须共用这一变量，暗色下 `--docs-background-color` 与
-* `--vc-background-color-light` 不同，否则会出现色带割裂。
-*/
-var PLAYGROUND_RUNTIME_CANVAS_BACKGROUND = "var(--vc-background-color-light, var(--docs-background-color, #fff))";
-var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL, options = {}) => {
-	const previewScroller = options.previewScroller === true;
-	const hrefs = Object.values({
-		...createBuiltinStyles(cdnURL),
-		...getPlaygroundSiteStyles(),
-		...getPlaygroundStyleOverrides()
-	});
-	const styleBlocks = [
-		`html,body{height:auto;min-height:0;background:${PLAYGROUND_RUNTIME_CANVAS_BACKGROUND}}`,
-		"body{color:var(--vc-foreground-color,#080f20)}",
-		...previewScroller ? [PREVIEW_SCROLLER_STYLE] : []
-	];
-	return {
-		showRuntimeError: false,
-		showRuntimeWarning: false,
-		headHTML: [
-			SANDBOX_RUNTIME_ERROR_CAPTURE_HTML,
-			"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
-			...hrefs.map((href) => `<link rel="stylesheet" href="${escapeHtmlAttr(href)}">`),
-			"<style>",
-			...styleBlocks,
-			"</style>"
-		].join("\n"),
-		customCode: {
-			importCode: DOCS_LINK_IMPORT_CODE,
-			useCode: DOCS_LINK_USE_CODE
-		}
-	};
-};
-var toReplFilename = (filename) => filename.startsWith("src/") ? filename : `src/${filename}`;
-var createReplFile = (filename, code) => {
-	const replFilename = toReplFilename(filename);
-	return new _vue_repl.File(replFilename, code);
-};
-var createRuntimeStore = (files, entry, options) => {
-	const { cdnURL, builtinImportMap, ...storeOptions } = options;
-	const replFiles = (0, vue.ref)(Object.fromEntries(Object.entries(files).map(([filename, code]) => {
-		const file = createReplFile(filename, code);
-		return [file.filename, file];
-	})));
-	const mainFile = (0, vue.ref)(toReplFilename(entry));
-	const activeFilename = (0, vue.ref)(toReplFilename(entry));
-	const store = (0, _vue_repl.useStore)({
-		...storeOptions,
-		files: replFiles,
-		mainFile,
-		activeFilename,
-		builtinImportMap: (0, vue.ref)({
-			...builtinImportMap,
-			imports: {
-				...createBuiltinImports(cdnURL),
-				...getPlaygroundSiteModules(),
-				...filterSafeHrefs(builtinImportMap?.imports),
-				...getPlaygroundImportMapOverrides()
-			}
-		}),
-		template: (0, vue.ref)({
-			welcomeSFC: files[entry],
-			newSFC: NEW_SFC_CODE
-		})
-	});
-	bindPlaygroundScss(store);
-	whenSassReady(files, () => store.init());
-	return store;
-};
-//#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$2 = { class: "docs-playground-popup__frame" };
@@ -2058,6 +1405,17 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		clearConsole: {
 			type: Boolean,
 			default: true
+		},
+		local: {
+			type: Boolean,
+			default: true
+		},
+		files: { default: () => ({}) },
+		entry: { default: "" },
+		options: { default: () => ({}) },
+		previewScroller: {
+			type: Boolean,
+			default: false
 		}
 	},
 	emits: [
@@ -2067,23 +1425,42 @@ 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 props = __props;
 		const emit = __emit;
 		const { t } = (0, _deot_docs_locale.useLocale)();
 		const currentViewport = (0, vue.ref)(props.viewport);
 		const sandboxRef = (0, vue.ref)(null);
+		const localError = (0, vue.ref)({
+			compile: "",
+			runtime: ""
+		});
+		const handleLocalError = (payload) => {
+			localError.value = payload;
+		};
+		const availableHeight = () => Math.max(0, getWindowInnerSize().height - 40 - 44);
+		const temporaryHeight = usePreviewHeightBridge(sandboxRef, availableHeight);
 		const sandboxKey = (0, vue.ref)(0);
 		const layoutTick = (0, vue.ref)(0);
-		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
+		const runtimeError = require_store.useSandboxRuntimeErrorGuard(sandboxRef);
 		useSandboxTheme(sandboxRef);
-		const storeErrors = (0, vue.computed)(() => (props.store.errors || []).map(toErrorText).filter(Boolean).join("\n"));
+		const storeErrors = (0, vue.computed)(() => props.local ? localError.value.compile : (props.store?.errors || []).map(require_store.toErrorText).filter(Boolean).join("\n"));
 		const errorText = (0, vue.computed)(() => {
-			const runtime = runtimeError.value ? formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip")) : "";
+			const runtime = props.local ? localError.value.runtime : runtimeError.value ? require_store.formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip")) : "";
 			return [storeErrors.value, runtime].filter(Boolean).join("\n\n");
 		});
 		const layout = (0, vue.computed)(() => {
 			layoutTick.value;
-			return resolvePopupLayout(currentViewport.value);
+			const base = resolvePopupLayout(currentViewport.value);
+			if (!temporaryHeight.value) return base;
+			const canvasHeight = Math.min(availableHeight(), Math.max(base.canvasHeight, temporaryHeight.value));
+			const shellHeight = Math.max(base.shellHeight, canvasHeight + 44);
+			return {
+				...base,
+				canvasHeight,
+				shellHeight,
+				bodyHeight: shellHeight - 44
+			};
 		});
 		const shellStyle = (0, vue.computed)(() => ({
 			width: `${layout.value.shellWidth}px`,
@@ -2092,10 +1469,14 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const canvasStyle = (0, vue.computed)(() => ({
 			width: `${layout.value.canvasWidth}px`,
 			height: `${layout.value.canvasHeight}px`,
-			background: PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
+			background: require_store.PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
 		}));
 		const handleRefresh = () => {
 			runtimeError.value = "";
+			localError.value = {
+				compile: "",
+				runtime: ""
+			};
 			sandboxKey.value++;
 		};
 		const handleViewportChange = (viewport) => {
@@ -2120,8 +1501,7 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			layoutTick.value++;
 		};
 		const handleBridgeMessage = (event) => {
-			const iframe = resolveSandboxContainer(sandboxRef.value)?.querySelector("iframe");
-			if (!iframe || event.source !== iframe.contentWindow) return;
+			if (!require_store.isSandboxMessage(sandboxRef.value, event)) return;
 			const data = event.data;
 			if (!data || data.action !== "docs:navigate" || typeof data.to !== "string") return;
 			emit("navigate", data.to);
@@ -2183,7 +1563,23 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
 						class: "docs-playground-popup__canvas",
 						style: (0, vue.normalizeStyle)(canvasStyle.value)
-					}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
+					}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LocalSandbox), {
+						key: sandboxKey.value,
+						ref_key: "sandboxRef",
+						ref: sandboxRef,
+						files: __props.files,
+						entry: __props.entry,
+						options: __props.options,
+						"preview-scroller": __props.previewScroller,
+						"clear-console": __props.clearConsole,
+						onError: handleLocalError
+					}, null, 8, [
+						"files",
+						"entry",
+						"options",
+						"preview-scroller",
+						"clear-console"
+					])) : __props.store ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
 						key: sandboxKey.value,
 						ref_key: "sandboxRef",
 						ref: sandboxRef,
@@ -2195,7 +1591,7 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"store",
 						"clear-console",
 						"preview-options"
-					]))], 4)]),
+					])) : (0, vue.createCommentVNode)("v-if", true)], 4)]),
 					_: 1
 				})])
 			])], 4)], 8, _hoisted_1$2);
@@ -2263,7 +1659,11 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		title: { default: "" },
 		id: { default: "" },
 		viewport: { default: "auto" },
-		viewportOptions: { default: () => ["auto", 375] }
+		viewportOptions: { default: () => ["auto", 375] },
+		local: {
+			type: Boolean,
+			default: true
+		}
 	},
 	emits: [
 		"files-change",
@@ -2272,6 +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 props = __props;
 		const { locale, t } = (0, _deot_docs_locale.useLocale)();
 		const displayTitle = (0, vue.computed)(() => props.title.trim());
@@ -2284,7 +1685,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const emit = __emit;
 		const joinCode = (...values) => values.filter(Boolean).join("\n");
 		const mergePreviewOptions = (extraHeadHTML) => {
-			const runtimePreviewOptions = createRuntimePreviewOptions(props.options.cdnURL, { previewScroller: props.previewScroller });
+			const runtimePreviewOptions = require_store.createRuntimePreviewOptions(props.options.cdnURL, { previewScroller: props.previewScroller });
 			return {
 				...runtimePreviewOptions,
 				...props.previewOptions,
@@ -2294,8 +1695,8 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					extraHeadHTML
 				].filter(Boolean).join("\n"),
 				customCode: {
-					importCode: joinCode(DOCS_LINK_IMPORT_CODE, props.previewOptions?.customCode?.importCode, props.previewScroller ? PREVIEW_SCROLL_RESET_CODE : void 0, props.previewScroller ? PREVIEW_SCROLLER_IMPORT_CODE : void 0),
-					useCode: joinCode(runtimePreviewOptions.customCode?.useCode, props.previewOptions?.customCode?.useCode, props.previewScroller ? PREVIEW_SCROLLER_USE_CODE : void 0)
+					importCode: joinCode(runtimePreviewOptions.customCode?.importCode, props.previewOptions?.customCode?.importCode, props.previewScroller ? require_store.PREVIEW_SCROLL_RESET_CODE : void 0, props.previewScroller ? require_store.PREVIEW_SCROLLER_IMPORT_CODE : void 0),
+					useCode: joinCode(runtimePreviewOptions.customCode?.useCode, props.previewOptions?.customCode?.useCode, props.previewScroller ? require_store.PREVIEW_SCROLLER_USE_CODE : void 0)
 				}
 			};
 		};
@@ -2309,20 +1710,32 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			"SSR": false
 		}.MODE !== "development";
 		const copyValue = (0, vue.computed)(() => props.files[props.entry] || "");
-		const store = createRuntimeStore(props.files, props.entry, props.options);
+		const store = props.local ? null : require_store.createRuntimeStore(props.files, props.entry, props.options);
 		const sandboxRef = (0, vue.ref)(null);
+		const localError = (0, vue.ref)({
+			compile: "",
+			runtime: ""
+		});
+		const handleLocalError = (payload) => {
+			localError.value = payload;
+		};
+		const temporaryHeight = usePreviewHeightBridge(sandboxRef);
 		const sandboxKey = (0, vue.ref)(0);
-		const runtimeHeight = useSandboxAutoHeight(sandboxRef);
-		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
+		const runtimeHeight = require_store.useSandboxAutoHeight(sandboxRef);
+		const runtimeError = require_store.useSandboxRuntimeErrorGuard(sandboxRef);
 		useSandboxTheme(sandboxRef);
-		const compileErrorText = (0, vue.computed)(() => (store.errors || []).map(toErrorText).filter(Boolean).join("\n"));
+		const compileErrorText = (0, vue.computed)(() => {
+			if (props.local) return localError.value.compile;
+			return (store?.errors || []).map(require_store.toErrorText).filter(Boolean).join("\n");
+		});
 		const errorText = (0, vue.computed)(() => {
-			const runtime = runtimeError.value ? formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip")) : "";
+			let runtime = "";
+			if (props.local) runtime = localError.value.runtime;
+			else if (runtimeError.value) runtime = require_store.formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip"));
 			return [compileErrorText.value, runtime].filter(Boolean).join("\n\n");
 		});
 		const handleBridgeMessage = (event) => {
-			const iframe = resolveSandboxContainer(sandboxRef.value)?.querySelector("iframe");
-			if (!iframe || event.source !== iframe.contentWindow) return;
+			if (!require_store.isSandboxMessage(sandboxRef.value, event)) return;
 			const data = event.data;
 			if (!data || data.action !== "docs:navigate" || typeof data.to !== "string") return;
 			emit("navigate", data.to);
@@ -2355,27 +1768,33 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}) - vertical * 2 - 2);
 		};
 		const syncFrozenExpandedHeight = () => {
-			if (!previewExpanded.value || props.expandable !== true) return;
+			if (props.local || !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 && isPlaygroundExpandable(props.expandable));
+		const canExpandPreview = (0, vue.computed)(() => !props.local && !props.styleless && isPlaygroundExpandable(props.expandable));
 		const expandLabel = (0, vue.computed)(() => t(previewExpanded.value ? "playground.runtime.collapsePreview" : "playground.runtime.expandPreview"));
-		const desiredViewportHeight = (0, vue.computed)(() => {
+		const baseViewportHeight = (0, vue.computed)(() => {
+			if (props.local) {
+				const fixedHeight = getViewportHeight(props.viewport);
+				if (fixedHeight) return fixedHeight;
+				return runtimeHeight.value;
+			}
 			if (previewExpanded.value && props.expandable === true) return frozenExpandedHeight.value;
 			if (previewExpanded.value && isPlaygroundExpandable(props.expandable)) return resolveExpandedPreviewHeight(props.expandable, 0);
 			const fixedHeight = getViewportHeight(props.viewport);
 			if (fixedHeight) return fixedHeight;
 			return runtimeHeight.value;
 		});
+		const desiredViewportHeight = (0, vue.computed)(() => Math.max(baseViewportHeight.value, temporaryHeight.value));
 		const scrollExpandedPreviewIntoView = () => {
 			scrollPlaygroundToViewportStart(runtimeRoot.value);
 		};
 		const handleTogglePreviewExpand = () => {
-			if (!canExpandPreview.value) return;
+			if (props.local || !canExpandPreview.value) return;
 			if (!previewExpanded.value) {
 				if (props.expandable === true) frozenExpandedHeight.value = measureExpandedPreviewHeight();
 				else frozenExpandedHeight.value = 0;
@@ -2397,7 +1816,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return {
 				height: `${resolvePreviewBoxHeight(desiredViewportHeight.value, vertical)}px`,
 				padding: vertical === horizontal ? `${vertical}px` : `${vertical}px ${horizontal}px`,
-				background: PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
+				background: require_store.PLAYGROUND_RUNTIME_CANVAS_BACKGROUND
 			};
 		});
 		const stylelessStyle = (0, vue.computed)(() => errorText.value ? void 0 : { height: `${desiredViewportHeight.value}px` });
@@ -2415,42 +1834,50 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			syncedFiles = { ...files };
 			syncedEntry = entry;
 			const apply = () => {
-				switch (action.type) {
+				if (store) switch (action.type) {
 					case "update": {
-						const file = store.files[toReplFilename(action.filename)];
+						const file = store.files[require_store.toReplFilename(action.filename)];
 						if (file) file.code = files[action.filename];
 						break;
 					}
 					case "create":
-						store.addFile(createReplFile(action.filename, files[action.filename]));
+						store.addFile(require_store.createReplFile(action.filename, files[action.filename]));
 						break;
 					case "rename":
-						store.renameFile(toReplFilename(action.previousFilename), toReplFilename(action.filename));
+						store.renameFile(require_store.toReplFilename(action.previousFilename), require_store.toReplFilename(action.filename));
 						break;
 					case "delete":
-						store.setActive(toReplFilename(entry));
-						delete store.files[toReplFilename(action.filename)];
+						store.setActive(require_store.toReplFilename(entry));
+						delete store.files[require_store.toReplFilename(action.filename)];
 						break;
 					case "entry":
-						store.mainFile = toReplFilename(entry);
-						store.setActive(toReplFilename(entry));
+						store.mainFile = require_store.toReplFilename(entry);
+						store.setActive(require_store.toReplFilename(entry));
 				}
 				emit("files-change", files, entry, action);
 			};
-			whenSassReady(files, apply);
+			if (store) require_scss.whenSassReady(files, apply);
+			else apply();
 		};
 		const handleEditor = () => {
 			Editor.popup({
 				files: { ...props.files },
 				entry: props.entry,
 				locale: locale.value,
-				getCodeErrors: () => store.errors,
+				getCodeErrors: () => {
+					if (!props.local) return store?.errors || [];
+					return localError.value.compile ? [localError.value.compile] : [];
+				},
 				onFilesChange: handleFilesChange,
-				onActiveChange: (filename) => store.setActive(toReplFilename(filename))
+				onActiveChange: (filename) => store?.setActive(require_store.toReplFilename(filename))
 			});
 		};
 		const handleInlineRefresh = () => {
 			runtimeError.value = "";
+			localError.value = {
+				compile: "",
+				runtime: ""
+			};
 			sandboxKey.value++;
 		};
 		const handleClosePopup = () => {
@@ -2458,6 +1885,11 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		};
 		const handleOpenPopup = () => {
 			Alone.popup({
+				local: props.local,
+				files: props.files,
+				entry: props.entry,
+				options: props.options,
+				previewScroller: props.previewScroller,
 				store,
 				copyValue: copyValue.value,
 				title: props.title,
@@ -2478,13 +1910,18 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			syncedFiles = { ...files };
 			syncedEntry = props.entry;
 			runtimeError.value = "";
-			store.setFiles(files, props.entry);
+			localError.value = {
+				compile: "",
+				runtime: ""
+			};
+			if (store) store.setFiles(files, props.entry);
 		}, { deep: true });
 		(0, vue.watch)(() => props.entry, (entry) => {
 			if (!entry || entry === syncedEntry) return;
 			syncedEntry = entry;
-			store.mainFile = toReplFilename(entry);
-			store.setActive(toReplFilename(entry));
+			if (!store) return;
+			store.mainFile = require_store.toReplFilename(entry);
+			store.setActive(require_store.toReplFilename(entry));
 		});
 		(0, vue.watch)(() => props.activeView, (view) => {
 			if (view !== "runtime") handleClosePopup();
@@ -2509,13 +1946,29 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [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), {
+			}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LocalSandbox), {
+				key: 0,
+				ref_key: "sandboxRef",
+				ref: sandboxRef,
+				files: __props.files,
+				entry: __props.entry,
+				options: __props.options,
+				"preview-scroller": __props.previewScroller,
+				"clear-console": clearConsole,
+				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), {
+				key: 1,
 				ref_key: "sandboxRef",
 				ref: sandboxRef,
 				store: (0, vue.unref)(store),
 				"auto-store-init": false,
 				"preview-options": mergedPreviewOptions.value
-			}, null, 8, ["store", "preview-options"])], 4)], 4)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+			}, null, 8, ["store", "preview-options"])) : (0, vue.createCommentVNode)("v-if", true)], 4)], 4)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 1,
 				ref_key: "runtimeRoot",
 				ref: runtimeRoot,
@@ -2553,7 +2006,22 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, [(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), {
+				}, [__props.local ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(LocalSandbox), {
+					key: sandboxKey.value,
+					ref_key: "sandboxRef",
+					ref: sandboxRef,
+					files: __props.files,
+					entry: __props.entry,
+					options: __props.options,
+					"preview-scroller": __props.previewScroller,
+					"clear-console": clearConsole,
+					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), {
 					key: sandboxKey.value,
 					ref_key: "sandboxRef",
 					ref: sandboxRef,
@@ -2561,7 +2029,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"auto-store-init": false,
 					"clear-console": clearConsole,
 					"preview-options": mergedPreviewOptions.value
-				}, null, 8, ["store", "preview-options"]))], 4)]), canExpandPreview.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+				}, null, 8, ["store", "preview-options"])) : (0, vue.createCommentVNode)("v-if", true)], 4)]), canExpandPreview.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 0,
 					type: "button",
 					class: (0, vue.normalizeClass)(["docs-playground__expand", { "is-expanded": previewExpanded.value }]),
@@ -2612,6 +2080,10 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
+		local: {
+			type: Boolean,
+			default: true
+		},
 		previewOptions: {},
 		locale: {}
 	},
@@ -2630,7 +2102,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const locale = (0, vue.computed)(() => props.locale || inheritedLocale.locale.value);
 		(0, _deot_docs_locale.provideLocale)(locale);
 		const { t } = (0, _deot_docs_locale.useLocale)(locale);
-		const initialFiles = Object.keys(props.files).length ? { ...props.files } : { [DEFAULT_ENTRY]: props.modelValue || NEW_SFC_CODE };
+		const initialFiles = Object.keys(props.files).length ? { ...props.files } : { [require_cdn.DEFAULT_ENTRY]: props.modelValue || require_cdn.NEW_SFC_CODE };
 		const initialEntry = props.entry && initialFiles[props.entry] !== void 0 ? props.entry : Object.keys(initialFiles)[0];
 		const sourceFiles = (0, vue.ref)(initialFiles);
 		const currentEntry = (0, vue.ref)(initialEntry);
@@ -2770,7 +2242,8 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"preview-options": __props.previewOptions,
 				"preview-inset": __props.previewInset,
 				"preview-scroller": __props.previewScroller,
-				expandable: __props.expandable,
+				local: __props.local,
+				expandable: __props.local ? false : __props.expandable,
 				styleless: true,
 				title: __props.title,
 				id: __props.id,
@@ -2786,6 +2259,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"preview-options",
 				"preview-inset",
 				"preview-scroller",
+				"local",
 				"expandable",
 				"title",
 				"id",
@@ -2839,7 +2313,8 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"preview-options": __props.previewOptions,
 					"preview-inset": __props.previewInset,
 					"preview-scroller": __props.previewScroller,
-					expandable: __props.expandable,
+					local: __props.local,
+					expandable: __props.local ? false : __props.expandable,
 					"hide-chrome": true,
 					title: __props.title,
 					id: __props.id,
@@ -2857,6 +2332,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"preview-options",
 					"preview-inset",
 					"preview-scroller",
+					"local",
 					"expandable",
 					"title",
 					"id",
@@ -2886,34 +2362,35 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 exports.CodePreview = code_preview_default;
-exports.DEFAULT_CDN_URL = DEFAULT_CDN_URL;
+exports.DEFAULT_CDN_URL = require_cdn.DEFAULT_CDN_URL;
 exports.Editor = Editor;
-exports.PREVIEW_SCROLLER_USE_CODE = PREVIEW_SCROLLER_USE_CODE;
-exports.PREVIEW_SCROLL_CONTENT_CLASS = PREVIEW_SCROLL_CONTENT_CLASS;
-exports.PREVIEW_SCROLL_HTML_CLASS = PREVIEW_SCROLL_HTML_CLASS;
+exports.PREVIEW_SCROLLER_USE_CODE = require_store.PREVIEW_SCROLLER_USE_CODE;
+exports.PREVIEW_SCROLL_CONTENT_CLASS = require_store.PREVIEW_SCROLL_CONTENT_CLASS;
+exports.PREVIEW_SCROLL_HTML_CLASS = require_store.PREVIEW_SCROLL_HTML_CLASS;
 exports.Playground = playground_default;
-exports.applyPlaygroundImportMapOverride = applyPlaygroundImportMapOverride;
-exports.applyPlaygroundStyleOverride = applyPlaygroundStyleOverride;
-exports.clearPlaygroundMaps = clearPlaygroundMaps;
-exports.createBuiltinImports = createBuiltinImports;
-exports.createBuiltinStyles = createBuiltinStyles;
-exports.createRuntimePreviewOptions = createRuntimePreviewOptions;
-exports.getPlaygroundImportMapOverrides = getPlaygroundImportMapOverrides;
-exports.getPlaygroundSiteModules = getPlaygroundSiteModules;
-exports.getPlaygroundSiteStyles = getPlaygroundSiteStyles;
-exports.getPlaygroundStyleOverrides = getPlaygroundStyleOverrides;
+exports.PlaygroundService = require_store.PlaygroundService;
+exports.applyPlaygroundImportMapOverride = require_store.applyPlaygroundImportMapOverride;
+exports.applyPlaygroundStyleOverride = require_store.applyPlaygroundStyleOverride;
+exports.clearPlaygroundMaps = require_store.clearPlaygroundMaps;
+exports.createBuiltinImports = require_cdn.createBuiltinImports;
+exports.createBuiltinStyles = require_cdn.createBuiltinStyles;
+exports.createRuntimePreviewOptions = require_store.createRuntimePreviewOptions;
+exports.getPlaygroundImportMapOverrides = require_store.getPlaygroundImportMapOverrides;
+exports.getPlaygroundSiteModules = require_store.getPlaygroundSiteModules;
+exports.getPlaygroundSiteStyles = require_store.getPlaygroundSiteStyles;
+exports.getPlaygroundStyleOverrides = require_store.getPlaygroundStyleOverrides;
 exports.highlightCode = highlightCode;
 exports.highlightCodeByLanguage = highlightCodeByLanguage;
-exports.isSafePlaygroundHref = isSafePlaygroundHref;
-exports.normalizeCdnURL = normalizeCdnURL;
+exports.isSafePlaygroundHref = require_store.isSafePlaygroundHref;
+exports.normalizeCdnURL = require_cdn.normalizeCdnURL;
 exports.registerVueHighlight = registerVueHighlight;
-exports.removePlaygroundImportMapOverride = removePlaygroundImportMapOverride;
-exports.removePlaygroundStyleOverride = removePlaygroundStyleOverride;
+exports.removePlaygroundImportMapOverride = require_store.removePlaygroundImportMapOverride;
+exports.removePlaygroundStyleOverride = require_store.removePlaygroundStyleOverride;
 exports.resolveHighlightLanguage = resolveHighlightLanguage;
 exports.resolvePlaygroundTitleId = resolvePlaygroundTitleId;
-exports.setPlaygroundImportMapOverrides = setPlaygroundImportMapOverrides;
-exports.setPlaygroundSiteModules = setPlaygroundSiteModules;
-exports.setPlaygroundSiteStyles = setPlaygroundSiteStyles;
-exports.setPlaygroundStyleOverrides = setPlaygroundStyleOverrides;
+exports.setPlaygroundImportMapOverrides = require_store.setPlaygroundImportMapOverrides;
+exports.setPlaygroundSiteModules = require_store.setPlaygroundSiteModules;
+exports.setPlaygroundSiteStyles = require_store.setPlaygroundSiteStyles;
+exports.setPlaygroundStyleOverrides = require_store.setPlaygroundStyleOverrides;
 exports.slugifyPlaygroundTitle = slugifyPlaygroundTitle;
 exports.vueHighlight = vueHighlight;