@deot/docs-playground 1.0.7 → 1.0.9

package/dist/index.cjs

@@ -105,34 +105,71 @@ 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 = {
-	class: "docs-playground-icon",
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	"stroke-width": "1.8",
-	"stroke-linecap": "round",
-	"stroke-linejoin": "round",
-	"aria-hidden": "true"
-};
+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)({
 	__name: "icon",
-	props: { name: {} },
+	props: {
+		name: {},
+		size: {}
+	},
 	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;
+			return {
+				width: value,
+				height: value
+			};
+		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$5, [(0, vue.createElementVNode)("path", { d: (0, vue.unref)(PLAYGROUND_ICON_PATHS)[__props.name] }, null, 8, _hoisted_2$4)]);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", {
+				class: "docs-playground-icon",
+				viewBox: "0 0 24 24",
+				style: (0, vue.normalizeStyle)(sizeStyle.value),
+				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: icon.value.path }, null, 8, _hoisted_2$4)], 12, _hoisted_1$5);
 		};
 	}
 });
@@ -460,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"
@@ -692,7 +729,10 @@ var editor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						ref_key: "bar",
 						ref: bar,
 						class: "docs-playground-editor__header"
-					}, [_cache[3] || (_cache[3] = (0, vue.createElementVNode)("span", null, "</>", -1)), (0, vue.createElementVNode)("span", {
+					}, [(0, vue.createVNode)((0, vue.unref)(icon_default), {
+						name: "editor",
+						size: 24
+					}), (0, vue.createElementVNode)("span", {
 						title: (0, vue.unref)(t)("playground.common.close"),
 						style: { "cursor": "pointer" },
 						onClick: handleHide
@@ -766,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",
@@ -1500,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)({
@@ -1532,6 +1573,7 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		views: { default: () => ["runtime"] },
 		activeView: { default: "runtime" },
 		options: {},
+		previewInset: { default: 10 },
 		previewOptions: {},
 		styleless: {
 			type: Boolean,
@@ -1574,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);
@@ -1594,7 +1637,19 @@ var runtime_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const viewportMenuVisible = (0, vue.ref)(false);
 		const viewportLabel = (0, vue.computed)(() => formatViewportLabel(props.viewport, t("playground.runtime.auto")));
 		const desiredViewportHeight = (0, vue.computed)(() => getViewportHeight(props.viewport) || runtimeHeight.value);
-		const previewStyle = (0, vue.computed)(() => ({ height: `${desiredViewportHeight.value + 20}px` }));
+		const normalizedPreviewInset = (0, vue.computed)(() => {
+			const value = props.previewInset;
+			if (typeof value === "number") return Number.isFinite(value) && value >= 0 ? [value, value] : [10, 10];
+			if (Array.isArray(value) && value.length === 2 && value.every((item) => typeof item === "number" && Number.isFinite(item) && item >= 0)) return [value[0], value[1]];
+			return [10, 10];
+		});
+		const previewStyle = (0, vue.computed)(() => {
+			const [vertical, horizontal] = normalizedPreviewInset.value;
+			return {
+				height: `${desiredViewportHeight.value + vertical * 2}px`,
+				padding: vertical === horizontal ? `${vertical}px` : `${vertical}px ${horizontal}px`
+			};
+		});
 		const stylelessStyle = (0, vue.computed)(() => errorText.value ? void 0 : { height: `${desiredViewportHeight.value}px` });
 		const viewportStyle = (0, vue.computed)(() => {
 			const width = getViewportWidth(props.viewport);
@@ -1644,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];
@@ -1681,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,
@@ -1723,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), {
@@ -1748,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",
@@ -1758,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)
 			]));
 		};
 	}
@@ -1801,6 +1869,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: false
 		},
 		options: { default: () => ({}) },
+		previewInset: { default: 0 },
 		previewOptions: {},
 		locale: {}
 	},
@@ -1933,6 +2002,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				entry: currentEntry.value,
 				options: __props.options,
 				"preview-options": __props.previewOptions,
+				"preview-inset": __props.previewInset,
 				styleless: true,
 				viewport: activeViewport.value,
 				"viewport-options": selectableViewportOptions.value,
@@ -1944,6 +2014,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"entry",
 				"options",
 				"preview-options",
+				"preview-inset",
 				"viewport",
 				"viewport-options"
 			])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -1957,6 +2028,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					entry: currentEntry.value,
 					options: __props.options,
 					"preview-options": __props.previewOptions,
+					"preview-inset": __props.previewInset,
 					"active-view": activeView.value,
 					views: normalizedViews.value,
 					viewport: activeViewport.value,
@@ -1970,6 +2042,7 @@ var playground_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"entry",
 					"options",
 					"preview-options",
+					"preview-inset",
 					"active-view",
 					"views",
 					"viewport",

package/dist/index.d.ts

@@ -36,6 +36,7 @@ entry: string;
 views: readonly string[];
 modelValue: string;
 options: PlaygroundOptions;
+previewInset: PlaygroundPreviewInset;
 styleless: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
@@ -56,6 +57,7 @@ declare type __VLS_Props_2 = {
     viewportOptions?: readonly unknown[];
     styleless?: boolean;
     options?: PlaygroundOptions;
+    previewInset?: PlaygroundPreviewInset;
     previewOptions?: PlaygroundPreviewOptions;
     locale?: Language;
 };
@@ -166,6 +168,8 @@ export declare type PlaygroundOptions = Omit<Partial<StoreState>, 'builtinImport
     builtinImportMap?: ImportMap;
 };
 
+export declare type PlaygroundPreviewInset = number | [vertical: number, horizontal: number];
+
 export declare type PlaygroundPreviewOptions = SandboxProps['previewOptions'];
 
 export declare type PlaygroundView = 'runtime' | 'files';

package/dist/index.js

@@ -81,34 +81,71 @@ 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 = {
-	class: "docs-playground-icon",
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	"stroke-width": "1.8",
-	"stroke-linecap": "round",
-	"stroke-linejoin": "round",
-	"aria-hidden": "true"
-};
+var _hoisted_1$5 = ["fill", "stroke"];
 var _hoisted_2$4 = ["d"];
 //#endregion
 //#region packages/playground/src/icon/icon.vue
 var icon_default = /* @__PURE__ */ defineComponent({
 	__name: "icon",
-	props: { name: {} },
+	props: {
+		name: {},
+		size: {}
+	},
 	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;
+			return {
+				width: value,
+				height: value
+			};
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("svg", _hoisted_1$5, [createElementVNode("path", { d: unref(PLAYGROUND_ICON_PATHS)[__props.name] }, null, 8, _hoisted_2$4)]);
+			return openBlock(), createElementBlock("svg", {
+				class: "docs-playground-icon",
+				viewBox: "0 0 24 24",
+				style: normalizeStyle(sizeStyle.value),
+				fill: icon.value.fill,
+				stroke: icon.value.stroke,
+				"stroke-width": "1.8",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				"aria-hidden": "true"
+			}, [createElementVNode("path", { d: icon.value.path }, null, 8, _hoisted_2$4)], 12, _hoisted_1$5);
 		};
 	}
 });
@@ -436,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"
@@ -668,7 +705,10 @@ var Editor = new Portal(/* @__PURE__ */ defineComponent({
 						ref_key: "bar",
 						ref: bar,
 						class: "docs-playground-editor__header"
-					}, [_cache[3] || (_cache[3] = createElementVNode("span", null, "</>", -1)), createElementVNode("span", {
+					}, [createVNode(unref(icon_default), {
+						name: "editor",
+						size: 24
+					}), createElementVNode("span", {
 						title: unref(t)("playground.common.close"),
 						style: { "cursor": "pointer" },
 						onClick: handleHide
@@ -742,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",
@@ -1473,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({
@@ -1505,6 +1546,7 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		views: { default: () => ["runtime"] },
 		activeView: { default: "runtime" },
 		options: {},
+		previewInset: { default: 10 },
 		previewOptions: {},
 		styleless: {
 			type: Boolean,
@@ -1547,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);
@@ -1567,7 +1610,19 @@ var runtime_default = /* @__PURE__ */ defineComponent({
 		const viewportMenuVisible = ref(false);
 		const viewportLabel = computed(() => formatViewportLabel(props.viewport, t("playground.runtime.auto")));
 		const desiredViewportHeight = computed(() => getViewportHeight(props.viewport) || runtimeHeight.value);
-		const previewStyle = computed(() => ({ height: `${desiredViewportHeight.value + 20}px` }));
+		const normalizedPreviewInset = computed(() => {
+			const value = props.previewInset;
+			if (typeof value === "number") return Number.isFinite(value) && value >= 0 ? [value, value] : [10, 10];
+			if (Array.isArray(value) && value.length === 2 && value.every((item) => typeof item === "number" && Number.isFinite(item) && item >= 0)) return [value[0], value[1]];
+			return [10, 10];
+		});
+		const previewStyle = computed(() => {
+			const [vertical, horizontal] = normalizedPreviewInset.value;
+			return {
+				height: `${desiredViewportHeight.value + vertical * 2}px`,
+				padding: vertical === horizontal ? `${vertical}px` : `${vertical}px ${horizontal}px`
+			};
+		});
 		const stylelessStyle = computed(() => errorText.value ? void 0 : { height: `${desiredViewportHeight.value}px` });
 		const viewportStyle = computed(() => {
 			const width = getViewportWidth(props.viewport);
@@ -1617,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];
@@ -1654,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,
@@ -1696,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), {
@@ -1721,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",
@@ -1731,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)
 			]));
 		};
 	}
@@ -1774,6 +1842,7 @@ var playground_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		options: { default: () => ({}) },
+		previewInset: { default: 0 },
 		previewOptions: {},
 		locale: {}
 	},
@@ -1906,6 +1975,7 @@ var playground_default = /* @__PURE__ */ defineComponent({
 				entry: currentEntry.value,
 				options: __props.options,
 				"preview-options": __props.previewOptions,
+				"preview-inset": __props.previewInset,
 				styleless: true,
 				viewport: activeViewport.value,
 				"viewport-options": selectableViewportOptions.value,
@@ -1917,6 +1987,7 @@ var playground_default = /* @__PURE__ */ defineComponent({
 				"entry",
 				"options",
 				"preview-options",
+				"preview-inset",
 				"viewport",
 				"viewport-options"
 			])) : (openBlock(), createElementBlock("div", {
@@ -1930,6 +2001,7 @@ var playground_default = /* @__PURE__ */ defineComponent({
 					entry: currentEntry.value,
 					options: __props.options,
 					"preview-options": __props.previewOptions,
+					"preview-inset": __props.previewInset,
 					"active-view": activeView.value,
 					views: normalizedViews.value,
 					viewport: activeViewport.value,
@@ -1943,6 +2015,7 @@ var playground_default = /* @__PURE__ */ defineComponent({
 					"entry",
 					"options",
 					"preview-options",
+					"preview-inset",
 					"active-view",
 					"views",
 					"viewport",

package/dist/index.style.css

@@ -1 +1 @@
-.docs-playground-icon{display:block;width:18px;height:18px}.docs-playground-files{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;max-height:100%;min-height:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.docs-playground-files__toolbar{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:hidden;-webkit-box-shadow:inset 0 -1px var(--docs-border-color,var(--vc-color-light-deeper,#dedede));box-shadow:inset 0 -1px var(--docs-border-color,var(--vc-color-light-deeper,#dedede));-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 44px;-ms-flex:0 0 44px;flex:0 0 44px}.docs-playground-files__scroller{width:0;height:44px;min-width:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-playground-files__scroller .vc-scroller__wrapper{height:44px;overflow-y:hidden!important;scrollbar-width:none}.docs-playground-files__scroller .vc-scroller__wrapper::-webkit-scrollbar{display:none}.docs-playground-files__scroller .vc-scroller-track.is-y{display:none!important}.docs-playground-files__tabs{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:44px;min-width:100%;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box;gap:4px}.docs-playground-files__tab{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:44px;padding:0 14px;font:inherit;font-size:15px;line-height:44px;color:var(--docs-foreground-color-light,var(--vc-color-dark-lighter,#52525b));white-space:nowrap;cursor:pointer;background:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;gap:5px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground-files__tab.is-active{color:var(--docs-foreground-color,var(--vc-foreground-color,#18181b))}.docs-playground-files__tab.is-active:after{position:absolute;right:8px;bottom:0;left:8px;height:3px;background:#5495f6;border-radius:2px 2px 0 0;content:""}.docs-playground-files__entry{font-size:10px;line-height:16px;color:var(--docs-foreground-color-mute,var(--vc-color-dark-extralight,#71717a))}.docs-playground-files__actions{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:44px;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground-files__body{min-height:0;border-radius:0;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-playground__views--files{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:44px;padding:0 12px;-webkit-box-sizing:border-box;box-sizing:border-box;gap:4px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground__view{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:28px;height:28px;padding:0;font:inherit;color:var(--docs-foreground-color-mute,var(--vc-color-dark-lightest,#64748b));cursor:pointer;background:transparent;border:0;border-radius:8px;-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-playground__view.is-active{color:#fff;background:#2563eb}.docs-playground-editor button{padding:3px 7px;color:var(--docs-foreground-color-light,var(--vc-color-dark-lighter));white-space:nowrap;cursor:pointer;background:var(--docs-background-color,var(--vc-background-color-light));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper));border-radius:8px}.docs-playground-editor button:disabled{cursor:not-allowed;opacity:.5}.docs-playground-editor__wrapper{position:fixed;right:10px;bottom:10px;z-index:1001;width:680px;font-size:13px;color:var(--docs-foreground-color-light,var(--vc-color-dark-lighter));background:var(--docs-background-color,var(--vc-background-color-light));border-radius:8px;opacity:1;-webkit-box-shadow:0 0 50px rgba(0,0,0,.2);box-shadow:0 0 50px rgba(0,0,0,.2)}.docs-playground-editor__header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:10px;font-size:20px;line-height:20px;cursor:move;background:var(--docs-background-color-soft,var(--vc-background-color))!important;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground-editor__files{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;min-width:0;padding:6px 8px;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color));border-top:1px solid var(--docs-border-color,var(--vc-color-light-deeper));border-bottom:1px solid var(--docs-border-color,var(--vc-color-light-deeper));-webkit-box-sizing:border-box;box-sizing:border-box;gap:8px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.docs-playground-editor__actions{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;gap:4px}.docs-playground-editor__scroller{width:0;min-width:0;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1 1;-ms-flex:1 1;flex:1 1}.docs-playground-editor__scroller .vc-scroller__wrapper{scrollbar-width:none}.docs-playground-editor__scroller .vc-scroller__wrapper::-webkit-scrollbar{display:none}.docs-playground-editor__tabs{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:100%;padding:6px 6px 0 0;-webkit-box-sizing:border-box;box-sizing:border-box;gap:8px}.docs-playground-editor__tab{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:26px;padding:3px 12px 3px 7px;line-height:18px;white-space:nowrap;cursor:pointer;background:var(--docs-background-color,var(--vc-background-color-light));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper));border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;gap:5px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground-editor__tab.is-active{color:#fff;background:#2563eb;border-color:#2563eb}.docs-playground-editor__filename{width:100px;height:18px;padding:0 3px;font:inherit;line-height:16px;color:var(--docs-foreground-color-light,var(--vc-color-dark-lighter));background:var(--docs-background-color,var(--vc-background-color-light));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper));-webkit-box-sizing:border-box;box-sizing:border-box}.docs-playground-editor__close{position:absolute;top:-6px;right:-6px;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:14px;height:14px;padding:0;font-size:0;line-height:0;color:#fff;background-color:#5495f6!important;border:0;border-radius:7px;-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-playground-editor__close:after,.docs-playground-editor__close:before{position:absolute;top:50%;left:50%;width:8px;height:1px;background-color:currentcolor;content:""}.docs-playground-editor__close:before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.docs-playground-editor__close:after{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.docs-playground-editor__delete{position:static!important}.docs-playground-editor__error{padding:5px 10px;color:var(--vc-color-error,#b91c1c);white-space:pre-wrap;background:var(--docs-error-background,#fef2f2)}.docs-playground-editor__editor{min-height:240px;padding:1px;background:var(--docs-code-background,var(--vc-background-color))!important}.docs-playground-runtime{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-playground-runtime,.docs-playground-runtime--styleless{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;min-height:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.docs-playground-runtime--styleless{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground-runtime--styleless .docs-playground__runtime-error{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}.docs-playground-runtime__viewport-stage{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:100%;min-width:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.docs-playground-runtime__viewport{position:relative;height:100%;min-width:0;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}.docs-playground__header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0 12px;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))!important;-webkit-box-shadow:inset 0 -1px var(--docs-border-color,var(--vc-color-light-deeper,#edeff1));box-shadow:inset 0 -1px var(--docs-border-color,var(--vc-color-light-deeper,#edeff1));-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex:0 0 44px;-ms-flex:0 0 44px;flex:0 0 44px}.docs-playground__views{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px}.docs-playground__view{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:28px;height:28px;padding:0;font:inherit;color:var(--docs-foreground-color-mute,var(--vc-color-dark-lightest,#64748b));cursor:pointer;background:transparent;border:0;border-radius:8px;-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-playground__view.is-active{color:var(--vc-color-light,#fff);background:#2563eb}.docs-playground__tools{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:4px;margin-left:auto;font-size:14px;line-height:20px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground__tool{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:28px;height:28px;padding:0;font:inherit;color:var(--docs-foreground-color-mute,var(--vc-color-dark-lightest,#64748b));cursor:pointer;background:transparent;border:0;border-radius:8px;-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-playground__tool.is-active,.docs-playground__tool:hover{color:#2563eb;background:var(--docs-primary-color-light,var(--vc-color-primary-lighter,#e8eef8))}.docs-playground__viewport-menu{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex}.docs-playground__viewport-trigger .docs-playground-icon{width:20px;height:20px}.docs-playground__viewport-options{min-width:136px}.docs-playground__viewport-option{white-space:nowrap}.docs-playground__editor .docs-playground-icon{width:22px;height:22px}.docs-playground__preview{min-height:0;padding:10px;overflow:hidden;background:var(--docs-background-color,var(--vc-background-color-light,#fff));-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-playground__runtime-error{max-height:240px;padding:12px 16px;margin:0;overflow:auto;font:inherit;font-size:13px;line-height:1.6;color:var(--vc-color-error,#b91c1c);white-space:pre-wrap;background:var(--docs-error-background,#fef2f2);border-top:1px solid #f5c2c2;-webkit-box-sizing:border-box;box-sizing:border-box;overflow-wrap:anywhere}@media (prefers-color-scheme:light){:root{--docs-background-color:#fff;--docs-background-color-soft:#f7f8fa;--docs-background-color-mute:#f2f3f5;--docs-foreground-color:#17233d;--docs-foreground-color-light:#515a6e;--docs-foreground-color-mute:#808695;--docs-border-color:#e8eaec;--docs-border-color-light:#f0f1f2;--docs-primary-color:#873bf4;--docs-primary-color-light:#f2ebfe;--docs-link-color:#2d8cf0;--docs-mask-color:hsla(0,0%,100%,.72);--docs-shadow-color:rgba(0,0,0,.14);--docs-code-background:#f6f8fa;--docs-footer-background:#141313;--docs-footer-foreground:#999;--docs-tip-background:#f9f0ff;--docs-warning-background:#fff6f7;--docs-error-color:#ed4014;--docs-error-background:#fef2f2}}@media (prefers-color-scheme:dark){:root{--docs-background-color:#171b24;--docs-background-color-soft:#252b3a;--docs-background-color-mute:#303748;--docs-foreground-color:#f8f8f8;--docs-foreground-color-light:#d9d9d9;--docs-foreground-color-mute:#b9b9b9;--docs-border-color:#3b4355;--docs-border-color-light:#303748;--docs-primary-color:#873bf4;--docs-primary-color-light:#35244d;--docs-link-color:#6daeff;--docs-mask-color:rgba(10,13,18,.76);--docs-shadow-color:rgba(0,0,0,.45);--docs-code-background:#202630;--docs-footer-background:#0d0f14;--docs-footer-foreground:#999;--docs-tip-background:#30223f;--docs-warning-background:#3d2529;--docs-error-color:#ff6b6b;--docs-error-background:#41272b}}[data-doc-theme=light],[data-vc-theme=light]{--docs-background-color:#fff;--docs-background-color-soft:#f7f8fa;--docs-background-color-mute:#f2f3f5;--docs-foreground-color:#17233d;--docs-foreground-color-light:#515a6e;--docs-foreground-color-mute:#808695;--docs-border-color:#e8eaec;--docs-border-color-light:#f0f1f2;--docs-primary-color:#873bf4;--docs-primary-color-light:#f2ebfe;--docs-link-color:#2d8cf0;--docs-mask-color:hsla(0,0%,100%,.72);--docs-shadow-color:rgba(0,0,0,.14);--docs-code-background:#f6f8fa;--docs-footer-background:#141313;--docs-footer-foreground:#999;--docs-tip-background:#f9f0ff;--docs-warning-background:#fff6f7;--docs-error-color:#ed4014;--docs-error-background:#fef2f2}[data-doc-theme=dark],[data-vc-theme=dark]{--docs-background-color:#171b24;--docs-background-color-soft:#252b3a;--docs-background-color-mute:#303748;--docs-foreground-color:#f8f8f8;--docs-foreground-color-light:#d9d9d9;--docs-foreground-color-mute:#b9b9b9;--docs-border-color:#3b4355;--docs-border-color-light:#303748;--docs-primary-color:#873bf4;--docs-primary-color-light:#35244d;--docs-link-color:#6daeff;--docs-mask-color:rgba(10,13,18,.76);--docs-shadow-color:rgba(0,0,0,.45);--docs-code-background:#202630;--docs-footer-background:#0d0f14;--docs-footer-foreground:#999;--docs-tip-background:#30223f;--docs-warning-background:#3d2529;--docs-error-color:#ff6b6b;--docs-error-background:#41272b}.docs-playground{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;margin-bottom:16px;overflow:hidden;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.docs-playground--files{height:100%;min-height:0;overflow:hidden;background:var(--docs-code-background,var(--vc-background-color,#f6f8fa));-webkit-box-shadow:none;box-shadow:none}.docs-playground__error{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-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}/*$vite$:1*/
+.docs-playground-icon{display:block;width:18px;height:18px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.docs-playground-files{height:100%;max-height:100%;min-height:0;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.docs-playground-files,.docs-playground-files__toolbar{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))}.docs-playground-files__toolbar{border-bottom:1px solid var(--docs-border-color,var(--vc-color-light-deeper,#e5e7eb));-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 44px;-ms-flex:0 0 44px;flex:0 0 44px}.docs-playground-files__scroller{width:0;height:44px;min-width:0;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-playground-files__scroller .vc-scroller__wrapper{height:44px;overflow-y:hidden!important;scrollbar-width:none}.docs-playground-files__scroller .vc-scroller__wrapper::-webkit-scrollbar{display:none}.docs-playground-files__scroller .vc-scroller-track.is-y{display:none!important}.docs-playground-files__tabs{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:44px;min-width:100%;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box;gap:4px}.docs-playground-files__tab{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:44px;padding:0 14px;font:inherit;font-size:15px;line-height:44px;color:var(--docs-foreground-color-light,var(--vc-color-dark-lighter,#52525b));white-space:nowrap;cursor:pointer;background:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;gap:5px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground-files__tab.is-active{color:var(--docs-foreground-color,var(--vc-foreground-color,#18181b))}.docs-playground-files__tab.is-active:after{position:absolute;right:8px;bottom:0;left:8px;height:3px;background:var(--docs-primary-color,var(--vc-color-primary,#5495f6));border-radius:2px 2px 0 0;content:""}.docs-playground-files__entry{font-size:10px;line-height:16px;color:var(--docs-foreground-color-mute,var(--vc-color-dark-extralight,#71717a))}.docs-playground-files__actions{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:44px;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa));-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground-files__body{min-height:0;border-radius:0;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-playground__views--files{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:28px;padding:0 12px 0 8px;margin-left:4px;border-left:1px solid var(--docs-border-color,var(--vc-color-light-deeper,#e5e7eb));-webkit-box-sizing:border-box;box-sizing:border-box;gap:4px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground__view{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:28px;height:28px;padding:0;font:inherit;color:var(--docs-foreground-color-mute,var(--vc-color-dark-lightest,#64748b));cursor:pointer;background:transparent;border:0;border-radius:8px;-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;-webkit-transition:color .15s ease,background-color .15s ease;transition:color .15s ease,background-color .15s ease}.docs-playground__view .docs-playground-icon{width:18px;height:18px}.docs-playground__view:hover{color:var(--docs-primary-color,var(--vc-color-primary,#2563eb));background:var(--docs-primary-color-light,var(--vc-color-primary-lighter,#e8eef8))}.docs-playground__view:focus-visible{outline:2px solid var(--docs-primary-color,var(--vc-color-primary,#2563eb));outline-offset:1px}.docs-playground__view.is-active{color:var(--docs-primary-color,var(--vc-color-primary,#2563eb));background:var(--docs-primary-color-light,var(--vc-color-primary-lighter,#e8eef8))}.docs-playground-editor button{padding:3px 7px;color:var(--docs-foreground-color-light,var(--vc-color-dark-lighter));white-space:nowrap;cursor:pointer;background:var(--docs-background-color,var(--vc-background-color-light));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper));border-radius:8px}.docs-playground-editor button:disabled{cursor:not-allowed;opacity:.5}.docs-playground-editor__wrapper{position:fixed;right:10px;bottom:10px;z-index:1001;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:680px;max-height:calc(100vh - 20px);overflow:hidden;font-size:13px;color:var(--docs-foreground-color-light,var(--vc-color-dark-lighter));background:var(--docs-background-color,var(--vc-background-color-light));border-radius:8px;opacity:1;-webkit-box-shadow:0 0 50px rgba(0,0,0,.2);box-shadow:0 0 50px rgba(0,0,0,.2);-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.docs-playground-editor__header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:10px;font-size:20px;line-height:20px;cursor:move;background:var(--docs-background-color-soft,var(--vc-background-color))!important;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground-editor__files{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;min-width:0;padding:6px 8px;overflow:hidden;background:var(--docs-background-color-soft,var(--vc-background-color));border-top:1px solid var(--docs-border-color,var(--vc-color-light-deeper));border-bottom:1px solid var(--docs-border-color,var(--vc-color-light-deeper));-webkit-box-sizing:border-box;box-sizing:border-box;gap:8px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.docs-playground-editor__actions{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;gap:4px}.docs-playground-editor__scroller{width:0;min-width:0;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1 1;-ms-flex:1 1;flex:1 1}.docs-playground-editor__scroller .vc-scroller__wrapper{scrollbar-width:none}.docs-playground-editor__scroller .vc-scroller__wrapper::-webkit-scrollbar{display:none}.docs-playground-editor__tabs{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:100%;padding:6px 6px 0 0;-webkit-box-sizing:border-box;box-sizing:border-box;gap:8px}.docs-playground-editor__tab{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:26px;padding:3px 12px 3px 7px;line-height:18px;white-space:nowrap;cursor:pointer;background:var(--docs-background-color,var(--vc-background-color-light));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper));border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;gap:5px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground-editor__tab.is-active{color:#fff;background:#2563eb;border-color:#2563eb}.docs-playground-editor__filename{width:100px;height:18px;padding:0 3px;font:inherit;line-height:16px;color:var(--docs-foreground-color-light,var(--vc-color-dark-lighter));background:var(--docs-background-color,var(--vc-background-color-light));border:1px solid var(--docs-border-color,var(--vc-color-light-deeper));-webkit-box-sizing:border-box;box-sizing:border-box}.docs-playground-editor__close{position:absolute;top:-6px;right:-6px;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:14px;height:14px;padding:0;font-size:0;line-height:0;color:#fff;background-color:#5495f6!important;border:0;border-radius:7px;-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-playground-editor__close:after,.docs-playground-editor__close:before{position:absolute;top:50%;left:50%;width:8px;height:1px;background-color:currentcolor;content:""}.docs-playground-editor__close:before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.docs-playground-editor__close:after{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.docs-playground-editor__delete{position:static!important}.docs-playground-editor__error{max-height:min(160px,25vh);padding:5px 10px;overflow:auto;color:var(--vc-color-error,#b91c1c);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--docs-error-background,#fef2f2);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}.docs-playground-editor__editor{min-height:240px;padding:1px;overflow:hidden;background:var(--docs-code-background,var(--vc-background-color))!important;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-playground-editor__editor .cm-editor{height:100%}.docs-playground-editor__editor .cm-scroller{overflow:auto}.docs-playground-runtime{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-playground-runtime,.docs-playground-runtime--styleless{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;min-height:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.docs-playground-runtime--styleless{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground-runtime--styleless .docs-playground__runtime-error{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}.docs-playground-runtime__viewport-stage{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:100%;min-width:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.docs-playground-runtime__viewport{position:relative;height:100%;min-width:0;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}.docs-playground .iframe-container,.docs-playground .iframe-container iframe{width:100%;height:100%}.docs-playground .iframe-container iframe{display:block;border:0}.docs-playground__header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0 12px;background:var(--docs-background-color-soft,var(--vc-background-color,#f7f8fa))!important;border-bottom:1px solid var(--docs-border-color,var(--vc-color-light-deeper,#e5e7eb));-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex:0 0 44px;-ms-flex:0 0 44px;flex:0 0 44px}.docs-playground__views{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;margin-left:4px;border-left:1px solid var(--docs-border-color,var(--vc-color-light-deeper,#e5e7eb));gap:4px}.docs-playground__view{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:28px;height:28px;padding:0;font:inherit;color:var(--docs-foreground-color-mute,var(--vc-color-dark-lightest,#64748b));cursor:pointer;background:transparent;border:0;border-radius:8px;-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;-webkit-transition:color .15s ease,background-color .15s ease;transition:color .15s ease,background-color .15s ease}.docs-playground__view:hover{color:var(--docs-primary-color,var(--vc-color-primary,#2563eb));background:var(--docs-primary-color-light,var(--vc-color-primary-lighter,#e8eef8))}.docs-playground__view:focus-visible{outline:2px solid var(--docs-primary-color,var(--vc-color-primary,#2563eb));outline-offset:1px}.docs-playground__view.is-active{color:var(--docs-primary-color,var(--vc-color-primary,#2563eb));background:var(--docs-primary-color-light,var(--vc-color-primary-lighter,#e8eef8))}.docs-playground__tools{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:auto;font-size:14px;line-height:20px;gap:2px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.docs-playground__tool{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:28px;height:28px;padding:0;font:inherit;color:var(--docs-foreground-color-mute,var(--vc-color-dark-lightest,#64748b));cursor:pointer;background:transparent;border:0;border-radius:8px;-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;-webkit-transition:color .15s ease,background-color .15s ease;transition:color .15s ease,background-color .15s ease}.docs-playground__tool .docs-playground-icon{width:18px;height:18px}.docs-playground__tool:hover{color:var(--docs-primary-color,var(--vc-color-primary,#2563eb));background:var(--docs-primary-color-light,var(--vc-color-primary-lighter,#e8eef8))}.docs-playground__tool:focus-visible{outline:2px solid var(--docs-primary-color,var(--vc-color-primary,#2563eb));outline-offset:1px}.docs-playground__tool.is-active{color:var(--docs-primary-color,var(--vc-color-primary,#2563eb));background:var(--docs-primary-color-light,var(--vc-color-primary-lighter,#e8eef8))}.docs-playground__viewport-menu{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex}.docs-playground__viewport-trigger .docs-playground-icon{width:18px;height:18px}.docs-playground__viewport-options{min-width:136px}.docs-playground__viewport-option{white-space:nowrap}.docs-playground__editor .docs-playground-icon{width:18px;height:18px}.docs-playground__preview{min-height:0;overflow:hidden;background:var(--docs-background-color,var(--vc-background-color-light,#fff));-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.docs-playground__runtime-error{max-height:240px;padding:12px 16px;margin:0;overflow:auto;font:inherit;font-size:13px;line-height:1.6;color:var(--vc-color-error,#b91c1c);white-space:pre-wrap;background:var(--docs-error-background,#fef2f2);border-top:1px solid #f5c2c2;-webkit-box-sizing:border-box;box-sizing:border-box;overflow-wrap:anywhere}@media (prefers-color-scheme:light){:root{--docs-background-color:#fff;--docs-background-color-soft:#f7f8fa;--docs-background-color-mute:#f2f3f5;--docs-foreground-color:#17233d;--docs-foreground-color-light:#515a6e;--docs-foreground-color-mute:#808695;--docs-border-color:#e8eaec;--docs-border-color-light:#f0f1f2;--docs-primary-color:#873bf4;--docs-primary-color-light:#f2ebfe;--docs-link-color:#2d8cf0;--docs-mask-color:hsla(0,0%,100%,.72);--docs-shadow-color:rgba(0,0,0,.14);--docs-code-background:#f6f8fa;--docs-footer-background:#141313;--docs-footer-foreground:#999;--docs-tip-background:#f9f0ff;--docs-warning-background:#fff6f7;--docs-error-color:#ed4014;--docs-error-background:#fef2f2}}@media (prefers-color-scheme:dark){:root{--docs-background-color:#171b24;--docs-background-color-soft:#252b3a;--docs-background-color-mute:#303748;--docs-foreground-color:#f8f8f8;--docs-foreground-color-light:#d9d9d9;--docs-foreground-color-mute:#b9b9b9;--docs-border-color:#3b4355;--docs-border-color-light:#303748;--docs-primary-color:#873bf4;--docs-primary-color-light:#35244d;--docs-link-color:#6daeff;--docs-mask-color:rgba(10,13,18,.76);--docs-shadow-color:rgba(0,0,0,.45);--docs-code-background:#202630;--docs-footer-background:#0d0f14;--docs-footer-foreground:#999;--docs-tip-background:#30223f;--docs-warning-background:#3d2529;--docs-error-color:#ff6b6b;--docs-error-background:#41272b}}[data-doc-theme=light],[data-vc-theme=light]{--docs-background-color:#fff;--docs-background-color-soft:#f7f8fa;--docs-background-color-mute:#f2f3f5;--docs-foreground-color:#17233d;--docs-foreground-color-light:#515a6e;--docs-foreground-color-mute:#808695;--docs-border-color:#e8eaec;--docs-border-color-light:#f0f1f2;--docs-primary-color:#873bf4;--docs-primary-color-light:#f2ebfe;--docs-link-color:#2d8cf0;--docs-mask-color:hsla(0,0%,100%,.72);--docs-shadow-color:rgba(0,0,0,.14);--docs-code-background:#f6f8fa;--docs-footer-background:#141313;--docs-footer-foreground:#999;--docs-tip-background:#f9f0ff;--docs-warning-background:#fff6f7;--docs-error-color:#ed4014;--docs-error-background:#fef2f2}[data-doc-theme=dark],[data-vc-theme=dark]{--docs-background-color:#171b24;--docs-background-color-soft:#252b3a;--docs-background-color-mute:#303748;--docs-foreground-color:#f8f8f8;--docs-foreground-color-light:#d9d9d9;--docs-foreground-color-mute:#b9b9b9;--docs-border-color:#3b4355;--docs-border-color-light:#303748;--docs-primary-color:#873bf4;--docs-primary-color-light:#35244d;--docs-link-color:#6daeff;--docs-mask-color:rgba(10,13,18,.76);--docs-shadow-color:rgba(0,0,0,.45);--docs-code-background:#202630;--docs-footer-background:#0d0f14;--docs-footer-foreground:#999;--docs-tip-background:#30223f;--docs-warning-background:#3d2529;--docs-error-color:#ff6b6b;--docs-error-background:#41272b}.docs-playground{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;margin-bottom:16px;overflow:hidden;background:var(--docs-background-color,var(--vc-background-color-light,#fff));border-radius:8px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.02),0 3px 10px rgba(0,0,0,.03);box-shadow:0 1px 2px rgba(0,0,0,.02),0 3px 10px rgba(0,0,0,.03);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.docs-playground--files{height:100%;min-height:0;overflow:hidden;background:var(--docs-code-background,var(--vc-background-color,#f6f8fa))}.docs-playground__error{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-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}/*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/docs-playground",
-  "version": "1.0.7",
+  "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",