@deot/docs-playground 1.1.1 → 1.1.3

package/dist/index.js

@@ -1,8 +1,11 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { a as DEFAULT_CDN_URL, i as normalizeCdnURL, n as createBuiltinImports, o as DEFAULT_ENTRY, r as createBuiltinStyles, s as NEW_SFC_CODE } from "./cdn-DEvdGJu2.js";
+import { A as PREVIEW_SCROLLER_USE_CODE, C as toErrorText, D as resolveSandboxMessageSource, E as resolveSandboxContainer, M as PREVIEW_SCROLL_HTML_CLASS, N as PREVIEW_SCROLL_RESET_CODE, O as useSandboxAutoHeight, S as formatSandboxRuntimeError, T as isSandboxMessage, _ as removePlaygroundStyleOverride, a as createRuntimeStore, b as setPlaygroundSiteStyles, c as applyPlaygroundImportMapOverride, d as getPlaygroundImportMapOverrides, f as getPlaygroundSiteModules, g as removePlaygroundImportMapOverride, h as isSafePlaygroundHref, i as createRuntimePreviewOptions, j as PREVIEW_SCROLL_CONTENT_CLASS, k as PREVIEW_SCROLLER_IMPORT_CODE, l as applyPlaygroundStyleOverride, m as getPlaygroundStyleOverrides, n as createReplFile, o as toReplFilename, p as getPlaygroundSiteStyles, s as PlaygroundService, t as PLAYGROUND_RUNTIME_CANVAS_BACKGROUND, u as clearPlaygroundMaps, v as setPlaygroundImportMapOverrides, w as useSandboxRuntimeErrorGuard, x as setPlaygroundStyleOverrides, y as setPlaygroundSiteModules } from "./store-D8vwi-HV.js";
+import { r as whenSassReady } from "./scss-Co2it4vB.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineAsyncComponent, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { Clipboard, Dropdown, DropdownItem, DropdownMenu, Message, Popconfirm, Portal, Scroller, TransitionFade } from "@deot/vc";
 import { provideLocale, useLocale } from "@deot/docs-locale";
 import hljs from "highlight.js";
-import { File, Sandbox, useStore } from "@vue/repl";
+import { Sandbox } from "@vue/repl";
 import { EditorView, basicSetup } from "codemirror";
 import { css } from "@codemirror/lang-css";
 import { javascript } from "@codemirror/lang-javascript";
@@ -310,12 +313,6 @@ var files_preview_default = /* @__PURE__ */ 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",
@@ -833,220 +830,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 ? 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 = 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();
-	};
-	watch(() => resolveSandboxContainer(sandboxRef.value), setContainer, {
-		flush: "post",
-		immediate: true
-	});
-	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;
@@ -1125,68 +908,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 = 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);
-	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) => {
@@ -1369,6 +1090,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 = 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 = 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 nextTick();
+		if (disposed || source !== receiver || session !== data.session) return;
+		receiver?.postMessage({
+			action: "docs:height:applied",
+			session,
+			id: data.id,
+			accepted
+		}, "*");
+	};
+	watch(() => resolveSandboxMessageSource(sandbox.value), reset, { flush: "sync" });
+	if (typeof window !== "undefined") window.addEventListener("message", handleMessage);
+	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 = {
@@ -1585,426 +1373,6 @@ var toolbar_default = /* @__PURE__ */ 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();
-	watch(() => store.compiler, installCompiler);
-	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 File(replFilename, code);
-};
-var createRuntimeStore = (files, entry, options) => {
-	const { cdnURL, builtinImportMap, ...storeOptions } = options;
-	const replFiles = ref(Object.fromEntries(Object.entries(files).map(([filename, code]) => {
-		const file = createReplFile(filename, code);
-		return [file.filename, file];
-	})));
-	const mainFile = ref(toReplFilename(entry));
-	const activeFilename = ref(toReplFilename(entry));
-	const store = useStore({
-		...storeOptions,
-		files: replFiles,
-		mainFile,
-		activeFilename,
-		builtinImportMap: ref({
-			...builtinImportMap,
-			imports: {
-				...createBuiltinImports(cdnURL),
-				...getPlaygroundSiteModules(),
-				...filterSafeHrefs(builtinImportMap?.imports),
-				...getPlaygroundImportMapOverrides()
-			}
-		}),
-		template: 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" };
@@ -2031,6 +1399,17 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 		clearConsole: {
 			type: Boolean,
 			default: true
+		},
+		local: {
+			type: Boolean,
+			default: true
+		},
+		files: { default: () => ({}) },
+		entry: { default: "" },
+		options: { default: () => ({}) },
+		previewScroller: {
+			type: Boolean,
+			default: false
 		}
 	},
 	emits: [
@@ -2040,23 +1419,42 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 		"portal-fulfilled"
 	],
 	setup(__props, { emit: __emit }) {
+		const LocalSandbox = defineAsyncComponent(() => import("./local-sandbox-B8IJ5jWb.js").then((n) => n.t));
 		const props = __props;
 		const emit = __emit;
 		const { t } = useLocale();
 		const currentViewport = ref(props.viewport);
 		const sandboxRef = ref(null);
+		const localError = 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 = ref(0);
 		const layoutTick = ref(0);
 		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
 		useSandboxTheme(sandboxRef);
-		const storeErrors = computed(() => (props.store.errors || []).map(toErrorText).filter(Boolean).join("\n"));
+		const storeErrors = computed(() => props.local ? localError.value.compile : (props.store?.errors || []).map(toErrorText).filter(Boolean).join("\n"));
 		const errorText = computed(() => {
-			const runtime = runtimeError.value ? formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip")) : "";
+			const runtime = props.local ? localError.value.runtime : runtimeError.value ? formatSandboxRuntimeError(runtimeError.value, t("playground.runtime.importMapTip")) : "";
 			return [storeErrors.value, runtime].filter(Boolean).join("\n\n");
 		});
 		const layout = 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 = computed(() => ({
 			width: `${layout.value.shellWidth}px`,
@@ -2069,6 +1467,10 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 		}));
 		const handleRefresh = () => {
 			runtimeError.value = "";
+			localError.value = {
+				compile: "",
+				runtime: ""
+			};
 			sandboxKey.value++;
 		};
 		const handleViewportChange = (viewport) => {
@@ -2093,8 +1495,7 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 			layoutTick.value++;
 		};
 		const handleBridgeMessage = (event) => {
-			const iframe = resolveSandboxContainer(sandboxRef.value)?.querySelector("iframe");
-			if (!iframe || event.source !== iframe.contentWindow) return;
+			if (!isSandboxMessage(sandboxRef.value, event)) return;
 			const data = event.data;
 			if (!data || data.action !== "docs:navigate" || typeof data.to !== "string") return;
 			emit("navigate", data.to);
@@ -2156,7 +1557,23 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 					default: withCtx(() => [createElementVNode("div", {
 						class: "docs-playground-popup__canvas",
 						style: normalizeStyle(canvasStyle.value)
-					}, [(openBlock(), createBlock(unref(Sandbox), {
+					}, [__props.local ? (openBlock(), createBlock(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 ? (openBlock(), createBlock(unref(Sandbox), {
 						key: sandboxKey.value,
 						ref_key: "sandboxRef",
 						ref: sandboxRef,
@@ -2168,7 +1585,7 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 						"store",
 						"clear-console",
 						"preview-options"
-					]))], 4)]),
+					])) : createCommentVNode("v-if", true)], 4)]),
 					_: 1
 				})])
 			])], 4)], 8, _hoisted_1$2);
@@ -2233,7 +1650,11 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		title: { default: "" },
 		id: { default: "" },
 		viewport: { default: "auto" },
-		viewportOptions: { default: () => ["auto", 375] }
+		viewportOptions: { default: () => ["auto", 375] },
+		local: {
+			type: Boolean,
+			default: true
+		}
 	},
 	emits: [
 		"files-change",
@@ -2242,6 +1663,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		"navigate"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
+		const LocalSandbox = defineAsyncComponent(() => import("./local-sandbox-B8IJ5jWb.js").then((n) => n.t));
 		const props = __props;
 		const { locale, t } = useLocale();
 		const displayTitle = computed(() => props.title.trim());
@@ -2264,7 +1686,7 @@ var runtime_default = /* @__PURE__ */ 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),
+					importCode: joinCode(runtimePreviewOptions.customCode?.importCode, 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)
 				}
 			};
@@ -2279,20 +1701,32 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 			"SSR": false
 		}.MODE !== "development";
 		const copyValue = computed(() => props.files[props.entry] || "");
-		const store = createRuntimeStore(props.files, props.entry, props.options);
+		const store = props.local ? null : createRuntimeStore(props.files, props.entry, props.options);
 		const sandboxRef = ref(null);
+		const localError = ref({
+			compile: "",
+			runtime: ""
+		});
+		const handleLocalError = (payload) => {
+			localError.value = payload;
+		};
+		const temporaryHeight = usePreviewHeightBridge(sandboxRef);
 		const sandboxKey = ref(0);
 		const runtimeHeight = useSandboxAutoHeight(sandboxRef);
 		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
 		useSandboxTheme(sandboxRef);
-		const compileErrorText = computed(() => (store.errors || []).map(toErrorText).filter(Boolean).join("\n"));
+		const compileErrorText = computed(() => {
+			if (props.local) return localError.value.compile;
+			return (store?.errors || []).map(toErrorText).filter(Boolean).join("\n");
+		});
 		const errorText = 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 = 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 (!isSandboxMessage(sandboxRef.value, event)) return;
 			const data = event.data;
 			if (!data || data.action !== "docs:navigate" || typeof data.to !== "string") return;
 			emit("navigate", data.to);
@@ -2325,27 +1759,33 @@ var runtime_default = /* @__PURE__ */ 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 = computed(() => !props.styleless && isPlaygroundExpandable(props.expandable));
+		const canExpandPreview = computed(() => !props.local && !props.styleless && isPlaygroundExpandable(props.expandable));
 		const expandLabel = computed(() => t(previewExpanded.value ? "playground.runtime.collapsePreview" : "playground.runtime.expandPreview"));
-		const desiredViewportHeight = computed(() => {
+		const baseViewportHeight = 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 = 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;
@@ -2385,7 +1825,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 			syncedFiles = { ...files };
 			syncedEntry = entry;
 			const apply = () => {
-				switch (action.type) {
+				if (store) switch (action.type) {
 					case "update": {
 						const file = store.files[toReplFilename(action.filename)];
 						if (file) file.code = files[action.filename];
@@ -2407,20 +1847,28 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				}
 				emit("files-change", files, entry, action);
 			};
-			whenSassReady(files, apply);
+			if (store) 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(toReplFilename(filename))
 			});
 		};
 		const handleInlineRefresh = () => {
 			runtimeError.value = "";
+			localError.value = {
+				compile: "",
+				runtime: ""
+			};
 			sandboxKey.value++;
 		};
 		const handleClosePopup = () => {
@@ -2428,6 +1876,11 @@ var runtime_default = /* @__PURE__ */ 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,
@@ -2448,11 +1901,16 @@ var runtime_default = /* @__PURE__ */ 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 });
 		watch(() => props.entry, (entry) => {
 			if (!entry || entry === syncedEntry) return;
 			syncedEntry = entry;
+			if (!store) return;
 			store.mainFile = toReplFilename(entry);
 			store.setActive(toReplFilename(entry));
 		});
@@ -2479,13 +1937,29 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 			}, [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), {
+			}, [__props.local ? (openBlock(), createBlock(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"
+			])) : unref(store) ? (openBlock(), createBlock(unref(Sandbox), {
+				key: 1,
 				ref_key: "sandboxRef",
 				ref: sandboxRef,
 				store: unref(store),
 				"auto-store-init": false,
 				"preview-options": mergedPreviewOptions.value
-			}, null, 8, ["store", "preview-options"])], 4)], 4)) : (openBlock(), createElementBlock("div", {
+			}, null, 8, ["store", "preview-options"])) : createCommentVNode("v-if", true)], 4)], 4)) : (openBlock(), createElementBlock("div", {
 				key: 1,
 				ref_key: "runtimeRoot",
 				ref: runtimeRoot,
@@ -2523,7 +1997,22 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				}, [createElementVNode("div", _hoisted_8, [createElementVNode("div", {
 					class: "docs-playground-runtime__viewport",
 					style: normalizeStyle(viewportStyle.value)
-				}, [(openBlock(), createBlock(unref(Sandbox), {
+				}, [__props.local ? (openBlock(), createBlock(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"
+				])) : unref(store) ? (openBlock(), createBlock(unref(Sandbox), {
 					key: sandboxKey.value,
 					ref_key: "sandboxRef",
 					ref: sandboxRef,
@@ -2531,7 +2020,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 					"auto-store-init": false,
 					"clear-console": clearConsole,
 					"preview-options": mergedPreviewOptions.value
-				}, null, 8, ["store", "preview-options"]))], 4)]), canExpandPreview.value ? (openBlock(), createElementBlock("button", {
+				}, null, 8, ["store", "preview-options"])) : createCommentVNode("v-if", true)], 4)]), canExpandPreview.value ? (openBlock(), createElementBlock("button", {
 					key: 0,
 					type: "button",
 					class: normalizeClass(["docs-playground__expand", { "is-expanded": previewExpanded.value }]),
@@ -2582,6 +2071,10 @@ var playground_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		local: {
+			type: Boolean,
+			default: true
+		},
 		previewOptions: {},
 		locale: {}
 	},
@@ -2740,7 +2233,8 @@ var playground_default = /* @__PURE__ */ 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,
@@ -2756,6 +2250,7 @@ var playground_default = /* @__PURE__ */ defineComponent({
 				"preview-options",
 				"preview-inset",
 				"preview-scroller",
+				"local",
 				"expandable",
 				"title",
 				"id",
@@ -2809,7 +2304,8 @@ var playground_default = /* @__PURE__ */ 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,
@@ -2827,6 +2323,7 @@ var playground_default = /* @__PURE__ */ defineComponent({
 					"preview-options",
 					"preview-inset",
 					"preview-scroller",
+					"local",
 					"expandable",
 					"title",
 					"id",
@@ -2855,4 +2352,4 @@ var playground_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { code_preview_default as CodePreview, DEFAULT_CDN_URL, Editor, PREVIEW_SCROLLER_USE_CODE, PREVIEW_SCROLL_CONTENT_CLASS, PREVIEW_SCROLL_HTML_CLASS, 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 };
+export { code_preview_default as CodePreview, DEFAULT_CDN_URL, Editor, PREVIEW_SCROLLER_USE_CODE, PREVIEW_SCROLL_CONTENT_CLASS, PREVIEW_SCROLL_HTML_CLASS, playground_default as Playground, PlaygroundService, 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 };