@rinova/playground 0.1.4 → 0.5.0

package/dist/index.js

@@ -1,9 +1,650 @@
-import { a as toast, i as useSceneArgs, n as useSceneOutput, r as currentArgs, t as currentOutput } from "./output-Dx3ubog9.js";
-import { createApp } from "vue";
+import { A as _plugin_vue_export_helper_default, C as toast, D as PW_THEME_LIGHT, E as PW_THEME_DARK, O as getHighlighter, T as createLucideIcon, _ as currentOutputSlots, b as currentArgsSlots, d as togglePlaygroundPanel, f as usePlaygroundEnv, g as currentOutput, h as usePlaygroundUi, k as PwApiBrief_default, m as usePlaygroundTheme, n as definePlaygroundPlugin, p as usePlaygroundPlugin, r as openPlaygroundPanel, t as closePlaygroundPanel, v as useSceneOutput, x as useSceneArgs, y as currentArgs } from "./plugin-S72dg7Tb.js";
+import { Fragment, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, h, nextTick, normalizeClass, normalizeStyle, onMounted, onUpdated, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withCtx } from "vue";
 // src/config.ts
 var defineConfig = (config) => config;
 // src/scene-meta.ts
 var defineSceneMeta = (meta) => meta;
+var definePageMeta = (meta) => meta;
+// src/components/PwDemoGrid.vue
+var PwDemoGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "PwDemoGrid",
+	props: {
+		columns: { default: 1 },
+		min: { default: 0 },
+		gap: { default: "md" }
+	},
+	setup(__props) {
+		const props = __props;
+		const GAPS = {
+			sm: "8px",
+			md: "12px",
+			lg: "16px"
+		};
+		const auto = computed(() => props.min > 0);
+		const style = computed(() => ({
+			"--pw-demo-columns": String(props.columns),
+			"--pw-demo-min": `${props.min || 220}px`,
+			"--pw-demo-gap": GAPS[props.gap]
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["pw-demo-grid", { "is-auto": auto.value }]),
+				style: normalizeStyle(style.value)
+			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 6);
+		};
+	}
+}), [["__scopeId", "data-v-68029d58"]]);
+// src/components/PwDemo.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$5 = {
+	key: 0,
+	class: "pw-demo__title"
+};
+var _hoisted_2$4 = { class: "pw-demo__body" };
+var _hoisted_3$4 = {
+	key: 1,
+	class: "pw-demo__note"
+};
+var _hoisted_4$1 = {
+	key: 2,
+	class: "pw-demo__footer"
+};
+// src/components/PwDemo.vue
+var PwDemo_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "PwDemo",
+	props: {
+		title: {},
+		direction: { default: "row" },
+		align: { default: "center" },
+		surface: { default: "none" }
+	},
+	setup(__props) {
+		/**
+		* 单个 Demo 块：标题 + 控件区 + 可选说明/页脚。
+		*
+		* 默认 `surface="none"`：画布已经提供了底色和内边距，这里只负责排版；
+		* 需要独立卡片时再加 `surface="card"`。全部可选，不想用这套原语照样可以自己写。
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("figure", { class: normalizeClass(["pw-demo", [
+				`is-${__props.direction}`,
+				`align-${__props.align}`,
+				`surface-${__props.surface}`
+			]]) }, [
+				__props.title ? (openBlock(), createElementBlock("figcaption", _hoisted_1$5, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_2$4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_ctx.$slots.note ? (openBlock(), createElementBlock("p", _hoisted_3$4, [renderSlot(_ctx.$slots, "note", {}, void 0, true)])) : createCommentVNode("", true),
+				_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_4$1, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)])) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+}), [["__scopeId", "data-v-a3355761"]]);
+// src/components/PwSceneNote.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$4 = { class: "pw-scene-note" };
+// src/components/PwSceneNote.vue
+var PwSceneNote_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "PwSceneNote",
+	props: { text: {} },
+	setup(__props) {
+		/** 场景内说明块（引用样式） */
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$4, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)], true)]);
+		};
+	}
+}), [["__scopeId", "data-v-07e42ce6"]]);
+// src/components/prose/enhance.ts
+/**
+* 代码块增强：语法高亮 + 语言角标 + 复制按钮。
+*
+* Markdown 与手写内容页（`PwProse`）走同一段逻辑，保证同一个代码块在两条路上长得一样。
+* 只在已渲染的 DOM 上就地改：不移动、不替换 `<pre>` 节点，Vue 重新渲染时会被覆盖，
+* 于是用「按钮是否还在」当幂等标记，重渲染后自动再增强一次。
+*/
+/** shiki 的语言别名 → 我们注册过的 lang */
+var LANGS = {
+	ts: "typescript",
+	tsx: "typescript",
+	js: "javascript",
+	mjs: "javascript",
+	cjs: "javascript",
+	sh: "bash",
+	shell: "bash",
+	zsh: "bash",
+	md: "markdown",
+	yml: "yaml",
+	htm: "html"
+};
+var detectLang = (pre) => {
+	const langClass = [...pre.querySelector("code")?.classList ?? []].find((name) => name.startsWith("language-"));
+	const raw = (langClass ? langClass.slice(9) : pre.dataset.lang ?? "").toLowerCase();
+	if (!raw) return {
+		shikiLang: "text",
+		label: ""
+	};
+	return {
+		shikiLang: LANGS[raw] ?? raw,
+		label: raw
+	};
+};
+/** 把 `<pre><code>` 换成 shiki 的高亮结果（保留原来的 `<pre>` 节点） */
+var applyHighlight = async (pre, lang) => {
+	if (pre.classList.contains("shiki")) return;
+	const code = pre.querySelector("code");
+	if (!code) return;
+	const highlighter = await getHighlighter().catch((error) => {
+		console.warn("[rinova-playground] 代码高亮初始化失败：", error);
+		return null;
+	});
+	if (!highlighter) return;
+	try {
+		const html = highlighter.codeToHtml(code.textContent ?? "", {
+			lang,
+			themes: {
+				light: PW_THEME_LIGHT,
+				dark: PW_THEME_DARK
+			},
+			defaultColor: false
+		});
+		const doc = new DOMParser().parseFromString(html, "text/html");
+		const next = doc.querySelector("pre");
+		const nextCode = doc.querySelector("code");
+		if (!next || !nextCode) return;
+		pre.setAttribute("class", next.getAttribute("class") ?? "shiki");
+		pre.setAttribute("style", next.getAttribute("style") ?? "");
+		code.innerHTML = nextCode.innerHTML;
+		code.removeAttribute("class");
+	} catch (error) {
+		console.warn("[rinova-playground] 代码高亮失败（保留纯文本）：", error);
+	}
+};
+var COPY_LABEL = "复制";
+var DONE_LABEL = "已复制";
+/** 给一个 `<pre>` 加语言角标与复制按钮；带 data-pw-copy 说明已经处理过 */
+var decorate = (pre, label) => {
+	pre.classList.add("pw-prose__code");
+	if (pre.querySelector("[data-pw-copy]")) return;
+	if (label) {
+		const tag = document.createElement("span");
+		tag.className = "pw-prose__lang";
+		tag.setAttribute("aria-hidden", "true");
+		tag.textContent = label;
+		pre.append(tag);
+	}
+	const button = document.createElement("button");
+	button.type = "button";
+	button.className = "pw-prose__copy";
+	button.dataset.pwCopy = "";
+	button.textContent = COPY_LABEL;
+	pre.append(button);
+};
+/** 增强 root 下所有还没处理过的代码块 */
+var enhanceCodeBlocks = async (root) => {
+	if (!root) return;
+	const pending = [...root.querySelectorAll("pre")].filter((pre) => !pre.querySelector("[data-pw-copy]"));
+	for (const pre of pending) {
+		const { shikiLang, label } = detectLang(pre);
+		await applyHighlight(pre, shikiLang);
+		decorate(pre, label);
+	}
+};
+/** 复制按钮的点击：由容器统一代理（`v-html` 里的节点绑不了 Vue 事件） */
+var handleCopyClick = async (event) => {
+	const button = event.target?.closest("[data-pw-copy]");
+	if (!button) return;
+	const text = button.closest("pre")?.querySelector("code")?.textContent ?? "";
+	if (!text) return;
+	try {
+		await navigator.clipboard.writeText(text);
+	} catch {
+		const area = document.createElement("textarea");
+		area.value = text;
+		area.style.position = "fixed";
+		area.style.opacity = "0";
+		document.body.append(area);
+		area.select();
+		document.execCommand("copy");
+		area.remove();
+	}
+	button.textContent = DONE_LABEL;
+	button.classList.add("is-done");
+	window.setTimeout(() => {
+		button.textContent = COPY_LABEL;
+		button.classList.remove("is-done");
+	}, 1200);
+};
+// src/components/prose/PwProse.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = {
+	key: 0,
+	class: "pw-prose__head"
+};
+var _hoisted_2$3 = { key: 0 };
+var _hoisted_3$3 = {
+	key: 1,
+	class: "pw-prose__lead"
+};
+// src/components/prose/PwProse.vue
+var PwProse_default = /* @__PURE__ */ defineComponent({
+	__name: "PwProse",
+	props: {
+		title: { default: "" },
+		lead: { default: "" },
+		width: { default: "" }
+	},
+	setup(__props) {
+		/**
+		* 文档排版容器：给内容页（介绍、指南、说明）提供统一的标题 / 段落 / 列表 / 表格 / 代码样式。
+		*
+		* 样式之外只多做一件事：把插槽里的 `<pre><code class="language-ts">` 就地升级成
+		* 高亮 + 语言角标 + 复制按钮，和 Markdown 代码块完全一致。
+		*/
+		const rootEl = ref(null);
+		/** 增强是幂等的：按钮还在就跳过，Vue 重渲染把 DOM 覆盖了才重新跑 */
+		const enhance = () => {
+			enhanceCodeBlocks(rootEl.value);
+		};
+		onMounted(enhance);
+		onUpdated(enhance);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("article", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				class: "pw-prose",
+				style: normalizeStyle(__props.width ? { "--pw-prose-width": __props.width } : void 0),
+				onClick: _cache[0] || (_cache[0] = (...args) => unref(handleCopyClick) && unref(handleCopyClick)(...args))
+			}, [__props.title || __props.lead ? (openBlock(), createElementBlock("header", _hoisted_1$3, [__props.title ? (openBlock(), createElementBlock("h1", _hoisted_2$3, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.lead ? (openBlock(), createElementBlock("p", _hoisted_3$3, toDisplayString(__props.lead), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 4);
+		};
+	}
+});
+/**
+* @license @lucide/vue v1.66.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var Info = createLucideIcon({
+	name: "info",
+	size: 24,
+	node: [
+		["circle", {
+			cx: "12",
+			cy: "12",
+			r: "10",
+			key: "1mglay"
+		}],
+		["path", {
+			d: "M12 16v-4",
+			key: "1dtifu"
+		}],
+		["path", {
+			d: "M12 8h.01",
+			key: "e9boi3"
+		}]
+	]
+});
+/**
+* @license @lucide/vue v1.66.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var Lightbulb = createLucideIcon({
+	name: "lightbulb",
+	size: 24,
+	node: [
+		["path", {
+			d: "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5",
+			key: "1gvzjb"
+		}],
+		["path", {
+			d: "M9 18h6",
+			key: "x1upvd"
+		}],
+		["path", {
+			d: "M10 22h4",
+			key: "ceow96"
+		}]
+	]
+});
+/**
+* @license @lucide/vue v1.66.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var OctagonAlert = createLucideIcon({
+	name: "octagon-alert",
+	size: 24,
+	node: [
+		["path", {
+			d: "M12 16h.01",
+			key: "1drbdi"
+		}],
+		["path", {
+			d: "M12 8v4",
+			key: "1got3b"
+		}],
+		["path", {
+			d: "M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z",
+			key: "1fd625"
+		}]
+	],
+	aliases: ["alert-octagon"]
+});
+/**
+* @license @lucide/vue v1.66.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var TriangleAlert = createLucideIcon({
+	name: "triangle-alert",
+	size: 24,
+	node: [
+		["path", {
+			d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+			key: "wmoenq"
+		}],
+		["path", {
+			d: "M12 9v4",
+			key: "juzpu7"
+		}],
+		["path", {
+			d: "M12 17h.01",
+			key: "p32p05"
+		}]
+	],
+	aliases: ["alert-triangle"]
+});
+// src/components/prose/PwCallout.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = { class: "pw-callout__main" };
+var _hoisted_2$2 = {
+	key: 0,
+	class: "pw-callout__title"
+};
+var _hoisted_3$2 = { class: "pw-callout__body" };
+// src/components/prose/PwCallout.vue
+var PwCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "PwCallout",
+	props: {
+		tone: { default: "info" },
+		title: { default: "" }
+	},
+	setup(__props) {
+		/**
+		* 提示块：把「注意 / 建议 / 警告 / 危险」这类旁注从正文里拎出来。
+		*
+		* Markdown 里写 `::: tip 标题`，渲染出来就是同一个组件。
+		*/
+		const props = __props;
+		const icons = {
+			info: Info,
+			tip: Lightbulb,
+			warn: TriangleAlert,
+			danger: OctagonAlert
+		};
+		const icon = computed(() => icons[props.tone]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("aside", { class: normalizeClass(["pw-callout", `pw-callout--${__props.tone}`]) }, [(openBlock(), createBlock(resolveDynamicComponent(icon.value), {
+				size: 15,
+				class: "pw-callout__icon"
+			})), createElementVNode("div", _hoisted_1$2, [__props.title ? (openBlock(), createElementBlock("p", _hoisted_2$2, toDisplayString(__props.title), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])])], 2);
+		};
+	}
+}), [["__scopeId", "data-v-6a2ac811"]]);
+// src/components/prose/PwSteps.vue
+var PwSteps_default = /* @__PURE__ */ defineComponent({
+	__name: "PwSteps",
+	props: { start: { default: 1 } },
+	setup(__props) {
+		/**
+		* 步骤列表：按顺序讲一件事时用，序号由 CSS 计数器生成，增删条目不用改编号。
+		*
+		* Markdown 里写 `::: steps` + 有序列表，渲染出来是同一个组件。
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ol", {
+				class: "pw-prose__steps",
+				style: normalizeStyle(__props.start !== 1 ? { counterReset: `pw-prose-step ${__props.start - 1}` } : void 0)
+			}, [renderSlot(_ctx.$slots, "default")], 4);
+		};
+	}
+});
+// src/components/prose/PwStep.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "pw-prose__step" };
+var _hoisted_2$1 = {
+	key: 0,
+	class: "pw-prose__step-title"
+};
+var _hoisted_3$1 = {
+	key: 1,
+	class: "pw-prose__step-desc"
+};
+// src/components/prose/PwStep.vue
+var PwStep_default = /* @__PURE__ */ defineComponent({
+	__name: "PwStep",
+	props: {
+		title: { default: "" },
+		description: { default: "" }
+	},
+	setup(__props) {
+		/**
+		* 单条步骤，放在 `PwSteps` 里使用；标题可选，正文走默认插槽。
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", _hoisted_1$1, [
+				__props.title ? (openBlock(), createElementBlock("p", _hoisted_2$1, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+				__props.description ? (openBlock(), createElementBlock("p", _hoisted_3$1, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "default")
+			]);
+		};
+	}
+});
+// src/components/prose/parse.ts
+/** `::: tip` 这类容器的别名表：写法尽量宽，渲染统一 */
+var TONES = {
+	tip: "tip",
+	info: "info",
+	note: "info",
+	warn: "warn",
+	warning: "warn",
+	danger: "danger",
+	error: "danger"
+};
+var TONE_LABEL = {
+	info: "说明",
+	tip: "建议",
+	warn: "注意",
+	danger: "危险"
+};
+var FRONTMATTER = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
+/** 去掉 `---` 头（内容由插件解析成 pageMeta / sceneMeta，渲染时不该出现） */
+var stripFrontmatter = (source) => source.replace(FRONTMATTER, "");
+/** 把正文切成「普通 Markdown / 提示块 / 步骤块」，容器不支持嵌套 */
+var splitBlocks = (body) => {
+	const blocks = [];
+	let buffer = [];
+	let open = null;
+	const pushText = (text) => {
+		if (text.trim()) blocks.push({
+			kind: "md",
+			text
+		});
+	};
+	for (const line of body.split(/\r?\n/)) {
+		const match = /^:::\s*([a-zA-Z-]+)\s*(.*)$/.exec(line);
+		if (open) {
+			if (line.trim() === ":::") {
+				pushText(buffer.join("\n"));
+				buffer = [];
+				blocks.push({
+					kind: open.kind,
+					tone: open.tone,
+					title: open.title,
+					text: open.lines.join("\n")
+				});
+				open = null;
+				continue;
+			}
+			open.lines.push(line);
+			continue;
+		}
+		if (match) {
+			const name = (match[1] ?? "").toLowerCase();
+			const isSteps = name === "steps";
+			const tone = TONES[name];
+			if (!isSteps && !tone) {
+				buffer.push(line);
+				continue;
+			}
+			pushText(buffer.join("\n"));
+			buffer = [];
+			open = {
+				kind: isSteps ? "steps" : "callout",
+				tone: isSteps ? void 0 : tone,
+				title: isSteps ? void 0 : (match[2] ?? "").trim(),
+				lines: []
+			};
+			continue;
+		}
+		buffer.push(line);
+	}
+	if (open) pushText([open.kind === "steps" ? "::: steps" : `::: ${open.tone ?? "info"} ${open.title ?? ""}`.trim(), ...open.lines].join("\n"));
+	pushText(buffer.join("\n"));
+	return blocks;
+};
+// src/components/prose/render.ts
+/**
+* 把 Markdown 原文渲染成区块列表。
+*
+* 这里只做 Markdown → HTML；语法高亮、语言角标与复制按钮统一交给 `enhance.ts`
+* （和手写内容页 `PwProse` 走同一段逻辑）。marked 按需加载，页面里没有 `.md` 场景时不会下载。
+*/
+var renderMarkdown = async (source) => {
+	const { marked } = await import("./marked.esm-CNYX-ybC.js");
+	marked.setOptions({
+		gfm: true,
+		breaks: false
+	});
+	const blocks = splitBlocks(stripFrontmatter(source));
+	const out = [];
+	for (const block of blocks) {
+		const html = marked.parse(block.text, { async: false });
+		if (block.kind === "callout") {
+			const tone = block.tone ?? "info";
+			out.push({
+				kind: "callout",
+				tone,
+				title: block.title || TONE_LABEL[tone],
+				html
+			});
+			continue;
+		}
+		if (block.kind === "steps") {
+			const items = [...new DOMParser().parseFromString(html, "text/html").querySelectorAll("ol > li")].map((item) => item.innerHTML.trim());
+			if (items.length) {
+				out.push({
+					kind: "steps",
+					items
+				});
+				continue;
+			}
+		}
+		out.push({
+			kind: "html",
+			html
+		});
+	}
+	return out.filter((block) => block.kind === "steps" ? block.items.length > 0 : block.html.trim().length > 0);
+};
+// src/components/prose/PwMarkdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["innerHTML"];
+var _hoisted_3 = ["innerHTML"];
+var _hoisted_4 = {
+	key: 0,
+	class: "pw-prose__error"
+};
+// src/components/prose/PwMarkdown.vue
+var PwMarkdown_default = /* @__PURE__ */ defineComponent({
+	__name: "PwMarkdown",
+	props: {
+		source: {},
+		width: { default: "" }
+	},
+	setup(__props) {
+		/**
+		* Markdown 渲染：`.md` 场景就是它渲染出来的。
+		*
+		* 做法是「Markdown → 区块 → 组件」：普通段落走 `v-html`，
+		* `::: tip` 变成 `PwCallout`、`::: steps` 变成 `PwSteps`，
+		* 所以 Markdown 与手写 Vue 内容页共用同一套组件与样式。
+		*
+		* 代码块的语法高亮、语言角标、复制按钮由 `enhance.ts` 统一处理（与 `PwProse` 同一段逻辑）。
+		*/
+		const props = __props;
+		const blocks = ref([]);
+		const failed = ref("");
+		const rootEl = ref(null);
+		watch(() => props.source, async (source) => {
+			try {
+				blocks.value = await renderMarkdown(source);
+				failed.value = "";
+			} catch (error) {
+				failed.value = error instanceof Error ? error.message : String(error);
+				blocks.value = [];
+			}
+			await nextTick();
+			await enhanceCodeBlocks(rootEl.value);
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("article", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				class: "pw-prose",
+				style: normalizeStyle(__props.width ? { "--pw-prose-width": __props.width } : void 0),
+				onClick: _cache[0] || (_cache[0] = (...args) => unref(handleCopyClick) && unref(handleCopyClick)(...args))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(blocks.value, (block, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: index }, [block.kind === "callout" ? (openBlock(), createBlock(PwCallout_default, {
+					key: 0,
+					tone: block.tone,
+					title: block.title
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						class: "pw-prose__block",
+						innerHTML: block.html
+					}, null, 8, _hoisted_1)]),
+					_: 2
+				}, 1032, ["tone", "title"])) : block.kind === "steps" ? (openBlock(), createBlock(PwSteps_default, { key: 1 }, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(block.items, (item, itemIndex) => {
+						return openBlock(), createBlock(PwStep_default, { key: itemIndex }, {
+							default: withCtx(() => [createElementVNode("div", {
+								class: "pw-prose__block",
+								innerHTML: item
+							}, null, 8, _hoisted_2)]),
+							_: 2
+						}, 1024);
+					}), 128))]),
+					_: 2
+				}, 1024)) : (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: "pw-prose__block",
+					innerHTML: block.html
+				}, null, 8, _hoisted_3))], 64);
+			}), 128)), failed.value ? (openBlock(), createElementBlock("p", _hoisted_4, "Markdown 渲染失败：" + toDisplayString(failed.value), 1)) : createCommentVNode("", true)], 4);
+		};
+	}
+});
+// src/components/prose/markdown-scene.ts
+/**
+* 把一个 Markdown 场景包成组件：插件扫描到 `.md` 文件时调用。
+*
+* ```ts
+* load: () => import('./guide.md?raw').then((mod) => ({ default: defineMarkdownScene(mod.default) }))
+* ```
+*/
+var defineMarkdownScene = (source) => defineComponent({
+	name: "PwMarkdownScene",
+	setup: () => () => h(PwMarkdown_default, { source })
+});
 // src/index.ts
 /**
 * 挂载 playground。
@@ -16,7 +657,7 @@ var defineSceneMeta = (meta) => meta;
 var createPlayground = async (options = {}) => {
 	const target = typeof options.el === "string" ? document.querySelector(options.el) : options.el ?? document.querySelector("#app");
 	if (!target) throw new Error("[rinova-playground] 未找到挂载容器。请在 index.html 中提供 <div id=\"app\"></div>，或调用 createPlayground({ el })");
-	const { default: App } = await import("./App-BzlvncHB.js");
-	createApp(App).mount(target);
+	const { default: Root } = await import("./PlaygroundRoot-Bcq7hG6m.js");
+	createApp(Root).mount(target);
 };
-export { createPlayground, currentArgs, currentOutput, defineConfig, defineSceneMeta, toast, useSceneArgs, useSceneOutput };
+export { PwApiBrief_default as PwApiBrief, PwCallout_default as PwCallout, PwDemo_default as PwDemo, PwDemoGrid_default as PwDemoGrid, PwMarkdown_default as PwMarkdown, PwProse_default as PwProse, PwSceneNote_default as PwSceneNote, PwStep_default as PwStep, PwSteps_default as PwSteps, closePlaygroundPanel, createPlayground, currentArgs, currentArgsSlots, currentOutput, currentOutputSlots, defineConfig, defineMarkdownScene, definePageMeta, definePlaygroundPlugin, defineSceneMeta, openPlaygroundPanel, toast, togglePlaygroundPanel, usePlaygroundEnv, usePlaygroundPlugin, usePlaygroundTheme, usePlaygroundUi, useSceneArgs, useSceneOutput };