@deot/docs-playground 1.1.5 → 1.1.7

package/dist/index.js

@@ -1,6 +1,6 @@
 import { C as normalizeCdnURL, D as NEW_SFC_CODE, E as DEFAULT_ENTRY, S as createBuiltinStyles, T as DEFAULT_CDN_URL, _ as bindPlaygroundScss, a as transformScript, b as whenSassReady, c as createFileIndex, d as isIgnoredFilename, f as isInsideRoot, g as resolveModulePath, i as rewriteImportMeta, l as getCommonRoot, m as normalizeVirtualPath, n as injectStyle, o as collectBareSpecifiers, p as isRelativeSpecifier, r as removeStyle, s as collectReachableFilenames, w as resolveNpmImport, x as createBuiltinImports } from "./css-DleINdoA.js";
 import * as Vue from "vue";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineAsyncComponent, defineComponent, h, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, openBlock, provide, ref, renderList, shallowRef, toDisplayString, unref, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineAsyncComponent, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, unref, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import * as Vc from "@deot/vc";
 import { Clipboard, Dropdown, DropdownItem, DropdownMenu, Message, Popconfirm, Portal, Scroller, TransitionFade } from "@deot/vc";
 import { provideLocale, useLocale } from "@deot/docs-locale";
@@ -175,10 +175,10 @@ var icon_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region packages/playground/src/core/code-preview/github.css?inline
-var github_default = "pre code.hljs{display:block;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{font-weight:700;color:#005cc5}.hljs-bullet{color:#735c0f}.hljs-emphasis{font-style:italic;color:#24292e}.hljs-strong{font-weight:700;color:#24292e}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}[data-doc-theme=dark] .hljs,[data-vc-theme=dark] .hljs{color:#c9d1d9;background:#0d1117}[data-doc-theme=dark] .hljs-doctag,[data-doc-theme=dark] .hljs-keyword,[data-doc-theme=dark] .hljs-meta .hljs-keyword,[data-doc-theme=dark] .hljs-template-tag,[data-doc-theme=dark] .hljs-template-variable,[data-doc-theme=dark] .hljs-type,[data-doc-theme=dark] .hljs-variable.language_,[data-vc-theme=dark] .hljs-doctag,[data-vc-theme=dark] .hljs-keyword,[data-vc-theme=dark] .hljs-meta .hljs-keyword,[data-vc-theme=dark] .hljs-template-tag,[data-vc-theme=dark] .hljs-template-variable,[data-vc-theme=dark] .hljs-type,[data-vc-theme=dark] .hljs-variable.language_{color:#ff7b72}[data-doc-theme=dark] .hljs-title,[data-doc-theme=dark] .hljs-title.class_,[data-doc-theme=dark] .hljs-title.function_,[data-vc-theme=dark] .hljs-title,[data-vc-theme=dark] .hljs-title.class_,[data-vc-theme=dark] .hljs-title.function_{color:#d2a8ff}[data-doc-theme=dark] .hljs-attr,[data-doc-theme=dark] .hljs-literal,[data-doc-theme=dark] .hljs-number,[data-doc-theme=dark] .hljs-variable,[data-vc-theme=dark] .hljs-attr,[data-vc-theme=dark] .hljs-literal,[data-vc-theme=dark] .hljs-number,[data-vc-theme=dark] .hljs-variable{color:#79c0ff}[data-doc-theme=dark] .hljs-regexp,[data-doc-theme=dark] .hljs-string,[data-vc-theme=dark] .hljs-regexp,[data-vc-theme=dark] .hljs-string{color:#a5d6ff}[data-doc-theme=dark] .hljs-code,[data-doc-theme=dark] .hljs-comment,[data-vc-theme=dark] .hljs-code,[data-vc-theme=dark] .hljs-comment{color:#8b949e}[data-doc-theme=dark] .hljs-name,[data-doc-theme=dark] .hljs-selector-tag,[data-vc-theme=dark] .hljs-name,[data-vc-theme=dark] .hljs-selector-tag{color:#7ee787}";
+var github_default = "pre code.hljs{display:block;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{font-weight:700;color:#005cc5}.hljs-bullet{color:#735c0f}.hljs-emphasis{font-style:italic;color:#24292e}.hljs-strong{font-weight:700;color:#24292e}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}@media screen{[data-doc-theme=dark] .hljs,[data-vc-theme=dark] .hljs{color:#c9d1d9;background:#0d1117}[data-doc-theme=dark] .hljs-doctag,[data-doc-theme=dark] .hljs-keyword,[data-doc-theme=dark] .hljs-meta .hljs-keyword,[data-doc-theme=dark] .hljs-template-tag,[data-doc-theme=dark] .hljs-template-variable,[data-doc-theme=dark] .hljs-type,[data-doc-theme=dark] .hljs-variable.language_,[data-vc-theme=dark] .hljs-doctag,[data-vc-theme=dark] .hljs-keyword,[data-vc-theme=dark] .hljs-meta .hljs-keyword,[data-vc-theme=dark] .hljs-template-tag,[data-vc-theme=dark] .hljs-template-variable,[data-vc-theme=dark] .hljs-type,[data-vc-theme=dark] .hljs-variable.language_{color:#ff7b72}[data-doc-theme=dark] .hljs-title,[data-doc-theme=dark] .hljs-title.class_,[data-doc-theme=dark] .hljs-title.function_,[data-vc-theme=dark] .hljs-title,[data-vc-theme=dark] .hljs-title.class_,[data-vc-theme=dark] .hljs-title.function_{color:#d2a8ff}[data-doc-theme=dark] .hljs-attr,[data-doc-theme=dark] .hljs-literal,[data-doc-theme=dark] .hljs-number,[data-doc-theme=dark] .hljs-variable,[data-vc-theme=dark] .hljs-attr,[data-vc-theme=dark] .hljs-literal,[data-vc-theme=dark] .hljs-number,[data-vc-theme=dark] .hljs-variable{color:#79c0ff}[data-doc-theme=dark] .hljs-regexp,[data-doc-theme=dark] .hljs-string,[data-vc-theme=dark] .hljs-regexp,[data-vc-theme=dark] .hljs-string{color:#a5d6ff}[data-doc-theme=dark] .hljs-code,[data-doc-theme=dark] .hljs-comment,[data-vc-theme=dark] .hljs-code,[data-vc-theme=dark] .hljs-comment{color:#8b949e}[data-doc-theme=dark] .hljs-name,[data-doc-theme=dark] .hljs-selector-tag,[data-vc-theme=dark] .hljs-name,[data-vc-theme=dark] .hljs-selector-tag{color:#7ee787}}";
 //#endregion
 //#region packages/playground/src/core/code-preview/code-preview.scss?inline
-var code_preview_default$1 = ".docs-code-preview{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border-radius:8px}.docs-code-preview__language{z-index:1;min-width:28px;padding:0 8px;font-size:12px;line-height:18px;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .15s;transition:opacity .15s}.docs-code-preview__copy,.docs-code-preview__language{position:absolute;top:6px;right:12px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:28px;color:var(--docs-foreground-color-mute,var(--vc-color-dark-extralight,#71717a));-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-code-preview__copy{z-index:2;width:28px;padding:0;pointer-events:none;cursor:pointer;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper,#d4d4d8));border-radius:8px;opacity:0;-webkit-transition:opacity .15s,background-color .15s;transition:opacity .15s,background-color .15s}.docs-code-preview__copy:hover{background:var(--docs-background-color,var(--vc-background-color-light,#fff))}.docs-code-preview__copy:focus-visible{pointer-events:auto;opacity:1}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__language,.docs-code-preview:hover .docs-code-preview__language{opacity:0}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__copy,.docs-code-preview:hover .docs-code-preview__copy{pointer-events:auto;opacity:1}.docs-code-preview__scroller{width:100%;height:100%;min-width:0;min-height:0;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-code-preview__code{width:-webkit-max-content;width:-moz-max-content;width:max-content;margin:0}.docs-code-preview__code,.docs-code-preview__code code.hljs{min-width:100%;min-height:100%;overflow:visible;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))}.docs-code-preview__code code.hljs{display:block;padding:12px 96px 12px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}";
+var code_preview_default$1 = ".docs-code-preview{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border-radius:8px}.docs-code-preview__language{z-index:1;min-width:28px;padding:0 8px;font-size:12px;line-height:18px;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .15s;transition:opacity .15s}.docs-code-preview__copy,.docs-code-preview__language{position:absolute;top:6px;right:12px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:28px;color:var(--docs-foreground-color-mute,var(--vc-color-dark-extralight,#71717a));-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-code-preview__copy{z-index:2;width:28px;padding:0;pointer-events:none;cursor:pointer;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));border:1px solid var(--docs-border-color,var(--vc-border-color,#d4d4d8));border-radius:8px;opacity:0;-webkit-transition:opacity .15s,background-color .15s;transition:opacity .15s,background-color .15s}.docs-code-preview__copy:hover{background:var(--docs-background-color,var(--vc-background-color-lightest,#fff))}.docs-code-preview__copy:focus-visible{pointer-events:auto;opacity:1}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__language,.docs-code-preview:hover .docs-code-preview__language{opacity:0}.docs-code-preview:has(.docs-code-preview__copy:focus-visible) .docs-code-preview__copy,.docs-code-preview:hover .docs-code-preview__copy{pointer-events:auto;opacity:1}.docs-code-preview__scroller{width:100%;height:100%;min-width:0;min-height:0;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-code-preview__code{width:-webkit-max-content;width:-moz-max-content;width:max-content;margin:0}.docs-code-preview__code,.docs-code-preview__code code.hljs{min-width:100%;min-height:100%;overflow:visible;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))}.docs-code-preview__code code.hljs{display:block;padding:12px 96px 12px 24px;-webkit-box-sizing:border-box;box-sizing:border-box}";
 //#endregion
 //#region packages/playground/src/core/code-preview/style.ts
 var CODE_PREVIEW_STYLE_ID = "docs-code-preview-style";
@@ -2203,9 +2203,9 @@ var escapeHtmlAttr = (value) => value.replace(/&/gu, "&").replace(/"/gu, "&q
 /**
 * runtime 画布色。`previewInset` 露出的 padding、iframe chrome 和 sandbox
 * `html`/`body` 必须共用这一变量，暗色下 `--docs-background-color` 与
-* `--vc-background-color-light` 不同，否则会出现色带割裂。
+* `--vc-background-color-lightest` 不同，否则会出现色带割裂。
 */
-var PLAYGROUND_RUNTIME_CANVAS_BACKGROUND = "var(--vc-background-color-light, var(--docs-background-color, #fff))";
+var PLAYGROUND_RUNTIME_CANVAS_BACKGROUND = "var(--vc-background-color-lightest, var(--docs-background-color, #fff))";
 var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL, options = {}) => {
 	const previewScroller = options.previewScroller === true;
 	const hrefs = Object.values({
@@ -2235,22 +2235,30 @@ var createRuntimePreviewOptions = (cdnURL = DEFAULT_CDN_URL, options = {}) => {
 		}
 	};
 };
-var toReplFilename = (filename) => filename.startsWith("src/") ? filename : `src/${filename}`;
+var toReplFilename = (filename) => filename === "import-map.json" || filename.startsWith("src/") ? filename : `src/${filename}`;
 var createReplFile = (filename, code) => {
 	const replFilename = toReplFilename(filename);
 	return new File(replFilename, code);
 };
 /**
-* 默认 CDN → 站点 modules → 实例 builtinImportMap → 管理页覆盖。
+* 保留显式配置的模块，供 local 区分宿主默认与 URL 覆盖。
+* @param builtinImportMap 实例层 import map。
+* @returns 按优先级合并的显式模块地址。
+*/
+var createRuntimeImportOverrides = (builtinImportMap) => ({
+	...getPlaygroundSiteModules(),
+	...getPlaygroundImportMapOverrides(),
+	...filterSafeHrefs(builtinImportMap?.imports)
+});
+/**
+* 默认 CDN → 站点 modules → 管理页覆盖 → 实例 builtinImportMap。
 * iframe import map 与直接渲染加载的是同一份地址表。
 * @param cdnURL
 * @param builtinImportMap
 */
 var createRuntimeImports = (cdnURL = DEFAULT_CDN_URL, builtinImportMap) => ({
 	...createBuiltinImports(cdnURL),
-	...getPlaygroundSiteModules(),
-	...filterSafeHrefs(builtinImportMap?.imports),
-	...getPlaygroundImportMapOverrides()
+	...createRuntimeImportOverrides(builtinImportMap)
 });
 var createRuntimeStore = (files, entry, options) => {
 	const { cdnURL, builtinImportMap, ...storeOptions } = options;
@@ -2258,6 +2266,7 @@ var createRuntimeStore = (files, entry, options) => {
 		const file = createReplFile(filename, code);
 		return [file.filename, file];
 	})));
+	replFiles.value["import-map.json"] ??= new File("import-map.json", "{}");
 	const mainFile = ref(toReplFilename(entry));
 	const activeFilename = ref(toReplFilename(entry));
 	const imports = createRuntimeImports(cdnURL, builtinImportMap);
@@ -2276,6 +2285,11 @@ var createRuntimeStore = (files, entry, options) => {
 		})
 	});
 	bindPlaygroundScss(store);
+	const setFiles = store.setFiles.bind(store);
+	store.setFiles = (nextFiles, nextEntry) => setFiles({
+		"import-map.json": store.files["import-map.json"].code,
+		...nextFiles
+	}, nextEntry);
 	bindReplModules(store);
 	whenSassReady(files, () => {
 		const specifiers = collectBareSpecifiers(files, Object.keys(files));
@@ -2524,7 +2538,7 @@ var Alone = new Portal(/* @__PURE__ */ defineComponent({
 /**
 * 直接渲染与页面同文档，弹层不需要临时撑高。
 * `run` 仍返回可调用函数，但不会申请高度，也不会改动预览尺寸。
-* @param vue 宿主 Vue，只用其中的 `isRef`。
+* @param vue 当前预览的 Vue，只用其中的 `isRef`。
 * @returns 注入给预览的 `docs:playground`。
 */
 var createLocalPlayground = (vue) => {
@@ -2775,6 +2789,15 @@ var resolveHostModule = (id, modules) => {
 	return null;
 };
 var HOST_VUE_SPECIFIERS = /* @__PURE__ */ new Set(["vue", "vue/server-renderer"]);
+var VUE_DEPENDENT_BUILTINS = /* @__PURE__ */ new Set([
+	"vue/server-renderer",
+	"vue-router",
+	"pinia",
+	"@deot/vc",
+	"@deot/vc-components",
+	"@deot/vc-hooks",
+	"@deot/vc-locale"
+]);
 var messageOf = (error) => error instanceof Error ? error.message : String(error);
 /**
 * 找到 import map 里能覆盖该说明符的键。子路径没有独立 URL 时回退到父包。
@@ -2793,24 +2816,23 @@ var resolveImportTarget = (id, imports) => {
 		cursor = parent;
 	}
 };
-var prefersLocalBuiltin = (id, imports, cdnURL) => {
+var prefersLocalBuiltin = (id, imports, overrides = new Set(Object.keys(imports))) => {
 	if (!localBuiltinIds.has(id) && !HOST_VUE_SPECIFIERS.has(id)) return false;
-	const url = imports[id];
-	if (!url) return true;
-	return url === createBuiltinImports(cdnURL)[id];
+	if (overrides.has(id)) return false;
+	return !VUE_DEPENDENT_BUILTINS.has(id) || !overrides.has("vue");
 };
 /**
-* 内置依赖先注入宿主副本。import map 里与默认 CDN 不同的地址会覆盖，包括 `vue`。
+* 内置依赖默认注入宿主副本，显式 URL 按模块覆盖，包括与默认 CDN 相同的地址。
 * @param specifiers 本次预览用到的裸模块说明符。
 * @param imports 合并后的 import map。
 * @param builtins 宿主 Vue 与 vue-router。
 * @param builtins.vue 当前页面的 Vue 模块。
 * @param builtins.vueRouter 打包进来的 vue-router，可被 import map 覆盖。
 * @param loader 按 URL 加载远程模块。
-* @param cdnURL 当前 CDN 根，用来识别默认地址。
+* @param overrides 显式配置的模块名，与自动补齐的默认地址区分。
 * @returns 模块表和加载错误。
 */
-var loadLocalModules = async (specifiers, imports, builtins, loader, cdnURL) => {
+var loadLocalModules = async (specifiers, imports, builtins, loader, overrides = new Set(Object.keys(imports))) => {
 	const modules = {
 		"vue": builtins.vue,
 		"vue-router": builtins.vueRouter
@@ -2820,14 +2842,14 @@ var loadLocalModules = async (specifiers, imports, builtins, loader, cdnURL) =>
 	const localIds = /* @__PURE__ */ new Set();
 	specifiers.forEach((specifier) => {
 		let local = false;
-		if (prefersLocalBuiltin(specifier, imports, cdnURL)) localIds.add(specifier);
+		if (prefersLocalBuiltin(specifier, imports, overrides)) localIds.add(specifier);
 		else {
 			let cursor = specifier;
 			while (true) {
 				const slash = cursor.lastIndexOf("/");
 				if (slash <= 0) break;
 				const parent = cursor.slice(0, slash);
-				if (prefersLocalBuiltin(parent, imports, cdnURL)) {
+				if (prefersLocalBuiltin(parent, imports, overrides)) {
 					localIds.add(parent);
 					local = true;
 					break;
@@ -2835,12 +2857,8 @@ var loadLocalModules = async (specifiers, imports, builtins, loader, cdnURL) =>
 				cursor = parent;
 			}
 		}
-		if (specifier === "vue-router") {
-			if (imports["vue-router"]) targets.add("vue-router");
-			return;
-		}
 		const target = resolveImportTarget(specifier, imports);
-		if (target && prefersLocalBuiltin(target, imports, cdnURL)) localIds.add(target);
+		if (target && prefersLocalBuiltin(target, imports, overrides)) localIds.add(target);
 		else if (target) targets.add(target);
 		else if (!local && !localIds.has(specifier)) {
 			imports[specifier] = resolveNpmImport(specifier);
@@ -2857,7 +2875,7 @@ var loadLocalModules = async (specifiers, imports, builtins, loader, cdnURL) =>
 	}));
 	for (const id of targets) {
 		const url = imports[id];
-		if (!url || prefersLocalBuiltin(id, imports, cdnURL)) continue;
+		if (!url || prefersLocalBuiltin(id, imports, overrides)) continue;
 		try {
 			modules[id] = await loader(url);
 		} catch (error) {
@@ -2872,12 +2890,13 @@ var loadLocalModules = async (specifiers, imports, builtins, loader, cdnURL) =>
 //#endregion
 //#region packages/playground/src/core/runtime/local/vue-guard.ts
 /**
-* 给 files 注入的 vue：同一份宿主 Vue，但 `createApp().mount` 不会卸掉页面。
+* 给 files 注入选定的 Vue，但 `createApp().mount` 不会卸掉页面。
 * 防护按本次 link 创建，多个 Playground 互不覆盖。
 * @param capture 本次链接收集到的根组件、局部组件和 provide。
+* @param vue 当前预览选定的 Vue。
 * @returns 带防护的 Vue 模块。
 */
-var createGuardedVue = (capture) => {
+var createGuardedVue = (capture, vue = Vue) => {
 	const createApp = (rootComponent, rootProps) => {
 		const fakeApp = {
 			_component: rootComponent,
@@ -2917,14 +2936,14 @@ var createGuardedVue = (capture) => {
 			mount() {
 				capture.components = { ...fakeApp._context.components };
 				capture.provides = { ...fakeApp._context.provides };
-				capture.mountedComponent = defineComponent({
+				capture.mountedComponent = vue.defineComponent({
 					name: "PlaygroundCapturedApp",
 					components: fakeApp._context.components,
 					setup() {
 						Reflect.ownKeys(fakeApp._context.provides).forEach((key) => {
-							provide(key, fakeApp._context.provides[key]);
+							vue.provide(key, fakeApp._context.provides[key]);
 						});
-						return () => h(rootComponent, rootProps || null);
+						return () => vue.h(rootComponent, rootProps || null);
 					}
 				});
 				return capture.mountedComponent;
@@ -2936,7 +2955,7 @@ var createGuardedVue = (capture) => {
 		};
 		return fakeApp;
 	};
-	return new Proxy(Vue, { get(target, prop, receiver) {
+	return new Proxy(vue, { get(target, prop, receiver) {
 		if (prop === "createApp" || prop === "createSSRApp") return createApp;
 		if (prop === "default") return receiver;
 		return Reflect.get(target, prop, receiver);
@@ -2946,7 +2965,7 @@ var createGuardedVue = (capture) => {
 //#region packages/playground/src/core/runtime/local/linker.ts
 /**
 * 在当前页面链接编译结果，返回入口组件。
-* 未覆盖 `vue` 时换成带防护的宿主实例，避免 `mount` 卸掉页面。
+* 给选定的 Vue 加上 mount 防护，避免字符串入口卸掉页面。
 * @param compiled 浏览器编译结果。
 * @param files 当前 Playground 文件表。
 * @param options 可选的宿主模块表。
@@ -2965,7 +2984,7 @@ var linkPlayground = (compiled, files, options = {}) => {
 		provides: {}
 	};
 	const modules = { ...options.modules || {} };
-	if (modules.vue == null || modules.vue === Vue) modules.vue = createGuardedVue(capture);
+	modules.vue = createGuardedVue(capture, modules.vue || Vue);
 	const fileIndex = createFileIndex(files);
 	const root = getCommonRoot([...fileIndex.keys()]);
 	const cache = /* @__PURE__ */ new Map();
@@ -3033,16 +3052,54 @@ var linkPlayground = (compiled, files, options = {}) => {
 //#endregion
 //#region packages/playground/src/core/runtime/local/remote.ts
 var HOST_VUE = /* @__PURE__ */ new Set(["vue", "vue/server-renderer"]);
+var moduleUrl = (url) => new URL(url, globalThis.location?.href).href;
+var REMOTE_SOURCE_CACHE_LIMIT = 128;
+var sourceCache = /* @__PURE__ */ new Map();
+var prepareRemoteSource = async (url) => {
+	const response = await fetch(url);
+	if (!response.ok) throw new Error(`${response.status} ${url}`);
+	const text = await response.text();
+	await init();
+	const [specifiers] = parse(text);
+	let source = text;
+	for (const item of [...specifiers].reverse()) if (item.type === "dynamic") source = source.slice(0, item.importStart) + "__import" + source.slice(item.importStart + 6);
+	const cjs = transform(rewriteImportMeta(source, url), {
+		transforms: ["imports"],
+		disableESTransforms: true,
+		production: true,
+		filePath: url
+	}).code;
+	return {
+		dependencies: specifiers.filter((item) => item.type === "static" || item.type === "reexport-star").map((item) => item.specifier),
+		run: new Function("require", "module", "exports", "__import", cjs)
+	};
+};
+var readRemoteSource = (url) => {
+	if (new URL(url).origin === globalThis.location?.origin) return prepareRemoteSource(url);
+	const cached = sourceCache.get(url);
+	if (cached) {
+		sourceCache.delete(url);
+		sourceCache.set(url, cached);
+		return cached;
+	}
+	const task = prepareRemoteSource(url).catch((error) => {
+		if (sourceCache.get(url) === task) sourceCache.delete(url);
+		throw error;
+	});
+	sourceCache.set(url, task);
+	if (sourceCache.size > REMOTE_SOURCE_CACHE_LIMIT) sourceCache.delete(sourceCache.keys().next().value);
+	return task;
+};
 /**
 * 把 CDN 上的 ESM 先拉完整张依赖图，再在当前页面里执行。
 * 裸导入优先走 import map，缺失的 npm 依赖回退到 CDN ESM；import() 按需加载。
 * @param imports 合并后的 import map。
 * @param builtins 宿主 Vue 与 vue-router。
-* @param cdnURL 当前 CDN 根，用来识别默认地址。
+* @param overrides 显式配置的模块名，与自动补齐的默认地址区分。
 * @param importModule 浏览器原生 ESM 加载器。
 * @returns 按 URL 加载并执行远程模块的加载器。
 */
-var createRemoteLoader = (imports, builtins, cdnURL, importModule = (url) => import(
+var createRemoteLoader = (imports, builtins, overrides = new Set(Object.keys(imports)), importModule = (url) => import(
 	/* @vite-ignore */
 	url
 )) => {
@@ -3051,9 +3108,9 @@ var createRemoteLoader = (imports, builtins, cdnURL, importModule = (url) => imp
 		"vue-router": builtins.vueRouter
 	};
 	const pendingBuiltins = /* @__PURE__ */ new Set();
-	const texts = /* @__PURE__ */ new Map();
+	const sources = /* @__PURE__ */ new Map();
+	const pendingSources = /* @__PURE__ */ new Map();
 	const evaluated = /* @__PURE__ */ new Map();
-	const crawled = /* @__PURE__ */ new Set();
 	const nativeModules = /* @__PURE__ */ new Map();
 	const loadNative = (url) => {
 		let pending = nativeModules.get(url);
@@ -3068,24 +3125,34 @@ var createRemoteLoader = (imports, builtins, cdnURL, importModule = (url) => imp
 		return pending;
 	};
 	const localBuiltinId = (id) => {
-		if (imports[id] && !prefersLocalBuiltin(id, imports, cdnURL)) return null;
-		if (prefersLocalBuiltin(id, imports, cdnURL)) return id;
+		if (imports[id] && !prefersLocalBuiltin(id, imports, overrides)) return null;
+		if (prefersLocalBuiltin(id, imports, overrides)) return id;
 		let cursor = id;
 		while (true) {
 			const slash = cursor.lastIndexOf("/");
 			if (slash <= 0) return null;
 			const parent = cursor.slice(0, slash);
-			if (prefersLocalBuiltin(parent, imports, cdnURL)) return parent;
+			if (prefersLocalBuiltin(parent, imports, overrides)) return parent;
 			cursor = parent;
 		}
 	};
-	const dependencyUrl = (from, specifier) => {
-		if (isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier)) return new URL(specifier, from).href;
-		if (imports[specifier] && !prefersLocalBuiltin(specifier, imports, cdnURL)) return imports[specifier];
-		if (HOST_VUE.has(specifier) && prefersLocalBuiltin(specifier, imports, cdnURL)) return null;
+	const dependencySpecifier = (from, specifier) => {
+		if (isRelativeSpecifier(specifier) || /^https?:\/\//.test(specifier)) {
+			const url = new URL(specifier, from);
+			const match = url.origin === "https://cdn.jsdelivr.net" ? url.pathname.match(/^\/npm\/((?:@[^/]+\/)?[^/@]+)(?:@[^/]+)?\/\+esm$/) : null;
+			if (match && (imports[match[1]] || localBuiltinIds.has(match[1]))) return match[1];
+			return url.href;
+		}
+		return specifier;
+	};
+	const dependencyUrl = (from, id) => {
+		const specifier = dependencySpecifier(from, id);
+		if (/^https?:\/\//.test(specifier)) return specifier;
+		if (imports[specifier] && !prefersLocalBuiltin(specifier, imports, overrides)) return moduleUrl(imports[specifier]);
+		if (HOST_VUE.has(specifier) && prefersLocalBuiltin(specifier, imports, overrides)) return null;
 		let cursor = specifier;
 		while (cursor) {
-			if (localBuiltinIds.has(cursor) && prefersLocalBuiltin(cursor, imports, cdnURL)) {
+			if (localBuiltinIds.has(cursor) && prefersLocalBuiltin(cursor, imports, overrides)) {
 				pendingBuiltins.add(cursor);
 				return null;
 			}
@@ -3098,37 +3165,36 @@ var createRemoteLoader = (imports, builtins, cdnURL, importModule = (url) => imp
 			imports[specifier] = resolveNpmImport(specifier);
 			return imports[specifier];
 		}
-		return imports[target];
+		return moduleUrl(imports[target]);
 	};
-	const crawl = async (url) => {
-		if (/\/\+esm(?:[?#]|$)/.test(url)) {
+	const crawl = async (url, visited = /* @__PURE__ */ new Set()) => {
+		if (!overrides.size && /\/\+esm(?:[?#]|$)/.test(url)) {
 			await loadNative(url);
 			return;
 		}
-		if (crawled.has(url)) return;
-		crawled.add(url);
-		const response = await fetch(url);
-		if (!response.ok) throw new Error(`${response.status} ${url}`);
-		const text = await response.text();
-		await init();
-		const [specifiers] = parse(text);
-		let source = text;
-		for (const item of [...specifiers].reverse()) if (item.type === "dynamic") source = source.slice(0, item.importStart) + "__import" + source.slice(item.importStart + 6);
-		texts.set(url, source);
-		await Promise.all(specifiers.map(async (item) => {
-			if (item.type !== "static" && item.type !== "reexport-star") return;
-			const next = dependencyUrl(url, item.specifier);
-			if (next) await crawl(next);
+		if (visited.has(url)) return;
+		visited.add(url);
+		let pending = pendingSources.get(url);
+		if (!pending) {
+			pending = readRemoteSource(url);
+			pendingSources.set(url, pending);
+		}
+		const source = await pending;
+		sources.set(url, source);
+		await Promise.all(source.dependencies.map(async (specifier) => {
+			const next = dependencyUrl(url, specifier);
+			if (next) await crawl(next, visited);
 		}));
 	};
-	const requireFrom = (from) => (id) => {
-		if (HOST_VUE.has(id) && prefersLocalBuiltin(id, imports, cdnURL)) return toHostModule(builtins.vue);
+	const requireFrom = (from) => (specifier) => {
+		const id = dependencySpecifier(from, specifier);
+		if (HOST_VUE.has(id) && prefersLocalBuiltin(id, imports, overrides)) return toHostModule(builtins.vue);
 		const builtinId = localBuiltinId(id);
 		if (builtinId) return toHostModule(hostModules[builtinId]);
-		if (isRelativeSpecifier(id) || /^https?:\/\//.test(id)) return evaluate(new URL(id, from).href);
+		if (isRelativeSpecifier(id) || /^https?:\/\//.test(id)) return evaluate(dependencyUrl(from, id));
 		const target = imports[id] ? id : resolveImportTarget(id, imports);
 		if (!target || !imports[target]) throw new Error(`[Playground] 未注册的模块 "${id}"`);
-		const loaded = evaluate(imports[target]);
+		const loaded = evaluate(moduleUrl(imports[target]));
 		if (target === id) return loaded;
 		if (!resolveHostModule(id, { [target]: loaded }))
  /* istanbul ignore next -- 父包没有对应导出时才拒绝 */
@@ -3137,21 +3203,16 @@ var createRemoteLoader = (imports, builtins, cdnURL, importModule = (url) => imp
 	};
 	const evaluate = (url) => {
 		if (evaluated.has(url)) return evaluated.get(url);
-		const text = texts.get(url);
-		if (text == null) throw new Error(`[Playground] 远程模块尚未下载: ${url}`);
-		const cjs = transform(rewriteImportMeta(text, url), {
-			transforms: ["imports"],
-			disableESTransforms: true,
-			production: true,
-			filePath: url
-		}).code;
+		const source = sources.get(url);
+		if (!source) throw new Error(`[Playground] 远程模块尚未下载: ${url}`);
 		const module = { exports: {} };
 		evaluated.set(url, module.exports);
-		new Function("require", "module", "exports", "__import", cjs)(requireFrom(url), module, module.exports, async (id) => {
+		const runner = source.run;
+		runner(requireFrom(url), module, module.exports, async (id) => {
 			const next = dependencyUrl(url, id);
 			if (next) await load(next);
 			else {
-				const builtinId = localBuiltinId(id);
+				const builtinId = localBuiltinId(dependencySpecifier(url, id));
 				if (builtinId && !(builtinId in hostModules)) hostModules[builtinId] = await ensureLocalBuiltin(builtinId);
 			}
 			return requireFrom(url)(id);
@@ -3160,7 +3221,8 @@ var createRemoteLoader = (imports, builtins, cdnURL, importModule = (url) => imp
 		return module.exports;
 	};
 	const loading = /* @__PURE__ */ new Map();
-	const load = (url) => {
+	const load = (sourceUrl) => {
+		const url = moduleUrl(sourceUrl);
 		const pending = loading.get(url);
 		if (pending) return pending;
 		const task = (async () => {
@@ -3221,14 +3283,14 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			});
 		};
 		watch([compileError, runtimeError], publishError);
-		const createDocsLink = (preview) => defineComponent({
+		const createDocsLink = (preview, vue) => vue.defineComponent({
 			name: "DocsLink",
 			props: { to: {
 				type: String,
 				default: ""
 			} },
 			setup(linkProps, { slots }) {
-				return () => h("a", {
+				return () => vue.h("a", {
 					href: linkProps.to,
 					style: {
 						color: "inherit",
@@ -3249,27 +3311,27 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			previewApp = null;
 			removeStyle(styleId);
 		};
-		const mountPreview = (component, preview, css) => {
+		const mountPreview = (job, preview) => {
 			if (!mountEl.value) return;
+			const { component, vue, scroller, css } = job;
 			destroyPreview();
 			injectStyle(styleId, css);
 			if (props.clearConsole) console.clear();
-			const useScroller = props.previewScroller === true;
-			const app = Vue.createApp({
+			const app = vue.createApp({
 				name: "LocalSandboxRoot",
 				setup() {
-					const service = createLocalPlayground(Vue);
-					provide("docs:playground", service);
-					onErrorCaptured((error) => {
+					const service = createLocalPlayground(vue);
+					vue.provide("docs:playground", service);
+					vue.onErrorCaptured((error) => {
 						const message = formatPlaygroundRuntimeError(error);
 						if (message) runtimeError.value = message;
 						return false;
 					});
-					onBeforeUnmount(() => service.dispose());
+					vue.onBeforeUnmount(() => service.dispose());
 					return () => {
-						const content = h(component);
-						if (!useScroller) return content;
-						return h(Scroller, {
+						const content = vue.h(component);
+						if (!scroller) return content;
+						return vue.h(scroller, {
 							height: "100%",
 							native: false,
 							autoResize: true,
@@ -3279,7 +3341,7 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					};
 				}
 			});
-			app.component("DocsLink", createDocsLink(preview));
+			app.component("DocsLink", createDocsLink(preview, vue));
 			app.config.errorHandler = (error) => {
 				const message = formatPlaygroundRuntimeError(error);
 				if (message) runtimeError.value = message;
@@ -3310,7 +3372,7 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			/* istanbul ignore if -- 桥接 iframe 尚未就绪或编译已被取代 */
 			if (pendingMount !== job || !mountEl.value) return;
 			pendingMount = null;
-			mountPreview(job.component, preview, job.css);
+			mountPreview(job, preview);
 		};
 		const run = async () => {
 			const current = ++version;
@@ -3332,15 +3394,18 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					return;
 				}
 				const imports = createRuntimeImports(props.options.cdnURL, props.options.builtinImportMap);
+				const overrides = new Set(Object.keys(createRuntimeImportOverrides(props.options.builtinImportMap)));
 				const specifiers = collectBareSpecifiers(props.files, collectReachableFilenames(props.files, compiled.entry));
+				specifiers.push("vue");
+				if (props.previewScroller === true) specifiers.push("@deot/vc");
 				const remote = createRemoteLoader(imports, {
 					vue: Vue,
 					vueRouter: VueRouter
-				}, props.options.cdnURL);
+				}, overrides);
 				const loaded = await loadLocalModules(specifiers, imports, {
 					vue: Vue,
 					vueRouter: VueRouter
-				}, (url) => remote.load(url), props.options.cdnURL);
+				}, (url) => remote.load(url), overrides);
 				/* istanbul ignore if -- 并发编译时只保留最后一次 */
 				if (current !== version) return;
 				if (loaded.errors.length) {
@@ -3358,6 +3423,8 @@ var local_sandbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				}
 				pendingMount = {
 					component: linked.component,
+					vue: loaded.modules.vue,
+					scroller: props.previewScroller === true ? loaded.modules["@deot/vc"].Scroller : void 0,
 					css: linked.css,
 					version: current
 				};