mce 0.18.3 → 0.18.4

package/dist/index.js

@@ -42,6 +42,46 @@ var _0_command_default = defineMixin((editor) => {
 	});
 });
 //#endregion
+//#region src/utils/arrow.ts
+function rotatePoint(center, point, angleRad) {
+	const cos = Math.cos(angleRad);
+	const sin = Math.sin(angleRad);
+	const dx = point.x - center.x;
+	const dy = point.y - center.y;
+	return {
+		x: center.x + (dx * cos - dy * sin),
+		y: center.y + (dx * sin + dy * cos)
+	};
+}
+function getArrowPath(p1, p2, options = {}) {
+	const { size = 10, angle = 30, startMarker = "none", endMarker = "open", roundValues = true } = options;
+	const fmt = (n) => roundValues ? Math.round(n) : n.toFixed(2);
+	let d = `M ${fmt(p1.x)} ${fmt(p1.y)} L ${fmt(p2.x)} ${fmt(p2.y)}`;
+	const theta = Math.atan2(p2.y - p1.y, p2.x - p1.x);
+	const angleRad = angle * Math.PI / 180;
+	if (endMarker !== "none") {
+		const baseWing = {
+			x: p2.x - size,
+			y: p2.y
+		};
+		const wing1 = rotatePoint(p2, baseWing, theta + angleRad);
+		const wing2 = rotatePoint(p2, baseWing, theta - angleRad);
+		if (endMarker === "open") d += ` M ${fmt(wing1.x)} ${fmt(wing1.y)} L ${fmt(p2.x)} ${fmt(p2.y)} L ${fmt(wing2.x)} ${fmt(wing2.y)}`;
+		else if (endMarker === "filled") d += ` M ${fmt(wing1.x)} ${fmt(wing1.y)} L ${fmt(p2.x)} ${fmt(p2.y)} L ${fmt(wing2.x)} ${fmt(wing2.y)} Z`;
+	}
+	if (startMarker !== "none") {
+		const baseWingStart = {
+			x: p1.x + size,
+			y: p1.y
+		};
+		const wing1 = rotatePoint(p1, baseWingStart, theta + angleRad);
+		const wing2 = rotatePoint(p1, baseWingStart, theta - angleRad);
+		if (startMarker === "open") d += ` M ${fmt(wing1.x)} ${fmt(wing1.y)} L ${fmt(p1.x)} ${fmt(p1.y)} L ${fmt(wing2.x)} ${fmt(wing2.y)}`;
+		else if (startMarker === "filled") d += ` M ${fmt(wing1.x)} ${fmt(wing1.y)} L ${fmt(p1.x)} ${fmt(p1.y)} L ${fmt(wing2.x)} ${fmt(wing2.y)} Z`;
+	}
+	return d;
+}
+//#endregion
 //#region src/utils/box.ts
 function boundingBoxToStyle(box) {
 	const style = {
@@ -386,18 +426,26 @@ var _0_config_default = defineMixin((editor) => {
 	}
 	function importConfig() {
 		return new Promise((resolve) => {
-			const { onChange, open } = useFileDialog({
+			const { onChange, onCancel, open } = useFileDialog({
 				accept: ".json",
 				reset: true,
 				multiple: false
 			});
 			onChange(async (files) => {
 				const file = files?.[0];
-				if (file) try {
+				if (!file) {
+					resolve(void 0);
+					return;
+				}
+				try {
 					config.value = JSON.parse(await file.text());
 					resolve(config.value);
-				} catch {}
+				} catch {
+					console.warn("[mce] Failed to parse config file");
+					resolve(void 0);
+				}
 			});
+			onCancel(() => resolve(void 0));
 			open();
 		});
 	}
@@ -4852,6 +4900,7 @@ var _0_context_default = defineMixin((editor, options) => {
 	const camera = ref(new Camera2D({ internalMode: "front" }));
 	const timeline = ref(new Timeline({
 		startTime: 0,
+		currentTime: 0,
 		endTime: 0,
 		loop: true,
 		paused: true
@@ -4890,6 +4939,18 @@ var _0_context_default = defineMixin((editor, options) => {
 	function setCursor(mode) {
 		renderEngine.value.input.setCursor(mode);
 	}
+	let exclusiveRenderDepth = 0;
+	async function runExclusiveRender(fn) {
+		const engine = renderEngine.value;
+		if (exclusiveRenderDepth === 0) engine.stop();
+		exclusiveRenderDepth++;
+		try {
+			return await fn();
+		} finally {
+			exclusiveRenderDepth--;
+			if (exclusiveRenderDepth === 0) engine.start();
+		}
+	}
 	function getGlobalPointer() {
 		const { x = 0, y = 0 } = drawboardPointer.value ?? {};
 		return camera.value.toGlobal({
@@ -4951,6 +5012,7 @@ var _0_context_default = defineMixin((editor, options) => {
 		fonts,
 		assets,
 		renderEngine,
+		runExclusiveRender,
 		timeline,
 		camera,
 		drawboardEffect,
@@ -4998,7 +5060,7 @@ var _0_context_default = defineMixin((editor, options) => {
 		function onSetDoc() {
 			updateNodes();
 		}
-		watch(selection, (value) => {
+		if (options.debug) watch(selection, (value) => {
 			window.$$0 = value[0];
 		});
 		watch(state, () => {
@@ -5140,6 +5202,14 @@ var en_default = {
 	"checkerboard:dot": "Dot checkerboard",
 	"panels": "Panels",
 	"timeline": "Timeline",
+	"play": "Play",
+	"pause": "Pause",
+	"togglePlay": "Play / Pause",
+	"seekStart": "Go to Start",
+	"seekEnd": "Go to End",
+	"stepBackward": "Previous Frame",
+	"stepForward": "Next Frame",
+	"collapse": "Collapse",
 	"statusbar": "Statusbar",
 	"creator": "Create node",
 	"memoryManager": "Manage memory",
@@ -5262,6 +5332,14 @@ var zh_Hans_default = {
 	"panels": "面板",
 	"statusbar": "状态栏",
 	"timeline": "时间线",
+	"play": "播放",
+	"pause": "暂停",
+	"togglePlay": "播放/暂停",
+	"seekStart": "回到开头",
+	"seekEnd": "跳到结尾",
+	"stepBackward": "后退一帧",
+	"stepForward": "前进一帧",
+	"collapse": "折叠",
 	"creator": "创建节点",
 	"memoryManager": "管理内存",
 	"toolbelt": "工具腰带",
@@ -5323,7 +5401,7 @@ var _0_locale_default = defineMixin((editor, options) => {
 		const { locale, localeMessages, fallbackMessages } = messages.value;
 		const value = options.t?.(key, fallback) ?? localeMessages?.[key ?? -1] ?? fallbackMessages?.[key ?? -1] ?? localeMessages?.[fallback ?? -1] ?? fallbackMessages?.[fallback ?? -1];
 		if (value === void 0) console.warn(`[mce] Not found '${key}' key in '${locale}' locale messages.`);
-		return value ?? key ?? fallback;
+		return value ?? key ?? fallback ?? "";
 	}
 	Object.assign(editor, { t });
 });
@@ -5892,6 +5970,7 @@ var exporter_default = defineMixin((editor) => {
 		exporters.delete(name);
 	};
 	const to = (name, options = {}) => {
+		exportProgress.value = 0;
 		const res = exporters.get(name)?.handle({
 			...options,
 			onProgress: (progress) => {
@@ -5900,7 +5979,6 @@ var exporter_default = defineMixin((editor) => {
 			}
 		});
 		if (res instanceof Promise) {
-			exportProgress.value = 0;
 			exporting.value = true;
 			return res.finally(() => {
 				exporting.value = false;
@@ -6047,6 +6125,15 @@ function parseKey(key) {
 		}
 	}).filter(Boolean).sort().join("+");
 }
+var parsedKeyCache = /* @__PURE__ */ new Map();
+function parseKeyMemo(key) {
+	let value = parsedKeyCache.get(key);
+	if (value === void 0) {
+		value = parseKey(key);
+		parsedKeyCache.set(key, value);
+	}
+	return value;
+}
 function parseKeyboardEvent(event) {
 	if (event.key.toLowerCase() === "capslock") return;
 	const { code } = event;
@@ -6112,10 +6199,11 @@ var hotkey_default = defineMixin((editor) => {
 			if (isInputEvent(e)) return;
 			const eKey = parseKeyboardEvent(e);
 			hotkeysData.value.forEach((hotkeyData) => {
+				if (hotkeyData.enabled === false) return;
 				const command = hotkeyData.command;
 				const hotkey = hotkeys.get(command);
 				(Array.isArray(hotkeyData.key) ? hotkeyData.key : [hotkeyData.key]).forEach((key) => {
-					if (eKey === parseKey(key) && (!hotkey?.when || hotkey.when(e))) {
+					if (eKey === parseKeyMemo(key) && (!hotkey?.when || hotkey.when(e))) {
 						if (hotkey?.preventDefault !== false) {
 							e.preventDefault();
 							e.stopPropagation();
@@ -6261,7 +6349,7 @@ var mixins = [
 			const axisX = /* @__PURE__ */ new Set();
 			const axisY = /* @__PURE__ */ new Set();
 			snappers.forEach((snapper) => {
-				const { xLines, yLines } = snapper.get();
+				const { xLines, yLines } = snapper.getLines();
 				xLines?.forEach((v) => axisX.add(v));
 				yLines?.forEach((v) => axisY.add(v));
 			});
@@ -6307,7 +6395,7 @@ var mixins = [
 		});
 	}),
 	defineMixin((editor) => {
-		const { isElement, frames, frameThumbs, log, fonts } = editor;
+		const { isElement, frames, frameThumbs, log, fonts, runExclusiveRender } = editor;
 		async function snapshot() {
 			frameThumbs.value = frames.value.map(() => ({
 				instanceId: -1,
@@ -6325,12 +6413,12 @@ var mixins = [
 			data.style ??= {};
 			data.style.top = 0;
 			data.style.left = 0;
-			return await render({
+			return await runExclusiveRender(() => render({
 				width: data.style.width,
 				height: data.style.height,
 				fonts,
 				data
-			});
+			}));
 		}
 		async function captureFrameScreenshot(index) {
 			const frame = frames.value[index];
@@ -6824,7 +6912,7 @@ var doc_default = definePlugin((editor, options) => {
 			},
 			{
 				command: "newDoc",
-				handle: clearDoc
+				handle: newDoc
 			},
 			{
 				command: "openDoc",
@@ -6935,11 +7023,19 @@ var edit_default = definePlugin((editor, options) => {
 		exec("delete");
 	};
 	let locked = false;
+	let lockTimer;
 	function getPasteLock() {
 		return {
 			locked,
-			lock: () => locked = true,
-			unlock: () => locked = false
+			lock: () => {
+				locked = true;
+				clearTimeout(lockTimer);
+				lockTimer = setTimeout(() => locked = false, 300);
+			},
+			unlock: () => {
+				locked = false;
+				clearTimeout(lockTimer);
+			}
 		};
 	}
 	async function _paste(items) {
@@ -7259,6 +7355,10 @@ var aliases = {
 	close: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z",
 	play: "M8 5.14v14l11-7z",
 	pause: "M14 19h4V5h-4M6 19h4V5H6z",
+	skipPrevious: "M6 18V6h2v12zm3.5-6L18 6v12z",
+	skipNext: "M16 18h2V6h-2M6 18l8.5-6L6 6z",
+	stepBackward: "M15.4 7.41L14 6l-6 6 6 6 1.4-1.4L10.83 12z",
+	stepForward: "M8.6 7.41L10 6l6 6-6 6-1.4-1.4L13.17 12z",
 	gps: "M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m-8.95 5H1v-2h2.05C3.5 6.83 6.83 3.5 11 3.05V1h2v2.05c4.17.45 7.5 3.78 7.95 7.95H23v2h-2.05c-.45 4.17-3.78 7.5-7.95 7.95V23h-2v-2.05C6.83 20.5 3.5 17.17 3.05 13M12 5a7 7 0 0 0-7 7a7 7 0 0 0 7 7a7 7 0 0 0 7-7a7 7 0 0 0-7-7",
 	arrowRight: "M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z",
 	arrowDown: "M12 14.975q-.2 0-.375-.062T11.3 14.7l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062",
@@ -7876,7 +7976,7 @@ var Frame_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/Frames.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$28 = { class: "m-frames" };
+var _hoisted_1$30 = { class: "m-frames" };
 //#endregion
 //#region src/components/Frames.vue
 var Frames_default = /* @__PURE__ */ defineComponent({
@@ -7885,7 +7985,7 @@ var Frames_default = /* @__PURE__ */ defineComponent({
 		const { frames, getConfigRef } = useEditor();
 		const config = getConfigRef("canvas.frame");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$28, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$30, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
 				return openBlock(), createBlock(Frame_default, {
 					key,
 					"model-value": frame,
@@ -8031,7 +8131,7 @@ var history_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/Hover.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$27 = ["data-name"];
+var _hoisted_1$29 = ["data-name"];
 //#endregion
 //#region src/components/Hover.vue
 var Hover_default = /* @__PURE__ */ defineComponent({
@@ -8050,7 +8150,7 @@ var Hover_default = /* @__PURE__ */ defineComponent({
 					borderRadius: `${(unref(hoverElement).style.borderRadius ?? 0) * unref(camera).zoom.x}px`,
 					...hoverElementObb.value.toCssStyle()
 				})
-			}, null, 12, _hoisted_1$27)) : createCommentVNode("", true);
+			}, null, 12, _hoisted_1$29)) : createCommentVNode("", true);
 		};
 	}
 });
@@ -8100,7 +8200,7 @@ var html_default = definePlugin((editor) => {
 //#endregion
 //#region src/plugins/image.ts
 var image_default = definePlugin((editor) => {
-	const { exec, addElement, to, fonts, upload, drawboardEffect } = editor;
+	const { exec, addElement, to, fonts, upload, drawboardEffect, runExclusiveRender } = editor;
 	const insertImage = async (url, options) => {
 		return addElement(await createImageElement(url), {
 			sizeToFit: true,
@@ -8114,7 +8214,7 @@ var image_default = definePlugin((editor) => {
 			saveAs: true,
 			handle: async (options) => {
 				const doc = await to("json", options);
-				const canvas = await render({
+				const canvas = await runExclusiveRender(() => render({
 					data: doc,
 					fonts,
 					width: doc.style.width,
@@ -8128,7 +8228,7 @@ var image_default = definePlugin((editor) => {
 							pixelGrid: false
 						}));
 					}
-				});
+				}));
 				return await new Promise((resolve) => {
 					canvas.toBlob((v) => resolve(v), name === "jpg" ? "image/jpeg" : `image/${name}`);
 				});
@@ -8215,13 +8315,16 @@ var import_default = definePlugin((editor) => {
 				e.preventDefault();
 				if (e.dataTransfer) await exec("paste", e.dataTransfer);
 			}
+			let dom;
 			onMounted(() => {
-				drawboardDom.value?.addEventListener("dragover", onDragover);
-				drawboardDom.value?.addEventListener("drop", onDrop);
+				dom = drawboardDom.value;
+				dom?.addEventListener("dragover", onDragover);
+				dom?.addEventListener("drop", onDrop);
 			});
 			onScopeDispose(() => {
-				drawboardDom.value?.removeEventListener("dragover", onDragover);
-				drawboardDom.value?.removeEventListener("drop", onDrop);
+				dom?.removeEventListener("dragover", onDragover);
+				dom?.removeEventListener("drop", onDrop);
+				dom = void 0;
 			});
 		}
 	};
@@ -8316,10 +8419,10 @@ var Btn_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/Layer.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$26 = ["data-id"];
-var _hoisted_2$12 = { class: "m-layer__content" };
-var _hoisted_3$11 = { class: "m-layer__prepend" };
-var _hoisted_4$5 = {
+var _hoisted_1$28 = ["data-id"];
+var _hoisted_2$14 = { class: "m-layer__content" };
+var _hoisted_3$13 = { class: "m-layer__prepend" };
+var _hoisted_4$7 = {
 	key: 0,
 	class: "m-layer__name"
 };
@@ -8463,8 +8566,8 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 			}, [
 				_cache[5] || (_cache[5] = createElementVNode("span", { class: "m-layer__underlay" }, null, -1)),
 				_cache[6] || (_cache[6] = createElementVNode("span", { class: "m-layer__overlay" }, null, -1)),
-				createElementVNode("div", _hoisted_2$12, [
-					createElementVNode("div", _hoisted_3$11, [childrenLength.value ? (openBlock(), createBlock(unref(Icon_default), {
+				createElementVNode("div", _hoisted_2$14, [
+					createElementVNode("div", _hoisted_3$13, [childrenLength.value ? (openBlock(), createBlock(unref(Icon_default), {
 						key: 0,
 						class: "m-layer__arrow",
 						icon: "$arrowRight",
@@ -8475,7 +8578,7 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 						class: "m-layer__thumbnail",
 						onDblclick: onDblclickThumbnail
 					}, [createVNode(unref(Icon_default), { icon: unref(thumbnailIcon) }, null, 8, ["icon"])], 32),
-					props.root ? (openBlock(), createElementBlock("div", _hoisted_4$5, toDisplayString(unref(t)("layers")), 1)) : (openBlock(), createElementBlock("div", {
+					props.root ? (openBlock(), createElementBlock("div", _hoisted_4$7, toDisplayString(unref(t)("layers")), 1)) : (openBlock(), createElementBlock("div", {
 						key: 1,
 						class: "m-layer__name",
 						onDblclick: onDblclickName
@@ -8522,7 +8625,7 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 						_: 1
 					}, 8, ["class"])], 64))], 2)
 				])
-			], 46, _hoisted_1$26), opened.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(childrenLength.value, (i) => {
+			], 46, _hoisted_1$28), opened.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(childrenLength.value, (i) => {
 				return openBlock(), createBlock(_component_MceLayer, {
 					key: i,
 					node: children.value[childrenLength.value - i],
@@ -8539,8 +8642,8 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/Layers.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$25 = { class: "m-layers" };
-var _hoisted_2$11 = { class: "m-layers__wrapper" };
+var _hoisted_1$27 = { class: "m-layers" };
+var _hoisted_2$13 = { class: "m-layers__wrapper" };
 //#endregion
 //#region src/components/Layers.vue
 var Layers_default = /* @__PURE__ */ defineComponent({
@@ -8574,7 +8677,7 @@ var Layers_default = /* @__PURE__ */ defineComponent({
 			layerScrollIntoView();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$25, [createElementVNode("div", _hoisted_2$11, [createVNode(Layer_default, {
+			return openBlock(), createElementBlock("div", _hoisted_1$27, [createElementVNode("div", _hoisted_2$13, [createVNode(Layer_default, {
 				root: true,
 				node: unref(root),
 				opened: true
@@ -8609,13 +8712,13 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 //#endregion
 //#region src/components/MadeWith.vue
 var _sfc_main = {};
-var _hoisted_1$24 = {
+var _hoisted_1$26 = {
 	class: "m-made-with",
 	href: "https://github.com/qq15725/mce",
 	target: "_blank"
 };
 function _sfc_render(_ctx, _cache) {
-	return openBlock(), createElementBlock("a", _hoisted_1$24, [..._cache[0] || (_cache[0] = [createElementVNode("div", null, "MADE WITH", -1), createElementVNode("div", null, "MCE", -1)])]);
+	return openBlock(), createElementBlock("a", _hoisted_1$26, [..._cache[0] || (_cache[0] = [createElementVNode("div", null, "MADE WITH", -1), createElementVNode("div", null, "MCE", -1)])]);
 }
 var MadeWith_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 //#endregion
@@ -8637,7 +8740,7 @@ var madeWith_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/MemoryManager.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$23 = { class: "m-manage-memory" };
+var _hoisted_1$25 = { class: "m-manage-memory" };
 //#endregion
 //#region src/components/MemoryManager.vue
 var MemoryManager_default = /* @__PURE__ */ defineComponent({
@@ -8670,7 +8773,7 @@ var MemoryManager_default = /* @__PURE__ */ defineComponent({
 		});
 		onBeforeUnmount(() => timer && clearInterval(timer));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$23, [_cache[0] || (_cache[0] = createElementVNode("div", null, "Total memory used", -1)), createElementVNode("div", null, toDisplayString(humanBytes(used.value)), 1)]);
+			return openBlock(), createElementBlock("div", _hoisted_1$25, [_cache[0] || (_cache[0] = createElementVNode("div", null, "Total memory used", -1)), createElementVNode("div", null, toDisplayString(humanBytes(used.value)), 1)]);
 		};
 	}
 });
@@ -8794,22 +8897,22 @@ var Overlay_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/shared/Menu.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$22 = ["onMouseenter"];
-var _hoisted_2$10 = ["onClick"];
-var _hoisted_3$10 = {
+var _hoisted_1$24 = ["onMouseenter"];
+var _hoisted_2$12 = ["onClick"];
+var _hoisted_3$12 = {
 	key: 0,
 	class: "m-list-item__checked"
 };
-var _hoisted_4$4 = {
+var _hoisted_4$6 = {
 	key: 1,
 	class: "m-list-item__prepend"
 };
-var _hoisted_5$3 = { class: "m-list-item__title" };
+var _hoisted_5$4 = { class: "m-list-item__title" };
 var _hoisted_6$3 = {
 	key: 2,
 	class: "m-list-item__kbd"
 };
-var _hoisted_7$2 = {
+var _hoisted_7$3 = {
 	key: 3,
 	class: "m-list-item__append"
 };
@@ -8921,18 +9024,18 @@ var Menu_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(["m-list-item", [item.disabled && "m-list-item--disabled", opened.value === index && "m-list-item--opened"]]),
 						onClick: (e) => onClickItem(item, index, e)
 					}, [
-						hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$10, [item.checked ? (openBlock(), createBlock(unref(Icon_default), {
+						hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$12, [item.checked ? (openBlock(), createBlock(unref(Icon_default), {
 							key: 0,
 							icon: "$check"
 						})) : createCommentVNode("", true)])) : createCommentVNode("", true),
-						_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_4$4, [renderSlot(_ctx.$slots, "prepend", { item })])) : createCommentVNode("", true),
-						createElementVNode("div", _hoisted_5$3, [renderSlot(_ctx.$slots, "title", { item }, () => [createTextVNode(toDisplayString(item.key), 1)])]),
+						_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_4$6, [renderSlot(_ctx.$slots, "prepend", { item })])) : createCommentVNode("", true),
+						createElementVNode("div", _hoisted_5$4, [renderSlot(_ctx.$slots, "title", { item }, () => [createTextVNode(toDisplayString(item.key), 1)])]),
 						_ctx.$slots.kbd ? (openBlock(), createElementBlock("div", _hoisted_6$3, [renderSlot(_ctx.$slots, "kbd", { item })])) : createCommentVNode("", true),
-						item.children?.length || _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_7$2, [renderSlot(_ctx.$slots, "append", { item }), item.children?.length ? (openBlock(), createBlock(unref(Icon_default), {
+						item.children?.length || _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_7$3, [renderSlot(_ctx.$slots, "append", { item }), item.children?.length ? (openBlock(), createBlock(unref(Icon_default), {
 							key: 0,
 							icon: "$arrowRight"
 						})) : createCommentVNode("", true)])) : createCommentVNode("", true)
-					], 10, _hoisted_2$10)], 40, _hoisted_1$22))], 64);
+					], 10, _hoisted_2$12)], 40, _hoisted_1$24))], 64);
 				}), 128)), opened.value > -1 && __props.items?.[opened.value]?.children?.length ? (openBlock(), createBlock(_component_MceMenu, {
 					key: 0,
 					"open-on-hover": "",
@@ -9442,9 +9545,9 @@ var menu_default = definePlugin((editor, options) => {
 });
 //#endregion
 //#region src/components/Creator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$21 = { class: "m-creator" };
-var _hoisted_2$9 = { class: "m-creator__tree" };
-var _hoisted_3$9 = { class: "m-creator__actions" };
+var _hoisted_1$23 = { class: "m-creator" };
+var _hoisted_2$11 = { class: "m-creator__tree" };
+var _hoisted_3$11 = { class: "m-creator__actions" };
 //#endregion
 //#region src/components/Creator.vue
 var Creator_default = /* @__PURE__ */ defineComponent({
@@ -9515,12 +9618,12 @@ var Creator_default = /* @__PURE__ */ defineComponent({
 			})];
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$21, [createElementVNode("div", _hoisted_2$9, [(openBlock(true), createElementBlock(Fragment, null, renderList(tree.value, (node, index) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$23, [createElementVNode("div", _hoisted_2$11, [(openBlock(true), createElementBlock(Fragment, null, renderList(tree.value, (node, index) => {
 				return openBlock(), createBlock(CreatorNode, {
 					key: index,
 					node
 				}, null, 8, ["node"]);
-			}), 128))]), createElementVNode("div", _hoisted_3$9, [createVNode(Btn_default, { onClick: cancel }, {
+			}), 128))]), createElementVNode("div", _hoisted_3$11, [createVNode(Btn_default, { onClick: cancel }, {
 				default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("cancel")), 1)]),
 				_: 1
 			}), createVNode(Btn_default, { onClick: create }, {
@@ -9556,10 +9659,13 @@ var node_default = definePlugin((editor) => {
 //#endregion
 //#region src/plugins/pen.ts
 var pen_default = definePlugin((editor) => {
-	const { addElement, renderEngine, activeTool, getGlobalPointer, state } = editor;
+	const { addElement, renderEngine, activeTool, activateTool, getGlobalPointer, camera, selection, state } = editor;
 	let el;
 	let currentPath;
 	let currentLine;
+	let onMove;
+	let onKey;
+	let stopWatch;
 	const update = () => {
 		if (el && currentPath) {
 			el.shape.paths = [{ data: currentPath.toData() }];
@@ -9570,17 +9676,42 @@ var pen_default = definePlugin((editor) => {
 			el.style.height = box.height || 1;
 		}
 	};
+	function finish(close = false) {
+		if (!el || !currentPath) return;
+		const curves = currentPath.currentCurve.curves;
+		if (currentLine && curves[curves.length - 1] === currentLine) curves.pop();
+		if (close && curves.length) currentPath.currentCurve.closePath();
+		const placed = curves.length;
+		const ref = el;
+		if (placed > 0) update();
+		renderEngine.value.off("pointermove", onMove);
+		if (onKey) window.removeEventListener("keydown", onKey);
+		stopWatch?.();
+		stopWatch = void 0;
+		onMove = void 0;
+		onKey = void 0;
+		el = void 0;
+		currentPath = void 0;
+		currentLine = void 0;
+		if (placed > 0) selection.value = [ref];
+		else ref.remove();
+	}
 	return {
 		name: "mce:pen",
 		tools: [{
 			name: "pen",
 			handle: (start) => {
-				if (el) {
-					if (currentPath) {
-						currentLine = new LineCurve(new Vector2(start.x, start.y), new Vector2(start.x, start.y));
-						currentPath.currentCurve.addCurve(currentLine);
-						update();
+				if (el && currentPath) {
+					const first = currentPath.currentCurve.curves[0];
+					const threshold = 8 / (camera.value.zoom.x || 1);
+					if (first && currentPath.currentCurve.curves.length > 1 && first.p1.distanceTo(start) < threshold) {
+						finish(true);
+						activateTool(void 0);
+						return;
 					}
+					currentLine = new LineCurve(new Vector2(start.x, start.y), new Vector2(start.x, start.y));
+					currentPath.currentCurve.addCurve(currentLine);
+					update();
 					return;
 				}
 				el = addElement({
@@ -9601,7 +9732,7 @@ var pen_default = definePlugin((editor) => {
 				currentLine = new LineCurve(new Vector2(start.x, start.y), new Vector2(start.x, start.y));
 				currentPath.currentCurve.addCurve(currentLine);
 				update();
-				const onMove = () => {
+				onMove = () => {
 					const move = getGlobalPointer();
 					if (currentLine && move) {
 						currentLine.p2.x = move.x;
@@ -9610,17 +9741,15 @@ var pen_default = definePlugin((editor) => {
 					}
 				};
 				renderEngine.value.on("pointermove", onMove);
-				let stopWatch;
-				const cleanup = () => {
-					renderEngine.value.off("pointermove", onMove);
-					stopWatch?.();
-					stopWatch = void 0;
-					el = void 0;
-					currentPath = void 0;
-					currentLine = void 0;
+				onKey = (e) => {
+					if (e.key === "Enter" || e.key === "Escape") {
+						e.preventDefault();
+						finish(false);
+						activateTool(void 0);
+					}
 				};
-				stopWatch = watch([state, activeTool], cleanup);
-				return { end: cleanup };
+				window.addEventListener("keydown", onKey);
+				stopWatch = watch([state, activeTool], () => finish(false));
 			}
 		}, {
 			name: "pencil",
@@ -9669,12 +9798,12 @@ var pen_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/shared/Tooltip.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$20 = {
+var _hoisted_1$22 = {
 	key: 0,
 	class: "m-tooltip__arrow"
 };
-var _hoisted_2$8 = { class: "m-tooltip__content" };
-var _hoisted_3$8 = {
+var _hoisted_2$10 = { class: "m-tooltip__content" };
+var _hoisted_3$10 = {
 	key: 0,
 	class: "m-tooltip__kbd"
 };
@@ -9717,7 +9846,7 @@ var Tooltip_default = /* @__PURE__ */ defineComponent({
 				target: props.target,
 				attach: props.attach
 			}, createSlots({
-				default: withCtx(() => [isActive.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.showArrow ? (openBlock(), createElementBlock("div", _hoisted_1$20)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2$8, [renderSlot(_ctx.$slots, "default"), _ctx.$slots.kbd ? (openBlock(), createElementBlock("div", _hoisted_3$8, [renderSlot(_ctx.$slots, "kbd")])) : createCommentVNode("", true)])], 64)) : createCommentVNode("", true)]),
+				default: withCtx(() => [isActive.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.showArrow ? (openBlock(), createElementBlock("div", _hoisted_1$22)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2$10, [renderSlot(_ctx.$slots, "default"), _ctx.$slots.kbd ? (openBlock(), createElementBlock("div", _hoisted_3$10, [renderSlot(_ctx.$slots, "kbd")])) : createCommentVNode("", true)])], 64)) : createCommentVNode("", true)]),
 				_: 2
 			}, [_ctx.$slots.activator ? {
 				name: "activator",
@@ -9740,13 +9869,13 @@ var Tooltip_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/shared/Ruler.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$19 = ["width", "height"];
-var _hoisted_2$7 = [
+var _hoisted_1$21 = ["width", "height"];
+var _hoisted_2$9 = [
 	"onDblclick",
 	"onMousedown",
 	"onMousemove"
 ];
-var _hoisted_3$7 = { style: {
+var _hoisted_3$9 = { style: {
 	"font-size": "0.75rem",
 	"text-wrap": "nowrap"
 } };
@@ -10017,7 +10146,7 @@ var Ruler_default = /* @__PURE__ */ defineComponent({
 					class: "m-ruler__canvas",
 					width: props.size,
 					height: props.size
-				}, null, 8, _hoisted_1$19)], 16)), [[unref(vResizeObserver), unref(resize)]]),
+				}, null, 8, _hoisted_1$21)], 16)), [[unref(vResizeObserver), unref(resize)]]),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (item, index) => {
 					return openBlock(), createElementBlock("div", {
 						key: index,
@@ -10038,7 +10167,7 @@ var Ruler_default = /* @__PURE__ */ defineComponent({
 						onMousedown: ($event) => onReflineMousedown($event, index),
 						onMousemove: (e) => updateTip(e, item),
 						onMouseleave: onLeave
-					}, null, 46, _hoisted_2$7);
+					}, null, 46, _hoisted_2$9);
 				}), 128)),
 				createVNode(Tooltip_default, {
 					"model-value": !!tipText.value,
@@ -10046,7 +10175,7 @@ var Ruler_default = /* @__PURE__ */ defineComponent({
 					offset: 24,
 					location: props.vertical ? "bottom" : "right"
 				}, {
-					default: withCtx(() => [createElementVNode("div", _hoisted_3$7, toDisplayString(tipText.value), 1)]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_3$9, toDisplayString(tipText.value), 1)]),
 					_: 1
 				}, 8, [
 					"model-value",
@@ -10059,7 +10188,7 @@ var Ruler_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/Rulers.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$18 = { class: "m-rulers" };
+var _hoisted_1$20 = { class: "m-rulers" };
 //#endregion
 //#region src/components/Rulers.vue
 var Rulers_default = /* @__PURE__ */ defineComponent({
@@ -10074,7 +10203,7 @@ var Rulers_default = /* @__PURE__ */ defineComponent({
 		const { getConfigRef, camera, selectionAabbInDrawboard } = useEditor();
 		const config = getConfigRef("ui.ruler");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$18, [
+			return openBlock(), createElementBlock("div", _hoisted_1$20, [
 				createVNode(Ruler_default, {
 					modelValue: refLines.value.x,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => refLines.value.x = $event),
@@ -10131,7 +10260,7 @@ var ruler_default = definePlugin((editor) => {
 		x: [],
 		y: []
 	});
-	registerSnapper("ruler", { get: () => {
+	registerSnapper("ruler", { getLines: () => {
 		return {
 			xLines: refLines.value.x,
 			yLines: refLines.value.y
@@ -10188,7 +10317,7 @@ var saveAs_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/shared/Scrollbar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$17 = {
+var _hoisted_1$19 = {
 	ref: "trackTplRef",
 	class: "m-scrollbar__track"
 };
@@ -10271,7 +10400,7 @@ var Scrollbar_default = /* @__PURE__ */ defineComponent({
 					[props.vertical ? "width" : "height"]: `${props.size}px`,
 					[props.vertical ? "top" : "left"]: `${props.offset}px`
 				})
-			}, [createElementVNode("div", _hoisted_1$17, [createElementVNode("div", {
+			}, [createElementVNode("div", _hoisted_1$19, [createElementVNode("div", {
 				ref: "thumbTplRef",
 				class: normalizeClass(["m-scrollbar__thumb", { "m-scrollbar__thumb--active": isActive.value }]),
 				style: normalizeStyle({
@@ -10287,7 +10416,7 @@ var Scrollbar_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/Scrollbars.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$16 = { class: "m-scrollbars" };
+var _hoisted_1$18 = { class: "m-scrollbars" };
 //#endregion
 //#region src/components/Scrollbars.vue
 var Scrollbars_default = /* @__PURE__ */ defineComponent({
@@ -10300,7 +10429,7 @@ var Scrollbars_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const { camera, rootAabb } = useEditor();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$16, [createVNode(Scrollbar_default, mergeProps(props, {
+			return openBlock(), createElementBlock("div", _hoisted_1$18, [createVNode(Scrollbar_default, mergeProps(props, {
 				modelValue: unref(camera).position.y,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(camera).position.y = $event),
 				vertical: "",
@@ -10356,7 +10485,7 @@ var scroll_default = definePlugin((editor) => {
 				x: aabb.left + aabb.width / 2,
 				y: aabb.top + aabb.height / 2
 			};
-			offset.x += -_screenCenter.x;
+			offset.x = -_screenCenter.x;
 			offset.y = -_screenCenter.y;
 		}
 		if (targetPosition.x !== void 0) {
@@ -10435,22 +10564,22 @@ var ScrollToSelection_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/shared/Transform.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$15 = ["rx", "ry"];
-var _hoisted_2$6 = { "pointer-events": "none" };
-var _hoisted_3$6 = [
+var _hoisted_1$17 = ["rx", "ry"];
+var _hoisted_2$8 = { "pointer-events": "none" };
+var _hoisted_3$8 = [
 	"x",
 	"y",
 	"width",
 	"height",
 	"aria-label"
 ];
-var _hoisted_4$3 = [
+var _hoisted_4$5 = [
 	"cx",
 	"cy",
 	"r",
 	"aria-label"
 ];
-var _hoisted_5$2 = [
+var _hoisted_5$3 = [
 	"x",
 	"y",
 	"width",
@@ -10460,8 +10589,8 @@ var _hoisted_5$2 = [
 	"ry"
 ];
 var _hoisted_6$2 = ["transform"];
-var _hoisted_7$1 = { "pointer-events": "all" };
-var _hoisted_8$1 = [
+var _hoisted_7$2 = { "pointer-events": "all" };
+var _hoisted_8$2 = [
 	"x",
 	"y",
 	"width",
@@ -10470,11 +10599,11 @@ var _hoisted_8$1 = [
 	"cursor",
 	"onPointerdown"
 ];
-var _hoisted_9$1 = {
+var _hoisted_9$2 = {
 	"pointer-events": "all",
 	class: "m-transform__svg-slot"
 };
-var _hoisted_10$1 = {
+var _hoisted_10$2 = {
 	key: 0,
 	class: "m-transform__tip"
 };
@@ -11072,9 +11201,9 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 							fill: "none",
 							rx: model.value.borderRadius,
 							ry: model.value.borderRadius
-						}, null, 8, _hoisted_1$15),
+						}, null, 8, _hoisted_1$17),
 						createVNode(Diagonal),
-						createElementVNode("g", _hoisted_2$6, [(openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
+						createElementVNode("g", _hoisted_2$8, [(openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
 							return openBlock(), createElementBlock(Fragment, { key: index }, [handle.shape ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [handle.shape === "rect" ? (openBlock(), createElementBlock("rect", {
 								key: 0,
 								x: handle.x,
@@ -11083,14 +11212,14 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 								height: handle.height,
 								"aria-label": handle.type,
 								class: "m-transform__handle"
-							}, null, 8, _hoisted_3$6)) : handle.width === handle.height ? (openBlock(), createElementBlock("circle", {
+							}, null, 8, _hoisted_3$8)) : handle.width === handle.height ? (openBlock(), createElementBlock("circle", {
 								key: 1,
 								cx: handle.x + handle.width / 2,
 								cy: handle.y + handle.width / 2,
 								r: handle.width / 2,
 								"aria-label": handle.type,
 								class: "m-transform__handle"
-							}, null, 8, _hoisted_4$3)) : (openBlock(), createElementBlock("rect", {
+							}, null, 8, _hoisted_4$5)) : (openBlock(), createElementBlock("rect", {
 								key: 2,
 								x: handle.x,
 								y: handle.y,
@@ -11100,13 +11229,13 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 								rx: handle.width / 4,
 								ry: handle.height / 4,
 								class: "m-transform__handle"
-							}, null, 8, _hoisted_5$2))], 64)) : createCommentVNode("", true)], 64);
+							}, null, 8, _hoisted_5$3))], 64)) : createCommentVNode("", true)], 64);
 						}), 128)), __props.rotator ? (openBlock(), createElementBlock("g", {
 							key: 0,
 							transform: `matrix(1, 0, 0, 1, -32, ${model.value.height}) rotate(270 16 16)`,
 							class: "m-transform__rotator"
 						}, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z" }, null, -1)])], 8, _hoisted_6$2)) : createCommentVNode("", true)]),
-						createElementVNode("g", _hoisted_7$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
+						createElementVNode("g", _hoisted_7$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
 							return openBlock(), createElementBlock("rect", {
 								key: index,
 								ref_for: true,
@@ -11120,11 +11249,11 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 								class: "m-transform__handle-rect",
 								cursor: transforming.value ? "auto" : getCursor(handle.type),
 								onPointerdown: (event) => onPointerDown(event, index)
-							}, null, 40, _hoisted_8$1);
+							}, null, 40, _hoisted_8$2);
 						}), 128))]),
-						createElementVNode("g", _hoisted_9$1, [renderSlot(_ctx.$slots, "svg", { box: model.value })])
+						createElementVNode("g", _hoisted_9$2, [renderSlot(_ctx.$slots, "svg", { box: model.value })])
 					], 4)),
-					tip.value ? (openBlock(), createElementBlock("div", _hoisted_10$1, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
+					tip.value ? (openBlock(), createElementBlock("div", _hoisted_10$2, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
 				]),
 				_: 3
 			}, 8, ["class", "style"]);
@@ -11133,7 +11262,7 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/shared/Cropper.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$14 = { class: "m-cropper" };
+var _hoisted_1$16 = { class: "m-cropper" };
 //#endregion
 //#region src/components/shared/Cropper.vue
 var Cropper_default = /* @__PURE__ */ defineComponent({
@@ -11332,7 +11461,7 @@ var Cropper_default = /* @__PURE__ */ defineComponent({
 		onBeforeMount(() => emit("start"));
 		onBeforeUnmount(() => emit("end"));
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$14, [
+			return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$16, [
 				createElementVNode("div", {
 					class: "m-cropper__source",
 					style: normalizeStyle(unref(boundingBoxToStyle)(sourceTransform.value))
@@ -11405,8 +11534,757 @@ var ForegroundCropper_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/PathEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$15 = {
+	ref: "svgTpl",
+	class: "m-path-editor",
+	style: { overflow: "visible" }
+};
+var _hoisted_2$7 = ["d"];
+var _hoisted_3$7 = [
+	"x1",
+	"y1",
+	"x2",
+	"y2"
+];
+var _hoisted_4$4 = [
+	"cx",
+	"cy",
+	"onPointerdown"
+];
+var _hoisted_5$2 = [
+	"x",
+	"y",
+	"onPointerdown",
+	"onDblclick"
+];
+//#endregion
+//#region src/components/PathEditor.vue
+var PathEditor_default = /* @__PURE__ */ defineComponent({
+	__name: "PathEditor",
+	props: {
+		element: {},
+		scale: {},
+		offset: {}
+	},
+	emits: ["end"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const editor = useEditor();
+		const { elementSelection } = editor;
+		const el = props.element;
+		const svgRef = useTemplateRef("svgTpl");
+		const lin = {
+			a: el.transform.a,
+			b: el.transform.b,
+			c: el.transform.c,
+			d: el.transform.d
+		};
+		const det = lin.a * lin.d - lin.c * lin.b || 1;
+		function parentInv(g) {
+			const pt = el.getParent()?.globalTransform;
+			return pt ? pt.applyAffineInverse(g) : g;
+		}
+		function toU(g) {
+			const p = parentInv(g);
+			return {
+				x: (lin.d * p.x - lin.c * p.y) / det,
+				y: (-lin.b * p.x + lin.a * p.y) / det
+			};
+		}
+		function applyR(u) {
+			return {
+				x: lin.a * u.x + lin.c * u.y,
+				y: lin.b * u.x + lin.d * u.y
+			};
+		}
+		const paths = ref([]);
+		let originalPaths = [];
+		let lastWritten = "";
+		const selected = ref(null);
+		function arcToCubic(x0, y0, rx, ry, angleDeg, largeArc, sweep, x, y) {
+			rx = Math.abs(rx);
+			ry = Math.abs(ry);
+			if (rx === 0 || ry === 0) return [[
+				x0,
+				y0,
+				x,
+				y,
+				x,
+				y
+			]];
+			const rad = angleDeg * Math.PI / 180;
+			const cos = Math.cos(rad);
+			const sin = Math.sin(rad);
+			const dx = (x0 - x) / 2;
+			const dy = (y0 - y) / 2;
+			const x1p = cos * dx + sin * dy;
+			const y1p = -sin * dx + cos * dy;
+			const lambda = x1p * x1p / (rx * rx) + y1p * y1p / (ry * ry);
+			if (lambda > 1) {
+				const s = Math.sqrt(lambda);
+				rx *= s;
+				ry *= s;
+			}
+			const sign = largeArc !== sweep ? 1 : -1;
+			const num = Math.max(0, rx * rx * ry * ry - rx * rx * y1p * y1p - ry * ry * x1p * x1p);
+			const den = rx * rx * y1p * y1p + ry * ry * x1p * x1p;
+			const co = sign * Math.sqrt(den === 0 ? 0 : num / den);
+			const cxp = co * rx * y1p / ry;
+			const cyp = -co * ry * x1p / rx;
+			const cx = cos * cxp - sin * cyp + (x0 + x) / 2;
+			const cy = sin * cxp + cos * cyp + (y0 + y) / 2;
+			const ang = (ux, uy, vx, vy) => {
+				const len = Math.sqrt((ux * ux + uy * uy) * (vx * vx + vy * vy));
+				let a = Math.acos(Math.max(-1, Math.min(1, len === 0 ? 1 : (ux * vx + uy * vy) / len)));
+				if (ux * vy - uy * vx < 0) a = -a;
+				return a;
+			};
+			const theta1 = ang(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
+			let dtheta = ang((x1p - cxp) / rx, (y1p - cyp) / ry, (-x1p - cxp) / rx, (-y1p - cyp) / ry);
+			if (!sweep && dtheta > 0) dtheta -= 2 * Math.PI;
+			if (sweep && dtheta < 0) dtheta += 2 * Math.PI;
+			const segs = Math.max(1, Math.ceil(Math.abs(dtheta) / (Math.PI / 2)));
+			const delta = dtheta / segs;
+			const k = 4 / 3 * Math.tan(delta / 4);
+			const pointAt = (a) => ({
+				x: cx + rx * cos * Math.cos(a) - ry * sin * Math.sin(a),
+				y: cy + rx * sin * Math.cos(a) + ry * cos * Math.sin(a)
+			});
+			const tangentAt = (a) => ({
+				x: -rx * cos * Math.sin(a) - ry * sin * Math.cos(a),
+				y: -rx * sin * Math.sin(a) + ry * cos * Math.cos(a)
+			});
+			const result = [];
+			let a1 = theta1;
+			for (let i = 0; i < segs; i++) {
+				const a2 = a1 + delta;
+				const p1 = pointAt(a1);
+				const p2 = pointAt(a2);
+				const t1 = tangentAt(a1);
+				const t2 = tangentAt(a2);
+				result.push([
+					p1.x + k * t1.x,
+					p1.y + k * t1.y,
+					p2.x - k * t2.x,
+					p2.y - k * t2.y,
+					p2.x,
+					p2.y
+				]);
+				a1 = a2;
+			}
+			return result;
+		}
+		function expandArcs(cmds) {
+			const out = [];
+			let cx = 0;
+			let cy = 0;
+			let sx = 0;
+			let sy = 0;
+			for (const c of cmds) {
+				const a = c;
+				if (a.type === "A") {
+					for (const s of arcToCubic(cx, cy, a.rx, a.ry, a.angle, a.largeArcFlag, a.sweepFlag, a.x, a.y)) out.push({
+						type: "C",
+						x1: s[0],
+						y1: s[1],
+						x2: s[2],
+						y2: s[3],
+						x: s[4],
+						y: s[5]
+					});
+					cx = a.x;
+					cy = a.y;
+				} else {
+					out.push(c);
+					if (a.type === "M") {
+						sx = a.x;
+						sy = a.y;
+					}
+					if (a.type === "Z") {
+						cx = sx;
+						cy = sy;
+					} else if ("x" in a && "y" in a) {
+						cx = a.x;
+						cy = a.y;
+					}
+				}
+			}
+			return out;
+		}
+		function build() {
+			originalPaths = el.shape.paths?.map((p) => ({ ...p })) ?? [];
+			const parsed = originalPaths.map((p) => new Path2D(p.data));
+			let dx = Infinity;
+			let dy = Infinity;
+			let dr = -Infinity;
+			let db = -Infinity;
+			for (const p of parsed) {
+				const bb = p.getBoundingBox();
+				dx = Math.min(dx, bb.left);
+				dy = Math.min(dy, bb.top);
+				dr = Math.max(dr, bb.left + bb.width);
+				db = Math.max(db, bb.top + bb.height);
+			}
+			const dbw = dr - dx || 1;
+			const dbh = db - dy || 1;
+			const sx = el.size.x || 1;
+			const sy = el.size.y || 1;
+			const toGlobal = (x, y) => {
+				const local = {
+					x: (x - dx) / dbw * sx,
+					y: (y - dy) / dbh * sy
+				};
+				return el.globalTransform.apply(local);
+			};
+			paths.value = parsed.map((p) => {
+				const cmds = expandArcs(svgPathDataToCommands(p.toData()));
+				for (const c of cmds) {
+					const a = c;
+					if ("x" in a && "y" in a) {
+						const g = toGlobal(a.x, a.y);
+						a.x = g.x;
+						a.y = g.y;
+					}
+					if ("x1" in a) {
+						const g = toGlobal(a.x1, a.y1);
+						a.x1 = g.x;
+						a.y1 = g.y;
+					}
+					if ("x2" in a) {
+						const g = toGlobal(a.x2, a.y2);
+						a.x2 = g.x;
+						a.y2 = g.y;
+					}
+				}
+				return cmds;
+			});
+		}
+		build();
+		function toScreen(x, y) {
+			return {
+				x: x * props.scale[0] + props.offset[0],
+				y: y * props.scale[1] + props.offset[1]
+			};
+		}
+		function getField(cmd, field) {
+			if (field === "cp1") return {
+				x: cmd.x1,
+				y: cmd.y1
+			};
+			if (field === "cp2") return {
+				x: cmd.x2,
+				y: cmd.y2
+			};
+			return {
+				x: cmd.x,
+				y: cmd.y
+			};
+		}
+		function setField(cmd, field, x, y) {
+			if (field === "cp1") {
+				cmd.x1 = x;
+				cmd.y1 = y;
+			} else if (field === "cp2") {
+				cmd.x2 = x;
+				cmd.y2 = y;
+			} else {
+				cmd.x = x;
+				cmd.y = y;
+			}
+		}
+		function lerp(a, b, t) {
+			return {
+				x: a.x + (b.x - a.x) * t,
+				y: a.y + (b.y - a.y) * t
+			};
+		}
+		function dist(a, b) {
+			return Math.hypot(a.x - b.x, a.y - b.y);
+		}
+		function cubicAt(p0, p1, p2, p3, t) {
+			const u = 1 - t;
+			const a = u * u * u;
+			const b = 3 * u * u * t;
+			const c = 3 * u * t * t;
+			const d = t * t * t;
+			return {
+				x: a * p0.x + b * p1.x + c * p2.x + d * p3.x,
+				y: a * p0.y + b * p1.y + c * p2.y + d * p3.y
+			};
+		}
+		const anchors = computed(() => {
+			const list = [];
+			paths.value.forEach((cmds, pi) => {
+				cmds.forEach((c, ci) => {
+					const a = c;
+					if ("x" in a && "y" in a) {
+						const s = toScreen(a.x, a.y);
+						list.push({
+							pi,
+							ci,
+							x: s.x,
+							y: s.y,
+							sel: selected.value?.pi === pi && selected.value?.ci === ci
+						});
+					}
+				});
+			});
+			return list;
+		});
+		const controls = computed(() => {
+			const list = [];
+			paths.value.forEach((cmds, pi) => {
+				cmds.forEach((c, ci) => {
+					const a = c;
+					const prev = cmds[ci - 1];
+					if (a.type === "C") {
+						if (prev && "x" in prev) {
+							const s = toScreen(a.x1, a.y1);
+							const p = toScreen(prev.x, prev.y);
+							list.push({
+								pi,
+								ci,
+								field: "cp1",
+								x: s.x,
+								y: s.y,
+								ax: p.x,
+								ay: p.y
+							});
+						}
+						const s2 = toScreen(a.x2, a.y2);
+						const p2 = toScreen(a.x, a.y);
+						list.push({
+							pi,
+							ci,
+							field: "cp2",
+							x: s2.x,
+							y: s2.y,
+							ax: p2.x,
+							ay: p2.y
+						});
+					} else if (a.type === "Q") {
+						const s = toScreen(a.x1, a.y1);
+						const p = toScreen(a.x, a.y);
+						list.push({
+							pi,
+							ci,
+							field: "cp1",
+							x: s.x,
+							y: s.y,
+							ax: p.x,
+							ay: p.y
+						});
+					}
+				});
+			});
+			return list;
+		});
+		const screenPath = computed(() => {
+			let d = "";
+			for (const cmds of paths.value) for (const c of cmds) {
+				const a = c;
+				if (a.type === "M" || a.type === "L" || a.type === "A") {
+					const s = toScreen(a.x, a.y);
+					d += `${a.type === "M" ? "M" : "L"} ${s.x} ${s.y} `;
+				} else if (a.type === "C") {
+					const c1 = toScreen(a.x1, a.y1);
+					const c2 = toScreen(a.x2, a.y2);
+					const e = toScreen(a.x, a.y);
+					d += `C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${e.x} ${e.y} `;
+				} else if (a.type === "Q") {
+					const cp = toScreen(a.x1, a.y1);
+					const e = toScreen(a.x, a.y);
+					d += `Q ${cp.x} ${cp.y} ${e.x} ${e.y} `;
+				} else if (a.type === "Z") d += "Z ";
+			}
+			return d;
+		});
+		function mapCommandPoints(cmds, fn) {
+			return cmds.map((c) => {
+				const a = { ...c };
+				if ("x" in a && "y" in a) {
+					const p = fn({
+						x: a.x,
+						y: a.y
+					});
+					a.x = p.x;
+					a.y = p.y;
+				}
+				if ("x1" in a) {
+					const p = fn({
+						x: a.x1,
+						y: a.y1
+					});
+					a.x1 = p.x;
+					a.y1 = p.y;
+				}
+				if ("x2" in a) {
+					const p = fn({
+						x: a.x2,
+						y: a.y2
+					});
+					a.x2 = p.x;
+					a.y2 = p.y;
+				}
+				return a;
+			});
+		}
+		function commit() {
+			const uPaths = paths.value.map((cmds) => mapCommandPoints(cmds, toU));
+			let minX = Infinity;
+			let minY = Infinity;
+			let maxX = -Infinity;
+			let maxY = -Infinity;
+			for (const cmds of uPaths) {
+				const bb = new Path2D(svgPathCommandsToData(cmds)).getBoundingBox();
+				minX = Math.min(minX, bb.left);
+				minY = Math.min(minY, bb.top);
+				maxX = Math.max(maxX, bb.left + bb.width);
+				maxY = Math.max(maxY, bb.top + bb.height);
+			}
+			if (!Number.isFinite(minX)) return;
+			const w = Math.max(1, maxX - minX);
+			const h = Math.max(1, maxY - minY);
+			const center = applyR({
+				x: minX + w / 2,
+				y: minY + h / 2
+			});
+			el.style.left = center.x - w / 2;
+			el.style.top = center.y - h / 2;
+			el.style.width = w;
+			el.style.height = h;
+			const datas = uPaths.map((cmds) => svgPathCommandsToData(mapCommandPoints(cmds, (p) => ({
+				x: p.x - minX,
+				y: p.y - minY
+			}))));
+			lastWritten = datas.join("|");
+			el.shape.paths = originalPaths.map((p, i) => ({
+				...p,
+				data: datas[i] ?? p.data
+			}));
+		}
+		function dragGroup(pi, ci, field) {
+			const cmds = paths.value[pi];
+			const cmd = cmds[ci];
+			if (field !== "xy") return [{
+				cmd,
+				field
+			}];
+			const group = [{
+				cmd,
+				field: "xy"
+			}];
+			if (cmd.type === "C") group.push({
+				cmd,
+				field: "cp2"
+			});
+			const next = cmds[ci + 1];
+			if (next && next.type === "C") group.push({
+				cmd: next,
+				field: "cp1"
+			});
+			return group;
+		}
+		let drag;
+		function startCapture() {
+			editor.root.value.stopCapturing?.();
+		}
+		function onDown(e, pi, ci, field) {
+			e.stopPropagation();
+			e.preventDefault();
+			if (field === "xy") selected.value = {
+				pi,
+				ci
+			};
+			startCapture();
+			const points = dragGroup(pi, ci, field).map(({ cmd, field }) => {
+				const v = getField(cmd, field);
+				return {
+					cmd,
+					field,
+					sx: v.x,
+					sy: v.y
+				};
+			});
+			drag = {
+				cx: e.clientX,
+				cy: e.clientY,
+				points
+			};
+			window.addEventListener("pointermove", onMove);
+			window.addEventListener("pointerup", onUp);
+		}
+		function onMove(e) {
+			if (!drag) return;
+			const dx = (e.clientX - drag.cx) / props.scale[0];
+			const dy = (e.clientY - drag.cy) / props.scale[1];
+			for (const p of drag.points) setField(p.cmd, p.field, p.sx + dx, p.sy + dy);
+			commit();
+		}
+		function onUp() {
+			if (drag) {
+				startCapture();
+				drag = void 0;
+			}
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+		}
+		function onInsert(e) {
+			e.stopPropagation();
+			const rect = svgRef.value?.getBoundingClientRect();
+			if (!rect) return;
+			const g = {
+				x: (e.clientX - rect.left - props.offset[0]) / props.scale[0],
+				y: (e.clientY - rect.top - props.offset[1]) / props.scale[1]
+			};
+			let best;
+			paths.value.forEach((cmds, pi) => {
+				cmds.forEach((c, ci) => {
+					const a = c;
+					const prev = cmds[ci - 1];
+					if (!prev || !("x" in prev)) return;
+					if (a.type === "L") {
+						const vx = a.x - prev.x;
+						const vy = a.y - prev.y;
+						const len2 = vx * vx + vy * vy || 1;
+						const t = Math.max(0, Math.min(1, ((g.x - prev.x) * vx + (g.y - prev.y) * vy) / len2));
+						const at = {
+							x: prev.x + t * vx,
+							y: prev.y + t * vy
+						};
+						const d = dist(g, at);
+						if (!best || d < best.dist) best = {
+							pi,
+							ci,
+							kind: "L",
+							at,
+							t,
+							dist: d
+						};
+					} else if (a.type === "C") {
+						const p0 = {
+							x: prev.x,
+							y: prev.y
+						};
+						const p1 = {
+							x: a.x1,
+							y: a.y1
+						};
+						const p2 = {
+							x: a.x2,
+							y: a.y2
+						};
+						const p3 = {
+							x: a.x,
+							y: a.y
+						};
+						for (let i = 1; i < 24; i++) {
+							const t = i / 24;
+							const at = cubicAt(p0, p1, p2, p3, t);
+							const d = dist(g, at);
+							if (!best || d < best.dist) best = {
+								pi,
+								ci,
+								kind: "C",
+								at,
+								t,
+								dist: d
+							};
+						}
+					}
+				});
+			});
+			if (!best || best.dist * props.scale[0] >= 12) return;
+			const cmds = paths.value[best.pi];
+			if (best.kind === "L") cmds.splice(best.ci, 0, {
+				type: "L",
+				x: best.at.x,
+				y: best.at.y
+			});
+			else {
+				const cur = cmds[best.ci];
+				const prev = cmds[best.ci - 1];
+				const t = best.t;
+				const p0 = {
+					x: prev.x,
+					y: prev.y
+				};
+				const p1 = {
+					x: cur.x1,
+					y: cur.y1
+				};
+				const p2 = {
+					x: cur.x2,
+					y: cur.y2
+				};
+				const p3 = {
+					x: cur.x,
+					y: cur.y
+				};
+				const q0 = lerp(p0, p1, t);
+				const q1 = lerp(p1, p2, t);
+				const q2 = lerp(p2, p3, t);
+				const r0 = lerp(q0, q1, t);
+				const r1 = lerp(q1, q2, t);
+				const s = lerp(r0, r1, t);
+				cur.x1 = r1.x;
+				cur.y1 = r1.y;
+				cur.x2 = q2.x;
+				cur.y2 = q2.y;
+				cmds.splice(best.ci, 0, {
+					type: "C",
+					x1: q0.x,
+					y1: q0.y,
+					x2: r0.x,
+					y2: r0.y,
+					x: s.x,
+					y: s.y
+				});
+			}
+			commit();
+		}
+		function toggleSmooth(pi, ci) {
+			const cmds = paths.value[pi];
+			const cur = cmds[ci];
+			const out = cmds[ci + 1];
+			const prev = cmds[ci - 1];
+			if (cur.type === "M") return;
+			const incCurved = cur.type === "C";
+			const outCurved = out && out.type === "C";
+			if (incCurved || outCurved) {
+				if (incCurved) cmds.splice(ci, 1, {
+					type: "L",
+					x: cur.x,
+					y: cur.y
+				});
+				if (outCurved) cmds.splice(ci + 1, 1, {
+					type: "L",
+					x: out.x,
+					y: out.y
+				});
+			} else {
+				if (!prev || !("x" in prev) || !out || !("x" in out)) return;
+				const p = {
+					x: prev.x,
+					y: prev.y
+				};
+				const c = {
+					x: cur.x,
+					y: cur.y
+				};
+				const n = {
+					x: out.x,
+					y: out.y
+				};
+				const tl = dist(p, n) || 1;
+				const tan = {
+					x: (n.x - p.x) / tl,
+					y: (n.y - p.y) / tl
+				};
+				const lenIn = dist(p, c) / 3;
+				const lenOut = dist(c, n) / 3;
+				cmds.splice(ci, 1, {
+					type: "C",
+					x1: p.x + (c.x - p.x) / 3,
+					y1: p.y + (c.y - p.y) / 3,
+					x2: c.x - tan.x * lenIn,
+					y2: c.y - tan.y * lenIn,
+					x: c.x,
+					y: c.y
+				});
+				cmds.splice(ci + 1, 1, {
+					type: "C",
+					x1: c.x + tan.x * lenOut,
+					y1: c.y + tan.y * lenOut,
+					x2: n.x - (n.x - c.x) / 3,
+					y2: n.y - (n.y - c.y) / 3,
+					x: n.x,
+					y: n.y
+				});
+			}
+			commit();
+		}
+		function anchorCount(pi) {
+			return paths.value[pi].filter((c) => "x" in c && "y" in c).length;
+		}
+		function deleteSelected() {
+			const s = selected.value;
+			if (!s) return;
+			if (paths.value[s.pi][s.ci].type === "M" || anchorCount(s.pi) <= 2) return;
+			paths.value[s.pi].splice(s.ci, 1);
+			selected.value = null;
+			commit();
+		}
+		function onKeydown(e) {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				emit("end");
+			} else if ((e.key === "Delete" || e.key === "Backspace") && selected.value) {
+				e.preventDefault();
+				deleteSelected();
+			}
+		}
+		watch(elementSelection, (sel) => {
+			if (sel.length !== 1 || !sel[0]?.equal(el)) emit("end");
+		});
+		watch(() => el.shape.paths?.map((p) => p.data).join("|") ?? "", (cur) => {
+			if (drag || cur === lastWritten) return;
+			selected.value = null;
+			build();
+		});
+		onMounted(() => window.addEventListener("keydown", onKeydown));
+		onBeforeUnmount(() => {
+			window.removeEventListener("keydown", onKeydown);
+			onUp();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", _hoisted_1$15, [
+				createElementVNode("path", {
+					class: "m-path-editor__hit",
+					d: screenPath.value,
+					onDblclick: onInsert
+				}, null, 40, _hoisted_2$7),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(controls.value, (c, i) => {
+					return openBlock(), createElementBlock("line", {
+						key: `l${i}`,
+						class: "m-path-editor__handle-line",
+						x1: c.ax,
+						y1: c.ay,
+						x2: c.x,
+						y2: c.y
+					}, null, 8, _hoisted_3$7);
+				}), 128)),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(controls.value, (c, i) => {
+					return openBlock(), createElementBlock("circle", {
+						key: `c${i}`,
+						class: "m-path-editor__control",
+						cx: c.x,
+						cy: c.y,
+						r: "4",
+						onPointerdown: ($event) => onDown($event, c.pi, c.ci, c.field)
+					}, null, 40, _hoisted_4$4);
+				}), 128)),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(anchors.value, (a, i) => {
+					return openBlock(), createElementBlock("rect", {
+						key: `a${i}`,
+						class: normalizeClass(["m-path-editor__anchor", { "m-path-editor__anchor--selected": a.sel }]),
+						x: a.x - 4,
+						y: a.y - 4,
+						width: "8",
+						height: "8",
+						onPointerdown: ($event) => onDown($event, a.pi, a.ci, "xy"),
+						onDblclick: withModifiers(($event) => toggleSmooth(a.pi, a.ci), ["stop"])
+					}, null, 42, _hoisted_5$2);
+				}), 128))
+			], 512);
+		};
+	}
+});
+//#endregion
 //#region src/components/Selection.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$13 = { class: "m-selection" };
+var _hoisted_1$14 = { class: "m-selection" };
 //#endregion
 //#region src/components/Selection.vue
 var Selection_default = /* @__PURE__ */ defineComponent({
@@ -11496,12 +12374,12 @@ var Selection_default = /* @__PURE__ */ defineComponent({
 			return false;
 		});
 		function tip() {
-			const obb = elementSelection.value.length === 1 ? elementSelection.value[0].style : selectionObb.value;
+			const obb = elementSelection.value.length === 1 ? elementSelection.value[0].size : selectionObb.value;
 			return `${Number(obb.width.toFixed(2))} × ${Number(obb.height.toFixed(2))}`;
 		}
 		__expose({ transform });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$13, [
+			return openBlock(), createElementBlock("div", _hoisted_1$14, [
 				(openBlock(true), createElementBlock(Fragment, null, renderList(parentObbStyles.value, (style, index) => {
 					return openBlock(), createElementBlock("div", {
 						key: index,
@@ -11529,8 +12407,19 @@ var Selection_default = /* @__PURE__ */ defineComponent({
 					default: withCtx((scope) => [renderSlot(_ctx.$slots, "foreground-cropper", normalizeProps(guardReactiveProps(scope)))]),
 					_: 3
 				}), renderSlot(_ctx.$slots, "default")], 4)) : createCommentVNode("", true),
-				transformValue.value.width && transformValue.value.height ? (openBlock(), createBlock(Transform_default, mergeProps({
+				unref(state) === "pathEditing" && unref(elementSelection).length === 1 ? (openBlock(), createBlock(PathEditor_default, {
 					key: 3,
+					element: unref(elementSelection)[0],
+					scale: [unref(camera).zoom.x, unref(camera).zoom.y],
+					offset: [-unref(camera).position.x, -unref(camera).position.y],
+					onEnd: _cache[0] || (_cache[0] = ($event) => state.value = void 0)
+				}, null, 8, [
+					"element",
+					"scale",
+					"offset"
+				])) : createCommentVNode("", true),
+				transformValue.value.width && transformValue.value.height && unref(state) !== "pathEditing" ? (openBlock(), createBlock(Transform_default, mergeProps({
+					key: 4,
 					ref: "transformTpl"
 				}, transformProps.value, {
 					"model-value": transformValue.value,
@@ -11578,9 +12467,11 @@ var selection_default = definePlugin((editor) => {
 			case "all":
 				selection.value = [...root.value.children];
 				break;
-			case "inverse":
-				selection.value = [];
+			case "inverse": {
+				const current = selection.value;
+				selection.value = root.value.children.filter((node) => !current.some((v) => v.equal(node)));
 				break;
+			}
 			case "children": {
 				const children = selection.value[0]?.children;
 				if (children?.length) selection.value = [...children];
@@ -11836,44 +12727,6 @@ var selection_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/plugins/shape.ts
-function rotatePoint(center, point, angleRad) {
-	const cos = Math.cos(angleRad);
-	const sin = Math.sin(angleRad);
-	const dx = point.x - center.x;
-	const dy = point.y - center.y;
-	return {
-		x: center.x + (dx * cos - dy * sin),
-		y: center.y + (dx * sin + dy * cos)
-	};
-}
-function getArrowPath(p1, p2, options = {}) {
-	const { size = 10, angle = 30, startMarker = "none", endMarker = "open", roundValues = true } = options;
-	const fmt = (n) => roundValues ? Math.round(n) : n.toFixed(2);
-	let d = `M ${fmt(p1.x)} ${fmt(p1.y)} L ${fmt(p2.x)} ${fmt(p2.y)}`;
-	const theta = Math.atan2(p2.y - p1.y, p2.x - p1.x);
-	const angleRad = angle * Math.PI / 180;
-	if (endMarker !== "none") {
-		const baseWing = {
-			x: p2.x - size,
-			y: p2.y
-		};
-		const wing1 = rotatePoint(p2, baseWing, theta + angleRad);
-		const wing2 = rotatePoint(p2, baseWing, theta - angleRad);
-		if (endMarker === "open") d += ` M ${fmt(wing1.x)} ${fmt(wing1.y)} L ${fmt(p2.x)} ${fmt(p2.y)} L ${fmt(wing2.x)} ${fmt(wing2.y)}`;
-		else if (endMarker === "filled") d += ` M ${fmt(wing1.x)} ${fmt(wing1.y)} L ${fmt(p2.x)} ${fmt(p2.y)} L ${fmt(wing2.x)} ${fmt(wing2.y)} Z`;
-	}
-	if (startMarker !== "none") {
-		const baseWingStart = {
-			x: p1.x + size,
-			y: p1.y
-		};
-		const wing1 = rotatePoint(p1, baseWingStart, theta + angleRad);
-		const wing2 = rotatePoint(p1, baseWingStart, theta - angleRad);
-		if (startMarker === "open") d += ` M ${fmt(wing1.x)} ${fmt(wing1.y)} L ${fmt(p1.x)} ${fmt(p1.y)} L ${fmt(wing2.x)} ${fmt(wing2.y)}`;
-		else if (startMarker === "filled") d += ` M ${fmt(wing1.x)} ${fmt(wing1.y)} L ${fmt(p1.x)} ${fmt(p1.y)} L ${fmt(wing2.x)} ${fmt(wing2.y)} Z`;
-	}
-	return d;
-}
 var shape_default = definePlugin((editor) => {
 	const { addElement, activateTool } = editor;
 	function createHandle(shape) {
@@ -12003,7 +12856,7 @@ var shape_default = definePlugin((editor) => {
 //#endregion
 //#region src/plugins/slice.ts
 var slice_default = definePlugin((editor) => {
-	const { activateTool, addElement, t, elementSelection, inEditorIs, to, fonts, drawboardEffect } = editor;
+	const { activateTool, addElement, t, elementSelection, inEditorIs, to, fonts, drawboardEffect, runExclusiveRender } = editor;
 	async function exportSlice(options) {
 		const el = elementSelection.value[0];
 		if (!el || !inEditorIs(el, "Slice")) return;
@@ -12019,7 +12872,7 @@ var slice_default = definePlugin((editor) => {
 			},
 			meta: { inCanvasIs: "Camera2D" }
 		});
-		return await render({
+		return await runExclusiveRender(() => render({
 			data: doc,
 			fonts,
 			width: aabb.width,
@@ -12033,7 +12886,7 @@ var slice_default = definePlugin((editor) => {
 					pixelGrid: false
 				}));
 			}
-		});
+		}));
 	}
 	return {
 		name: "mce:slice",
@@ -12087,7 +12940,7 @@ var slice_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/SmartGuides.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$12 = {
+var _hoisted_1$13 = {
 	key: 0,
 	class: "m-smart-guides"
 };
@@ -12099,7 +12952,7 @@ var SmartGuides_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const { state } = useEditor();
 		return (_ctx, _cache) => {
-			return unref(state) === "transforming" || unref(state) === "moving" ? (openBlock(), createElementBlock("div", _hoisted_1$12, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.snapLines, (item, key) => {
+			return unref(state) === "transforming" || unref(state) === "moving" ? (openBlock(), createElementBlock("div", _hoisted_1$13, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.snapLines, (item, key) => {
 				return openBlock(), createElementBlock("div", {
 					key,
 					class: normalizeClass(item.class.map((v) => `m-smart-guides__${v}`)),
@@ -12969,8 +13822,8 @@ var BSTree = class extends BSTreeKV {};
 var smartGuides_default = definePlugin((editor) => {
 	const { isNode, isElement, elementSelection, selectionAabb, getAabb, root, camera, viewportAabb, registerSnapper } = editor;
 	const snapThreshold = computed(() => Math.max(1, 5 / camera.value.zoom.x));
-	const parnet = computed(() => elementSelection.value[0]?.parent ?? root.value);
-	const parentBox = computed(() => createBox(parnet.value));
+	const parent = computed(() => elementSelection.value[0]?.parent ?? root.value);
+	const parentBox = computed(() => createBox(parent.value));
 	function createBox(node) {
 		if (!node) return void 0;
 		const box = {};
@@ -13063,7 +13916,7 @@ var smartGuides_default = definePlugin((editor) => {
 		const box = createBox(selectionAabb.value);
 		if (box) {
 			const excluded = new Set(elementSelection.value.map((el) => el.instanceId));
-			const { vLines, hLines } = parnet.value.children.filter((node) => {
+			const { vLines, hLines } = parent.value.children.filter((node) => {
 				return !excluded.has(node.instanceId) && isElement(node) && viewportAabb.value.overlap(node.globalAabb);
 			}).map((node) => createBox(node)).filter(Boolean).reduce((store, box) => {
 				[
@@ -13272,7 +14125,7 @@ var smartGuides_default = definePlugin((editor) => {
 			y
 		};
 	}
-	registerSnapper("smartGuides", { get: () => {
+	registerSnapper("smartGuides", { getLines: () => {
 		const lines = getSnapPoints();
 		return {
 			xLines: lines.x,
@@ -13323,7 +14176,7 @@ function isLeftTopLine(line) {
 }
 //#endregion
 //#region src/components/SmartSelection.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$11 = ["onPointerdown"];
+var _hoisted_1$12 = ["onPointerdown"];
 //#endregion
 //#region src/components/SmartSelection.vue
 var SmartSelection_default = /* @__PURE__ */ defineComponent({
@@ -13732,7 +14585,7 @@ var SmartSelection_default = /* @__PURE__ */ defineComponent({
 					}, [createElementVNode("div", {
 						class: "m-smart-selection__ring",
 						onPointerdown: ($event) => onRingDrag($event, item)
-					}, null, 40, _hoisted_1$11)], 6);
+					}, null, 40, _hoisted_1$12)], 6);
 				}), 128)), currentTransform.value.width && currentTransform.value.height ? (openBlock(), createBlock(Transform_default, mergeProps({
 					key: 0,
 					"model-value": currentTransform.value
@@ -13814,13 +14667,13 @@ var state_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/shared/ProgressIndicator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$10 = { class: "m-progress-indicator" };
-var _hoisted_2$5 = {
+var _hoisted_1$11 = { class: "m-progress-indicator" };
+var _hoisted_2$6 = {
 	key: 0,
 	class: "m-progress-indicator__status"
 };
-var _hoisted_3$5 = { class: "m-progress-indicator__bar" };
-var _hoisted_4$2 = {
+var _hoisted_3$6 = { class: "m-progress-indicator__bar" };
+var _hoisted_4$3 = {
 	key: 1,
 	class: "m-progress-indicator__bar-indeterminate"
 };
@@ -13839,31 +14692,31 @@ var ProgressIndicator_default = /* @__PURE__ */ _plugin_vue_export_helper_defaul
 	setup(__props) {
 		const progress = useModel(__props, "modelValue");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$10, [__props.label ? (openBlock(), createElementBlock("span", _hoisted_2$5, toDisplayString(__props.label), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$5, [!__props.indeterminate ? (openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock("div", _hoisted_1$11, [__props.label ? (openBlock(), createElementBlock("span", _hoisted_2$6, toDisplayString(__props.label), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$6, [!__props.indeterminate ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: "m-progress-indicator__bar-fill",
 				style: normalizeStyle({ width: `${progress.value * 100}%` })
-			}, null, 4)) : (openBlock(), createElementBlock("div", _hoisted_4$2))])]);
+			}, null, 4)) : (openBlock(), createElementBlock("div", _hoisted_4$3))])]);
 		};
 	}
 }), [["__scopeId", "data-v-cc8ac0cb"]]);
 //#endregion
 //#region src/components/Statusbar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$9 = { class: "m-statusbar" };
-var _hoisted_2$4 = { class: "m-statusbar__main" };
-var _hoisted_3$4 = { class: "m-statusbar__item" };
-var _hoisted_4$1 = { class: "m-statusbar__kbd" };
+var _hoisted_1$10 = { class: "m-statusbar" };
+var _hoisted_2$5 = { class: "m-statusbar__main" };
+var _hoisted_3$5 = { class: "m-statusbar__item" };
+var _hoisted_4$2 = { class: "m-statusbar__kbd" };
 var _hoisted_5$1 = { class: "m-statusbar__kbd" };
 var _hoisted_6$1 = { class: "m-statusbar__item" };
-var _hoisted_7 = { class: "m-statusbar__kbd" };
-var _hoisted_8 = { class: "m-statusbar__item" };
-var _hoisted_9 = { class: "m-statusbar__item" };
-var _hoisted_10 = { class: "m-statusbar__kbd" };
-var _hoisted_11 = { class: "m-statusbar__item" };
-var _hoisted_12 = { class: "m-statusbar__kbd" };
-var _hoisted_13 = { key: 2 };
-var _hoisted_14 = { class: "m-statusbar__item" };
-var _hoisted_15 = { class: "m-statusbar__item" };
+var _hoisted_7$1 = { class: "m-statusbar__kbd" };
+var _hoisted_8$1 = { class: "m-statusbar__item" };
+var _hoisted_9$1 = { class: "m-statusbar__item" };
+var _hoisted_10$1 = { class: "m-statusbar__kbd" };
+var _hoisted_11$1 = { class: "m-statusbar__item" };
+var _hoisted_12$1 = { class: "m-statusbar__kbd" };
+var _hoisted_13$1 = { key: 2 };
+var _hoisted_14$1 = { class: "m-statusbar__item" };
+var _hoisted_15$1 = { class: "m-statusbar__item" };
 var _hoisted_16 = { class: "m-statusbar__kbd" };
 var _hoisted_17 = { class: "m-statusbar__item" };
 var _hoisted_18 = { class: "m-statusbar__item" };
@@ -13878,19 +14731,19 @@ var Statusbar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 	setup(__props) {
 		const { state, t, getKbd, exporting, exportProgress, selection, isElement } = useEditor();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$9, [createElementVNode("div", _hoisted_2$4, [unref(state) === "typing" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-				createElementVNode("div", _hoisted_3$4, [createElementVNode("span", _hoisted_4$1, toDisplayString(unref(getKbd)("Command")), 1), createElementVNode("span", _hoisted_5$1, toDisplayString(unref(getKbd)("Enter")), 1)]),
+			return openBlock(), createElementBlock("div", _hoisted_1$10, [createElementVNode("div", _hoisted_2$5, [unref(state) === "typing" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+				createElementVNode("div", _hoisted_3$5, [createElementVNode("span", _hoisted_4$2, toDisplayString(unref(getKbd)("Command")), 1), createElementVNode("span", _hoisted_5$1, toDisplayString(unref(getKbd)("Enter")), 1)]),
 				_cache[1] || (_cache[1] = createElementVNode("span", null, "/", -1)),
-				createElementVNode("div", _hoisted_6$1, [createElementVNode("span", _hoisted_7, toDisplayString(unref(getKbd)("Escape")), 1), createElementVNode("span", null, toDisplayString(unref(t)("commitChanges")), 1)])
+				createElementVNode("div", _hoisted_6$1, [createElementVNode("span", _hoisted_7$1, toDisplayString(unref(getKbd)("Escape")), 1), createElementVNode("span", null, toDisplayString(unref(t)("commitChanges")), 1)])
 			], 64)) : unref(state) === "transforming" || unref(state) === "moving" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-				createElementVNode("div", _hoisted_8, [createVNode(unref(Icon_default), { icon: "$mouseRightClick" })]),
+				createElementVNode("div", _hoisted_8$1, [createVNode(unref(Icon_default), { icon: "$mouseRightClick" })]),
 				_cache[3] || (_cache[3] = createElementVNode("span", null, "\xA0/\xA0", -1)),
-				createElementVNode("div", _hoisted_9, [createElementVNode("span", _hoisted_10, toDisplayString(unref(getKbd)("Escape")), 1), createElementVNode("span", null, toDisplayString(unref(t)("cancel")), 1)]),
-				unref(state) === "moving" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[2] || (_cache[2] = createElementVNode("div", { class: "m-statusbar__divider" }, null, -1)), createElementVNode("div", _hoisted_11, [createElementVNode("span", _hoisted_12, toDisplayString(unref(getKbd)("Shift")), 1), createElementVNode("span", null, toDisplayString(unref(t)("constrainMovement")), 1)])], 64)) : createCommentVNode("", true)
-			], 64)) : unref(state) ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(unref(t)(unref(state))), 1)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-				createElementVNode("div", _hoisted_14, [createVNode(unref(Icon_default), { icon: "$mouseLeftClick" }), createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)]),
+				createElementVNode("div", _hoisted_9$1, [createElementVNode("span", _hoisted_10$1, toDisplayString(unref(getKbd)("Escape")), 1), createElementVNode("span", null, toDisplayString(unref(t)("cancel")), 1)]),
+				unref(state) === "moving" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[2] || (_cache[2] = createElementVNode("div", { class: "m-statusbar__divider" }, null, -1)), createElementVNode("div", _hoisted_11$1, [createElementVNode("span", _hoisted_12$1, toDisplayString(unref(getKbd)("Shift")), 1), createElementVNode("span", null, toDisplayString(unref(t)("constrainMovement")), 1)])], 64)) : createCommentVNode("", true)
+			], 64)) : unref(state) ? (openBlock(), createElementBlock("span", _hoisted_13$1, toDisplayString(unref(t)(unref(state))), 1)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+				createElementVNode("div", _hoisted_14$1, [createVNode(unref(Icon_default), { icon: "$mouseLeftClick" }), createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)]),
 				_cache[5] || (_cache[5] = createElementVNode("span", null, "\xA0+\xA0", -1)),
-				createElementVNode("div", _hoisted_15, [createElementVNode("span", _hoisted_16, toDisplayString(unref(getKbd)("Shift")), 1), createElementVNode("span", null, toDisplayString(unref(t)("extend")), 1)]),
+				createElementVNode("div", _hoisted_15$1, [createElementVNode("span", _hoisted_16, toDisplayString(unref(getKbd)("Shift")), 1), createElementVNode("span", null, toDisplayString(unref(t)("extend")), 1)]),
 				_cache[6] || (_cache[6] = createElementVNode("div", { class: "m-statusbar__divider" }, null, -1)),
 				createElementVNode("div", _hoisted_17, [createVNode(unref(Icon_default), { icon: "$mouseLeftClick" }), createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)]),
 				_cache[7] || (_cache[7] = createElementVNode("span", null, "\xA0+\xA0", -1)),
@@ -13958,28 +14811,29 @@ var test_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/timeline/Playhead.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$8 = { class: "m-payhead" };
+var _hoisted_1$9 = { class: "m-payhead" };
 //#endregion
 //#region src/components/timeline/Playhead.vue
 var Playhead_default = /* @__PURE__ */ defineComponent({
 	__name: "Playhead",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$8, [..._cache[0] || (_cache[0] = [createElementVNode("header", { class: "m-payhead__header" }, null, -1), createElementVNode("main", { class: "m-payhead__main" }, null, -1)])]);
+			return openBlock(), createElementBlock("div", _hoisted_1$9, [..._cache[0] || (_cache[0] = [createElementVNode("header", { class: "m-payhead__header" }, null, -1), createElementVNode("main", { class: "m-payhead__main" }, null, -1)])]);
 		};
 	}
 });
 //#endregion
 //#region src/components/timeline/Segment.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$7 = {
+var _hoisted_1$8 = ["onMousedown"];
+var _hoisted_2$4 = {
 	key: 0,
 	class: "m-segment__edge m-segment__edge--front"
 };
-var _hoisted_2$3 = {
+var _hoisted_3$4 = {
 	class: "m-segment__node",
 	style: { "overflow": "hidden" }
 };
-var _hoisted_3$3 = {
+var _hoisted_4$1 = {
 	key: 1,
 	class: "m-segment__edge m-segment__edge--end"
 };
@@ -13991,118 +14845,374 @@ var Segment_default = /* @__PURE__ */ defineComponent({
 		node: {},
 		endTime: {},
 		msPerPx: { default: 1 },
-		active: { type: Boolean }
+		active: { type: Boolean },
+		rev: {}
 	},
 	setup(__props) {
 		const props = __props;
+		const { root, currentTime, fps, recomputeTimelineEndTime, selection } = useEditor();
 		const { thumbnailName } = useNode(computed(() => props.node));
 		const blocks = computed(() => {
+			props.rev;
 			const node = props.node;
-			if (node instanceof Element2D) return node.children.filter((child) => child instanceof Animation).map((anim) => {
-				const box = {
-					left: anim.delay / props.msPerPx,
-					top: 0,
-					width: anim.duration / props.msPerPx,
-					height: 0
-				};
-				if (box.width) box.width = `${box.width}px`;
-				else box.width = "100%";
-				return {
-					name: anim.name,
-					style: {
-						width: box.width,
-						transform: `matrix(1, 0, 0, 1, ${box.left}, ${box.top})`
-					}
-				};
-			});
-			return [];
+			const items = [];
+			if (node instanceof Video2D) {
+				const d = node.videoDuration || 0;
+				if (d > 0) items.push({
+					kind: "video",
+					delay: 0,
+					duration: d
+				});
+			}
+			if (node instanceof Element2D) {
+				for (const slot of [
+					"background",
+					"foreground",
+					"fill",
+					"outline"
+				]) {
+					const tx = node[slot]?.animatedTexture;
+					if (tx?.duration) items.push({
+						kind: "media",
+						delay: 0,
+						duration: tx.duration
+					});
+				}
+				node.children.forEach((child) => {
+					if (child instanceof Animation) items.push({
+						kind: "animation",
+						delay: child.delay,
+						duration: child.duration,
+						anim: child
+					});
+				});
+			}
+			return items;
 		});
+		function blockStyle(b) {
+			return {
+				left: `${b.delay / props.msPerPx}px`,
+				width: b.duration > 0 ? `${b.duration / props.msPerPx}px` : "100%"
+			};
+		}
 		const style = computed(() => {
 			const { duration: _duration = 0, delay = 0 } = props.node;
-			const duration = _duration || props.endTime - delay;
-			const box = {
-				left: delay / props.msPerPx,
-				top: 0,
-				width: duration / props.msPerPx,
-				height: 0
-			};
+			let contentEnd = 0;
+			for (const b of blocks.value) contentEnd = Math.max(contentEnd, b.delay + b.duration);
+			const duration = contentEnd || _duration || props.endTime - delay;
 			return {
-				width: `${box.width}px`,
-				transform: `matrix(1, 0, 0, 1, ${box.left}, ${box.top})`
+				transform: `translateX(${delay / props.msPerPx}px)`,
+				width: `${duration / props.msPerPx}px`
 			};
 		});
+		function collectSnapTargets(exclude) {
+			const targets = [
+				0,
+				props.endTime,
+				currentTime.value
+			];
+			root.value.findAll((node) => {
+				if (node === exclude) return false;
+				if (node instanceof Animation) {
+					targets.push(node.delay);
+					targets.push(node.delay + node.duration);
+				}
+				return false;
+			});
+			return targets;
+		}
+		function snap(value, thresholdMs, exclude) {
+			let best = value;
+			let bestDist = thresholdMs;
+			const targets = collectSnapTargets(exclude);
+			for (const t of targets) {
+				const d = Math.abs(t - value);
+				if (d < bestDist) {
+					bestDist = d;
+					best = t;
+				}
+			}
+			if (bestDist === thresholdMs) {
+				const frameMs = 1e3 / fps.value;
+				const f = Math.round(value / frameMs) * frameMs;
+				if (Math.abs(f - value) < thresholdMs) best = f;
+			}
+			return best;
+		}
+		function pickMode(e, resizable) {
+			if (!resizable) return "move";
+			const rect = e.currentTarget.getBoundingClientRect();
+			const localX = e.clientX - rect.left;
+			if (localX < 6) return "resize-left";
+			if (localX > rect.width - 6) return "resize-right";
+			return "move";
+		}
+		function startDrag(e, target, resizable) {
+			e.stopPropagation();
+			selection.value = [props.node];
+			const mode = pickMode(e, resizable);
+			const startX = e.clientX;
+			const initialDelay = target.delay;
+			const initialDuration = resizable ? target.duration || props.endTime - initialDelay : 0;
+			const minDuration = 1e3 / fps.value;
+			const threshold = 8 * props.msPerPx;
+			function onMove(ev) {
+				const deltaMs = (ev.clientX - startX) * props.msPerPx;
+				if (mode === "move") {
+					const t = snap(initialDelay + deltaMs, threshold, target);
+					target.delay = Math.max(0, t);
+				} else if (mode === "resize-left") {
+					const maxDelay = initialDelay + initialDuration - minDuration;
+					const t = snap(initialDelay + deltaMs, threshold, target);
+					const newDelay = Math.max(0, Math.min(maxDelay, t));
+					target.delay = newDelay;
+					target.duration = initialDuration - (newDelay - initialDelay);
+				} else if (mode === "resize-right") {
+					const t = snap(initialDelay + initialDuration + deltaMs, threshold, target);
+					target.duration = Math.max(minDuration, t - initialDelay);
+				}
+			}
+			function onUp() {
+				window.removeEventListener("mousemove", onMove);
+				window.removeEventListener("mouseup", onUp);
+				recomputeTimelineEndTime();
+			}
+			window.addEventListener("mousemove", onMove);
+			window.addEventListener("mouseup", onUp);
+		}
+		function onBlockDown(e, block) {
+			startDrag(e, block.anim ?? props.node, block.kind === "animation");
+		}
+		function onSegmentDown(e) {
+			startDrag(e, props.node, false);
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(["m-segment", [`m-segment--${(__props.node.meta.inEditorIs ?? "none").toLowerCase()}`, __props.active && `m-segment--active`]]),
-				style: normalizeStyle(style.value)
+				style: normalizeStyle(style.value),
+				onMousedown: onSegmentDown
 			}, [
 				(openBlock(true), createElementBlock(Fragment, null, renderList(blocks.value, (block, index) => {
 					return openBlock(), createElementBlock("div", {
 						key: index,
-						class: "m-segment__block",
-						style: normalizeStyle(block.style)
-					}, null, 4);
+						class: normalizeClass(["m-segment__block", `m-segment__block--${block.kind}`]),
+						style: normalizeStyle(blockStyle(block)),
+						onMousedown: ($event) => onBlockDown($event, block)
+					}, null, 46, _hoisted_1$8);
 				}), 128)),
-				__props.active ? (openBlock(), createElementBlock("div", _hoisted_1$7)) : createCommentVNode("", true),
-				createElementVNode("span", _hoisted_2$3, toDisplayString(unref(thumbnailName)), 1),
-				__props.active ? (openBlock(), createElementBlock("div", _hoisted_3$3)) : createCommentVNode("", true)
-			], 6);
+				__props.active ? (openBlock(), createElementBlock("div", _hoisted_2$4)) : createCommentVNode("", true),
+				createElementVNode("span", _hoisted_3$4, toDisplayString(unref(thumbnailName)), 1),
+				__props.active ? (openBlock(), createElementBlock("div", _hoisted_4$1)) : createCommentVNode("", true)
+			], 38);
 		};
 	}
 });
 //#endregion
 //#region src/components/timeline/Track.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$6 = { class: "m-track" };
+var _hoisted_1$7 = { class: "m-track" };
 //#endregion
 //#region src/components/timeline/Track.vue
 var Track_default = /* @__PURE__ */ defineComponent({
 	__name: "Track",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$6, [renderSlot(_ctx.$slots, "default")]);
+			return openBlock(), createElementBlock("div", _hoisted_1$7, [renderSlot(_ctx.$slots, "default")]);
 		};
 	}
 });
 //#endregion
+//#region src/components/timeline/Trackhead.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$6 = ["data-id"];
+var _hoisted_2$3 = { class: "m-trackhead__thumbnail" };
+var _hoisted_3$3 = { key: 1 };
+//#endregion
 //#region src/components/timeline/Trackhead.vue
 var Trackhead_default = /* @__PURE__ */ defineComponent({
 	__name: "Trackhead",
 	props: { node: {} },
 	setup(__props) {
+		const props = __props;
+		const editor = useEditor();
+		const { selection, isVisible, setVisible, isLock, setLock, hoverElement, isElement } = editor;
+		const { thumbnailIcon, thumbnailName } = useNode(computed(() => props.node), editor);
+		const selected = computed(() => selection.value.some((v) => v.equal(props.node)));
+		const hovering = ref(false);
+		const editing = ref(false);
+		const editValue = ref("");
+		const inputDom = useTemplateRef("inputDom");
+		const showActions = computed(() => {
+			return hovering.value || isLock(props.node) || !isVisible(props.node);
+		});
+		function onMousedown(e) {
+			if (e.button !== 0) return;
+			if (e.shiftKey) {
+				const filtered = selection.value.filter((v) => !v.equal(props.node));
+				selection.value = filtered.length !== selection.value.length ? filtered : [...selection.value, props.node];
+			} else selection.value = [props.node];
+			addDragListener(e, {
+				threshold: 10,
+				move: ({ event }) => {
+					const target = event.composedPath().find((t) => {
+						return t instanceof HTMLElement && t.classList.contains("m-trackhead");
+					});
+					document.querySelectorAll(".m-trackhead--dropping").forEach((el) => el.classList.remove("m-trackhead--dropping"));
+					if (target && target.dataset.id !== props.node.id) target.classList.add("m-trackhead--dropping");
+				},
+				end: ({ event }) => {
+					document.querySelectorAll(".m-trackhead--dropping").forEach((el) => el.classList.remove("m-trackhead--dropping"));
+					const toId = event.composedPath().find((t) => {
+						return t instanceof HTMLElement && t.classList.contains("m-trackhead");
+					})?.dataset.id;
+					if (!toId || toId === props.node.id) return;
+					const parent = props.node.parent;
+					if (!parent) return;
+					const to = parent.children.find((c) => c.id === toId);
+					if (!to) return;
+					let toIndex = to.getIndex() + 1;
+					if (to.getIndex() > props.node.getIndex()) toIndex--;
+					parent.moveChild(props.node, toIndex);
+				}
+			});
+		}
+		function onMouseenter() {
+			if (isElement(props.node)) hoverElement.value = props.node;
+			hovering.value = true;
+		}
+		function onMouseleave() {
+			hoverElement.value = void 0;
+			hovering.value = false;
+		}
+		function onDblclickName(e) {
+			e.stopPropagation();
+			editing.value = true;
+			editValue.value = thumbnailName.value;
+			nextTick().then(() => {
+				inputDom.value?.focus({ preventScroll: true });
+				inputDom.value?.select();
+			});
+		}
+		function onInputBlur() {
+			editing.value = false;
+			if (editValue.value && editValue.value !== thumbnailName.value) props.node.name = editValue.value;
+		}
+		function onInputKeydown(e) {
+			if (e.key === "Enter") inputDom.value?.blur();
+			else if (e.key === "Escape") editing.value = false;
+		}
+		function onToggleLock(e) {
+			e.stopPropagation();
+			setLock(props.node, !isLock(props.node));
+		}
+		function onToggleVisible(e) {
+			e.stopPropagation();
+			setVisible(props.node, !isVisible(props.node));
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: "m-trackhead",
-				style: normalizeStyle({ height: `var(--timeline-track-height__${__props.node.meta.inEditorIs}, 22px)` })
-			}, toDisplayString(__props.node.meta.inEditorIs), 5);
+				class: normalizeClass(["m-trackhead", [selected.value && "m-trackhead--selected"]]),
+				"data-id": __props.node.id,
+				onMousedown,
+				onMouseenter,
+				onMouseleave
+			}, [
+				createElementVNode("div", _hoisted_2$3, [createVNode(unref(Icon_default), { icon: unref(thumbnailIcon) }, null, 8, ["icon"])]),
+				createElementVNode("div", {
+					class: "m-trackhead__name",
+					onDblclick: onDblclickName
+				}, [editing.value ? withDirectives((openBlock(), createElementBlock("input", {
+					key: 0,
+					ref_key: "inputDom",
+					ref: inputDom,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => editValue.value = $event),
+					type: "text",
+					class: "m-trackhead__input",
+					spellcheck: "false",
+					autocapitalize: "off",
+					autocorrect: "off",
+					onBlur: onInputBlur,
+					onKeydown: onInputKeydown,
+					onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+				}, null, 544)), [[vModelText, editValue.value]]) : (openBlock(), createElementBlock("span", _hoisted_3$3, toDisplayString(unref(thumbnailName)), 1))], 32),
+				createElementVNode("div", { class: normalizeClass(["m-trackhead__action", { "m-trackhead__action--show": showActions.value }]) }, [createElementVNode("button", {
+					type: "button",
+					class: normalizeClass(["m-trackhead__btn", { "m-trackhead__btn--show": unref(isLock)(__props.node) }]),
+					onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+					onClick: onToggleLock
+				}, [createVNode(unref(Icon_default), { icon: unref(isLock)(__props.node) ? "$lock" : "$unlock" }, null, 8, ["icon"])], 34), createElementVNode("button", {
+					type: "button",
+					class: normalizeClass(["m-trackhead__btn", { "m-trackhead__btn--show": !unref(isVisible)(__props.node) }]),
+					onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"])),
+					onClick: onToggleVisible
+				}, [createVNode(unref(Icon_default), { icon: unref(isVisible)(__props.node) ? "$visible" : "$unvisible" }, null, 8, ["icon"])], 34)], 2)
+			], 42, _hoisted_1$6);
 		};
 	}
 });
 //#endregion
 //#region src/components/timeline/Timeline.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$5 = { class: "m-timeline__toolbar" };
-var _hoisted_2$2 = { class: "m-timeline__main" };
-var _hoisted_3$2 = { class: "m-timeline__left-wrapper" };
-var _hoisted_4 = { class: "m-timeline__right-wrapper" };
-var _hoisted_5 = { class: "m-timeline__ruler" };
-var _hoisted_6 = { class: "m-timeline__track" };
+var _hoisted_2$2 = { class: "m-timeline__time" };
+var _hoisted_3$2 = { class: "m-timeline__time--muted" };
+var _hoisted_4 = { class: "m-timeline__controls" };
+var _hoisted_5 = ["title"];
+var _hoisted_6 = ["title"];
+var _hoisted_7 = ["title"];
+var _hoisted_8 = ["title"];
+var _hoisted_9 = ["title"];
+var _hoisted_10 = ["title"];
+var _hoisted_11 = { class: "m-timeline__main" };
+var _hoisted_12 = { class: "m-timeline__left-wrapper" };
+var _hoisted_13 = { class: "m-timeline__right-wrapper" };
+var _hoisted_14 = { class: "m-timeline__ruler" };
+var _hoisted_15 = { class: "m-timeline__track" };
 //#endregion
 //#region src/components/timeline/Timeline.vue
 var Timeline_default = /* @__PURE__ */ defineComponent({
 	__name: "Timeline",
 	setup(__props) {
-		const { isElement, root, msPerPx, currentTime, timeline, endTime, selection } = useEditor();
-		const fps = ref(1e3 / 30);
+		const { isElement, root, msPerPx, currentTime, endTime, selection, paused, fps, exec, t, assets } = useEditor();
 		const ruler = useTemplateRef("rulerTpl");
-		const paused = ref(true);
 		const offset = ref([0, 0]);
+		const tracksRev = ref(0);
+		function bumpTracksRev() {
+			tracksRev.value++;
+		}
+		let pollId;
+		onBeforeMount(() => {
+			assets.on("loaded", bumpTracksRev);
+			pollId = setInterval(bumpTracksRev, 500);
+		});
+		onBeforeUnmount(() => {
+			assets.off("loaded", bumpTracksRev);
+			if (pollId !== void 0) {
+				clearInterval(pollId);
+				pollId = void 0;
+			}
+		});
+		function hasAnimatedContent(el) {
+			if (el.children.some((c) => c instanceof Animation)) return true;
+			return Boolean(el.background?.animatedTexture || el.foreground?.animatedTexture || el.fill?.animatedTexture || el.outline?.animatedTexture);
+		}
 		const elements = computed(() => {
+			endTime.value;
+			tracksRev.value;
 			return root.value.findAll((node) => {
-				if (isElement(node)) {
-					if (node.children.some((child) => child instanceof Animation)) return true;
-				}
+				if (node instanceof Video2D) return true;
+				if (isElement(node) && hasAnimatedContent(node)) return true;
 				return false;
 			}).reverse();
 		});
+		function pad(n) {
+			return String(Math.max(0, Math.floor(n))).padStart(2, "0");
+		}
+		function formatTime(ms) {
+			const totalFrames = Math.round((Number.isFinite(ms) ? ms : 0) / 1e3 * fps.value);
+			const f = totalFrames % fps.value;
+			const s = Math.floor(totalFrames / fps.value) % 60;
+			return `${pad(Math.floor(totalFrames / fps.value / 60))}:${pad(s)}.${pad(f)}`;
+		}
+		const currentLabel = computed(() => formatTime(currentTime.value));
+		const totalLabel = computed(() => formatTime(endTime.value));
 		function onWheel(e) {
 			if (e.ctrlKey || e.metaKey) {
 				e.preventDefault();
@@ -14131,47 +15241,67 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 			}
 		}
 		function rulerLabelFormat(f) {
-			if (f % 30 === 0) {
-				const m = Math.floor(f / 30 / 60);
-				const s = Math.floor(f / 30) % 60;
+			const framesPerSec = fps.value;
+			if (f % framesPerSec === 0) {
+				const m = Math.floor(f / framesPerSec / 60);
+				const s = Math.floor(f / framesPerSec) % 60;
 				return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
 			}
-			return `${Math.floor(f % 30)}f`;
-		}
-		let requestId;
-		function play() {
-			paused.value = false;
-			let prevTime;
-			function loop(time) {
-				if (prevTime !== void 0 && time !== void 0) timeline.value.addTime(time - prevTime);
-				prevTime = time;
-				requestId = requestAnimationFrame(loop);
-			}
-			loop();
+			return `${Math.floor(f % framesPerSec)}f`;
 		}
-		function pause() {
-			paused.value = true;
-			if (requestId !== void 0) {
-				cancelAnimationFrame(requestId);
-				requestId = void 0;
-			}
-		}
-		function toggle() {
-			if (paused.value) play();
-			else pause();
-		}
-		onBeforeUnmount(pause);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: "m-timeline",
-				onWheel: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
-			}, [createElementVNode("div", _hoisted_1$5, [createElementVNode("div", {
-				class: "m-timeline__play",
-				onClick: toggle
-			}, [createVNode(unref(Icon_default), { icon: paused.value ? "$play" : "$pause" }, null, 8, ["icon"])])]), createElementVNode("div", _hoisted_2$2, [createElementVNode("div", {
+				onWheel: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"]))
+			}, [createElementVNode("div", _hoisted_1$5, [
+				createElementVNode("div", _hoisted_2$2, [
+					createElementVNode("span", null, toDisplayString(currentLabel.value), 1),
+					_cache[7] || (_cache[7] = createElementVNode("span", { class: "m-timeline__time-sep" }, "/", -1)),
+					createElementVNode("span", _hoisted_3$2, toDisplayString(totalLabel.value), 1)
+				]),
+				createElementVNode("div", _hoisted_4, [
+					createElementVNode("button", {
+						class: "m-timeline__btn",
+						type: "button",
+						title: unref(t)("seekStart"),
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(exec)("seekStart"))
+					}, [createVNode(unref(Icon_default), { icon: "$skipPrevious" })], 8, _hoisted_5),
+					createElementVNode("button", {
+						class: "m-timeline__btn",
+						type: "button",
+						title: unref(t)("stepBackward"),
+						onClick: _cache[1] || (_cache[1] = ($event) => unref(exec)("stepBackward"))
+					}, [createVNode(unref(Icon_default), { icon: "$stepBackward" })], 8, _hoisted_6),
+					createElementVNode("button", {
+						class: "m-timeline__btn m-timeline__btn--primary",
+						type: "button",
+						title: unref(paused) ? unref(t)("play") : unref(t)("pause"),
+						onClick: _cache[2] || (_cache[2] = ($event) => unref(exec)("togglePlay"))
+					}, [createVNode(unref(Icon_default), { icon: unref(paused) ? "$play" : "$pause" }, null, 8, ["icon"])], 8, _hoisted_7),
+					createElementVNode("button", {
+						class: "m-timeline__btn",
+						type: "button",
+						title: unref(t)("stepForward"),
+						onClick: _cache[3] || (_cache[3] = ($event) => unref(exec)("stepForward"))
+					}, [createVNode(unref(Icon_default), { icon: "$stepForward" })], 8, _hoisted_8),
+					createElementVNode("button", {
+						class: "m-timeline__btn",
+						type: "button",
+						title: unref(t)("seekEnd"),
+						onClick: _cache[4] || (_cache[4] = ($event) => unref(exec)("seekEnd"))
+					}, [createVNode(unref(Icon_default), { icon: "$skipNext" })], 8, _hoisted_9)
+				]),
+				_cache[8] || (_cache[8] = createElementVNode("div", { class: "m-timeline__toolbar-spacer" }, null, -1)),
+				createElementVNode("button", {
+					class: "m-timeline__btn",
+					type: "button",
+					title: unref(t)("collapse"),
+					onClick: _cache[5] || (_cache[5] = ($event) => unref(exec)("togglePanel", "timeline"))
+				}, [createVNode(unref(Icon_default), { icon: "$arrowDown" })], 8, _hoisted_10)
+			]), createElementVNode("div", _hoisted_11, [createElementVNode("div", {
 				class: "m-timeline__left",
 				onWheel
-			}, [createElementVNode("div", _hoisted_3$2, [createElementVNode("div", { style: normalizeStyle({ transform: `translateY(${offset.value[1]}px)` }) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
+			}, [createElementVNode("div", _hoisted_12, [createElementVNode("div", { style: normalizeStyle({ transform: `translateY(${offset.value[1]}px)` }) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
 				return openBlock(), createBlock(Trackhead_default, {
 					key: index,
 					node
@@ -14180,17 +15310,17 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 				class: "m-timeline__right",
 				onWheel,
 				onMousedown
-			}, [createElementVNode("div", _hoisted_4, [
-				createElementVNode("div", _hoisted_5, [createVNode(Ruler_default, {
+			}, [createElementVNode("div", _hoisted_13, [
+				createElementVNode("div", _hoisted_14, [createVNode(Ruler_default, {
 					ref: "rulerTpl",
-					zoom: 1 / unref(msPerPx) * fps.value,
+					zoom: 1e3 / unref(msPerPx) / unref(fps),
 					unit: 100,
 					"unit-fractions": [1, 3],
 					style: { "position": "relative" },
 					position: -offset.value[0],
 					"label-format": rulerLabelFormat
 				}, null, 8, ["zoom", "position"])]),
-				createElementVNode("div", _hoisted_6, [createElementVNode("div", { style: normalizeStyle({
+				createElementVNode("div", _hoisted_15, [createElementVNode("div", { style: normalizeStyle({
 					width: `${unref(endTime) / unref(msPerPx)}px`,
 					transform: `translate(${offset.value[0]}px, ${offset.value[1]}px)`
 				}) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
@@ -14199,14 +15329,14 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 							node,
 							"ms-per-px": unref(msPerPx),
 							"end-time": unref(endTime),
-							active: unref(selection).some((v) => v.equal(node)),
-							onMousedown: withModifiers(($event) => selection.value = [node], ["stop"])
+							rev: tracksRev.value,
+							active: unref(selection).some((v) => v.equal(node))
 						}, null, 8, [
 							"node",
 							"ms-per-px",
 							"end-time",
-							"active",
-							"onMousedown"
+							"rev",
+							"active"
 						])]),
 						_: 2
 					}, 1024);
@@ -14219,8 +15349,48 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/plugins/timeline.ts
 var timeline_default = definePlugin((editor) => {
-	const { registerConfig } = editor;
+	const { registerConfig, timeline } = editor;
 	const config = registerConfig("ui.timeline", { default: { visible: false } });
+	const paused = ref(true);
+	const fps = ref(30);
+	async function recomputeTimelineEndTime() {
+		await editor.renderEngine.value.nextTick();
+		timeline.value.endTime = editor.root.value ? editor.getTimeRange(editor.root.value).endTime : 0;
+	}
+	Object.assign(editor, {
+		paused,
+		fps,
+		recomputeTimelineEndTime
+	});
+	function play() {
+		paused.value = false;
+	}
+	function pause() {
+		paused.value = true;
+	}
+	function togglePlay() {
+		paused.value = !paused.value;
+	}
+	function seekStart() {
+		const tl = timeline.value;
+		tl.currentTime = tl.startTime;
+	}
+	function seekEnd() {
+		const tl = timeline.value;
+		tl.currentTime = tl.endTime;
+	}
+	function stepBackward() {
+		const tl = timeline.value;
+		const ms = 1e3 / fps.value;
+		const cur = Number.isFinite(tl.currentTime) ? tl.currentTime : tl.startTime;
+		tl.currentTime = Math.max(tl.startTime, cur - ms);
+	}
+	function stepForward() {
+		const tl = timeline.value;
+		const ms = 1e3 / fps.value;
+		const cur = Number.isFinite(tl.currentTime) ? tl.currentTime : tl.startTime;
+		tl.currentTime = Math.min(tl.endTime, cur + ms);
+	}
 	return {
 		name: "mce:timeline",
 		components: [{
@@ -14234,22 +15404,105 @@ var timeline_default = definePlugin((editor) => {
 				set: (val) => config.value.visible = val
 			})
 		}],
-		hotkeys: [{
-			command: "togglePanel:timeline",
-			key: "Alt+2"
-		}],
+		commands: [
+			{
+				command: "play",
+				handle: play
+			},
+			{
+				command: "pause",
+				handle: pause
+			},
+			{
+				command: "togglePlay",
+				handle: togglePlay
+			},
+			{
+				command: "seekStart",
+				handle: seekStart
+			},
+			{
+				command: "seekEnd",
+				handle: seekEnd
+			},
+			{
+				command: "stepBackward",
+				handle: stepBackward
+			},
+			{
+				command: "stepForward",
+				handle: stepForward
+			}
+		],
+		hotkeys: [
+			{
+				command: "togglePanel:timeline",
+				key: "Alt+2"
+			},
+			{
+				command: "togglePlay",
+				key: "Space",
+				preventDefault: true
+			},
+			{
+				command: "seekStart",
+				key: "Home",
+				preventDefault: true
+			},
+			{
+				command: "seekEnd",
+				key: "End",
+				preventDefault: true
+			},
+			{
+				command: "stepBackward",
+				key: "Left",
+				preventDefault: true
+			},
+			{
+				command: "stepForward",
+				key: "Right",
+				preventDefault: true
+			}
+		],
 		setup: () => {
-			const { assets, on, off, renderEngine, timeline, getTimeRange, root } = editor;
-			async function updateEndTime() {
-				await renderEngine.value.nextTick();
-				timeline.value.endTime = root.value ? getTimeRange(root.value).endTime : 0;
-				if (!config.value.visible) timeline.value.currentTime = timeline.value.endTime;
+			const { assets, on, off } = editor;
+			const updateEndTime = recomputeTimelineEndTime;
+			let requestId;
+			let prevTime;
+			function startRaf() {
+				if (requestId !== void 0) return;
+				if (!Number.isFinite(timeline.value.currentTime)) timeline.value.currentTime = timeline.value.startTime;
+				function loop(time) {
+					if (prevTime !== void 0 && time !== void 0) {
+						const tl = timeline.value;
+						if (tl.endTime > tl.startTime) tl.addTime(time - prevTime);
+					}
+					prevTime = time;
+					requestId = requestAnimationFrame(loop);
+				}
+				loop();
+			}
+			function stopRaf() {
+				if (requestId !== void 0) {
+					cancelAnimationFrame(requestId);
+					requestId = void 0;
+				}
+				prevTime = void 0;
 			}
+			watch(() => config.value.visible, (visible) => {
+				paused.value = visible;
+			}, { immediate: true });
+			watch(paused, (p) => {
+				if (p) stopRaf();
+				else startRaf();
+			}, { immediate: true });
 			onBeforeMount(() => {
 				on("docSet", updateEndTime);
 				assets.on("loaded", updateEndTime);
 			});
 			onScopeDispose(() => {
+				stopRaf();
 				off("docSet", updateEndTime);
 				assets.off("loaded", updateEndTime);
 			});
@@ -14468,6 +15721,7 @@ var transform_default = definePlugin((editor) => {
 			const el = els[0];
 			if (el.text.isValid()) await exec("startTyping");
 			else if (el.foreground.isValid()) state.value = "cropping";
+			else if (el.shape.isValid() && el.shape.paths?.length && !el.shape.svg) state.value = "pathEditing";
 		}
 	}
 	let context;
@@ -14610,8 +15864,8 @@ var transform_default = definePlugin((editor) => {
 						newStyle.top = center.y - newStyle.height / 2;
 					}
 				}
-				const scale = newStyle.rotate ? 100 : 1;
-				resizeElement(el, Math.max(1, Math.round(newStyle.width * scale) / scale), Math.max(1, Math.round(newStyle.height * scale) / scale), inEditorIs(el, "Frame") ? void 0 : el.shape.isValid() ? { deep: true } : isCorner ? {
+				const roundFactor = newStyle.rotate ? 100 : 1;
+				resizeElement(el, Math.max(1, Math.round(newStyle.width * roundFactor) / roundFactor), Math.max(1, Math.round(newStyle.height * roundFactor) / roundFactor), inEditorIs(el, "Frame") ? void 0 : el.shape.isValid() ? { deep: true } : isCorner ? {
 					deep: true,
 					textFontSizeToFit: true
 				} : {
@@ -14645,7 +15899,7 @@ var transform_default = definePlugin((editor) => {
 	};
 	const rotate = (deg) => {
 		elementSelection.value.forEach((el) => {
-			el.style.rotate = (el.style.rotate + deg) % 360;
+			el.style.rotate = ((el.style.rotate + deg) % 360 + 360) % 360;
 		});
 	};
 	const flip = (direction) => {
@@ -15712,7 +16966,7 @@ var plugins = [
 							return ~~Math.max(prev, f[key] ?? 0);
 						}, prev);
 					}, value) ?? value;
-					default: if (content.length === 1 && content[0].fragments.length === 1 && content[0].fragments[0][key]) return content[0].fragments[0][key];
+					default: if (content?.length === 1 && content[0].fragments.length === 1 && content[0].fragments[0][key]) return content[0].fragments[0][key];
 				}
 			}
 			return value;
@@ -15977,7 +17231,7 @@ var plugins = [
 				},
 				{
 					command: "isUiVisible",
-					handle: (name) => Boolean(getUiConfig(name).visible)
+					handle: (name) => Boolean(getUiConfig(name)?.visible)
 				},
 				{
 					command: "setUiVisible",