@deot/docs-playground 1.0.8 → 1.0.9

package/dist/index.cjs

@@ -105,16 +105,40 @@ var highlightCodeByLanguage = (code, language) => {
 var highlightCode = (code, filename) => highlightCodeByLanguage(code, resolveHighlightLanguage(filename));
 //#endregion
 //#region packages/playground/src/icon/icons.ts
-var PLAYGROUND_ICON_PATHS = {
-	runtime: "M5 3h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm3 18h8m-4-3v3m-2-13 5 3-5 3V8Z",
-	files: "M6 2h8l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 0v6h5m-9 5-2 2 2 2m5-4 2 2-2 2",
-	copy: "M9 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2Zm-2 8H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4",
-	editor: "M8 8 4 12l4 4m8-8 4 4-4 4m-3-10-2 12",
-	viewport: "M3 4h12v10H3V4Zm3 14h6m-3-4v4m9-9h3v11h-6V9h3m0 9h0"
+var strokeIcon = (path) => ({
+	path,
+	fill: "none",
+	stroke: "currentColor"
+});
+var solidIcon = (path) => ({
+	path,
+	fill: "currentColor",
+	stroke: "none"
+});
+var PLAYGROUND_ICONS = {
+	runtime: strokeIcon("M5 3h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm3 18h8m-4-3v3m-2-13 5 3-5 3V8Z"),
+	files: strokeIcon("M6 2h8l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 0v6h5m-9 5-2 2 2 2m5-4 2 2-2 2"),
+	copy: strokeIcon(["M9 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2Z", "m-2 8H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4"].join("")),
+	refresh: solidIcon(["M12 2.5a9.5 9.5 0 1 1 0 19 1 1 0 1 1 0-2 7.5 7.5 0 1 0-7.5-7.8l.24-.23a.75.75 0 1 1 1.06 1.06", "L4.03 14.3a.75.75 0 0 1-1.06 0L1.2 12.53a.75.75 0 1 1 1.06-1.06l.24.24A9.5 9.5 0 0 1 12 2.5"].join("")),
+	editor: solidIcon([
+		"M9.38 19.32a.82.82 0 0 1-.71-1.23l5.85-10.13a.82.82 0 0 1 1.42.82l-5.85 10.13a.8.8 0 0 1-.71.4",
+		"m-2.52-.76a.8.8 0 0 1-.58-.25l-4.13-4.12a1.06 1.06 0 0 1 0-1.5l4.13-4.12a.82.82 0 1 1 1.16 1.16",
+		"l-3.72 3.71 3.72 3.71a.82.82 0 0 1-.58 1.4m10.9 0a.82.82 0 0 1-.58-1.4l3.7-3.7-3.7-3.72",
+		"a.82.82 0 1 1 1.16-1.16l4.12 4.13c.41.4.41 1.08 0 1.49l-4.12 4.12a.8.8 0 0 1-.59.25"
+	].join("")),
+	viewport: solidIcon([
+		"M21.82 2.93c-.3-.3-.7-.47-1.1-.47H4.6c-.87 0-1.58.7-1.58 1.58v4.18h1.12V3.67h17v12.54",
+		"c0 .25-.2.46-.45.46H9.49v1.13h.67q-.25.66-.6 1.11l-.06.06v1.86h7.86a.56.56 0 1 0 0-1.13",
+		"q-1.46 0-2.2-1.9h5.55c.87 0 1.57-.71 1.57-1.59V4.04a1.6 1.6 0 0 0-.46-1.11M10.55 19.6",
+		"c.43-.63.66-1.08.92-1.81h2.37c.25.8.51 1.26.97 1.77l.03.05zM8.12 8.4H2.9",
+		"c-.64 0-1.17.53-1.17 1.19v10.75c0 .66.53 1.19 1.17 1.19h5.21c.65 0 1.18-.53 1.18-1.19V9.6",
+		"a1.16 1.16 0 0 0-1.17-1.19M8.1 20.36H2.94V9.64h5.15z"
+	].join(""))
 };
 //#endregion
 //#region packages/playground/src/icon/icon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$5 = ["d"];
+var _hoisted_1$5 = ["fill", "stroke"];
+var _hoisted_2$4 = ["d"];
 //#endregion
 //#region packages/playground/src/icon/icon.vue
 var icon_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -125,6 +149,7 @@ var icon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	},
 	setup(__props) {
 		const props = __props;
+		const icon = (0, vue.computed)(() => PLAYGROUND_ICONS[props.name]);
 		const sizeStyle = (0, vue.computed)(() => {
 			if (props.size == null) return;
 			const value = typeof props.size === "number" ? `${props.size}px` : props.size;
@@ -138,13 +163,13 @@ var icon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: "docs-playground-icon",
 				viewBox: "0 0 24 24",
 				style: (0, vue.normalizeStyle)(sizeStyle.value),
-				fill: "none",
-				stroke: "currentColor",
+				fill: icon.value.fill,
+				stroke: icon.value.stroke,
 				"stroke-width": "1.8",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
 				"aria-hidden": "true"
-			}, [(0, vue.createElementVNode)("path", { d: (0, vue.unref)(PLAYGROUND_ICON_PATHS)[__props.name] }, null, 8, _hoisted_1$5)], 4);
+			}, [(0, vue.createElementVNode)("path", { d: icon.value.path }, null, 8, _hoisted_2$4)], 12, _hoisted_1$5);
 		};
 	}
 });
@@ -472,7 +497,7 @@ var _hoisted_7$1 = ["title", "aria-label"];
 var _hoisted_8$1 = ["title", "aria-label"];
 var _hoisted_9$1 = { class: "docs-playground-editor__actions" };
 var _hoisted_10$1 = ["title"];
-var _hoisted_11 = ["title", "disabled"];
+var _hoisted_11$1 = ["title", "disabled"];
 var _hoisted_12 = {
 	key: 0,
 	class: "docs-playground-editor__error"
@@ -781,7 +806,7 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						title: (0, vue.unref)(t)("playground.editor.setEntry"),
 						disabled: activeFilename.value === currentEntry.value,
 						onClick: handleEntry
-					}, (0, vue.toDisplayString)((0, vue.unref)(t)("playground.editor.setEntry")), 9, _hoisted_11)])]),
+					}, (0, vue.toDisplayString)((0, vue.unref)(t)("playground.editor.setEntry")), 9, _hoisted_11$1)])]),
 					codeErrorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_12, (0, vue.toDisplayString)(codeErrorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
 					(0, vue.createElementVNode)("div", {
 						ref_key: "textarea",
@@ -1515,28 +1540,29 @@ var _hoisted_2 = {
 };
 var _hoisted_3 = { class: "docs-playground__header" };
 var _hoisted_4 = { class: "docs-playground__tools" };
-var _hoisted_5 = [
+var _hoisted_5 = ["title", "aria-label"];
+var _hoisted_6 = [
 	"title",
 	"aria-label",
 	"aria-expanded"
 ];
-var _hoisted_6 = ["title", "aria-label"];
-var _hoisted_7 = {
+var _hoisted_7 = ["title", "aria-label"];
+var _hoisted_8 = {
 	key: 0,
 	class: "docs-playground__views"
 };
-var _hoisted_8 = [
+var _hoisted_9 = [
 	"title",
 	"aria-label",
 	"aria-pressed",
 	"onClick"
 ];
-var _hoisted_9 = {
+var _hoisted_10 = {
 	key: 0,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_10 = { class: "docs-playground-runtime__viewport-stage" };
+var _hoisted_11 = { class: "docs-playground-runtime__viewport-stage" };
 //#endregion
 //#region packages/playground/src/core/runtime/runtime.vue
 var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1590,6 +1616,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const copyValue = (0, vue.computed)(() => props.files[props.entry] || "");
 		const store = createRuntimeStore(props.files, props.entry, props.options);
 		const sandboxRef = (0, vue.ref)(null);
+		const sandboxKey = (0, vue.ref)(0);
 		const runtimeHeight = useSandboxAutoHeight(sandboxRef);
 		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
 		useSandboxTheme(sandboxRef);
@@ -1672,6 +1699,10 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				onActiveChange: (filename) => store.setActive(toReplFilename(filename))
 			});
 		};
+		const handleRefresh = () => {
+			runtimeError.value = "";
+			sandboxKey.value++;
+		};
 		const handleView = (view) => emit("view-change", view);
 		const handleViewport = (index) => {
 			const viewport = props.viewportOptions[index];
@@ -1709,6 +1740,14 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"preview-options": mergedPreviewOptions.value
 			}, null, 8, ["store", "preview-options"])], 4)], 4)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [
 				(0, vue.createElementVNode)("div", _hoisted_3, [(0, vue.createElementVNode)("div", _hoisted_4, [
+					(0, vue.createElementVNode)("button", {
+						type: "button",
+						class: "docs-playground__tool docs-playground__refresh",
+						"data-action": "refresh",
+						title: (0, vue.unref)(t)("playground.runtime.refresh"),
+						"aria-label": (0, vue.unref)(t)("playground.runtime.refresh"),
+						onClick: handleRefresh
+					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "refresh" })], 8, _hoisted_5),
 					__props.viewportOptions.length > 1 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_deot_vc.Dropdown), {
 						key: 0,
 						modelValue: viewportMenuVisible.value,
@@ -1751,7 +1790,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"aria-label": (0, vue.unref)(t)("playground.runtime.viewport", { value: viewportLabel.value }),
 							"aria-expanded": viewportMenuVisible.value,
 							"aria-haspopup": "menu"
-						}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "viewport" })], 10, _hoisted_5)]),
+						}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "viewport" })], 10, _hoisted_6)]),
 						_: 1
 					}, 8, ["modelValue"])) : (0, vue.createCommentVNode)("v-if", true),
 					(0, vue.createVNode)((0, vue.unref)(_deot_vc.Clipboard), {
@@ -1776,8 +1815,8 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						title: (0, vue.unref)(t)("playground.runtime.editFiles"),
 						"aria-label": (0, vue.unref)(t)("playground.runtime.editFiles"),
 						onClick: handleEditor
-					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "editor" })], 8, _hoisted_6)
-				]), __props.views.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_7, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.views, (item) => {
+					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: "editor" })], 8, _hoisted_7)
+				]), __props.views.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_8, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.views, (item) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 						key: item,
 						type: "button",
@@ -1786,23 +1825,24 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"aria-label": getViewText(item),
 						"aria-pressed": item === __props.activeView,
 						onClick: ($event) => handleView(item)
-					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: item }, null, 8, ["name"])], 10, _hoisted_8);
+					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), { name: item }, null, 8, ["name"])], 10, _hoisted_9);
 				}), 128))])) : (0, vue.createCommentVNode)("v-if", true)]),
-				errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_9, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
+				errorText.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("pre", _hoisted_10, (0, vue.toDisplayString)(errorText.value), 1)) : (0, vue.createCommentVNode)("v-if", true),
 				(0, vue.createElementVNode)("section", {
 					class: "docs-playground__preview",
 					style: (0, vue.normalizeStyle)(previewStyle.value)
-				}, [(0, vue.createElementVNode)("div", _hoisted_10, [(0, vue.createElementVNode)("div", {
+				}, [(0, vue.createElementVNode)("div", _hoisted_11, [(0, vue.createElementVNode)("div", {
 					class: "docs-playground-runtime__viewport",
 					style: (0, vue.normalizeStyle)(viewportStyle.value)
-				}, [(0, vue.createVNode)((0, vue.unref)(_vue_repl.Sandbox), {
+				}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_vue_repl.Sandbox), {
+					key: sandboxKey.value,
 					ref_key: "sandboxRef",
 					ref: sandboxRef,
 					store: (0, vue.unref)(store),
 					"auto-store-init": false,
 					"clear-console": clearConsole,
 					"preview-options": mergedPreviewOptions.value
-				}, null, 8, ["store", "preview-options"])], 4)])], 4)
+				}, null, 8, ["store", "preview-options"]))], 4)])], 4)
 			]));
 		};
 	}

package/dist/index.js

@@ -81,16 +81,40 @@ var highlightCodeByLanguage = (code, language) => {
 var highlightCode = (code, filename) => highlightCodeByLanguage(code, resolveHighlightLanguage(filename));
 //#endregion
 //#region packages/playground/src/icon/icons.ts
-var PLAYGROUND_ICON_PATHS = {
-	runtime: "M5 3h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm3 18h8m-4-3v3m-2-13 5 3-5 3V8Z",
-	files: "M6 2h8l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 0v6h5m-9 5-2 2 2 2m5-4 2 2-2 2",
-	copy: "M9 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2Zm-2 8H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4",
-	editor: "M8 8 4 12l4 4m8-8 4 4-4 4m-3-10-2 12",
-	viewport: "M3 4h12v10H3V4Zm3 14h6m-3-4v4m9-9h3v11h-6V9h3m0 9h0"
+var strokeIcon = (path) => ({
+	path,
+	fill: "none",
+	stroke: "currentColor"
+});
+var solidIcon = (path) => ({
+	path,
+	fill: "currentColor",
+	stroke: "none"
+});
+var PLAYGROUND_ICONS = {
+	runtime: strokeIcon("M5 3h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm3 18h8m-4-3v3m-2-13 5 3-5 3V8Z"),
+	files: strokeIcon("M6 2h8l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 0v6h5m-9 5-2 2 2 2m5-4 2 2-2 2"),
+	copy: strokeIcon(["M9 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2Z", "m-2 8H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4"].join("")),
+	refresh: solidIcon(["M12 2.5a9.5 9.5 0 1 1 0 19 1 1 0 1 1 0-2 7.5 7.5 0 1 0-7.5-7.8l.24-.23a.75.75 0 1 1 1.06 1.06", "L4.03 14.3a.75.75 0 0 1-1.06 0L1.2 12.53a.75.75 0 1 1 1.06-1.06l.24.24A9.5 9.5 0 0 1 12 2.5"].join("")),
+	editor: solidIcon([
+		"M9.38 19.32a.82.82 0 0 1-.71-1.23l5.85-10.13a.82.82 0 0 1 1.42.82l-5.85 10.13a.8.8 0 0 1-.71.4",
+		"m-2.52-.76a.8.8 0 0 1-.58-.25l-4.13-4.12a1.06 1.06 0 0 1 0-1.5l4.13-4.12a.82.82 0 1 1 1.16 1.16",
+		"l-3.72 3.71 3.72 3.71a.82.82 0 0 1-.58 1.4m10.9 0a.82.82 0 0 1-.58-1.4l3.7-3.7-3.7-3.72",
+		"a.82.82 0 1 1 1.16-1.16l4.12 4.13c.41.4.41 1.08 0 1.49l-4.12 4.12a.8.8 0 0 1-.59.25"
+	].join("")),
+	viewport: solidIcon([
+		"M21.82 2.93c-.3-.3-.7-.47-1.1-.47H4.6c-.87 0-1.58.7-1.58 1.58v4.18h1.12V3.67h17v12.54",
+		"c0 .25-.2.46-.45.46H9.49v1.13h.67q-.25.66-.6 1.11l-.06.06v1.86h7.86a.56.56 0 1 0 0-1.13",
+		"q-1.46 0-2.2-1.9h5.55c.87 0 1.57-.71 1.57-1.59V4.04a1.6 1.6 0 0 0-.46-1.11M10.55 19.6",
+		"c.43-.63.66-1.08.92-1.81h2.37c.25.8.51 1.26.97 1.77l.03.05zM8.12 8.4H2.9",
+		"c-.64 0-1.17.53-1.17 1.19v10.75c0 .66.53 1.19 1.17 1.19h5.21c.65 0 1.18-.53 1.18-1.19V9.6",
+		"a1.16 1.16 0 0 0-1.17-1.19M8.1 20.36H2.94V9.64h5.15z"
+	].join(""))
 };
 //#endregion
 //#region packages/playground/src/icon/icon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$5 = ["d"];
+var _hoisted_1$5 = ["fill", "stroke"];
+var _hoisted_2$4 = ["d"];
 //#endregion
 //#region packages/playground/src/icon/icon.vue
 var icon_default = /* @__PURE__ */ defineComponent({
@@ -101,6 +125,7 @@ var icon_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
+		const icon = computed(() => PLAYGROUND_ICONS[props.name]);
 		const sizeStyle = computed(() => {
 			if (props.size == null) return;
 			const value = typeof props.size === "number" ? `${props.size}px` : props.size;
@@ -114,13 +139,13 @@ var icon_default = /* @__PURE__ */ defineComponent({
 				class: "docs-playground-icon",
 				viewBox: "0 0 24 24",
 				style: normalizeStyle(sizeStyle.value),
-				fill: "none",
-				stroke: "currentColor",
+				fill: icon.value.fill,
+				stroke: icon.value.stroke,
 				"stroke-width": "1.8",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
 				"aria-hidden": "true"
-			}, [createElementVNode("path", { d: unref(PLAYGROUND_ICON_PATHS)[__props.name] }, null, 8, _hoisted_1$5)], 4);
+			}, [createElementVNode("path", { d: icon.value.path }, null, 8, _hoisted_2$4)], 12, _hoisted_1$5);
 		};
 	}
 });
@@ -448,7 +473,7 @@ var _hoisted_7$1 = ["title", "aria-label"];
 var _hoisted_8$1 = ["title", "aria-label"];
 var _hoisted_9$1 = { class: "docs-playground-editor__actions" };
 var _hoisted_10$1 = ["title"];
-var _hoisted_11 = ["title", "disabled"];
+var _hoisted_11$1 = ["title", "disabled"];
 var _hoisted_12 = {
 	key: 0,
 	class: "docs-playground-editor__error"
@@ -757,7 +782,7 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 						title: unref(t)("playground.editor.setEntry"),
 						disabled: activeFilename.value === currentEntry.value,
 						onClick: handleEntry
-					}, toDisplayString(unref(t)("playground.editor.setEntry")), 9, _hoisted_11)])]),
+					}, toDisplayString(unref(t)("playground.editor.setEntry")), 9, _hoisted_11$1)])]),
 					codeErrorText.value ? (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(codeErrorText.value), 1)) : createCommentVNode("v-if", true),
 					createElementVNode("div", {
 						ref_key: "textarea",
@@ -1488,28 +1513,29 @@ var _hoisted_2 = {
 };
 var _hoisted_3 = { class: "docs-playground__header" };
 var _hoisted_4 = { class: "docs-playground__tools" };
-var _hoisted_5 = [
+var _hoisted_5 = ["title", "aria-label"];
+var _hoisted_6 = [
 	"title",
 	"aria-label",
 	"aria-expanded"
 ];
-var _hoisted_6 = ["title", "aria-label"];
-var _hoisted_7 = {
+var _hoisted_7 = ["title", "aria-label"];
+var _hoisted_8 = {
 	key: 0,
 	class: "docs-playground__views"
 };
-var _hoisted_8 = [
+var _hoisted_9 = [
 	"title",
 	"aria-label",
 	"aria-pressed",
 	"onClick"
 ];
-var _hoisted_9 = {
+var _hoisted_10 = {
 	key: 0,
 	class: "docs-playground__runtime-error",
 	role: "alert"
 };
-var _hoisted_10 = { class: "docs-playground-runtime__viewport-stage" };
+var _hoisted_11 = { class: "docs-playground-runtime__viewport-stage" };
 //#endregion
 //#region packages/playground/src/core/runtime/runtime.vue
 var runtime_default = /* @__PURE__ */ defineComponent({
@@ -1563,6 +1589,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		const copyValue = computed(() => props.files[props.entry] || "");
 		const store = createRuntimeStore(props.files, props.entry, props.options);
 		const sandboxRef = ref(null);
+		const sandboxKey = ref(0);
 		const runtimeHeight = useSandboxAutoHeight(sandboxRef);
 		const runtimeError = useSandboxRuntimeErrorGuard(sandboxRef);
 		useSandboxTheme(sandboxRef);
@@ -1645,6 +1672,10 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				onActiveChange: (filename) => store.setActive(toReplFilename(filename))
 			});
 		};
+		const handleRefresh = () => {
+			runtimeError.value = "";
+			sandboxKey.value++;
+		};
 		const handleView = (view) => emit("view-change", view);
 		const handleViewport = (index) => {
 			const viewport = props.viewportOptions[index];
@@ -1682,6 +1713,14 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 				"preview-options": mergedPreviewOptions.value
 			}, null, 8, ["store", "preview-options"])], 4)], 4)) : (openBlock(), createElementBlock("div", _hoisted_2, [
 				createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [
+					createElementVNode("button", {
+						type: "button",
+						class: "docs-playground__tool docs-playground__refresh",
+						"data-action": "refresh",
+						title: unref(t)("playground.runtime.refresh"),
+						"aria-label": unref(t)("playground.runtime.refresh"),
+						onClick: handleRefresh
+					}, [createVNode(unref(icon_default), { name: "refresh" })], 8, _hoisted_5),
 					__props.viewportOptions.length > 1 ? (openBlock(), createBlock(unref(Dropdown), {
 						key: 0,
 						modelValue: viewportMenuVisible.value,
@@ -1724,7 +1763,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 							"aria-label": unref(t)("playground.runtime.viewport", { value: viewportLabel.value }),
 							"aria-expanded": viewportMenuVisible.value,
 							"aria-haspopup": "menu"
-						}, [createVNode(unref(icon_default), { name: "viewport" })], 10, _hoisted_5)]),
+						}, [createVNode(unref(icon_default), { name: "viewport" })], 10, _hoisted_6)]),
 						_: 1
 					}, 8, ["modelValue"])) : createCommentVNode("v-if", true),
 					createVNode(unref(Clipboard), {
@@ -1749,8 +1788,8 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 						title: unref(t)("playground.runtime.editFiles"),
 						"aria-label": unref(t)("playground.runtime.editFiles"),
 						onClick: handleEditor
-					}, [createVNode(unref(icon_default), { name: "editor" })], 8, _hoisted_6)
-				]), __props.views.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_7, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.views, (item) => {
+					}, [createVNode(unref(icon_default), { name: "editor" })], 8, _hoisted_7)
+				]), __props.views.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_8, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.views, (item) => {
 					return openBlock(), createElementBlock("button", {
 						key: item,
 						type: "button",
@@ -1759,23 +1798,24 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 						"aria-label": getViewText(item),
 						"aria-pressed": item === __props.activeView,
 						onClick: ($event) => handleView(item)
-					}, [createVNode(unref(icon_default), { name: item }, null, 8, ["name"])], 10, _hoisted_8);
+					}, [createVNode(unref(icon_default), { name: item }, null, 8, ["name"])], 10, _hoisted_9);
 				}), 128))])) : createCommentVNode("v-if", true)]),
-				errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_9, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true),
+				errorText.value ? (openBlock(), createElementBlock("pre", _hoisted_10, toDisplayString(errorText.value), 1)) : createCommentVNode("v-if", true),
 				createElementVNode("section", {
 					class: "docs-playground__preview",
 					style: normalizeStyle(previewStyle.value)
-				}, [createElementVNode("div", _hoisted_10, [createElementVNode("div", {
+				}, [createElementVNode("div", _hoisted_11, [createElementVNode("div", {
 					class: "docs-playground-runtime__viewport",
 					style: normalizeStyle(viewportStyle.value)
-				}, [createVNode(unref(Sandbox), {
+				}, [(openBlock(), createBlock(unref(Sandbox), {
+					key: sandboxKey.value,
 					ref_key: "sandboxRef",
 					ref: sandboxRef,
 					store: unref(store),
 					"auto-store-init": false,
 					"clear-console": clearConsole,
 					"preview-options": mergedPreviewOptions.value
-				}, null, 8, ["store", "preview-options"])], 4)])], 4)
+				}, null, 8, ["store", "preview-options"]))], 4)])], 4)
 			]));
 		};
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/docs-playground",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -18,7 +18,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/docs-locale": "^1.0.6",
+    "@deot/docs-locale": "^1.0.7",
     "@deot/docs-theme": "^1.0.5",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-javascript": "^6.2.4",