@deot/docs-playground 1.1.2 → 1.1.4

package/dist/index.cjs

@@ -1,31 +1,14 @@
 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-BoYKnGD3.cjs");
+const require_store = require("./store-DKawhFZu.cjs");
+const require_scss = require("./scss-B8OFbz1k.cjs");
+const require_files = require("./files-BsAOZiPN.cjs");
 let vue = require("vue");
 let _deot_vc = require("@deot/vc");
 let _deot_docs_locale = require("@deot/docs-locale");
 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 +317,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",
@@ -463,7 +440,7 @@ var _hoisted_5$4 = ["onKeydown"];
 var _hoisted_6$3 = ["title"];
 var _hoisted_7$3 = ["title", "aria-label"];
 var _hoisted_8$2 = ["title", "aria-label"];
-var _hoisted_9$2 = { class: "docs-playground-editor__actions" };
+var _hoisted_9$1 = { class: "docs-playground-editor__actions" };
 var _hoisted_10$1 = ["title"];
 var _hoisted_11$1 = ["title", "disabled"];
 var _hoisted_12$1 = {
@@ -595,7 +572,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({
@@ -779,7 +756,7 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							], 64))], 42, _hoisted_4$4);
 						}), 128))]),
 						_: 1
-					}, 512), (0, vue.createElementVNode)("div", _hoisted_9$2, [(0, vue.createElementVNode)("button", {
+					}, 512), (0, vue.createElementVNode)("div", _hoisted_9$1, [(0, vue.createElementVNode)("button", {
 						type: "button",
 						title: (0, vue.unref)(t)("playground.editor.createFile"),
 						onClick: handleCreate
@@ -860,229 +837,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);",
-	"Object.assign(next._context.provides,app._context.provides);",
-	"next._context.mixins.push(...app._context.mixins);",
-	"}",
-	"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) {
-			if (iframeWindow.getComputedStyle(child).position === "fixed") continue;
-			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 isPendingPreviewApp = (iframeDocument) => {
-		const app = iframeDocument.getElementById("app");
-		return app ? app.childElementCount === 0 : !!iframe?.srcdoc;
-	};
-	const releaseBootstrapHeight = (target) => {
-		(0, vue.nextTick)(() => {
-			if (iframe === target) target.style.height = "100%";
-		});
-	};
-	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 && isPendingPreviewApp(iframeDocument)) return;
-			const contentHeight = scrollContent ? measureScrollContent(scrollContent) : measureDocumentContent(iframeWindow, iframeDocument);
-			const nextHeight = Math.max(contentHeight, 24);
-			if (height.value !== nextHeight) height.value = nextHeight;
-			releaseBootstrapHeight(iframe);
-		} 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 = `${Math.max(window.innerHeight, 24)}px`;
-		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;
@@ -1161,68 +915,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) => {
@@ -1386,7 +1078,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
 	});
@@ -1428,16 +1120,16 @@ function usePreviewHeightBridge(sandbox, maxHeight = () => Infinity) {
 		sync();
 	};
 	const handleMessage = async (event) => {
-		const iframe = resolveSandboxContainer(sandbox.value)?.querySelector("iframe");
+		const current = require_store.resolveSandboxMessageSource(sandbox.value);
 		const data = event.data;
-		if (!iframe?.contentWindow || event.source !== iframe.contentWindow || data?.action !== "docs:height" || typeof data.session !== "string") return;
+		if (!current || event.source !== current || data?.action !== "docs:height" || typeof data.session !== "string") return;
 		if (data.operation === "start") {
 			reset();
-			source = iframe.contentWindow;
+			source = current;
 			session = data.session;
 			return;
 		}
-		if (source !== iframe.contentWindow || session !== data.session) return;
+		if (source !== current || session !== data.session) return;
 		if (data.operation === "stop") {
 			reset();
 			return;
@@ -1462,7 +1154,7 @@ function usePreviewHeightBridge(sandbox, maxHeight = () => Infinity) {
 			accepted
 		}, "*");
 	};
-	(0, vue.watch)(() => resolveSandboxContainer(sandbox.value), reset, { flush: "sync" });
+	(0, vue.watch)(() => require_store.resolveSandboxMessageSource(sandbox.value), reset, { flush: "sync" });
 	if (typeof window !== "undefined") window.addEventListener("message", handleMessage);
 	(0, vue.onBeforeUnmount)(() => {
 		disposed = true;
@@ -1496,7 +1188,7 @@ var _hoisted_8$1 = {
 	class: "docs-playground__tool-divider",
 	"aria-hidden": "true"
 };
-var _hoisted_9$1 = ["aria-label"];
+var _hoisted_9 = ["aria-label"];
 var _hoisted_10 = [
 	"title",
 	"aria-label",
@@ -1669,7 +1361,7 @@ var toolbar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"aria-pressed": item === __props.activeView,
 						onClick: ($event) => emit("view-change", item)
 					}, (0, vue.toDisplayString)(getViewLabel(item)), 11, _hoisted_10);
-				}), 128))], 8, _hoisted_9$1)) : (0, vue.createCommentVNode)("v-if", true),
+				}), 128))], 8, _hoisted_9)) : (0, vue.createCommentVNode)("v-if", true),
 				__props.showClose && (__props.showRuntimeActions || showViews.value) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_11)) : (0, vue.createCommentVNode)("v-if", true),
 				__props.showClose ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 					key: 3,
@@ -1688,647 +1380,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",
-	"vue": "vue/dist/vue.runtime.esm-browser.js",
-	"vue/server-renderer": "vue/dist/server-renderer.esm-browser.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")
-});
-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/preview-service.ts
-/** Preview iframe 内的高度服务；class 会被序列化到 iframe 执行。 */
-var PlaygroundService = class {
-	target;
-	vue;
-	session;
-	/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
-	sequence = 0;
-	/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
-	disposed = false;
-	manual;
-	/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
-	requests = /* @__PURE__ */ new Set();
-	/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
-	owners = /* @__PURE__ */ new Set();
-	/**
-	* @param target 当前预览窗口。
-	* @param vue 与预览应用共用的 Vue 实例。
-	*/
-	/* istanbul ignore next -- class 会被序列化到没有覆盖率运行时的 iframe。 */
-	constructor(target, vue) {
-		this.target = target;
-		this.vue = vue;
-		this.session = `${Date.now()}-${Math.random()}`;
-		this.dispose = this.dispose.bind(this);
-		this.post("start");
-		this.target.addEventListener("pagehide", this.dispose);
-	}
-	/**
-	* 申请手动临时高度；新请求会替换上一个手动请求。
-	* @param height iframe 最小高度。
-	* @returns iframe 是否在超时前应用目标高度。
-	*/
-	enable(height) {
-		this.validateHeight(height);
-		this.manual?.release();
-		this.manual = this.createRequest(height);
-		return this.manual.ready;
-	}
-	/** 释放手动临时高度，不影响 `run` 创建的请求。 */
-	disable() {
-		this.manual?.release();
-		this.manual = void 0;
-	}
-	/**
-	* 创建等待高度后执行的事件处理函数。
-	* @param height iframe 最小高度。
-	* @param optionsOrHandler 可见状态配置，或最后一个 handler。
-	* @param lastHandler 使用配置时的最后一个 handler。
-	* @returns 保留 handler 参数和结果的异步事件处理函数。
-	*/
-	run(height, optionsOrHandler, lastHandler) {
-		this.validateHeight(height);
-		if (optionsOrHandler === void 0) return (visible) => {
-			if (visible) return this.enable(height);
-			this.disable();
-			return Promise.resolve(void 0);
-		};
-		const visible = (typeof optionsOrHandler === "function" ? {} : optionsOrHandler).visible;
-		if (visible !== void 0 && !this.vue.isRef(visible) && typeof visible !== "function") throw new TypeError("Playground visible must be a ref or getter");
-		const handler = typeof optionsOrHandler === "function" ? optionsOrHandler : lastHandler ?? (this.vue.isRef(visible) ? () => {
-			visible.value = true;
-		} : void 0);
-		if (typeof handler !== "function") throw new TypeError("Playground run requires a handler");
-		let ownerDisposed = false;
-		let current;
-		let pending;
-		const disposeOwner = () => {
-			ownerDisposed = true;
-			current?.release();
-			this.owners.delete(disposeOwner);
-		};
-		this.owners.add(disposeOwner);
-		if (this.vue.getCurrentScope()) this.vue.onScopeDispose(disposeOwner);
-		return (...args) => {
-			if (this.disposed || ownerDisposed) return Promise.resolve(void 0);
-			if (pending) return pending;
-			const request = current = this.createRequest(height);
-			let executionFinished = false;
-			const unlock = () => {
-				if (executionFinished && request.released && current === request) {
-					pending = void 0;
-					current = void 0;
-				}
-			};
-			request.closed.then(unlock);
-			const execution = (async () => {
-				try {
-					if (!await request.ready || ownerDisposed || this.disposed) return void 0;
-					if (visible) request.watch(visible);
-					const result = await handler(...args);
-					if (!visible || !this.vue.toValue(visible)) request.release();
-					return result;
-				} catch (error) {
-					request.release();
-					throw error;
-				} finally {
-					executionFinished = true;
-					unlock();
-				}
-			})();
-			pending = execution;
-			return execution;
-		};
-	}
-	/** 释放当前预览应用持有的全部高度和监听。 */
-	/* istanbul ignore next -- 注入测试会从序列化后的 iframe class 调用该方法。 */
-	dispose() {
-		if (this.disposed) return;
-		this.disposed = true;
-		for (const disposeOwner of this.owners) disposeOwner();
-		for (const request of this.requests) request.release();
-		this.post("stop");
-		this.target.removeEventListener("pagehide", this.dispose);
-		if (this.target.$docsPlayground === this) delete this.target.$docsPlayground;
-	}
-	/** @param height iframe 最小高度。 */
-	validateHeight(height) {
-		if (!Number.isFinite(height) || height <= 0) throw new TypeError("Playground height must be a positive finite number");
-	}
-	/**
-	* @param operation 请求操作。
-	* @param id 请求标识。
-	* @param height iframe 最小高度。
-	*/
-	/* istanbul ignore next -- 构造和销毁时会从序列化后的 iframe class 调用该方法。 */
-	post(operation, id = 0, height = 0) {
-		this.target.parent.postMessage({
-			action: "docs:height",
-			session: this.session,
-			operation,
-			id,
-			height
-		}, "*");
-	}
-	/**
-	* @param height iframe 最小高度。
-	* @returns 内部等待与释放句柄。
-	*/
-	createRequest(height) {
-		this.validateHeight(height);
-		const id = ++this.sequence;
-		let released = false;
-		let settled = false;
-		let frame = 0;
-		let timer = 0;
-		let stopWatch;
-		let resolveReady;
-		let resolveClosed;
-		const ready = new Promise((resolve) => {
-			resolveReady = resolve;
-		});
-		const closed = new Promise((resolve) => {
-			resolveClosed = resolve;
-		});
-		const stopWaiting = () => {
-			this.target.cancelAnimationFrame(frame);
-			if (timer) {
-				this.target.clearTimeout(timer);
-				timer = 0;
-			}
-			this.target.removeEventListener("message", onMessage);
-		};
-		const release = () => {
-			if (released) return;
-			released = true;
-			stopWaiting();
-			stopWatch?.();
-			resolveReady(false);
-			resolveClosed();
-			this.requests.delete(request);
-			this.post("release", id);
-		};
-		const check = () => {
-			if (released) return;
-			if (this.target.innerHeight >= height) {
-				settled = true;
-				stopWaiting();
-				resolveReady(true);
-			} else frame = this.target.requestAnimationFrame(check);
-		};
-		const onMessage = (event) => {
-			const data = event.data;
-			if (event.source !== this.target.parent || data?.action !== "docs:height:applied" || data.session !== this.session || data.id !== id || settled) return;
-			if (!data.accepted) release();
-			else check();
-		};
-		const request = {
-			ready,
-			closed,
-			get released() {
-				return released;
-			},
-			release,
-			watch: (visible) => {
-				stopWatch = this.vue.watch(() => this.vue.toValue(visible), (value) => {
-					if (!value) release();
-				}, { flush: "sync" });
-			}
-		};
-		this.requests.add(request);
-		if (this.disposed) release();
-		else {
-			this.target.addEventListener("message", onMessage);
-			timer = this.target.setTimeout(() => {
-				timer = 0;
-				release();
-			}, 2e3);
-			this.post("enable", id, height);
-		}
-		return request;
-	}
-};
-var PREVIEW_SERVICE_IMPORT_CODE = "import * as __docsPreviewVue from \"vue\"";
-var PREVIEW_SERVICE_USE_CODE = [
-	`;const __docsPlayground=new (${PlaygroundService.toString()})(window,__docsPreviewVue);`,
-	"app.provide(\"docs:playground\",__docsPlayground);",
-	"window.$docsPlayground=__docsPlayground;",
-	"app.mixin({beforeUnmount(){if(this===this.$root)__docsPlayground.dispose()}});"
-].join("");
-//#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}\n${PREVIEW_SERVICE_IMPORT_CODE}`,
-			useCode: `${DOCS_LINK_USE_CODE}\n${PREVIEW_SERVICE_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" };
@@ -2355,6 +1406,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: [
@@ -2364,20 +1426,28 @@ var wrapper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		"portal-fulfilled"
 	],
 	setup(__props, { emit: __emit }) {
+		const LocalSandbox = (0, vue.defineAsyncComponent)(() => Promise.resolve().then(() => require("./local-sandbox-0ojvBQPO.cjs")).then((n) => n.local_sandbox_exports));
 		const props = __props;
 		const emit = __emit;
 		const { t } = (0, _deot_docs_locale.useLocale)();
 		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)(() => {
@@ -2400,10 +1470,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) => {
@@ -2428,8 +1502,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);
@@ -2491,7 +1564,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,
@@ -2503,7 +1592,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);
@@ -2519,26 +1608,25 @@ var Alone = new _deot_vc.Portal(wrapper_default, {
 });
 //#endregion
 //#region packages/playground/src/core/runtime/runtime.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = { class: "docs-playground-runtime-host" };
-var _hoisted_2$1 = {
+var _hoisted_1$1 = {
 	key: 0,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_3$1 = {
+var _hoisted_2$1 = {
 	key: 0,
 	class: "docs-playground__header"
 };
-var _hoisted_4$1 = ["id", "title"];
-var _hoisted_5$1 = ["href"];
-var _hoisted_6 = { class: "docs-playground__title-text" };
-var _hoisted_7 = {
+var _hoisted_3$1 = ["id", "title"];
+var _hoisted_4$1 = ["href"];
+var _hoisted_5$1 = { class: "docs-playground__title-text" };
+var _hoisted_6 = {
 	key: 1,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_8 = { class: "docs-playground-runtime__viewport-stage" };
-var _hoisted_9 = [
+var _hoisted_7 = { class: "docs-playground-runtime__viewport-stage" };
+var _hoisted_8 = [
 	"aria-expanded",
 	"title",
 	"aria-label"
@@ -2571,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",
@@ -2580,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-0ojvBQPO.cjs")).then((n) => n.local_sandbox_exports));
 		const props = __props;
 		const { locale, t } = (0, _deot_docs_locale.useLocale)();
 		const displayTitle = (0, vue.computed)(() => props.title.trim());
@@ -2592,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,
@@ -2602,8 +1695,8 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					extraHeadHTML
 				].filter(Boolean).join("\n"),
 				customCode: {
-					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)
+					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)
 				}
 			};
 		};
@@ -2617,21 +1710,33 @@ 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 storeReady = (0, vue.computed)(() => store && !store.loading && Object.values(store.files).every((file) => require_files.isIgnoredFilename(file.filename) || !/\.(?:vue|[jt]sx?|json|s[ac]ss)$/.test(file.filename) || !file.code.trim() || !!file.compiled.js));
 		const sandboxRef = (0, vue.ref)(null);
+		const localError = (0, vue.ref)({
+			compile: "",
+			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);
@@ -2664,16 +1769,21 @@ 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 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);
@@ -2685,7 +1795,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			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;
@@ -2707,7 +1817,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` });
@@ -2725,42 +1835,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 = () => {
@@ -2768,6 +1886,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,
@@ -2788,13 +1911,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();
@@ -2810,28 +1938,46 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			openPopup: handleOpenPopup
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [__props.styleless ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(["docs-playground-runtime-host", { "docs-playground-runtime-host--direct": __props.local && __props.styleless }]) }, [__props.styleless ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 				key: 0,
 				ref_key: "runtimeRoot",
 				ref: runtimeRoot,
 				class: "docs-playground-runtime--styleless",
 				style: (0, vue.normalizeStyle)(stylelessStyle.value)
-			}, [errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_2$1, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("div", {
+			}, [errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_1$1, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("div", {
 				class: "docs-playground-runtime__viewport",
 				style: (0, vue.normalizeStyle)(viewportStyle.value)
-			}, [(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,
+				"auto-height": !(0, vue.unref)(getViewportHeight)(__props.viewport),
+				onError: handleLocalError
+			}, null, 8, [
+				"files",
+				"entry",
+				"options",
+				"preview-scroller",
+				"auto-height"
+			])) : (0, vue.unref)(store) && storeReady.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
+				key: 1,
 				ref_key: "sandboxRef",
 				ref: sandboxRef,
 				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,
 				class: "docs-playground-runtime"
 			}, [
-				!__props.hideChrome ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$1, [displayTitle.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				!__props.hideChrome ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$1, [displayTitle.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
 					ref_key: "titleEl",
 					ref: titleEl,
@@ -2842,7 +1988,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, [(0, vue.createElementVNode)("a", {
 					class: "docs-playground__title-anchor",
 					href: `#${titleId.value}`
-				}, "#", 8, _hoisted_5$1), (0, vue.createElementVNode)("span", _hoisted_6, (0, vue.toDisplayString)(displayTitle.value), 1)], 8, _hoisted_4$1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)(toolbar_default, {
+				}, "#", 8, _hoisted_4$1), (0, vue.createElementVNode)("span", _hoisted_5$1, (0, vue.toDisplayString)(displayTitle.value), 1)], 8, _hoisted_3$1)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)(toolbar_default, {
 					"copy-value": copyValue.value,
 					viewport: __props.viewport,
 					"viewport-options": __props.viewportOptions,
@@ -2856,14 +2002,31 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"viewport",
 					"viewport-options"
 				])])) : (0, vue.createCommentVNode)("v-if", true),
-				errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_7, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
+				errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_6, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
 				(0, vue.createElementVNode)("section", {
 					class: (0, vue.normalizeClass)(["docs-playground__preview", { "is-expanded": previewExpanded.value }]),
 					style: (0, vue.normalizeStyle)(previewStyle.value)
-				}, [(0, vue.createElementVNode)("div", _hoisted_8, [(0, vue.createElementVNode)("div", {
+				}, [(0, vue.createElementVNode)("div", _hoisted_7, [(0, vue.createElementVNode)("div", {
 					class: "docs-playground-runtime__viewport",
 					style: (0, vue.normalizeStyle)(viewportStyle.value)
-				}, [((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,
+					"auto-height": !(0, vue.unref)(getViewportHeight)(__props.viewport),
+					onError: handleLocalError
+				}, null, 8, [
+					"files",
+					"entry",
+					"options",
+					"preview-scroller",
+					"auto-height"
+				])) : (0, vue.unref)(store) && storeReady.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
 					key: sandboxKey.value,
 					ref_key: "sandboxRef",
 					ref: sandboxRef,
@@ -2871,7 +2034,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 }]),
@@ -2880,8 +2043,8 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					title: expandLabel.value,
 					"aria-label": expandLabel.value,
 					onClick: handleTogglePreviewExpand
-				}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "expand" })], 10, _hoisted_9)) : (0, vue.createCommentVNode)("v-if", true)], 6)
-			], 512))]);
+				}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "expand" })], 10, _hoisted_8)) : (0, vue.createCommentVNode)("v-if", true)], 6)
+			], 512))], 2);
 		};
 	}
 });
@@ -2922,6 +2085,10 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: false
 		},
+		local: {
+			type: Boolean,
+			default: true
+		},
 		previewOptions: {},
 		locale: {}
 	},
@@ -2940,7 +2107,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);
@@ -3080,7 +2247,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,
@@ -3096,6 +2264,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"preview-options",
 				"preview-inset",
 				"preview-scroller",
+				"local",
 				"expandable",
 				"title",
 				"id",
@@ -3149,7 +2318,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,
@@ -3167,6 +2337,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"preview-options",
 					"preview-inset",
 					"preview-scroller",
+					"local",
 					"expandable",
 					"title",
 					"id",
@@ -3196,35 +2367,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.PlaygroundService = PlaygroundService;
-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;