mce 0.18.4 → 0.18.5

package/dist/index.js

@@ -151,6 +151,33 @@ var imageExts = Object.values({
 var imageExtRe = new RegExp(`\\.(?:${imageExts.map((v) => v.substring(1)).join("|")})`, "i");
 //#endregion
 //#region src/utils/create.ts
+var RECT_PATH$1 = "M0 0h24v24H0z";
+var FLOW_CONNECTION_POINTS = [
+	{
+		idx: 0,
+		x: 1,
+		y: .5,
+		ang: 0
+	},
+	{
+		idx: 1,
+		x: 0,
+		y: .5,
+		ang: Math.PI
+	},
+	{
+		idx: 2,
+		x: .5,
+		y: 1,
+		ang: Math.PI / 2
+	},
+	{
+		idx: 3,
+		x: .5,
+		y: 0,
+		ang: -Math.PI / 2
+	}
+];
 function createShapeElement(shape, fill, outline) {
 	return {
 		shape,
@@ -191,6 +218,110 @@ async function createImageElement(image) {
 		}
 	};
 }
+/**
+* A rounded panel with a bold title and optional body, composed as child text
+* elements (so each line keeps its own styling and can be edited in place).
+*/
+function createCardElement(title, options = {}) {
+	const { body, width = 220, height = 130, fill = "#ffffff", outline = {
+		color: "#e5e7eb",
+		width: 1
+	}, borderRadius = 12, padding = 16, titleStyle, bodyStyle } = options;
+	const children = [{
+		style: {
+			left: padding,
+			top: padding,
+			width: width - padding * 2,
+			fontSize: 18,
+			fontWeight: 700,
+			color: "#111827",
+			...titleStyle
+		},
+		text: { content: normalizeTextContent(title) },
+		meta: { inCanvasIs: "Element2D" }
+	}];
+	if (body) children.push({
+		style: {
+			left: padding,
+			top: padding + 32,
+			width: width - padding * 2,
+			fontSize: 14,
+			color: "#6b7280",
+			...bodyStyle
+		},
+		text: { content: normalizeTextContent(body) },
+		meta: { inCanvasIs: "Element2D" }
+	});
+	return {
+		style: {
+			width,
+			height,
+			borderRadius,
+			overflow: "hidden"
+		},
+		shape: [{ data: RECT_PATH$1 }],
+		fill,
+		outline,
+		children,
+		meta: {
+			inPptIs: "Shape",
+			inCanvasIs: "Element2D"
+		}
+	};
+}
+/**
+* A labelled rounded box that exposes connection points, so connectors can
+* attach and route to it. Pairs with the `connection` element.
+*/
+function createFlowNodeElement(label = "", options = {}) {
+	const { width = 160, height = 72, fill = "#e0edff", outline = {
+		color: "#4f8cff",
+		width: 2
+	}, borderRadius = 8, textStyle, connectionPoints = FLOW_CONNECTION_POINTS } = options;
+	return {
+		style: {
+			width,
+			height,
+			borderRadius,
+			textAlign: "center",
+			verticalAlign: "middle",
+			color: "#1e3a8a",
+			...textStyle
+		},
+		shape: {
+			enabled: true,
+			paths: [{ data: RECT_PATH$1 }],
+			connectionPoints
+		},
+		fill,
+		outline,
+		text: { content: normalizeTextContent(label) },
+		meta: {
+			inPptIs: "Shape",
+			inCanvasIs: "Element2D"
+		}
+	};
+}
+/** A solid colored note with top-aligned text, e.g. for whiteboard annotations. */
+function createStickyElement(content, options = {}) {
+	const { width = 160, height = 160, fill = "#fff3a0", color = "#3f3f46", fontSize = 16, padding = 14 } = options;
+	return {
+		style: {
+			width,
+			height,
+			padding,
+			color,
+			fontSize
+		},
+		shape: [{ data: RECT_PATH$1 }],
+		fill,
+		text: { content: normalizeTextContent(content) },
+		meta: {
+			inPptIs: "Shape",
+			inCanvasIs: "Element2D"
+		}
+	};
+}
 //#endregion
 //#region src/utils/dnd.ts
 function addDragListener(downEvent, options = {}) {
@@ -906,7 +1037,7 @@ function signedArea(data, start, end, dim) {
 	return sum;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/modern-path2d@1.6.0/node_modules/modern-path2d/dist/index.mjs
+//#region ../../node_modules/.pnpm/modern-path2d@1.7.0/node_modules/modern-path2d/dist/index.mjs
 function drawPoint(ctx, x, y, options = {}) {
 	const { radius = 1 } = options;
 	ctx.moveTo(x, y);
@@ -1012,7 +1143,7 @@ var Vector2 = class Vector2 {
 		return this.set(this._x * x, this._y * y);
 	}
 	divide(x = 0, y = x) {
-		return this.set(this._x / x, this._y / y);
+		return this.set(x === 0 ? this._x : this._x / x, y === 0 ? this._y : this._y / y);
 	}
 	cross(p) {
 		return this._x * p.y - this._y * p.x;
@@ -1190,9 +1321,9 @@ function getIntersectionPoint(p1, p2, q1, q2) {
 	const s = q2.clone().sub(q1);
 	const q1p1 = q1.clone().sub(p1);
 	const crossRS = r.cross(s);
-	if (crossRS === 0) return new Vector2((p1.x + q1.x) / 2, (p1.y + q1.y) / 2);
+	if (crossRS === 0) return null;
 	const t = q1p1.cross(s) / crossRS;
-	if (Math.abs(t) > 1) return new Vector2((p1.x + q1.x) / 2, (p1.y + q1.y) / 2);
+	if (Math.abs(t) > 1) return null;
 	return new Vector2(p1.x + t * r.x, p1.y + t * r.y);
 }
 var FUNCTIONS_RE = /([\w-]+)\((.+?)\)/g;
@@ -1398,7 +1529,7 @@ function recursive(points, x1, y1, x2, y2, x3, y3, distanceTolerance, level) {
 function cross(ax, ay, bx, by, cx, cy) {
 	return (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);
 }
-function windingNumber(px, py, polygon) {
+function windingNumber$1(px, py, polygon) {
 	const polygonLen = polygon.length;
 	let wn = 0;
 	for (let i = 0, j = polygonLen - 2; i < polygonLen; j = i, i += 2) {
@@ -1417,11 +1548,18 @@ function distance(p1, p2) {
 	const dy = p2[1] - p1[1];
 	return Math.sqrt(dx * dx + dy * dy);
 }
+function aabbIntersects(a, b) {
+	return a.minX <= b.maxX && a.maxX >= b.minX && a.minY <= b.maxY && a.maxY >= b.minY;
+}
 function nonzeroFillRule(paths) {
 	const results = paths.map((_, i) => ({ index: i }));
-	const testPointsGroups = paths.map((path) => {
+	const bboxes = [];
+	const testPointsGroups = paths.map((path, pathIndex) => {
 		const len = path.length;
-		if (!len) return [];
+		if (!len) {
+			bboxes[pathIndex] = null;
+			return [];
+		}
 		let xMinYAuto = [Number.MAX_SAFE_INTEGER, 0];
 		let xAutoYMin = [0, Number.MAX_SAFE_INTEGER];
 		let xMaxYAuto = [Number.MIN_SAFE_INTEGER, 0];
@@ -1434,6 +1572,12 @@ function nonzeroFillRule(paths) {
 			if (xMaxYAuto[0] < x) xMaxYAuto = [x, y];
 			if (xAutoYMax[1] < y) xAutoYMax = [x, y];
 		}
+		bboxes[pathIndex] = {
+			minX: xMinYAuto[0],
+			minY: xAutoYMin[1],
+			maxX: xMaxYAuto[0],
+			maxY: xAutoYMax[1]
+		};
 		const mid = [(xMinYAuto[0] + xMaxYAuto[0]) / 2, (xAutoYMin[1] + xAutoYMax[1]) / 2];
 		let xMidYMinDx;
 		let xMidYMaxDx;
@@ -1479,13 +1623,16 @@ function nonzeroFillRule(paths) {
 	for (let i = 0, len = paths.length; i < len; i++) {
 		const _results = [];
 		const testPoints = testPointsGroups[i];
+		const boxI = bboxes[i];
 		for (let j = 0; j < len; j++) {
 			if (i === j) continue;
+			const boxJ = bboxes[j];
+			if (!boxI || !boxJ || !aabbIntersects(boxI, boxJ)) continue;
 			const wnMap = {};
 			const wnList = [];
 			for (let p = 0, pLen = testPoints.length; p < pLen; p++) {
 				const [x, y] = testPoints[p];
-				const winding = windingNumber(x, y, paths[j]);
+				const winding = windingNumber$1(x, y, paths[j]);
 				wnMap[winding] = (wnMap[winding] ?? 0) + 1;
 				wnList.push(winding);
 			}
@@ -1503,6 +1650,88 @@ function nonzeroFillRule(paths) {
 	}
 	return results;
 }
+function isLeft(ax, ay, bx, by, px, py) {
+	return (bx - ax) * (py - ay) - (px - ax) * (by - ay);
+}
+function windingNumber(px, py, vertices) {
+	const len = vertices.length;
+	let wn = 0;
+	for (let i = 0; i < len; i += 2) {
+		const ax = vertices[i];
+		const ay = vertices[i + 1];
+		const k = (i + 2) % len;
+		const bx = vertices[k];
+		const by = vertices[k + 1];
+		if (ay <= py) {
+			if (by > py && isLeft(ax, ay, bx, by, px, py) > 0) wn++;
+		} else if (by <= py && isLeft(ax, ay, bx, by, px, py) < 0) wn--;
+	}
+	return wn;
+}
+function crossingNumber(px, py, vertices) {
+	const len = vertices.length;
+	let cn = 0;
+	for (let i = 0; i < len; i += 2) {
+		const ax = vertices[i];
+		const ay = vertices[i + 1];
+		const k = (i + 2) % len;
+		const bx = vertices[k];
+		const by = vertices[k + 1];
+		if (ay <= py && by > py || ay > py && by <= py) {
+			if (px < ax + (py - ay) / (by - ay) * (bx - ax)) cn++;
+		}
+	}
+	return cn;
+}
+function segmentDistance(px, py, ax, ay, bx, by) {
+	const dx = bx - ax;
+	const dy = by - ay;
+	const lenSq = dx * dx + dy * dy;
+	let t = lenSq === 0 ? 0 : ((px - ax) * dx + (py - ay) * dy) / lenSq;
+	if (t < 0) t = 0;
+	else if (t > 1) t = 1;
+	const cx = ax + t * dx;
+	const cy = ay + t * dy;
+	return Math.hypot(px - cx, py - cy);
+}
+function pointInPolygon(point, vertices, fillRule = "nonzero") {
+	if (vertices.length < 6) return false;
+	if (fillRule === "evenodd") return (crossingNumber(point.x, point.y, vertices) & 1) === 1;
+	return windingNumber(point.x, point.y, vertices) !== 0;
+}
+function pointInPolygons(point, polygons, fillRule = "nonzero") {
+	const { x, y } = point;
+	if (fillRule === "evenodd") {
+		let cn = 0;
+		for (let i = 0, len = polygons.length; i < len; i++) {
+			const ring = polygons[i];
+			if (ring.length >= 6) cn += crossingNumber(x, y, ring);
+		}
+		return (cn & 1) === 1;
+	}
+	let wn = 0;
+	for (let i = 0, len = polygons.length; i < len; i++) {
+		const ring = polygons[i];
+		if (ring.length >= 6) wn += windingNumber(x, y, ring);
+	}
+	return wn !== 0;
+}
+function pointToPolylineDistance(point, vertices, closed = false) {
+	const len = vertices.length;
+	if (len < 2) return Infinity;
+	const { x: px, y: py } = point;
+	if (len === 2) return Math.hypot(px - vertices[0], py - vertices[1]);
+	let min = Infinity;
+	for (let i = 0; i < len - 2; i += 2) {
+		const d = segmentDistance(px, py, vertices[i], vertices[i + 1], vertices[i + 2], vertices[i + 3]);
+		if (d < min) min = d;
+	}
+	if (closed && len >= 6) {
+		const d = segmentDistance(px, py, vertices[len - 2], vertices[len - 1], vertices[0], vertices[1]);
+		if (d < min) min = d;
+	}
+	return min;
+}
 function quadraticBezierP0(t, p) {
 	const k = 1 - t;
 	return k * k * p;
@@ -2695,6 +2924,39 @@ var dataUri = "data:image/svg+xml;";
 var Curve = class {
 	arcLengthDivision = 200;
 	_lengths = [];
+	_adaptiveCache;
+	/**
+	* Parent composite, set lazily when a composite caches its children. Lets
+	* {@link invalidate} propagate up so an ancestor's caches refresh too.
+	*/
+	_owner;
+	_invalidating = false;
+	/**
+	* Drop cached arc lengths and the cached sampled outline used by hit testing, then
+	* bubble up to {@link _owner}. Called automatically by {@link applyTransform} and the
+	* `Path2D` mutators; call it manually after mutating control-point coordinates in place —
+	* the caches cannot observe such mutations.
+	*/
+	invalidate() {
+		if (this._invalidating) return this;
+		this._invalidating = true;
+		this._invalidateSelf();
+		this._owner?.invalidate();
+		this._invalidating = false;
+		return this;
+	}
+	/** Clears this curve's own caches. Composites also clear their children (see override). */
+	_invalidateSelf() {
+		this._lengths.length = 0;
+		this._adaptiveCache = void 0;
+	}
+	/**
+	* Sampled outline cached for repeated hit tests (read-only — do not mutate the result).
+	* Invalidated by {@link invalidate}.
+	*/
+	_getCachedAdaptiveVertices() {
+		return this._adaptiveCache ??= this.getAdaptiveVertices();
+	}
 	getPointAt(u, output = new Vector2()) {
 		return this.getPoint(this.getUToTMapping(u), output);
 	}
@@ -2710,6 +2972,7 @@ var Curve = class {
 			if (isFunction) transform(p);
 			else transform.apply(p, p);
 		});
+		this.invalidate();
 		return this;
 	}
 	getUnevenVertices(count = 5, output = []) {
@@ -2836,12 +3099,21 @@ var Curve = class {
 		return mid;
 	}
 	getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
-		const potins = this.getPoints();
-		for (let i = 0, len = potins.length; i < len; i++) {
-			const p = potins[i];
-			min.clampMin(p);
-			max.clampMax(p);
+		const vertices = this.getAdaptiveVertices();
+		let minX = min.x;
+		let minY = min.y;
+		let maxX = max.x;
+		let maxY = max.y;
+		for (let i = 0, len = vertices.length; i < len; i += 2) {
+			const x = vertices[i];
+			const y = vertices[i + 1];
+			if (x < minX) minX = x;
+			if (y < minY) minY = y;
+			if (x > maxX) maxX = x;
+			if (y > maxY) maxY = y;
 		}
+		min.set(minX, minY);
+		max.set(maxX, maxY);
 		return {
 			min: min.finite(),
 			max: max.finite()
@@ -2851,6 +3123,42 @@ var Curve = class {
 		const { min, max } = this.getMinMax();
 		return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
 	}
+	/**
+	* Test whether a point lies inside the area enclosed by this curve.
+	*
+	* The curve is sampled via {@link getAdaptiveVertices} into a single implicitly closed
+	* ring. This is purely geometric (it ignores any `fill`/`stroke` style), mirroring
+	* `CanvasRenderingContext2D.isPointInPath`.
+	*
+	* Composites that hold multiple sub-paths (e.g. {@link Path2D}) override this so holes
+	* are honored — a single `Curve` is always one ring.
+	*/
+	isPointInFill(point, options = {}) {
+		return pointInPolygon(point, this._getCachedAdaptiveVertices(), options.fillRule);
+	}
+	/**
+	* Test whether a point lies on this curve's stroke, i.e. within `strokeWidth / 2 + tolerance`
+	* of the sampled outline. The point must be in the same coordinate space as the curve.
+	*
+	* Options: `strokeWidth` (path units, default `1`), `tolerance` (extra hit slack in path
+	* units, default `0` — useful for thin strokes; no coordinate scaling is assumed, so convert
+	* pixel tolerance to path units upstream if your path is normalized), and `closed` (whether
+	* to include the closing edge from the last vertex back to the first).
+	*/
+	isPointInStroke(point, options = {}) {
+		const { strokeWidth = 1, tolerance = 0, closed = false } = options;
+		return pointToPolylineDistance(point, this._getCachedAdaptiveVertices(), closed) <= strokeWidth / 2 + tolerance;
+	}
+	/**
+	* Concise PathKit-style fill containment test: `contains(x, y)` is shorthand for
+	* {@link isPointInFill} with a `{ x, y }` point.
+	*/
+	contains(x, y, options = {}) {
+		return this.isPointInFill({
+			x,
+			y
+		}, options);
+	}
 	getFillVertices(_options) {
 		return this.getAdaptiveVertices();
 	}
@@ -2980,6 +3288,64 @@ var RoundCurve = class extends Curve {
 		}
 		return output.set(_x, _y);
 	}
+	/**
+	* Point on the ellipse at an absolute angle (mirrors {@link getPoint}'s parameterization,
+	* ignoring `_diff`).
+	*/
+	_pointAtAngle(angle, output) {
+		let x = this.cx + this.rx * Math.cos(angle);
+		let y = this.cy + this.ry * Math.sin(angle);
+		if (this.rotate !== 0) {
+			const cos = Math.cos(this.rotate);
+			const sin = Math.sin(this.rotate);
+			const tx = x - this.cx;
+			const ty = y - this.cy;
+			x = tx * cos - ty * sin + this.cx;
+			y = tx * sin + ty * cos + this.cy;
+		}
+		return output.set(x, y);
+	}
+	/**
+	* Analytical bounds of the (elliptical) arc: the start/end points plus the per-axis
+	* extrema angles that fall within the swept interval. Matches {@link getPoint}, so it is
+	* exact for `ArcCurve`/`EllipseCurve`. The `_diff` offset (used only by the legacy
+	* `_getAdaptiveVerticesByCircle` path) is intentionally ignored here.
+	*/
+	getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
+		const { startAngle, rotate } = this;
+		const delta = this._getDeltaAngle();
+		const cosT = Math.cos(rotate);
+		const sinT = Math.sin(rotate);
+		const p = tempV2;
+		let minX = min.x;
+		let minY = min.y;
+		let maxX = max.x;
+		let maxY = max.y;
+		const consider = (angle) => {
+			this._pointAtAngle(angle, p);
+			if (p.x < minX) minX = p.x;
+			if (p.y < minY) minY = p.y;
+			if (p.x > maxX) maxX = p.x;
+			if (p.y > maxY) maxY = p.y;
+		};
+		consider(startAngle);
+		consider(startAngle + delta);
+		const ax = Math.atan2(-this.ry * sinT, this.rx * cosT);
+		const ay = Math.atan2(this.ry * cosT, this.rx * sinT);
+		const bases = [
+			ax,
+			ax + Math.PI,
+			ay,
+			ay + Math.PI
+		];
+		for (let i = 0; i < 4; i++) if (angleInSweep(bases[i], startAngle, delta)) consider(bases[i]);
+		min.set(minX, minY);
+		max.set(maxX, maxY);
+		return {
+			min: min.finite(),
+			max: max.finite()
+		};
+	}
 	toCommands() {
 		const { cx, cy, rx, ry, startAngle, endAngle, clockwise, rotate } = this;
 		const startX = cx + rx * Math.cos(startAngle) * Math.cos(rotate) - ry * Math.sin(startAngle) * Math.sin(rotate);
@@ -3050,6 +3416,7 @@ var RoundCurve = class extends Curve {
 		this.cy = tempV2.y;
 		if (isTransformSkewed(transform)) transfEllipseGeneric(this, transform);
 		else transfEllipseNoSkew(this, transform);
+		this.invalidate();
 		return this;
 	}
 	getControlPointRefs() {
@@ -3179,6 +3546,18 @@ var RoundCurve = class extends Curve {
 		return this;
 	}
 };
+function angleInSweep(a, start, delta) {
+	const PI_2 = Math.PI * 2;
+	const eps = 1e-9;
+	if (Math.abs(delta) >= PI_2 - eps) return true;
+	let off = (a - start) % PI_2;
+	if (delta >= 0) {
+		if (off < -1e-9) off += PI_2;
+		return off >= -1e-9 && off <= delta + eps;
+	}
+	if (off > eps) off -= PI_2;
+	return off <= eps && off >= delta - eps;
+}
 function transfEllipseGeneric(curve, m) {
 	const a = curve.rx;
 	const b = curve.ry;
@@ -3379,6 +3758,22 @@ var CompositeCurve = class CompositeCurve extends Curve {
 		super();
 		this.curves = curves;
 	}
+	_adaptiveCacheLen = -1;
+	_invalidateSelf() {
+		super._invalidateSelf();
+		this._adaptiveCacheLen = -1;
+		this.curves.forEach((curve) => curve.invalidate());
+	}
+	_getCachedAdaptiveVertices() {
+		if (!this._adaptiveCache || this._adaptiveCacheLen !== this.curves.length) {
+			this.curves.forEach((curve) => {
+				curve._owner = this;
+			});
+			this._adaptiveCache = this.getAdaptiveVertices();
+			this._adaptiveCacheLen = this.curves.length;
+		}
+		return this._adaptiveCache;
+	}
 	getFlatCurves() {
 		return this.curves.flatMap((curve) => {
 			if (curve instanceof CompositeCurve) return curve.getFlatCurves();
@@ -3413,6 +3808,7 @@ var CompositeCurve = class CompositeCurve extends Curve {
 	updateLengths() {
 		const lengths = [];
 		for (let i = 0, sum = 0, len = this.curves.length; i < len; i++) {
+			this.curves[i]._owner = this;
 			sum += this.curves[i].getLength();
 			lengths.push(sum);
 		}
@@ -3466,7 +3862,10 @@ var CompositeCurve = class CompositeCurve extends Curve {
 		}
 	}
 	applyTransform(transform) {
+		this._invalidating = true;
 		this.curves.forEach((curve) => curve.applyTransform(transform));
+		this._invalidating = false;
+		this.invalidate();
 		return this;
 	}
 	getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
@@ -3723,7 +4122,7 @@ var RectangleCurve = class extends PolygonCurve {
 		return this;
 	}
 };
-var RoundRectangleCurve = class extends RoundCurve {
+var RoundRectangleCurve = class extends CompositeCurve {
 	constructor(x = 0, y = 0, width = 1, height = 1, radius = 1) {
 		super();
 		this.x = x;
@@ -3734,25 +4133,44 @@ var RoundRectangleCurve = class extends RoundCurve {
 		this.update();
 	}
 	update() {
-		const { x, y, width, height, radius } = this;
-		const halfWidth = width / 2;
-		const halfHeight = height / 2;
-		const cx = x + halfWidth;
-		const cy = y + halfHeight;
-		const rx = Math.max(0, Math.min(radius, Math.min(halfWidth, halfHeight)));
-		const ry = rx;
-		this._center = new Vector2(cx, cy);
-		this._radius = new Vector2(rx, ry);
-		this._diff = new Vector2(halfWidth - rx, halfHeight - ry);
+		const { x, y, width, height } = this;
+		const r = Math.max(0, Math.min(this.radius, Math.abs(width) / 2, Math.abs(height) / 2));
+		const x0 = x;
+		const x1 = x + r;
+		const x2 = x + width - r;
+		const x3 = x + width;
+		const y0 = y;
+		const y1 = y + r;
+		const y2 = y + height - r;
+		const y3 = y + height;
+		if (r <= 0) this.curves = [
+			LineCurve.from(x0, y0, x3, y0),
+			LineCurve.from(x3, y0, x3, y3),
+			LineCurve.from(x3, y3, x0, y3),
+			LineCurve.from(x0, y3, x0, y0)
+		];
+		else {
+			const HALF_PI = Math.PI / 2;
+			this.curves = [
+				LineCurve.from(x1, y0, x2, y0),
+				new ArcCurve(x2, y1, r, -HALF_PI, 0, true),
+				LineCurve.from(x3, y1, x3, y2),
+				new ArcCurve(x2, y2, r, 0, HALF_PI, true),
+				LineCurve.from(x2, y3, x1, y3),
+				new ArcCurve(x1, y2, r, HALF_PI, Math.PI, true),
+				LineCurve.from(x0, y2, x0, y1),
+				new ArcCurve(x1, y1, r, Math.PI, Math.PI * 1.5, true)
+			];
+		}
+		this.invalidate();
 		return this;
 	}
 	drawTo(ctx) {
-		const { x, y, width, height, radius } = this;
-		ctx.roundRect(x, y, width, height, radius);
+		ctx.roundRect(this.x, this.y, this.width, this.height, this.radius);
 		return this;
 	}
 	copyFrom(source) {
-		super.copyFrom(source);
+		this.arcLengthDivision = source.arcLengthDivision;
 		this.x = source.x;
 		this.y = source.y;
 		this.width = source.width;
@@ -3829,6 +4247,16 @@ var CurvePath = class extends CompositeCurve {
 	getFillVertices(options) {
 		return this._closeVertices(super.getFillVertices(options));
 	}
+	/**
+	* Same as {@link Curve.isPointInStroke}, but `closed` defaults to this sub-path's actual
+	* closed-ness: explicitly `autoClose`, or geometrically closed (first vertex === last).
+	*/
+	isPointInStroke(point, options = {}) {
+		const { strokeWidth = 1, tolerance = 0 } = options;
+		const vertices = this._getCachedAdaptiveVertices();
+		const len = vertices.length;
+		return pointToPolylineDistance(point, vertices, options.closed ?? (this.autoClose || len >= 6 && vertices[0] === vertices[len - 2] && vertices[1] === vertices[len - 1])) <= strokeWidth / 2 + tolerance;
+	}
 	_setCurrentPoint(point) {
 		this.currentPoint = new Vector2(point.x, point.y);
 		if (!this.startPoint) this.startPoint = this.currentPoint.clone();
@@ -3966,6 +4394,8 @@ var CurvePath = class extends CompositeCurve {
 };
 var Path2D = class Path2D extends CompositeCurve {
 	_meta;
+	_ringsCache;
+	_ringsCacheLen = -1;
 	currentCurve = new CurvePath();
 	style;
 	get startPoint() {
@@ -4077,6 +4507,7 @@ var Path2D = class Path2D extends CompositeCurve {
 		this.getControlPointRefs().forEach((point) => {
 			point.scale(sx, sy, target);
 		});
+		this.invalidate();
 		return this;
 	}
 	skew(ax, ay = 0, target = {
@@ -4086,6 +4517,7 @@ var Path2D = class Path2D extends CompositeCurve {
 		this.getControlPointRefs().forEach((point) => {
 			point.skew(ax, ay, target);
 		});
+		this.invalidate();
 		return this;
 	}
 	rotate(rad, target = {
@@ -4095,6 +4527,7 @@ var Path2D = class Path2D extends CompositeCurve {
 		this.getControlPointRefs().forEach((point) => {
 			point.rotate(rad, target);
 		});
+		this.invalidate();
 		return this;
 	}
 	bold(b) {
@@ -4140,47 +4573,67 @@ var Path2D = class Path2D extends CompositeCurve {
 				}
 			});
 		});
+		this.invalidate();
 		return this;
 	}
+	/**
+	* Test whether a point lies inside the filled area of this path.
+	*
+	* Each sub-path ({@link CurvePath}) is sampled into its own ring and all rings are
+	* evaluated together via {@link pointInPolygons}, so holes (donut / hollow shapes) are
+	* honored. This is purely geometric and ignores `style.fill` — for the `fill: 'none'`
+	* fallback, gate the call upstream (see {@link Path2DSet.hitTest}).
+	*
+	* Defaults `fillRule` to `style.fillRule`, then `'nonzero'` (matching SVG/Canvas).
+	*/
+	_invalidateSelf() {
+		super._invalidateSelf();
+		this._ringsCache = void 0;
+		this._ringsCacheLen = -1;
+	}
+	/** Per-sub-path sampled rings, cached for repeated hit tests. */
+	_getRings() {
+		if (!this._ringsCache || this._ringsCacheLen !== this.curves.length) {
+			this._ringsCache = this.curves.map((curve) => {
+				curve._owner = this;
+				return curve.getAdaptiveVertices();
+			});
+			this._ringsCacheLen = this.curves.length;
+		}
+		return this._ringsCache;
+	}
+	isPointInFill(point, options = {}) {
+		const fillRule = options.fillRule ?? this.style.fillRule ?? "nonzero";
+		return pointInPolygons(point, this._getRings(), fillRule);
+	}
+	/**
+	* Test whether a point lies on this path's stroke. A hit on any sub-path counts.
+	*
+	* Defaults `strokeWidth` to this path's own {@link strokeWidth} (which is `0` when
+	* `style.stroke` is `'none'`). Each sub-path infers its own closed-ness unless `closed`
+	* is given explicitly.
+	*/
+	isPointInStroke(point, options = {}) {
+		const strokeWidth = options.strokeWidth ?? this.strokeWidth;
+		const { tolerance = 0, closed } = options;
+		return this.curves.some((curve) => curve.isPointInStroke(point, {
+			strokeWidth,
+			tolerance,
+			closed
+		}));
+	}
 	getMinMax(min = Vector2.MAX, max = Vector2.MIN, withStyle = true) {
-		const strokeWidth = this.strokeWidth;
 		this.curves.forEach((curve) => {
 			curve.getMinMax(min, max);
-			if (withStyle) {
-				if (strokeWidth > 1) {
-					const halfStrokeWidth = strokeWidth / 2;
-					const isClockwise = curve.isClockwise();
-					const points = [];
-					for (let t = 0; t <= 1; t += 1 / curve.arcLengthDivision) {
-						const point = curve.getPoint(t);
-						const normal = curve.getNormal(t);
-						const dist1 = normal.clone().scale(isClockwise ? halfStrokeWidth : -halfStrokeWidth);
-						const dist2 = normal.clone().scale(isClockwise ? -halfStrokeWidth : halfStrokeWidth);
-						points.push(point.clone().add(dist1), point.clone().add(dist2), point.clone().add({
-							x: halfStrokeWidth,
-							y: 0
-						}), point.clone().add({
-							x: -halfStrokeWidth,
-							y: 0
-						}), point.clone().add({
-							x: 0,
-							y: halfStrokeWidth
-						}), point.clone().add({
-							x: 0,
-							y: -halfStrokeWidth
-						}), point.clone().add({
-							x: halfStrokeWidth,
-							y: halfStrokeWidth
-						}), point.clone().add({
-							x: -halfStrokeWidth,
-							y: -halfStrokeWidth
-						}));
-					}
-					min.clampMin(...points);
-					max.clampMax(...points);
-				}
-			}
 		});
+		if (withStyle) {
+			const strokeWidth = this.strokeWidth;
+			if (strokeWidth > 1 && Number.isFinite(min.x)) {
+				const half = strokeWidth / 2;
+				min.set(min.x - half, min.y - half);
+				max.set(max.x + half, max.y + half);
+			}
+		}
 		return {
 			min: min.finite(),
 			max: max.finite()
@@ -4936,6 +5389,7 @@ var _0_context_default = defineMixin((editor, options) => {
 	const textSelection = ref();
 	const hoverElement = ref();
 	const state = ref();
+	const mode = ref("canvas");
 	function setCursor(mode) {
 		renderEngine.value.input.setCursor(mode);
 	}
@@ -5030,6 +5484,7 @@ var _0_context_default = defineMixin((editor, options) => {
 		drawboardPointer,
 		drawboardContextMenuPointer,
 		state,
+		mode,
 		setCursor,
 		getGlobalPointer,
 		parseAnchor,
@@ -5193,6 +5648,9 @@ var en_default = {
 	"selectPreviousSibling": "Select previous sibling",
 	"selectNextSibling": "Select next sibling",
 	"view": "View",
+	"mode": "Mode",
+	"mode:canvas": "Canvas mode",
+	"mode:workflow": "Workflow mode",
 	"checkerboard": "Checkerboard",
 	"pixelGrid": "Pixel grid",
 	"ruler": "Ruler",
@@ -5322,6 +5780,9 @@ var zh_Hans_default = {
 	"selectPreviousSibling": "选择前一个",
 	"selectNextSibling": "选择后一个",
 	"view": "视图",
+	"mode": "模式",
+	"mode:canvas": "画布模式",
+	"mode:workflow": "工作流模式",
 	"checkerboard": "棋盘",
 	"pixelGrid": "像素网格",
 	"ruler": "标尺",
@@ -6194,9 +6655,9 @@ var hotkey_default = defineMixin((editor) => {
 		getKbd
 	});
 	return () => {
-		const { exec } = editor;
+		const { exec, state } = editor;
 		useEventListener(isClient ? window : void 0, "keydown", (e) => {
-			if (isInputEvent(e)) return;
+			if (isInputEvent(e) || state.value === "typing") return;
 			const eKey = parseKeyboardEvent(e);
 			hotkeysData.value.forEach((hotkeyData) => {
 				if (hotkeyData.enabled === false) return;
@@ -6258,6 +6719,211 @@ function createHttp() {
 	}
 	return { request };
 }
+var http_default = defineMixin((editor, options) => {
+	Object.assign(editor, { http: options.http ?? createHttp() });
+});
+//#endregion
+//#region src/mixins/loader.ts
+var loader_default = defineMixin((editor) => {
+	const { state } = editor;
+	const loaders = reactive(/* @__PURE__ */ new Map());
+	const registerLoader = (value) => {
+		if (Array.isArray(value)) value.forEach((v) => registerLoader(v));
+		else loaders.set(value.name, value);
+	};
+	const unregisterLoader = (key) => {
+		loaders.delete(key);
+	};
+	const canLoad = async (source) => {
+		for (const loader of loaders.values()) if (await loader.test(source)) return true;
+		return false;
+	};
+	const load = async (source) => {
+		state.value = "loading";
+		const items = [];
+		let hasLoader = false;
+		try {
+			for (const loader of loaders.values()) if (await loader.test(source)) {
+				const res = await loader.load(source);
+				if (Array.isArray(res)) items.push(...res);
+				else items.push(res);
+				hasLoader = true;
+				break;
+			}
+		} finally {
+			state.value = void 0;
+		}
+		if (!hasLoader) throw new Error(`Failed to load source "${source}"`);
+		return items;
+	};
+	const openFileDialog = (options = {}) => {
+		const { multiple = false } = options;
+		return new Promise((resolve) => {
+			const accepts = [];
+			for (const loader of loaders.values()) if (loader.accept) accepts.push(loader.accept);
+			const { onChange, open } = useFileDialog({
+				accept: accepts.join(","),
+				reset: true,
+				multiple
+			});
+			onChange((files) => resolve(files ? Array.from(files) : []));
+			open();
+		});
+	};
+	Object.assign(editor, {
+		loaders,
+		registerLoader,
+		unregisterLoader,
+		canLoad,
+		load,
+		openFileDialog
+	});
+});
+//#endregion
+//#region src/mixins/snapper.ts
+var snapper_default = defineMixin((editor) => {
+	const { camera } = editor;
+	const snappers = reactive(/* @__PURE__ */ new Map());
+	const snapThreshold = computed(() => Math.max(1, 5 / camera.value.zoom.x));
+	const registerSnapper = (key, snapper) => {
+		snappers.set(key, snapper);
+	};
+	const unregisterSnapper = (key) => {
+		snappers.delete(key);
+	};
+	const snap = (box) => {
+		const axisX = /* @__PURE__ */ new Set();
+		const axisY = /* @__PURE__ */ new Set();
+		snappers.forEach((snapper) => {
+			const { xLines, yLines } = snapper.getLines();
+			xLines?.forEach((v) => axisX.add(v));
+			yLines?.forEach((v) => axisY.add(v));
+		});
+		const posList = [
+			[0, "x"],
+			[box.width / 2, "x"],
+			[box.width, "x"],
+			[0, "y"],
+			[box.height / 2, "y"],
+			[box.height, "y"]
+		];
+		for (let i = 0; i < posList.length; i++) {
+			const [offset, axis] = posList[i];
+			let position;
+			let numArray;
+			if (axis === "x") {
+				position = box.left + offset;
+				numArray = axisX;
+			} else {
+				position = box.top + offset;
+				numArray = axisY;
+			}
+			let closest;
+			let minDist = Infinity;
+			for (const num of numArray) {
+				const dist = num - position;
+				const absDist = Math.abs(dist);
+				if (absDist < minDist) {
+					minDist = absDist;
+					closest = num;
+				}
+			}
+			if (minDist < snapThreshold.value) position = closest ?? position;
+			if (axis === "x") box.left = position - offset;
+			else box.top = position - offset;
+		}
+	};
+	Object.assign(editor, {
+		snappers,
+		registerSnapper,
+		unregisterSnapper,
+		snap
+	});
+});
+//#endregion
+//#region src/mixins/snapshot.ts
+var snapshot_default = defineMixin((editor) => {
+	const { isElement, frames, frameThumbs, log, fonts, runExclusiveRender } = editor;
+	async function snapshot() {
+		frameThumbs.value = frames.value.map(() => ({
+			instanceId: -1,
+			width: 0,
+			height: 0,
+			url: ""
+		}));
+		for (let i = 0; i < frames.value.length; i++) await captureFrameScreenshot(i);
+	}
+	async function captureElementScreenshot(element) {
+		await editor.waitUntilFontLoad();
+		let data;
+		if (isElement(element)) data = element.toJSON();
+		else data = { ...element };
+		data.style ??= {};
+		data.style.top = 0;
+		data.style.left = 0;
+		return await runExclusiveRender(() => render({
+			width: data.style.width,
+			height: data.style.height,
+			fonts,
+			data
+		}));
+	}
+	async function captureFrameScreenshot(index) {
+		const frame = frames.value[index];
+		if (frame) {
+			const canvas = await captureElementScreenshot(frame);
+			frameThumbs.value[index] = {
+				instanceId: frame.instanceId,
+				width: canvas.width,
+				height: canvas.height,
+				url: canvas.toDataURL()
+			};
+			log("captureFrameScreenshot", index);
+		}
+	}
+	Object.assign(editor, {
+		snapshot,
+		captureElementScreenshot,
+		captureFrameScreenshot
+	});
+});
+//#endregion
+//#region src/composables/strategy.ts
+var makeMceStrategyProps = propsFactory({
+	resizeStrategy: Function,
+	activeStrategy: Function,
+	doubleclickStrategy: Function,
+	hoverStrategy: Function
+}, "makeMceStrategyProps");
+var defaultActiveStrategy = (context) => {
+	const { element, editor } = context;
+	if (!element) return;
+	const { isRootNode, inEditorIs, isElement, elementSelection } = editor;
+	const activeElement = elementSelection.value[0];
+	const cb = (node) => {
+		const parent = node.parent;
+		if (isElement(node) && (node.equal(activeElement) || parent?.equal(activeElement) || parent?.equal(activeElement?.parent) || parent && inEditorIs(parent, "Frame") && parent.parent && isRootNode(parent.parent) || parent && isRootNode(parent))) return true;
+		return false;
+	};
+	if (cb(element)) return element;
+	return element.findAncestor(cb);
+};
+var defaultDoubleclickStrategy = (context) => {
+	context.editor.exec("enter");
+};
+var defaultHoverStrategy = (context) => {
+	const { element, editor } = context;
+	if (!element) return;
+	const { isRootNode, inEditorIs, isElement, elementSelection } = editor;
+	const activeElement = elementSelection.value[0];
+	const cb = (node) => {
+		const parent = node.parent;
+		if (isElement(node) && (node.equal(activeElement) || parent?.equal(activeElement) || parent?.equal(activeElement?.parent) || parent && inEditorIs(parent, "Frame") && parent.parent && isRootNode(parent.parent) || parent && isRootNode(parent))) return true;
+		return false;
+	};
+	if (cb(element)) return element;
+	return element.findAncestor(cb);
+};
 //#endregion
 //#region src/mixins/index.ts
 var mixins = [
@@ -6277,167 +6943,17 @@ var mixins = [
 	_4_3_element_default,
 	exporter_default,
 	hotkey_default,
-	defineMixin((editor, options) => {
-		Object.assign(editor, { http: options.http ?? createHttp() });
-	}),
-	defineMixin((editor) => {
-		const { state } = editor;
-		const loaders = reactive(/* @__PURE__ */ new Map());
-		const registerLoader = (value) => {
-			if (Array.isArray(value)) value.forEach((v) => registerLoader(v));
-			else loaders.set(value.name, value);
-		};
-		const unregisterLoader = (key) => {
-			loaders.delete(key);
-		};
-		const canLoad = async (source) => {
-			for (const loader of loaders.values()) if (await loader.test(source)) return true;
-			return false;
-		};
-		const load = async (source) => {
-			state.value = "loading";
-			const items = [];
-			let hasLoader = false;
-			try {
-				for (const loader of loaders.values()) if (await loader.test(source)) {
-					const res = await loader.load(source);
-					if (Array.isArray(res)) items.push(...res);
-					else items.push(res);
-					hasLoader = true;
-					break;
-				}
-			} finally {
-				state.value = void 0;
-			}
-			if (!hasLoader) throw new Error(`Failed to load source "${source}"`);
-			return items;
-		};
-		const openFileDialog = (options = {}) => {
-			const { multiple = false } = options;
-			return new Promise((resolve) => {
-				const accepts = [];
-				for (const loader of loaders.values()) if (loader.accept) accepts.push(loader.accept);
-				const { onChange, open } = useFileDialog({
-					accept: accepts.join(","),
-					reset: true,
-					multiple
-				});
-				onChange((files) => resolve(files ? Array.from(files) : []));
-				open();
-			});
-		};
-		Object.assign(editor, {
-			loaders,
-			registerLoader,
-			unregisterLoader,
-			canLoad,
-			load,
-			openFileDialog
-		});
-	}),
-	defineMixin((editor) => {
-		const { camera } = editor;
-		const snappers = reactive(/* @__PURE__ */ new Map());
-		const snapThreshold = computed(() => Math.max(1, 5 / camera.value.zoom.x));
-		const registerSnapper = (key, snapper) => {
-			snappers.set(key, snapper);
-		};
-		const unregisterSnapper = (key) => {
-			snappers.delete(key);
-		};
-		const snap = (box) => {
-			const axisX = /* @__PURE__ */ new Set();
-			const axisY = /* @__PURE__ */ new Set();
-			snappers.forEach((snapper) => {
-				const { xLines, yLines } = snapper.getLines();
-				xLines?.forEach((v) => axisX.add(v));
-				yLines?.forEach((v) => axisY.add(v));
-			});
-			const posList = [
-				[0, "x"],
-				[box.width / 2, "x"],
-				[box.width, "x"],
-				[0, "y"],
-				[box.height / 2, "y"],
-				[box.height, "y"]
-			];
-			for (let i = 0; i < posList.length; i++) {
-				const [offset, axis] = posList[i];
-				let position;
-				let numArray;
-				if (axis === "x") {
-					position = box.left + offset;
-					numArray = axisX;
-				} else {
-					position = box.top + offset;
-					numArray = axisY;
-				}
-				let closest;
-				let minDist = Infinity;
-				for (const num of numArray) {
-					const dist = num - position;
-					const absDist = Math.abs(dist);
-					if (absDist < minDist) {
-						minDist = absDist;
-						closest = num;
-					}
-				}
-				if (minDist < snapThreshold.value) position = closest ?? position;
-				if (axis === "x") box.left = position - offset;
-				else box.top = position - offset;
-			}
-		};
-		Object.assign(editor, {
-			snappers,
-			registerSnapper,
-			unregisterSnapper,
-			snap
-		});
-	}),
-	defineMixin((editor) => {
-		const { isElement, frames, frameThumbs, log, fonts, runExclusiveRender } = editor;
-		async function snapshot() {
-			frameThumbs.value = frames.value.map(() => ({
-				instanceId: -1,
-				width: 0,
-				height: 0,
-				url: ""
-			}));
-			for (let i = 0; i < frames.value.length; i++) await captureFrameScreenshot(i);
-		}
-		async function captureElementScreenshot(element) {
-			await editor.waitUntilFontLoad();
-			let data;
-			if (isElement(element)) data = element.toJSON();
-			else data = { ...element };
-			data.style ??= {};
-			data.style.top = 0;
-			data.style.left = 0;
-			return await runExclusiveRender(() => render({
-				width: data.style.width,
-				height: data.style.height,
-				fonts,
-				data
-			}));
-		}
-		async function captureFrameScreenshot(index) {
-			const frame = frames.value[index];
-			if (frame) {
-				const canvas = await captureElementScreenshot(frame);
-				frameThumbs.value[index] = {
-					instanceId: frame.instanceId,
-					width: canvas.width,
-					height: canvas.height,
-					url: canvas.toDataURL()
-				};
-				log("captureFrameScreenshot", index);
-			}
-		}
-		Object.assign(editor, {
-			snapshot,
-			captureElementScreenshot,
-			captureFrameScreenshot
-		});
+	http_default,
+	loader_default,
+	snapper_default,
+	snapshot_default,
+	defineMixin((_editor, options) => {
+		return {
+			activeStrategy: options.activeStrategy ?? defaultActiveStrategy,
+			doubleclickStrategy: options.doubleclickStrategy ?? defaultDoubleclickStrategy,
+			hoverStrategy: options.hoverStrategy ?? defaultHoverStrategy,
+			resizeStrategy: options.resizeStrategy
+		};
 	}),
 	defineMixin((editor) => {
 		const { state } = editor;
@@ -6936,7 +7452,7 @@ var doc_default = definePlugin((editor, options) => {
 //#endregion
 //#region src/plugins/edit.ts
 var edit_default = definePlugin((editor, options) => {
-	const { state, selection, exec, canLoad, load, addElements, hoverElement, to, exporters } = editor;
+	const { state, selection, exec, canLoad, load, addElements, hoverElement, to, exporters, renderEngine } = editor;
 	const copiedData = ref();
 	const useClipboard = options.clipboard !== false && SUPPORTS_CLIPBOARD;
 	const cancel = () => {
@@ -6944,6 +7460,19 @@ var edit_default = definePlugin((editor, options) => {
 	};
 	const _delete = () => {
 		if (selection.value.length) {
+			const removed = /* @__PURE__ */ new Set();
+			const collect = (node) => {
+				removed.add(node.id);
+				node.children?.forEach(collect);
+			};
+			selection.value.forEach(collect);
+			const nodeMap = renderEngine.value.nodeMap;
+			const danglingConnections = [];
+			nodeMap?.forEach((node) => {
+				const conn = node.connection;
+				if (!removed.has(node.id) && conn?.isValid?.() && (removed.has(conn.start?.id) || removed.has(conn.end?.id))) danglingConnections.push(node);
+			});
+			danglingConnections.forEach((node) => node.remove());
 			selection.value.forEach((node) => {
 				node.remove();
 			});
@@ -7365,6 +7894,7 @@ var aliases = {
 	mouseLeftClick: "M13 9V1.07A8.01 8.01 0 0 1 19.75 7c.16.64.25 1.31.25 2zm4.66-2c-.48-1.35-1.43-2.5-2.66-3.19V7zM6 15v-2h12v2c0 1.59-.63 3.12-1.76 4.24A5.97 5.97 0 0 1 12 21a5.97 5.97 0 0 1-4.24-1.76A5.97 5.97 0 0 1 6 15m-2 0c0 2.12.84 4.16 2.34 5.66S9.88 23 12 23s4.16-.84 5.66-2.34S20 17.12 20 15v-4H4zm7-6V1.07C7.06 1.56 4 4.92 4 9z",
 	mouseRightClick: "M13 9V1.07c3.94.49 7 3.85 7 7.93zm-2 0V1.07A8.01 8.01 0 0 0 4.25 7C4.09 7.64 4 8.31 4 9zM6.34 7C6.82 5.65 7.78 4.5 9 3.81V7zM6 15v-2h12v2c0 1.59-.63 3.12-1.76 4.24A5.97 5.97 0 0 1 12 21a5.97 5.97 0 0 1-4.24-1.76A5.97 5.97 0 0 1 6 15m-2 0c0 2.12.84 4.16 2.34 5.66S9.88 23 12 23s4.16-.84 5.66-2.34S20 17.12 20 15v-4H4z",
 	check: "M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z",
+	plus: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z",
 	collapse: "m12 17.4l-3.9 3.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l3.875-3.875q.575-.575 1.425-.575t1.425.575L17.3 19.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275zm0-10.8l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-3.875 3.875Q12.85 8.55 12 8.55t-1.425-.575L6.7 4.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275z",
 	frame: "M17 9v6H7V9zm2-6h-2v3h2zM7 3H5v3h2zm16 4h-3v2h3zm-4 0H5v10h14zM4 7H1v2h3zm19 8h-3v2h3zM4 15H1v2h3zm15 3h-2v3h2zM7 18H5v3h2z",
 	slice: "M20.802 4.221a2.166 2.166 0 0 0-3.062 0L2.24 19.72l.001.001A.75.75 0 0 0 2.773 21h8.125a2.25 2.25 0 0 0 2.25-2.25v-3.812l7.654-7.654a2.166 2.166 0 0 0 0-3.063m-7.654 8.596v-1.883L18.8 5.282a.665.665 0 1 1 .941.941zM4.584 19.5l7.064-7.064v6.314a.75.75 0 0 1-.75.75z",
@@ -7882,43 +8412,6 @@ function useOverlay() {
 	return item;
 }
 //#endregion
-//#region src/composables/strategy.ts
-var makeMceStrategyProps = propsFactory({
-	resizeStrategy: Function,
-	activeStrategy: Function,
-	doubleclickStrategy: Function,
-	hoverStrategy: Function
-}, "makeMceStrategyProps");
-var defaultActiveStrategy = (context) => {
-	const { element, editor } = context;
-	if (!element) return;
-	const { isRootNode, inEditorIs, isElement, elementSelection } = editor;
-	const activeElement = elementSelection.value[0];
-	const cb = (node) => {
-		const parent = node.parent;
-		if (isElement(node) && (node.equal(activeElement) || parent?.equal(activeElement) || parent?.equal(activeElement?.parent) || parent && inEditorIs(parent, "Frame") && parent.parent && isRootNode(parent.parent) || parent && isRootNode(parent))) return true;
-		return false;
-	};
-	if (cb(element)) return element;
-	return element.findAncestor(cb);
-};
-var defaultDoubleclickStrategy = (context) => {
-	context.editor.exec("enter");
-};
-var defaultHoverStrategy = (context) => {
-	const { element, editor } = context;
-	if (!element) return;
-	const { isRootNode, inEditorIs, isElement, elementSelection } = editor;
-	const activeElement = elementSelection.value[0];
-	const cb = (node) => {
-		const parent = node.parent;
-		if (isElement(node) && (node.equal(activeElement) || parent?.equal(activeElement) || parent?.equal(activeElement?.parent) || parent && inEditorIs(parent, "Frame") && parent.parent && isRootNode(parent.parent) || parent && isRootNode(parent))) return true;
-		return false;
-	};
-	if (cb(element)) return element;
-	return element.findAncestor(cb);
-};
-//#endregion
 //#region src/components/Frame.vue
 var Frame_default = /* @__PURE__ */ defineComponent({
 	__name: "Frame",
@@ -7976,7 +8469,7 @@ var Frame_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/Frames.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$30 = { class: "m-frames" };
+var _hoisted_1$31 = { class: "m-frames" };
 //#endregion
 //#region src/components/Frames.vue
 var Frames_default = /* @__PURE__ */ defineComponent({
@@ -7985,7 +8478,7 @@ var Frames_default = /* @__PURE__ */ defineComponent({
 		const { frames, getConfigRef } = useEditor();
 		const config = getConfigRef("canvas.frame");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$30, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$31, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
 				return openBlock(), createBlock(Frame_default, {
 					key,
 					"model-value": frame,
@@ -8131,7 +8624,7 @@ var history_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/Hover.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$29 = ["data-name"];
+var _hoisted_1$30 = ["data-name"];
 //#endregion
 //#region src/components/Hover.vue
 var Hover_default = /* @__PURE__ */ defineComponent({
@@ -8150,7 +8643,7 @@ var Hover_default = /* @__PURE__ */ defineComponent({
 					borderRadius: `${(unref(hoverElement).style.borderRadius ?? 0) * unref(camera).zoom.x}px`,
 					...hoverElementObb.value.toCssStyle()
 				})
-			}, null, 12, _hoisted_1$29)) : createCommentVNode("", true);
+			}, null, 12, _hoisted_1$30)) : createCommentVNode("", true);
 		};
 	}
 });
@@ -8419,10 +8912,10 @@ var Btn_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/Layer.vue?vue&type=script&setup=true&lang.ts
-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 = {
+var _hoisted_1$29 = ["data-id"];
+var _hoisted_2$15 = { class: "m-layer__content" };
+var _hoisted_3$14 = { class: "m-layer__prepend" };
+var _hoisted_4$8 = {
 	key: 0,
 	class: "m-layer__name"
 };
@@ -8566,8 +9059,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$14, [
-					createElementVNode("div", _hoisted_3$13, [childrenLength.value ? (openBlock(), createBlock(unref(Icon_default), {
+				createElementVNode("div", _hoisted_2$15, [
+					createElementVNode("div", _hoisted_3$14, [childrenLength.value ? (openBlock(), createBlock(unref(Icon_default), {
 						key: 0,
 						class: "m-layer__arrow",
 						icon: "$arrowRight",
@@ -8578,7 +9071,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$7, toDisplayString(unref(t)("layers")), 1)) : (openBlock(), createElementBlock("div", {
+					props.root ? (openBlock(), createElementBlock("div", _hoisted_4$8, toDisplayString(unref(t)("layers")), 1)) : (openBlock(), createElementBlock("div", {
 						key: 1,
 						class: "m-layer__name",
 						onDblclick: onDblclickName
@@ -8625,7 +9118,7 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 						_: 1
 					}, 8, ["class"])], 64))], 2)
 				])
-			], 46, _hoisted_1$28), opened.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(childrenLength.value, (i) => {
+			], 46, _hoisted_1$29), 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],
@@ -8642,8 +9135,8 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/Layers.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$27 = { class: "m-layers" };
-var _hoisted_2$13 = { class: "m-layers__wrapper" };
+var _hoisted_1$28 = { class: "m-layers" };
+var _hoisted_2$14 = { class: "m-layers__wrapper" };
 //#endregion
 //#region src/components/Layers.vue
 var Layers_default = /* @__PURE__ */ defineComponent({
@@ -8677,7 +9170,7 @@ var Layers_default = /* @__PURE__ */ defineComponent({
 			layerScrollIntoView();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$27, [createElementVNode("div", _hoisted_2$13, [createVNode(Layer_default, {
+			return openBlock(), createElementBlock("div", _hoisted_1$28, [createElementVNode("div", _hoisted_2$14, [createVNode(Layer_default, {
 				root: true,
 				node: unref(root),
 				opened: true
@@ -8712,13 +9205,13 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 //#endregion
 //#region src/components/MadeWith.vue
 var _sfc_main = {};
-var _hoisted_1$26 = {
+var _hoisted_1$27 = {
 	class: "m-made-with",
 	href: "https://github.com/qq15725/mce",
 	target: "_blank"
 };
 function _sfc_render(_ctx, _cache) {
-	return openBlock(), createElementBlock("a", _hoisted_1$26, [..._cache[0] || (_cache[0] = [createElementVNode("div", null, "MADE WITH", -1), createElementVNode("div", null, "MCE", -1)])]);
+	return openBlock(), createElementBlock("a", _hoisted_1$27, [..._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
@@ -8740,7 +9233,7 @@ var madeWith_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/MemoryManager.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$25 = { class: "m-manage-memory" };
+var _hoisted_1$26 = { class: "m-manage-memory" };
 //#endregion
 //#region src/components/MemoryManager.vue
 var MemoryManager_default = /* @__PURE__ */ defineComponent({
@@ -8773,7 +9266,7 @@ var MemoryManager_default = /* @__PURE__ */ defineComponent({
 		});
 		onBeforeUnmount(() => timer && clearInterval(timer));
 		return (_ctx, _cache) => {
-			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)]);
+			return openBlock(), createElementBlock("div", _hoisted_1$26, [_cache[0] || (_cache[0] = createElementVNode("div", null, "Total memory used", -1)), createElementVNode("div", null, toDisplayString(humanBytes(used.value)), 1)]);
 		};
 	}
 });
@@ -8897,18 +9390,18 @@ var Overlay_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/shared/Menu.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$24 = ["onMouseenter"];
-var _hoisted_2$12 = ["onClick"];
-var _hoisted_3$12 = {
+var _hoisted_1$25 = ["onMouseenter"];
+var _hoisted_2$13 = ["onClick"];
+var _hoisted_3$13 = {
 	key: 0,
 	class: "m-list-item__checked"
 };
-var _hoisted_4$6 = {
+var _hoisted_4$7 = {
 	key: 1,
 	class: "m-list-item__prepend"
 };
-var _hoisted_5$4 = { class: "m-list-item__title" };
-var _hoisted_6$3 = {
+var _hoisted_5$5 = { class: "m-list-item__title" };
+var _hoisted_6$4 = {
 	key: 2,
 	class: "m-list-item__kbd"
 };
@@ -9024,18 +9517,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$12, [item.checked ? (openBlock(), createBlock(unref(Icon_default), {
+						hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$13, [item.checked ? (openBlock(), createBlock(unref(Icon_default), {
 							key: 0,
 							icon: "$check"
 						})) : createCommentVNode("", true)])) : createCommentVNode("", true),
-						_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),
+						_ctx.$slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_4$7, [renderSlot(_ctx.$slots, "prepend", { item })])) : createCommentVNode("", true),
+						createElementVNode("div", _hoisted_5$5, [renderSlot(_ctx.$slots, "title", { item }, () => [createTextVNode(toDisplayString(item.key), 1)])]),
+						_ctx.$slots.kbd ? (openBlock(), createElementBlock("div", _hoisted_6$4, [renderSlot(_ctx.$slots, "kbd", { item })])) : createCommentVNode("", true),
 						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$12)], 40, _hoisted_1$24))], 64);
+					], 10, _hoisted_2$13)], 40, _hoisted_1$25))], 64);
 				}), 128)), opened.value > -1 && __props.items?.[opened.value]?.children?.length ? (openBlock(), createBlock(_component_MceMenu, {
 					key: 0,
 					"open-on-hover": "",
@@ -9183,7 +9676,7 @@ var ContextMenu_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/plugins/menu.ts
 var menu_default = definePlugin((editor, options) => {
-	const { canUndo, canRedo, selection, elementSelection, textSelection, config, exporters, components, isElement, exec } = editor;
+	const { canUndo, canRedo, selection, elementSelection, textSelection, config, exporters, components, isElement, exec, mode } = editor;
 	const { customContextMenu } = options;
 	const hasSelected = computed(() => selection.value.length > 0);
 	const exportMenu = computed(() => ({
@@ -9213,6 +9706,18 @@ var menu_default = definePlugin((editor, options) => {
 		children: [...exporters.values()].filter((v) => Boolean(v.copyAs)).map((v) => ({ key: `copyAs:${v.name}` }))
 	}));
 	const nodeMenu = computed(() => [{ key: "addSubNode" }]);
+	const modeMenu = computed(() => ({
+		key: "mode",
+		children: [{
+			key: "mode:canvas",
+			checked: mode.value === "canvas",
+			handle: () => mode.value = "canvas"
+		}, {
+			key: "mode:workflow",
+			checked: mode.value === "workflow",
+			handle: () => mode.value = "workflow"
+		}]
+	}));
 	const editMenus1 = computed(() => [
 		{
 			key: "copy",
@@ -9521,6 +10026,8 @@ var menu_default = definePlugin((editor, options) => {
 		else return [
 			{ key: "paste" },
 			{ type: "divider" },
+			modeMenu.value,
+			{ type: "divider" },
 			...mainMenu.value,
 			{ type: "divider" },
 			exportMenu.value
@@ -9545,9 +10052,9 @@ var menu_default = definePlugin((editor, options) => {
 });
 //#endregion
 //#region src/components/Creator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$23 = { class: "m-creator" };
-var _hoisted_2$11 = { class: "m-creator__tree" };
-var _hoisted_3$11 = { class: "m-creator__actions" };
+var _hoisted_1$24 = { class: "m-creator" };
+var _hoisted_2$12 = { class: "m-creator__tree" };
+var _hoisted_3$12 = { class: "m-creator__actions" };
 //#endregion
 //#region src/components/Creator.vue
 var Creator_default = /* @__PURE__ */ defineComponent({
@@ -9618,12 +10125,12 @@ var Creator_default = /* @__PURE__ */ defineComponent({
 			})];
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$23, [createElementVNode("div", _hoisted_2$11, [(openBlock(true), createElementBlock(Fragment, null, renderList(tree.value, (node, index) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$24, [createElementVNode("div", _hoisted_2$12, [(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$11, [createVNode(Btn_default, { onClick: cancel }, {
+			}), 128))]), createElementVNode("div", _hoisted_3$12, [createVNode(Btn_default, { onClick: cancel }, {
 				default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("cancel")), 1)]),
 				_: 1
 			}), createVNode(Btn_default, { onClick: create }, {
@@ -9798,12 +10305,12 @@ var pen_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/shared/Tooltip.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$22 = {
+var _hoisted_1$23 = {
 	key: 0,
 	class: "m-tooltip__arrow"
 };
-var _hoisted_2$10 = { class: "m-tooltip__content" };
-var _hoisted_3$10 = {
+var _hoisted_2$11 = { class: "m-tooltip__content" };
+var _hoisted_3$11 = {
 	key: 0,
 	class: "m-tooltip__kbd"
 };
@@ -9846,7 +10353,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$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)]),
+				default: withCtx(() => [isActive.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.showArrow ? (openBlock(), createElementBlock("div", _hoisted_1$23)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2$11, [renderSlot(_ctx.$slots, "default"), _ctx.$slots.kbd ? (openBlock(), createElementBlock("div", _hoisted_3$11, [renderSlot(_ctx.$slots, "kbd")])) : createCommentVNode("", true)])], 64)) : createCommentVNode("", true)]),
 				_: 2
 			}, [_ctx.$slots.activator ? {
 				name: "activator",
@@ -9869,13 +10376,13 @@ var Tooltip_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/shared/Ruler.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$21 = ["width", "height"];
-var _hoisted_2$9 = [
+var _hoisted_1$22 = ["width", "height"];
+var _hoisted_2$10 = [
 	"onDblclick",
 	"onMousedown",
 	"onMousemove"
 ];
-var _hoisted_3$9 = { style: {
+var _hoisted_3$10 = { style: {
 	"font-size": "0.75rem",
 	"text-wrap": "nowrap"
 } };
@@ -10146,7 +10653,7 @@ var Ruler_default = /* @__PURE__ */ defineComponent({
 					class: "m-ruler__canvas",
 					width: props.size,
 					height: props.size
-				}, null, 8, _hoisted_1$21)], 16)), [[unref(vResizeObserver), unref(resize)]]),
+				}, null, 8, _hoisted_1$22)], 16)), [[unref(vResizeObserver), unref(resize)]]),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (item, index) => {
 					return openBlock(), createElementBlock("div", {
 						key: index,
@@ -10167,7 +10674,7 @@ var Ruler_default = /* @__PURE__ */ defineComponent({
 						onMousedown: ($event) => onReflineMousedown($event, index),
 						onMousemove: (e) => updateTip(e, item),
 						onMouseleave: onLeave
-					}, null, 46, _hoisted_2$9);
+					}, null, 46, _hoisted_2$10);
 				}), 128)),
 				createVNode(Tooltip_default, {
 					"model-value": !!tipText.value,
@@ -10175,7 +10682,7 @@ var Ruler_default = /* @__PURE__ */ defineComponent({
 					offset: 24,
 					location: props.vertical ? "bottom" : "right"
 				}, {
-					default: withCtx(() => [createElementVNode("div", _hoisted_3$9, toDisplayString(tipText.value), 1)]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_3$10, toDisplayString(tipText.value), 1)]),
 					_: 1
 				}, 8, [
 					"model-value",
@@ -10188,7 +10695,7 @@ var Ruler_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/Rulers.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$20 = { class: "m-rulers" };
+var _hoisted_1$21 = { class: "m-rulers" };
 //#endregion
 //#region src/components/Rulers.vue
 var Rulers_default = /* @__PURE__ */ defineComponent({
@@ -10203,7 +10710,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$20, [
+			return openBlock(), createElementBlock("div", _hoisted_1$21, [
 				createVNode(Ruler_default, {
 					modelValue: refLines.value.x,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => refLines.value.x = $event),
@@ -10317,7 +10824,7 @@ var saveAs_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/shared/Scrollbar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$19 = {
+var _hoisted_1$20 = {
 	ref: "trackTplRef",
 	class: "m-scrollbar__track"
 };
@@ -10400,7 +10907,7 @@ var Scrollbar_default = /* @__PURE__ */ defineComponent({
 					[props.vertical ? "width" : "height"]: `${props.size}px`,
 					[props.vertical ? "top" : "left"]: `${props.offset}px`
 				})
-			}, [createElementVNode("div", _hoisted_1$19, [createElementVNode("div", {
+			}, [createElementVNode("div", _hoisted_1$20, [createElementVNode("div", {
 				ref: "thumbTplRef",
 				class: normalizeClass(["m-scrollbar__thumb", { "m-scrollbar__thumb--active": isActive.value }]),
 				style: normalizeStyle({
@@ -10416,7 +10923,7 @@ var Scrollbar_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/Scrollbars.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$18 = { class: "m-scrollbars" };
+var _hoisted_1$19 = { class: "m-scrollbars" };
 //#endregion
 //#region src/components/Scrollbars.vue
 var Scrollbars_default = /* @__PURE__ */ defineComponent({
@@ -10429,7 +10936,7 @@ var Scrollbars_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const { camera, rootAabb } = useEditor();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$18, [createVNode(Scrollbar_default, mergeProps(props, {
+			return openBlock(), createElementBlock("div", _hoisted_1$19, [createVNode(Scrollbar_default, mergeProps(props, {
 				modelValue: unref(camera).position.y,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(camera).position.y = $event),
 				vertical: "",
@@ -10564,22 +11071,22 @@ var ScrollToSelection_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/shared/Transform.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$17 = ["rx", "ry"];
-var _hoisted_2$8 = { "pointer-events": "none" };
-var _hoisted_3$8 = [
+var _hoisted_1$18 = ["rx", "ry"];
+var _hoisted_2$9 = { "pointer-events": "none" };
+var _hoisted_3$9 = [
 	"x",
 	"y",
 	"width",
 	"height",
 	"aria-label"
 ];
-var _hoisted_4$5 = [
+var _hoisted_4$6 = [
 	"cx",
 	"cy",
 	"r",
 	"aria-label"
 ];
-var _hoisted_5$3 = [
+var _hoisted_5$4 = [
 	"x",
 	"y",
 	"width",
@@ -10588,7 +11095,7 @@ var _hoisted_5$3 = [
 	"rx",
 	"ry"
 ];
-var _hoisted_6$2 = ["transform"];
+var _hoisted_6$3 = ["transform"];
 var _hoisted_7$2 = { "pointer-events": "all" };
 var _hoisted_8$2 = [
 	"x",
@@ -11201,9 +11708,9 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 							fill: "none",
 							rx: model.value.borderRadius,
 							ry: model.value.borderRadius
-						}, null, 8, _hoisted_1$17),
+						}, null, 8, _hoisted_1$18),
 						createVNode(Diagonal),
-						createElementVNode("g", _hoisted_2$8, [(openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
+						createElementVNode("g", _hoisted_2$9, [(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,
@@ -11212,14 +11719,14 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 								height: handle.height,
 								"aria-label": handle.type,
 								class: "m-transform__handle"
-							}, null, 8, _hoisted_3$8)) : handle.width === handle.height ? (openBlock(), createElementBlock("circle", {
+							}, null, 8, _hoisted_3$9)) : 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$5)) : (openBlock(), createElementBlock("rect", {
+							}, null, 8, _hoisted_4$6)) : (openBlock(), createElementBlock("rect", {
 								key: 2,
 								x: handle.x,
 								y: handle.y,
@@ -11229,12 +11736,12 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 								rx: handle.width / 4,
 								ry: handle.height / 4,
 								class: "m-transform__handle"
-							}, null, 8, _hoisted_5$3))], 64)) : createCommentVNode("", true)], 64);
+							}, null, 8, _hoisted_5$4))], 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)]),
+						}, [..._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$3)) : createCommentVNode("", true)]),
 						createElementVNode("g", _hoisted_7$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
 							return openBlock(), createElementBlock("rect", {
 								key: index,
@@ -11262,7 +11769,7 @@ var Transform_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/shared/Cropper.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$16 = { class: "m-cropper" };
+var _hoisted_1$17 = { class: "m-cropper" };
 //#endregion
 //#region src/components/shared/Cropper.vue
 var Cropper_default = /* @__PURE__ */ defineComponent({
@@ -11461,7 +11968,7 @@ var Cropper_default = /* @__PURE__ */ defineComponent({
 		onBeforeMount(() => emit("start"));
 		onBeforeUnmount(() => emit("end"));
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$16, [
+			return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$17, [
 				createElementVNode("div", {
 					class: "m-cropper__source",
 					style: normalizeStyle(unref(boundingBoxToStyle)(sourceTransform.value))
@@ -11535,24 +12042,24 @@ var ForegroundCropper_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/PathEditor.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$15 = {
+var _hoisted_1$16 = {
 	ref: "svgTpl",
 	class: "m-path-editor",
 	style: { overflow: "visible" }
 };
-var _hoisted_2$7 = ["d"];
-var _hoisted_3$7 = [
+var _hoisted_2$8 = ["d"];
+var _hoisted_3$8 = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
 ];
-var _hoisted_4$4 = [
+var _hoisted_4$5 = [
 	"cx",
 	"cy",
 	"onPointerdown"
 ];
-var _hoisted_5$2 = [
+var _hoisted_5$3 = [
 	"x",
 	"y",
 	"onPointerdown",
@@ -12240,12 +12747,12 @@ var PathEditor_default = /* @__PURE__ */ defineComponent({
 			onUp();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("svg", _hoisted_1$15, [
+			return openBlock(), createElementBlock("svg", _hoisted_1$16, [
 				createElementVNode("path", {
 					class: "m-path-editor__hit",
 					d: screenPath.value,
 					onDblclick: onInsert
-				}, null, 40, _hoisted_2$7),
+				}, null, 40, _hoisted_2$8),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(controls.value, (c, i) => {
 					return openBlock(), createElementBlock("line", {
 						key: `l${i}`,
@@ -12254,7 +12761,7 @@ var PathEditor_default = /* @__PURE__ */ defineComponent({
 						y1: c.ay,
 						x2: c.x,
 						y2: c.y
-					}, null, 8, _hoisted_3$7);
+					}, null, 8, _hoisted_3$8);
 				}), 128)),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(controls.value, (c, i) => {
 					return openBlock(), createElementBlock("circle", {
@@ -12264,7 +12771,7 @@ var PathEditor_default = /* @__PURE__ */ defineComponent({
 						cy: c.y,
 						r: "4",
 						onPointerdown: ($event) => onDown($event, c.pi, c.ci, c.field)
-					}, null, 40, _hoisted_4$4);
+					}, null, 40, _hoisted_4$5);
 				}), 128)),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(anchors.value, (a, i) => {
 					return openBlock(), createElementBlock("rect", {
@@ -12276,7 +12783,7 @@ var PathEditor_default = /* @__PURE__ */ defineComponent({
 						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);
+					}, null, 42, _hoisted_5$3);
 				}), 128))
 			], 512);
 		};
@@ -12284,7 +12791,7 @@ var PathEditor_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/Selection.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$14 = { class: "m-selection" };
+var _hoisted_1$15 = { class: "m-selection" };
 //#endregion
 //#region src/components/Selection.vue
 var Selection_default = /* @__PURE__ */ defineComponent({
@@ -12351,23 +12858,26 @@ var Selection_default = /* @__PURE__ */ defineComponent({
 			emit("selectionTransformEnded", ctx);
 		}
 		const transformValue = computed(() => exec("getTransform"));
+		const isConnection = computed(() => {
+			return elementSelection.value.length === 1 && Boolean(elementSelection.value[0].connection?.isValid());
+		});
 		const movable = computed(() => {
-			return state.value !== "typing" && elementSelection.value.every((element) => {
+			return state.value !== "typing" && !isConnection.value && elementSelection.value.every((element) => {
 				return !isLock(element) && element.meta.movable !== false && element.meta.transformable !== false;
 			});
 		});
 		const resizable = computed(() => {
-			return state.value !== "typing" && elementSelection.value.every((element) => {
+			return state.value !== "typing" && !isConnection.value && elementSelection.value.every((element) => {
 				return !isLock(element) && element.meta.resizable !== false && element.meta.transformable !== false;
 			});
 		});
 		const rotatable = computed(() => {
-			return state.value !== "typing" && elementSelection.value.every((element) => {
+			return state.value !== "typing" && !isConnection.value && elementSelection.value.every((element) => {
 				return !isLock(element) && element.meta.rotatable !== false && element.meta.transformable !== false;
 			});
 		});
 		const roundable = computed(() => {
-			if (state.value !== "typing" && elementSelection.value.length === 1) {
+			if (state.value !== "typing" && !isConnection.value && elementSelection.value.length === 1) {
 				const element = elementSelection.value[0];
 				return hoverElement.value?.equal(element) && !isLock(element) && element.foreground.isValid();
 			}
@@ -12379,7 +12889,7 @@ var Selection_default = /* @__PURE__ */ defineComponent({
 		}
 		__expose({ transform });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$14, [
+			return openBlock(), createElementBlock("div", _hoisted_1$15, [
 				(openBlock(true), createElementBlock(Fragment, null, renderList(parentObbStyles.value, (style, index) => {
 					return openBlock(), createElementBlock("div", {
 						key: index,
@@ -12940,7 +13450,7 @@ var slice_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/SmartGuides.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$13 = {
+var _hoisted_1$14 = {
 	key: 0,
 	class: "m-smart-guides"
 };
@@ -12952,7 +13462,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$13, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.snapLines, (item, key) => {
+			return unref(state) === "transforming" || unref(state) === "moving" ? (openBlock(), createElementBlock("div", _hoisted_1$14, [(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}`)),
@@ -13917,7 +14427,7 @@ var smartGuides_default = definePlugin((editor) => {
 		if (box) {
 			const excluded = new Set(elementSelection.value.map((el) => el.instanceId));
 			const { vLines, hLines } = parent.value.children.filter((node) => {
-				return !excluded.has(node.instanceId) && isElement(node) && viewportAabb.value.overlap(node.globalAabb);
+				return !excluded.has(node.instanceId) && isElement(node) && !node.connection?.isValid() && viewportAabb.value.overlap(node.globalAabb);
 			}).map((node) => createBox(node)).filter(Boolean).reduce((store, box) => {
 				[
 					box.vt,
@@ -14176,7 +14686,7 @@ function isLeftTopLine(line) {
 }
 //#endregion
 //#region src/components/SmartSelection.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$12 = ["onPointerdown"];
+var _hoisted_1$13 = ["onPointerdown"];
 //#endregion
 //#region src/components/SmartSelection.vue
 var SmartSelection_default = /* @__PURE__ */ defineComponent({
@@ -14585,7 +15095,7 @@ var SmartSelection_default = /* @__PURE__ */ defineComponent({
 					}, [createElementVNode("div", {
 						class: "m-smart-selection__ring",
 						onPointerdown: ($event) => onRingDrag($event, item)
-					}, null, 40, _hoisted_1$12)], 6);
+					}, null, 40, _hoisted_1$13)], 6);
 				}), 128)), currentTransform.value.width && currentTransform.value.height ? (openBlock(), createBlock(Transform_default, mergeProps({
 					key: 0,
 					"model-value": currentTransform.value
@@ -14667,13 +15177,13 @@ var state_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/shared/ProgressIndicator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$11 = { class: "m-progress-indicator" };
-var _hoisted_2$6 = {
+var _hoisted_1$12 = { class: "m-progress-indicator" };
+var _hoisted_2$7 = {
 	key: 0,
 	class: "m-progress-indicator__status"
 };
-var _hoisted_3$6 = { class: "m-progress-indicator__bar" };
-var _hoisted_4$3 = {
+var _hoisted_3$7 = { class: "m-progress-indicator__bar" };
+var _hoisted_4$4 = {
 	key: 1,
 	class: "m-progress-indicator__bar-indeterminate"
 };
@@ -14692,22 +15202,22 @@ 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$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", {
+			return openBlock(), createElementBlock("div", _hoisted_1$12, [__props.label ? (openBlock(), createElementBlock("span", _hoisted_2$7, toDisplayString(__props.label), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$7, [!__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$3))])]);
+			}, null, 4)) : (openBlock(), createElementBlock("div", _hoisted_4$4))])]);
 		};
 	}
 }), [["__scopeId", "data-v-cc8ac0cb"]]);
 //#endregion
 //#region src/components/Statusbar.vue?vue&type=script&setup=true&lang.ts
-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_1$11 = { class: "m-statusbar" };
+var _hoisted_2$6 = { class: "m-statusbar__main" };
+var _hoisted_3$6 = { class: "m-statusbar__item" };
+var _hoisted_4$3 = { class: "m-statusbar__kbd" };
+var _hoisted_5$2 = { class: "m-statusbar__kbd" };
+var _hoisted_6$2 = { 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" };
@@ -14731,10 +15241,10 @@ 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$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)]),
+			return openBlock(), createElementBlock("div", _hoisted_1$11, [createElementVNode("div", _hoisted_2$6, [unref(state) === "typing" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+				createElementVNode("div", _hoisted_3$6, [createElementVNode("span", _hoisted_4$3, toDisplayString(unref(getKbd)("Command")), 1), createElementVNode("span", _hoisted_5$2, toDisplayString(unref(getKbd)("Enter")), 1)]),
 				_cache[1] || (_cache[1] = createElementVNode("span", null, "/", -1)),
-				createElementVNode("div", _hoisted_6$1, [createElementVNode("span", _hoisted_7$1, toDisplayString(unref(getKbd)("Escape")), 1), createElementVNode("span", null, toDisplayString(unref(t)("commitChanges")), 1)])
+				createElementVNode("div", _hoisted_6$2, [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$1, [createVNode(unref(Icon_default), { icon: "$mouseRightClick" })]),
 				_cache[3] || (_cache[3] = createElementVNode("span", null, "\xA0/\xA0", -1)),
@@ -14811,29 +15321,29 @@ var test_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/timeline/Playhead.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$9 = { class: "m-payhead" };
+var _hoisted_1$10 = { 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$9, [..._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$10, [..._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$8 = ["onMousedown"];
-var _hoisted_2$4 = {
+var _hoisted_1$9 = ["onMousedown"];
+var _hoisted_2$5 = {
 	key: 0,
 	class: "m-segment__edge m-segment__edge--front"
 };
-var _hoisted_3$4 = {
+var _hoisted_3$5 = {
 	class: "m-segment__node",
 	style: { "overflow": "hidden" }
 };
-var _hoisted_4$1 = {
+var _hoisted_4$2 = {
 	key: 1,
 	class: "m-segment__edge m-segment__edge--end"
 };
@@ -14998,33 +15508,33 @@ var Segment_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(["m-segment__block", `m-segment__block--${block.kind}`]),
 						style: normalizeStyle(blockStyle(block)),
 						onMousedown: ($event) => onBlockDown($event, block)
-					}, null, 46, _hoisted_1$8);
+					}, null, 46, _hoisted_1$9);
 				}), 128)),
-				__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)
+				__props.active ? (openBlock(), createElementBlock("div", _hoisted_2$5)) : createCommentVNode("", true),
+				createElementVNode("span", _hoisted_3$5, toDisplayString(unref(thumbnailName)), 1),
+				__props.active ? (openBlock(), createElementBlock("div", _hoisted_4$2)) : createCommentVNode("", true)
 			], 38);
 		};
 	}
 });
 //#endregion
 //#region src/components/timeline/Track.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$7 = { class: "m-track" };
+var _hoisted_1$8 = { 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$7, [renderSlot(_ctx.$slots, "default")]);
+			return openBlock(), createElementBlock("div", _hoisted_1$8, [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 };
+var _hoisted_1$7 = ["data-id"];
+var _hoisted_2$4 = { class: "m-trackhead__thumbnail" };
+var _hoisted_3$4 = { key: 1 };
 //#endregion
 //#region src/components/timeline/Trackhead.vue
 var Trackhead_default = /* @__PURE__ */ defineComponent({
@@ -15115,7 +15625,7 @@ var Trackhead_default = /* @__PURE__ */ defineComponent({
 				onMouseenter,
 				onMouseleave
 			}, [
-				createElementVNode("div", _hoisted_2$3, [createVNode(unref(Icon_default), { icon: unref(thumbnailIcon) }, null, 8, ["icon"])]),
+				createElementVNode("div", _hoisted_2$4, [createVNode(unref(Icon_default), { icon: unref(thumbnailIcon) }, null, 8, ["icon"])]),
 				createElementVNode("div", {
 					class: "m-trackhead__name",
 					onDblclick: onDblclickName
@@ -15132,7 +15642,7 @@ var Trackhead_default = /* @__PURE__ */ defineComponent({
 					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),
+				}, null, 544)), [[vModelText, editValue.value]]) : (openBlock(), createElementBlock("span", _hoisted_3$4, 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) }]),
@@ -15144,18 +15654,18 @@ var Trackhead_default = /* @__PURE__ */ defineComponent({
 					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);
+			], 42, _hoisted_1$7);
 		};
 	}
 });
 //#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__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_1$6 = { class: "m-timeline__toolbar" };
+var _hoisted_2$3 = { class: "m-timeline__time" };
+var _hoisted_3$3 = { class: "m-timeline__time--muted" };
+var _hoisted_4$1 = { class: "m-timeline__controls" };
+var _hoisted_5$1 = ["title"];
+var _hoisted_6$1 = ["title"];
 var _hoisted_7 = ["title"];
 var _hoisted_8 = ["title"];
 var _hoisted_9 = ["title"];
@@ -15253,25 +15763,25 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("div", {
 				class: "m-timeline",
 				onWheel: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"]))
-			}, [createElementVNode("div", _hoisted_1$5, [
-				createElementVNode("div", _hoisted_2$2, [
+			}, [createElementVNode("div", _hoisted_1$6, [
+				createElementVNode("div", _hoisted_2$3, [
 					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("span", _hoisted_3$3, toDisplayString(totalLabel.value), 1)
 				]),
-				createElementVNode("div", _hoisted_4, [
+				createElementVNode("div", _hoisted_4$1, [
 					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),
+					}, [createVNode(unref(Icon_default), { icon: "$skipPrevious" })], 8, _hoisted_5$1),
 					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),
+					}, [createVNode(unref(Icon_default), { icon: "$stepBackward" })], 8, _hoisted_6$1),
 					createElementVNode("button", {
 						class: "m-timeline__btn m-timeline__btn--primary",
 						type: "button",
@@ -15511,7 +16021,7 @@ var timeline_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/Drawing.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$4 = {
+var _hoisted_1$5 = {
 	key: 0,
 	class: "m-drawing__tip"
 };
@@ -15529,7 +16039,7 @@ var Drawing_default = /* @__PURE__ */ defineComponent({
 					left: `${unref(drawboardPointer).x}px`,
 					top: `${unref(drawboardPointer).y}px`
 				})
-			}, [unref(activeTool)?.name ? (openBlock(), createElementBlock("div", _hoisted_1$4, toDisplayString(unref(t)(unref(activeTool).name)), 1)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true);
+			}, [unref(activeTool)?.name ? (openBlock(), createElementBlock("div", _hoisted_1$5, toDisplayString(unref(t)(unref(activeTool).name)), 1)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true);
 		};
 	}
 });
@@ -15552,9 +16062,9 @@ var tool_default = definePlugin((editor) => {
 });
 //#endregion
 //#region src/components/Toolbelt.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$3 = { class: "m-toolbelt" };
-var _hoisted_2$1 = { key: 0 };
-var _hoisted_3$1 = { key: 1 };
+var _hoisted_1$4 = { class: "m-toolbelt" };
+var _hoisted_2$2 = { key: 0 };
+var _hoisted_3$2 = { key: 1 };
 //#endregion
 //#region src/components/Toolbelt.vue
 var Toolbelt_default = /* @__PURE__ */ defineComponent({
@@ -15642,7 +16152,7 @@ var Toolbelt_default = /* @__PURE__ */ defineComponent({
 			];
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (tool, key) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$4, [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (tool, key) => {
 				return openBlock(), createElementBlock("div", {
 					key,
 					class: "m-toolbelt__group"
@@ -15660,7 +16170,7 @@ var Toolbelt_default = /* @__PURE__ */ defineComponent({
 						_: 2
 					}, 1040, ["active", "onClick"])]),
 					default: withCtx(() => [createElementVNode("span", null, toDisplayString(unref(t)(tool.key)), 1)]),
-					kbd: withCtx(() => [unref(hotkeys).has(`setState:${tool.key}`) ? (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString(unref(getKbd)(`setState:${tool.key}`)), 1)) : unref(hotkeys).has(`activateTool:${tool.key}`) ? (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(unref(getKbd)(`activateTool:${tool.key}`)), 1)) : createCommentVNode("", true)]),
+					kbd: withCtx(() => [unref(hotkeys).has(`setState:${tool.key}`) ? (openBlock(), createElementBlock("span", _hoisted_2$2, toDisplayString(unref(getKbd)(`setState:${tool.key}`)), 1)) : unref(hotkeys).has(`activateTool:${tool.key}`) ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(unref(getKbd)(`activateTool:${tool.key}`)), 1)) : createCommentVNode("", true)]),
 					_: 2
 				}, 1024), tool.children?.length ? (openBlock(), createBlock(Menu_default, {
 					key: 0,
@@ -16078,6 +16588,9 @@ var TextEditor_default = /* @__PURE__ */ defineComponent({
 			await nextTick();
 			if (editor.pointerDown(e)) {
 				editor.selectAll();
+				requestAnimationFrame(() => {
+					if (state.value === "typing") editor.selectAll();
+				});
 				return true;
 			}
 			return false;
@@ -16113,12 +16626,12 @@ var TextEditor_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region \0@oxc-project+runtime@0.130.0/helpers/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.132.0/helpers/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.130.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.132.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -16428,8 +16941,10 @@ var TextEditor = class extends HTMLElement {
 		let prevOldStyle = {};
 		diffChars(oldString, newString).forEach((change) => {
 			const chars = Array.from(change.value);
-			if (change.removed) oldStyleIndex += chars.length;
-			else chars.forEach(() => {
+			if (change.removed) {
+				prevOldStyle = normalizeStyle$1(oldStyles[oldStyleIndex] ?? {});
+				oldStyleIndex += chars.length;
+			} else chars.forEach(() => {
 				if (change.added) styles[styleIndex] = { ...prevOldStyle };
 				else {
 					prevOldStyle = normalizeStyle$1(oldStyles[oldStyleIndex]);
@@ -16778,504 +17293,841 @@ __decorate([property({
 	fallback: false
 }), __decorateMetadata("design:type", Boolean)], TextEditor.prototype, "_showCursor", void 0);
 //#endregion
-//#region src/plugins/index.ts
-var plugins = [
-	arrange_default,
-	autoNest_default,
-	clipboard_default,
-	doc_default,
-	edit_default,
-	formatPaint_default,
-	frame_default,
-	history_default,
-	hover_default,
-	html_default,
-	image_default,
-	import_default,
-	json_default,
-	layers_default,
-	madeWith_default,
-	memory_default,
-	menu_default,
-	node_default,
-	pen_default,
-	ruler_default,
-	saveAs_default,
-	scroll_default,
-	selection_default,
-	shape_default,
-	slice_default,
-	smartGuides_default,
-	smartSelection_default,
-	state_default,
-	statusbar_default,
-	test_default,
-	timeline_default,
-	tool_default,
-	toolbelt_default,
-	transform_default,
-	definePlugin((editor) => {
-		const { isElement, elementSelection, textSelection, fonts, registerConfig, t, addElement, activateTool } = editor;
-		const config = registerConfig("typography", { default: { strategy: "autoHeight" } });
-		const hasTextSelectionRange = computed(() => {
-			return (textSelection.value?.length ?? 0) > 1 && textSelection.value[0] !== textSelection.value[1];
-		});
-		const isTextAllSelected = computed(() => {
-			return textSelection.value?.[0].isFirst && textSelection.value?.[1].isLast && textSelection.value?.[1].isLastSelected;
-		});
-		function textFontSizeToFit(element, scale) {
-			function _handle(element) {
-				if (!scale) {
-					const chars = element.text.base.characters;
-					let pos = 0;
-					let char;
-					chars.forEach((_char) => {
-						const _pos = _char.lineBox.left + _char.lineBox.width;
-						if (_pos > pos) {
-							char = _char;
-							pos = _pos;
-						}
-					});
-					const style = {};
-					const content = chars.filter((_char) => _char.lineBox.top === char?.lineBox.top).map((char) => {
-						Object.assign(style, { ...char.parent.style }, { ...char.parent.parent.style });
-						return char.content;
-					}).join("");
-					const { boundingBox } = measureText({
-						fonts,
-						style: {
-							...element.style.toJSON(),
-							width: "auto"
-						},
-						content: [{ fragments: [{
-							...style,
-							content
-						}] }]
-					});
-					const fontSize = (element.style.fontSize || 12) / 2;
-					scale = (element.style.width ?? 0) / (boundingBox.width + fontSize);
-				}
-				function _scaleStyle(style) {
-					if (style.fontSize) style.fontSize = style.fontSize * scale;
-					if (style.letterSpacing) style.letterSpacing = style.letterSpacing * scale;
-				}
-				_scaleStyle(element.style);
-				if (element.text?.isValid?.() && Array.isArray(element.text?.content)) element.text.content.forEach((p) => {
-					_scaleStyle(p);
-					p.fragments.forEach((f) => {
-						_scaleStyle(f);
-					});
+//#region src/plugins/typography.ts
+var typography_default = definePlugin((editor) => {
+	const { isElement, elementSelection, textSelection, fonts, registerConfig, t, addElement, activateTool } = editor;
+	const config = registerConfig("typography", { default: { strategy: "autoHeight" } });
+	const hasTextSelectionRange = computed(() => {
+		return (textSelection.value?.length ?? 0) > 1 && textSelection.value[0] !== textSelection.value[1];
+	});
+	const isTextAllSelected = computed(() => {
+		return textSelection.value?.[0].isFirst && textSelection.value?.[1].isLast && textSelection.value?.[1].isLastSelected;
+	});
+	function textFontSizeToFit(element, scale) {
+		function _handle(element) {
+			if (!scale) {
+				const chars = element.text.base.characters;
+				let pos = 0;
+				let char;
+				chars.forEach((_char) => {
+					const _pos = _char.lineBox.left + _char.lineBox.width;
+					if (_pos > pos) {
+						char = _char;
+						pos = _pos;
+					}
 				});
-				element.requestRender();
-			}
-			_handle(element);
-			element.findOne((descendant) => {
-				if (isElement(descendant)) _handle(descendant);
-				return false;
-			});
-		}
-		function textToFit(element, strategy = config.value.strategy) {
-			if (strategy === "fixedWidthHeight") return;
-			else if (strategy === "autoFontSize") {
-				textFontSizeToFit(element);
-				return;
-			}
-			function _handle(element) {
-				if (!element.text?.isValid?.() || typeof element.text?.content !== "object") return;
-				const isVertical = element.text.base.isVertical;
-				const style = element.style.toJSON();
-				switch (strategy) {
-					case "autoWidth":
-						if (isVertical) style.height = "auto";
-						else style.width = "auto";
-						break;
-					case "autoHeight":
-						if (isVertical) style.width = "auto";
-						else style.height = "auto";
-						break;
-				}
+				const style = {};
+				const content = chars.filter((_char) => _char.lineBox.top === char?.lineBox.top).map((char) => {
+					Object.assign(style, { ...char.parent.style }, { ...char.parent.parent.style });
+					return char.content;
+				}).join("");
 				const { boundingBox } = measureText({
 					fonts,
-					style,
-					content: element.text.content
+					style: {
+						...element.style.toJSON(),
+						width: "auto"
+					},
+					content: [{ fragments: [{
+						...style,
+						content
+					}] }]
 				});
-				if (element.style.width !== boundingBox.width || element.style.height !== boundingBox.height) {
-					element.style.width = boundingBox.width;
-					element.style.height = boundingBox.height;
-					element.requestRender();
-				}
+				const fontSize = (element.style.fontSize || 12) / 2;
+				scale = (element.style.width ?? 0) / (boundingBox.width + fontSize);
 			}
-			_handle(element);
-			element.findOne((descendant) => {
-				if (isElement(descendant)) _handle(descendant);
-				return false;
-			});
-		}
-		function handleTextSelection([start, end], cb) {
-			let flag = true;
-			elementSelection.value[0]?.text?.content.forEach((p, pIndex, pItems) => {
-				if (!flag) return;
-				p.fragments.forEach((f, fIndex, fItems) => {
-					if (!flag) return;
-					const { content, ...fStyle } = f;
-					Array.from(normalizeCRLF(content)).forEach((c, cIndex, cItems) => {
-						flag = cb({
-							selected: (pIndex > start.paragraphIndex || pIndex === start.paragraphIndex && fIndex > start.fragmentIndex || pIndex === start.paragraphIndex && fIndex === start.fragmentIndex && cIndex >= start.charIndex) && (pIndex < end.paragraphIndex || pIndex === end.paragraphIndex && fIndex < end.fragmentIndex || pIndex === end.paragraphIndex && fIndex === end.fragmentIndex && (end.isLastSelected ? cIndex <= end.charIndex : cIndex < end.charIndex)),
-							p,
-							pIndex,
-							pLength: pItems.length,
-							f,
-							fIndex,
-							fStyle,
-							fLength: fItems.length,
-							c,
-							cLength: cItems.length,
-							cIndex
-						});
-					});
+			function _scaleStyle(style) {
+				if (style.fontSize) style.fontSize = style.fontSize * scale;
+				if (style.letterSpacing) style.letterSpacing = style.letterSpacing * scale;
+			}
+			_scaleStyle(element.style);
+			if (element.text?.isValid?.() && Array.isArray(element.text?.content)) element.text.content.forEach((p) => {
+				_scaleStyle(p);
+				p.fragments.forEach((f) => {
+					_scaleStyle(f);
 				});
 			});
+			element.requestRender();
 		}
-		function getTextStyle(key) {
-			const el = elementSelection.value[0];
-			if (!el) return;
-			let value;
-			switch (key) {
-				case "fill":
-				case "outline":
-					value = el.text[key];
+		_handle(element);
+		element.findOne((descendant) => {
+			if (isElement(descendant)) _handle(descendant);
+			return false;
+		});
+	}
+	function textToFit(element, strategy = config.value.strategy) {
+		if (strategy === "fixedWidthHeight") return;
+		else if (strategy === "autoFontSize") {
+			textFontSizeToFit(element);
+			return;
+		}
+		function _handle(element) {
+			if (!element.text?.isValid?.() || typeof element.text?.content !== "object") return;
+			const isVertical = element.text.base.isVertical;
+			const style = element.style.toJSON();
+			switch (strategy) {
+				case "autoWidth":
+					if (isVertical) style.height = "auto";
+					else style.width = "auto";
 					break;
-				default:
-					value = el.style[key];
+				case "autoHeight":
+					if (isVertical) style.width = "auto";
+					else style.height = "auto";
 					break;
 			}
-			if (hasTextSelectionRange.value && !isTextAllSelected.value) {
-				const selection = textSelection.value;
-				if (selection && selection[0] && selection[1]) handleTextSelection(selection, ({ selected, fStyle }) => {
-					if (selected && fStyle[key]) {
-						value = fStyle[key];
-						return false;
-					}
-					return true;
+			const { boundingBox } = measureText({
+				fonts,
+				style,
+				content: element.text.content
+			});
+			if (element.style.width !== boundingBox.width || element.style.height !== boundingBox.height) {
+				element.style.width = boundingBox.width;
+				element.style.height = boundingBox.height;
+				element.requestRender();
+			}
+		}
+		_handle(element);
+		element.findOne((descendant) => {
+			if (isElement(descendant)) _handle(descendant);
+			return false;
+		});
+	}
+	function handleTextSelection([start, end], cb) {
+		let flag = true;
+		elementSelection.value[0]?.text?.content.forEach((p, pIndex, pItems) => {
+			if (!flag) return;
+			p.fragments.forEach((f, fIndex, fItems) => {
+				if (!flag) return;
+				const { content, ...fStyle } = f;
+				Array.from(normalizeCRLF(content)).forEach((c, cIndex, cItems) => {
+					flag = cb({
+						selected: (pIndex > start.paragraphIndex || pIndex === start.paragraphIndex && fIndex > start.fragmentIndex || pIndex === start.paragraphIndex && fIndex === start.fragmentIndex && cIndex >= start.charIndex) && (pIndex < end.paragraphIndex || pIndex === end.paragraphIndex && fIndex < end.fragmentIndex || pIndex === end.paragraphIndex && fIndex === end.fragmentIndex && (end.isLastSelected ? cIndex <= end.charIndex : cIndex < end.charIndex)),
+						p,
+						pIndex,
+						pLength: pItems.length,
+						f,
+						fIndex,
+						fStyle,
+						fLength: fItems.length,
+						c,
+						cLength: cItems.length,
+						cIndex
+					});
 				});
-			} else {
-				const content = el.text.content;
-				switch (key) {
-					case "fontSize": return content?.reduce((prev, p) => {
-						return p.fragments.reduce((prev, f) => {
-							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];
+			});
+		});
+	}
+	function getTextStyle(key) {
+		const el = elementSelection.value[0];
+		if (!el) return;
+		let value;
+		switch (key) {
+			case "fill":
+			case "outline":
+				value = el.text[key];
+				break;
+			default:
+				value = el.style[key];
+				break;
+		}
+		if (hasTextSelectionRange.value && !isTextAllSelected.value) {
+			const selection = textSelection.value;
+			if (selection && selection[0] && selection[1]) handleTextSelection(selection, ({ selected, fStyle }) => {
+				if (selected && fStyle[key]) {
+					value = fStyle[key];
+					return false;
 				}
+				return true;
+			});
+		} else {
+			const content = el.text.content;
+			switch (key) {
+				case "fontSize": return content?.reduce((prev, p) => {
+					return p.fragments.reduce((prev, f) => {
+						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];
 			}
-			return value;
 		}
-		function setTextContentByEachFragment(handler) {
-			const el = elementSelection.value[0];
-			if (!el) return;
-			const newContent = [];
-			let newParagraph = { fragments: [] };
-			let newFragment;
-			handleTextSelection(textSelection.value, ({ selected, fIndex, fStyle, fLength, c, cIndex, cLength }) => {
-				if (fIndex === 0 && cIndex === 0) {
+		return value;
+	}
+	function setTextContentByEachFragment(handler) {
+		const el = elementSelection.value[0];
+		if (!el) return;
+		const newContent = [];
+		let newParagraph = { fragments: [] };
+		let newFragment;
+		handleTextSelection(textSelection.value, ({ selected, fIndex, fStyle, fLength, c, cIndex, cLength }) => {
+			if (fIndex === 0 && cIndex === 0) {
+				newParagraph = { fragments: [] };
+				newFragment = void 0;
+			}
+			const style = { ...fStyle };
+			if (selected) handler(style);
+			if (newFragment) {
+				const { content: _, ..._style } = newFragment;
+				if (isEqualObject(style, _style)) newFragment.content += c;
+				else {
+					newParagraph.fragments.push(newFragment);
+					newFragment = {
+						...style,
+						content: c
+					};
+				}
+			} else newFragment = {
+				...style,
+				content: c
+			};
+			if (fIndex === fLength - 1 && cIndex === cLength - 1) {
+				if (newFragment) newParagraph.fragments.push(newFragment);
+				if (newParagraph.fragments.length) {
+					newContent.push(newParagraph);
 					newParagraph = { fragments: [] };
-					newFragment = void 0;
 				}
-				const style = { ...fStyle };
-				if (selected) handler(style);
-				if (newFragment) {
-					const { content: _, ..._style } = newFragment;
-					if (isEqualObject(style, _style)) newFragment.content += c;
-					else {
-						newParagraph.fragments.push(newFragment);
-						newFragment = {
-							...style,
-							content: c
-						};
-					}
-				} else newFragment = {
-					...style,
-					content: c
-				};
-				if (fIndex === fLength - 1 && cIndex === cLength - 1) {
-					if (newFragment) newParagraph.fragments.push(newFragment);
-					if (newParagraph.fragments.length) {
-						newContent.push(newParagraph);
-						newParagraph = { fragments: [] };
+			}
+			return true;
+		});
+		if (newContent.length) el.text = {
+			...el.text.toJSON(),
+			content: newContent
+		};
+	}
+	function setTextStyle(key, value) {
+		const el = elementSelection.value[0];
+		if (!el) return;
+		switch (key) {
+			case "writingMode":
+				if (el.style[key] !== value) {
+					const { width, height } = el.style;
+					el.style.width = height;
+					el.style.height = width;
+					el.style[key] = value;
+				}
+				break;
+			default:
+				if (hasTextSelectionRange.value && !isTextAllSelected.value) setTextContentByEachFragment((fragment) => {
+					fragment[key] = value;
+				});
+				else {
+					switch (key) {
+						case "fill":
+						case "outline":
+							el.text[key] = value;
+							break;
+						default:
+							el.style[key] = value;
+							break;
 					}
+					el.text.content.forEach((p) => {
+						delete p[key];
+						p.fragments.forEach((f) => {
+							delete f[key];
+						});
+					});
+					el.text = el.text.toJSON();
 				}
-				return true;
+				el.requestDraw();
+				textToFit(el);
+				break;
+		}
+	}
+	function getTextFill() {
+		const el = elementSelection.value[0];
+		if (!el) return;
+		let fill;
+		if (hasTextSelectionRange.value) {
+			fill = getTextStyle("fill");
+			if (!fill) fill = { color: getTextStyle("color") };
+		}
+		fill = fill ?? el.text.fill ?? { color: el.style.color };
+		return fill;
+	}
+	function setTextFill(value) {
+		const el = elementSelection.value[0];
+		if (!el) return;
+		if (hasTextSelectionRange.value && value?.color) setTextStyle("fill", value);
+		else {
+			el.text.fill = value;
+			if (value?.color) el.style.color = value.color;
+			el.text.content.forEach((p) => {
+				delete p.fill;
+				delete p.color;
+				p.fragments.forEach((f) => {
+					delete f.fill;
+					delete f.color;
+				});
 			});
-			if (newContent.length) el.text = {
+			el.text = {
 				...el.text.toJSON(),
-				content: newContent
+				fill: value
 			};
+			el.requestDraw();
 		}
-		function setTextStyle(key, value) {
-			const el = elementSelection.value[0];
-			if (!el) return;
-			switch (key) {
-				case "writingMode":
-					if (el.style[key] !== value) {
-						const { width, height } = el.style;
-						el.style.width = height;
-						el.style.height = width;
-						el.style[key] = value;
-					}
-					break;
-				default:
-					if (hasTextSelectionRange.value && !isTextAllSelected.value) setTextContentByEachFragment((fragment) => {
-						fragment[key] = value;
-					});
-					else {
-						switch (key) {
-							case "fill":
-							case "outline":
-								el.text[key] = value;
-								break;
-							default:
-								el.style[key] = value;
-								break;
-						}
-						el.text.content.forEach((p) => {
-							delete p[key];
-							p.fragments.forEach((f) => {
-								delete f[key];
-							});
-						});
-						el.text = el.text.toJSON();
-					}
-					el.requestDraw();
-					textToFit(el);
-					break;
+	}
+	const addTextElement = (options = {}) => {
+		const { content = t("doubleClickEditText"), style, ...restOptions } = options;
+		return addElement(createTextElement(content, {
+			fontSize: 64,
+			...style
+		}), {
+			sizeToFit: true,
+			active: true,
+			...restOptions
+		});
+	};
+	Object.assign(editor, {
+		hasTextSelectionRange,
+		isTextAllSelected
+	});
+	return {
+		name: "mce:typography",
+		commands: [
+			{
+				command: "addTextElement",
+				handle: addTextElement
+			},
+			{
+				command: "handleTextSelection",
+				handle: handleTextSelection
+			},
+			{
+				command: "textFontSizeToFit",
+				handle: textFontSizeToFit
+			},
+			{
+				command: "textToFit",
+				handle: textToFit
+			},
+			{
+				command: "setTextStyle",
+				handle: setTextStyle
+			},
+			{
+				command: "getTextStyle",
+				handle: getTextStyle
+			},
+			{
+				command: "getTextFill",
+				handle: getTextFill
+			},
+			{
+				command: "setTextFill",
+				handle: setTextFill
+			},
+			{
+				command: "setTextContentByEachFragment",
+				handle: setTextContentByEachFragment
 			}
+		],
+		hotkeys: [{
+			command: "activateTool:text",
+			key: "T"
+		}],
+		loaders: [{
+			name: "txt",
+			accept: ".txt",
+			test: (source) => {
+				if (source instanceof Blob) {
+					if (source.type.startsWith("text/plain")) return true;
+				}
+				if (source instanceof File) {
+					if (/\.txt$/i.test(source.name)) return true;
+				}
+				return false;
+			},
+			load: async (source) => {
+				return createTextElement(await source.text());
+			}
+		}],
+		tools: [{
+			name: "text",
+			handle: (position) => {
+				addTextElement({ position });
+				activateTool(void 0);
+			}
+		}],
+		components: [{
+			type: "overlay",
+			component: TextEditor_default
+		}],
+		setup: async () => {
+			const { setDefaultFont } = editor;
+			onBeforeMount(() => {
+				TextEditor.register();
+			});
+			const defaultFont = config.value.defaultFont;
+			if (defaultFont) await setDefaultFont(defaultFont);
 		}
-		function getTextFill() {
-			const el = elementSelection.value[0];
-			if (!el) return;
-			let fill;
-			if (hasTextSelectionRange.value) {
-				fill = getTextStyle("fill");
-				if (!fill) fill = { color: getTextStyle("color") };
+	};
+});
+//#endregion
+//#region src/plugins/url.ts
+var url_default = definePlugin((editor) => {
+	const { load, http } = editor;
+	return {
+		name: "mce:url",
+		loaders: [{
+			name: "url",
+			test: (source) => {
+				return typeof source === "string";
+			},
+			load: async (url) => {
+				const blob = await http.request({
+					url,
+					responseType: "blob"
+				});
+				const file = new File([blob], url, { type: blob.type });
+				try {
+					return await load(file);
+				} catch (error) {
+					throw new Error(`Failed to load source "${url}", ${error}`);
+				}
 			}
-			fill = fill ?? el.text.fill ?? { color: el.style.color };
-			return fill;
+		}]
+	};
+});
+//#endregion
+//#region src/plugins/view.ts
+var view_default = definePlugin((editor) => {
+	const { config, components } = editor;
+	const getUiConfig = (name) => {
+		return config.value.ui[name];
+	};
+	const setUiVisible = (name, visible) => {
+		const obj = getUiConfig(name);
+		if (obj && "visible" in obj) if (visible === "toggle") obj.visible = !obj.visible;
+		else obj.visible = visible;
+	};
+	const isPanelVisible = (name) => {
+		return Boolean(components.value.find((c) => c.type === "panel" && c.name === name)?.visible.value);
+	};
+	const setPanelVisible = (name, visible) => {
+		const c = components.value.find((c) => c.type === "panel" && c.name === name);
+		if (c) if (visible === "toggle") c.visible.value = !c.visible.value;
+		else c.visible.value = visible;
+	};
+	return {
+		name: "mce:view",
+		commands: [
+			{
+				command: "getUiConfig",
+				handle: getUiConfig
+			},
+			{
+				command: "isUiVisible",
+				handle: (name) => Boolean(getUiConfig(name)?.visible)
+			},
+			{
+				command: "setUiVisible",
+				handle: setUiVisible
+			},
+			{
+				command: "hideUi",
+				handle: (name) => setUiVisible(name, false)
+			},
+			{
+				command: "showUi",
+				handle: (name) => setUiVisible(name, true)
+			},
+			{
+				command: "toggleUi",
+				handle: (name) => setUiVisible(name, "toggle")
+			},
+			{
+				command: "isPanelVisible",
+				handle: isPanelVisible
+			},
+			{
+				command: "setPanelVisible",
+				handle: setPanelVisible
+			},
+			{
+				command: "hidePanel",
+				handle: (name) => setPanelVisible(name, false)
+			},
+			{
+				command: "showPanel",
+				handle: (name) => setPanelVisible(name, true)
+			},
+			{
+				command: "togglePanel",
+				handle: (name) => setPanelVisible(name, "toggle")
+			}
+		],
+		hotkeys: [{
+			command: "toggleUi:pixelGrid",
+			key: "Shift+\""
+		}, {
+			command: "toggleUi:ruler",
+			key: "Shift+R"
+		}]
+	};
+});
+//#endregion
+//#region src/utils/workflow.ts
+var INPUT_PORT = {
+	idx: 0,
+	x: 0,
+	y: .5,
+	ang: Math.PI,
+	kind: "input"
+};
+var OUTPUT_PORT = {
+	idx: 1,
+	x: 1,
+	y: .5,
+	ang: 0,
+	kind: "output"
+};
+function getWorkflowPorts(el) {
+	if (el.meta?.inEditorIs === "Frame") return [OUTPUT_PORT];
+	return [INPUT_PORT, OUTPUT_PORT];
+}
+function toConnectionPoints(ports) {
+	return ports.map(({ idx, x, y, ang }) => ({
+		idx,
+		x,
+		y,
+		ang
+	}));
+}
+//#endregion
+//#region src/components/Workflow.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = {
+	key: 0,
+	class: "m-workflow"
+};
+var _hoisted_2$1 = {
+	key: 0,
+	class: "m-workflow__preview"
+};
+var _hoisted_3$1 = ["d"];
+var _hoisted_4 = ["onPointerdown"];
+var _hoisted_5 = ["onClick"];
+var _hoisted_6 = { class: "m-workflow__menu-kbd" };
+var PORT_GAP = 16;
+//#endregion
+//#region src/components/Workflow.vue
+var Workflow_default = /* @__PURE__ */ defineComponent({
+	__name: "Workflow",
+	setup(__props) {
+		const { mode, elementSelection, getAabb, camera, drawboardAabb, root, isElement, exec } = useEditor();
+		const NODE_TYPES = [
+			{
+				type: "text",
+				label: "文字生成",
+				kbd: "⇧T"
+			},
+			{
+				type: "image",
+				label: "图片生成",
+				kbd: "⇧I"
+			},
+			{
+				type: "video",
+				label: "视频生成",
+				kbd: "⇧V"
+			}
+		];
+		function isConnectable(el) {
+			return isElement(el) && !el.connection?.isValid?.();
 		}
-		function setTextFill(value) {
+		const selectedNode = computed(() => {
+			if (mode.value !== "workflow") return void 0;
 			const el = elementSelection.value[0];
-			if (!el) return;
-			if (hasTextSelectionRange.value && value?.color) setTextStyle("fill", value);
-			else {
-				el.text.fill = value;
-				if (value?.color) el.style.color = value.color;
-				el.text.content.forEach((p) => {
-					delete p.fill;
-					delete p.color;
-					p.fragments.forEach((f) => {
-						delete f.fill;
-						delete f.color;
-					});
-				});
-				el.text = {
-					...el.text.toJSON(),
-					fill: value
+			return el && isConnectable(el) ? el : void 0;
+		});
+		const ports = computed(() => {
+			const el = selectedNode.value;
+			if (!el) return [];
+			const a = getAabb(el, "drawboard");
+			return getWorkflowPorts(el).map((p) => {
+				let dx = p.x - .5;
+				let dy = p.y - .5;
+				const len = Math.hypot(dx, dy) || 1;
+				dx /= len;
+				dy /= len;
+				return {
+					kind: p.kind,
+					idx: p.idx,
+					x: a.left + a.width * p.x + dx * PORT_GAP,
+					y: a.top + a.height * p.y + dy * PORT_GAP
 				};
-				el.requestDraw();
-			}
+			});
+		});
+		const drag = ref();
+		const menu = ref();
+		function toDrawboard(e) {
+			return {
+				x: e.clientX - drawboardAabb.value.left,
+				y: e.clientY - drawboardAabb.value.top
+			};
 		}
-		const addTextElement = (options = {}) => {
-			const { content = t("doubleClickEditText"), style, ...restOptions } = options;
-			return addElement(createTextElement(content, {
-				fontSize: 64,
-				...style
-			}), {
-				sizeToFit: true,
-				active: true,
-				...restOptions
+		function findNodeAt(point, excludeId) {
+			return (root.value?.children ?? []).find((n) => {
+				return isConnectable(n) && n.id !== excludeId && getAabb(n, "drawboard").contains(point);
 			});
-		};
-		Object.assign(editor, {
-			hasTextSelectionRange,
-			isTextAllSelected
+		}
+		function connect(port, sourceId, otherId, otherPorts) {
+			const need = port.kind === "output" ? "input" : "output";
+			const other = otherPorts.find((p) => p.kind === need);
+			if (!other) return false;
+			if (port.kind === "output") exec("addWorkflowConnection", sourceId, port.idx, otherId, other.idx);
+			else exec("addWorkflowConnection", otherId, other.idx, sourceId, port.idx);
+			return true;
+		}
+		function startConnection(port, e) {
+			e.stopPropagation();
+			e.preventDefault();
+			const el = selectedNode.value;
+			if (!el) return;
+			const sourceId = el.id;
+			const from = {
+				x: port.x,
+				y: port.y
+			};
+			drag.value = {
+				port,
+				from,
+				to: { ...from },
+				sourceId
+			};
+			const onMove = (ev) => {
+				if (drag.value) drag.value = {
+					...drag.value,
+					to: toDrawboard(ev)
+				};
+			};
+			const onUp = (ev) => {
+				document.removeEventListener("pointermove", onMove);
+				document.removeEventListener("pointerup", onUp);
+				const drop = toDrawboard(ev);
+				drag.value = void 0;
+				const target = findNodeAt(drop, sourceId);
+				if (target) connect(port, sourceId, target.id, getWorkflowPorts(target));
+				else menu.value = {
+					port,
+					x: drop.x,
+					y: drop.y,
+					position: camera.value.toGlobal(drop, {
+						x: 0,
+						y: 0
+					}),
+					sourceId
+				};
+			};
+			document.addEventListener("pointermove", onMove);
+			document.addEventListener("pointerup", onUp);
+		}
+		function chooseNodeType(type) {
+			const m = menu.value;
+			menu.value = void 0;
+			if (!m) return;
+			const node = exec("addWorkflowNode", type);
+			const w = node.style.width;
+			const h = node.style.height;
+			node.style.left = m.port.kind === "output" ? m.position.x : m.position.x - w;
+			node.style.top = m.position.y - h / 2;
+			connect(m.port, m.sourceId, node.id, [INPUT_PORT, OUTPUT_PORT]);
+		}
+		function closeMenu() {
+			menu.value = void 0;
+		}
+		const previewPath = computed(() => {
+			const d = drag.value;
+			if (!d) return "";
+			const { from, to } = d;
+			const dx = Math.max(40, Math.abs(to.x - from.x) * .5);
+			return `M ${from.x} ${from.y} C ${from.x + dx} ${from.y} ${to.x - dx} ${to.y} ${to.x} ${to.y}`;
 		});
-		return {
-			name: "mce:typography",
-			commands: [
-				{
-					command: "addTextElement",
-					handle: addTextElement
-				},
-				{
-					command: "handleTextSelection",
-					handle: handleTextSelection
-				},
-				{
-					command: "textFontSizeToFit",
-					handle: textFontSizeToFit
-				},
-				{
-					command: "textToFit",
-					handle: textToFit
-				},
-				{
-					command: "setTextStyle",
-					handle: setTextStyle
-				},
-				{
-					command: "getTextStyle",
-					handle: getTextStyle
-				},
-				{
-					command: "getTextFill",
-					handle: getTextFill
+		function portStyle(p) {
+			return {
+				left: `${p.x}px`,
+				top: `${p.y}px`
+			};
+		}
+		return (_ctx, _cache) => {
+			return unref(mode) === "workflow" ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+				drag.value ? (openBlock(), createElementBlock("svg", _hoisted_2$1, [createElementVNode("path", { d: previewPath.value }, null, 8, _hoisted_3$1)])) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(ports.value, (port) => {
+					return openBlock(), createElementBlock("div", {
+						key: `${port.kind}:${port.idx}`,
+						class: "m-workflow__port",
+						style: normalizeStyle(portStyle(port)),
+						onPointerdown: ($event) => startConnection(port, $event)
+					}, [createVNode(unref(Icon_default), { icon: "$plus" })], 44, _hoisted_4);
+				}), 128)),
+				menu.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", {
+					class: "m-workflow__backdrop",
+					onPointerdown: closeMenu
+				}, null, 32), createElementVNode("div", {
+					class: "m-workflow__menu",
+					style: normalizeStyle({
+						left: `${menu.value.x}px`,
+						top: `${menu.value.y}px`
+					})
+				}, [_cache[0] || (_cache[0] = createElementVNode("div", { class: "m-workflow__menu-title" }, " 新增节点 ", -1)), (openBlock(), createElementBlock(Fragment, null, renderList(NODE_TYPES, (n) => {
+					return createElementVNode("button", {
+						key: n.type,
+						type: "button",
+						class: "m-workflow__menu-item",
+						onClick: ($event) => chooseNodeType(n.type)
+					}, [createElementVNode("span", null, toDisplayString(n.label), 1), createElementVNode("span", _hoisted_6, toDisplayString(n.kbd), 1)], 8, _hoisted_5);
+				}), 64))], 4)], 64)) : createCommentVNode("", true)
+			])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+//#region src/plugins/workflow.ts
+var DEFAULT_NODES = {
+	text: {
+		label: "文字生成",
+		title: "✍️ 双击此处输入文字..",
+		body: ["可以在此输入提示词，比如画面描述、产品卖点、活动主题、场景描述、品牌 slogan 等内容。若暂时没有明确内容，也可先输入关键词或草稿，后续随时修改优化哦！", "也可以在底部输入框输入需求，让 AI 自动完成文字生成。"]
+	},
+	image: {
+		label: "图片生成",
+		title: "🖼️ 双击此处描述画面..",
+		body: ["输入画面描述、风格、主体等内容，让 AI 自动完成图片生成。"]
+	},
+	video: {
+		label: "视频生成",
+		title: "🎬 双击此处描述视频..",
+		body: ["输入分镜、动作、风格等内容，让 AI 自动完成视频生成。"]
+	}
+};
+var RECT_PATH = "M0 0h24v24H0z";
+//#endregion
+//#region src/plugins/index.ts
+var plugins = [
+	arrange_default,
+	autoNest_default,
+	clipboard_default,
+	doc_default,
+	edit_default,
+	formatPaint_default,
+	frame_default,
+	history_default,
+	hover_default,
+	html_default,
+	image_default,
+	import_default,
+	json_default,
+	layers_default,
+	madeWith_default,
+	memory_default,
+	menu_default,
+	node_default,
+	pen_default,
+	ruler_default,
+	saveAs_default,
+	scroll_default,
+	selection_default,
+	shape_default,
+	slice_default,
+	smartGuides_default,
+	smartSelection_default,
+	state_default,
+	statusbar_default,
+	test_default,
+	timeline_default,
+	tool_default,
+	toolbelt_default,
+	transform_default,
+	typography_default,
+	url_default,
+	view_default,
+	definePlugin((editor, options) => {
+		const { addElement, renderEngine } = editor;
+		function getTemplate(type) {
+			return {
+				...DEFAULT_NODES[type],
+				...options.workflowNodes?.[type]
+			};
+		}
+		function buildContent(t) {
+			return [...t.title ? [{ fragments: [{
+				content: t.title,
+				color: "#1f2937",
+				fontWeight: 700
+			}] }] : [], ...(t.body ?? []).map((line) => ({ fragments: [{
+				content: line,
+				color: "#9ca3af"
+			}] }))];
+		}
+		function createWorkflowNode(type) {
+			const t = getTemplate(type);
+			return {
+				name: t.label ?? type,
+				style: {
+					width: 380,
+					height: 280,
+					borderRadius: 20,
+					padding: 28,
+					fontSize: 16,
+					lineHeight: 1.6
 				},
-				{
-					command: "setTextFill",
-					handle: setTextFill
+				shape: [{ data: RECT_PATH }],
+				fill: "#ffffff",
+				outline: {
+					color: "#ececf0",
+					width: 1
 				},
-				{
-					command: "setTextContentByEachFragment",
-					handle: setTextContentByEachFragment
+				text: { content: buildContent(t) },
+				meta: {
+					inPptIs: "Shape",
+					inCanvasIs: "Element2D"
 				}
-			],
-			hotkeys: [{
-				command: "activateTool:text",
-				key: "T"
-			}],
-			loaders: [{
-				name: "txt",
-				accept: ".txt",
-				test: (source) => {
-					if (source instanceof Blob) {
-						if (source.type.startsWith("text/plain")) return true;
-					}
-					if (source instanceof File) {
-						if (/\.txt$/i.test(source.name)) return true;
-					}
-					return false;
+			};
+		}
+		function addWorkflowNode(type, position) {
+			return addElement(createWorkflowNode(type), {
+				position,
+				active: true
+			});
+		}
+		function materializePorts(id) {
+			const el = renderEngine.value.nodeMap.get(id);
+			if (el && !el.shape?.connectionPoints?.length) el.shape.connectionPoints = toConnectionPoints(getWorkflowPorts(el));
+		}
+		function addWorkflowConnection(startId, startIdx, endId, endIdx) {
+			materializePorts(startId);
+			materializePorts(endId);
+			return addElement({
+				style: { pointerEvents: "none" },
+				outline: {
+					color: "#94a3b8",
+					width: 2,
+					lineCap: "round",
+					lineJoin: "round"
 				},
-				load: async (source) => {
-					return createTextElement(await source.text());
-				}
-			}],
-			tools: [{
-				name: "text",
-				handle: (position) => {
-					addTextElement({ position });
-					activateTool(void 0);
-				}
-			}],
-			components: [{
-				type: "overlay",
-				component: TextEditor_default
-			}],
-			setup: async () => {
-				const { setDefaultFont } = editor;
-				onBeforeMount(() => {
-					TextEditor.register();
-				});
-				const defaultFont = config.value.defaultFont;
-				if (defaultFont) await setDefaultFont(defaultFont);
-			}
-		};
-	}),
-	definePlugin((editor) => {
-		const { load, http } = editor;
-		return {
-			name: "mce:url",
-			loaders: [{
-				name: "url",
-				test: (source) => {
-					return typeof source === "string";
+				connection: {
+					start: {
+						id: startId,
+						idx: startIdx
+					},
+					end: {
+						id: endId,
+						idx: endIdx
+					},
+					mode: "curved"
 				},
-				load: async (url) => {
-					const blob = await http.request({
-						url,
-						responseType: "blob"
-					});
-					const file = new File([blob], url, { type: blob.type });
-					try {
-						return await load(file);
-					} catch (error) {
-						throw new Error(`Failed to load source "${url}", ${error}`);
-					}
-				}
-			}]
-		};
-	}),
-	definePlugin((editor) => {
-		const { config, components } = editor;
-		const getUiConfig = (name) => {
-			return config.value.ui[name];
-		};
-		const setUiVisible = (name, visible) => {
-			const obj = getUiConfig(name);
-			if (obj && "visible" in obj) if (visible === "toggle") obj.visible = !obj.visible;
-			else obj.visible = visible;
-		};
-		const isPanelVisible = (name) => {
-			return Boolean(components.value.find((c) => c.type === "panel" && c.name === name)?.visible.value);
-		};
-		const setPanelVisible = (name, visible) => {
-			const c = components.value.find((c) => c.type === "panel" && c.name === name);
-			if (c) if (visible === "toggle") c.visible.value = !c.visible.value;
-			else c.visible.value = visible;
-		};
+				meta: { inCanvasIs: "Element2D" }
+			});
+		}
 		return {
-			name: "mce:view",
-			commands: [
-				{
-					command: "getUiConfig",
-					handle: getUiConfig
-				},
-				{
-					command: "isUiVisible",
-					handle: (name) => Boolean(getUiConfig(name)?.visible)
-				},
-				{
-					command: "setUiVisible",
-					handle: setUiVisible
-				},
-				{
-					command: "hideUi",
-					handle: (name) => setUiVisible(name, false)
-				},
-				{
-					command: "showUi",
-					handle: (name) => setUiVisible(name, true)
-				},
-				{
-					command: "toggleUi",
-					handle: (name) => setUiVisible(name, "toggle")
-				},
-				{
-					command: "isPanelVisible",
-					handle: isPanelVisible
-				},
-				{
-					command: "setPanelVisible",
-					handle: setPanelVisible
-				},
-				{
-					command: "hidePanel",
-					handle: (name) => setPanelVisible(name, false)
-				},
-				{
-					command: "showPanel",
-					handle: (name) => setPanelVisible(name, true)
-				},
-				{
-					command: "togglePanel",
-					handle: (name) => setPanelVisible(name, "toggle")
-				}
-			],
-			hotkeys: [{
-				command: "toggleUi:pixelGrid",
-				key: "Shift+\""
+			name: "mce:workflow",
+			commands: [{
+				command: "addWorkflowNode",
+				handle: addWorkflowNode
 			}, {
-				command: "toggleUi:ruler",
-				key: "Shift+R"
+				command: "addWorkflowConnection",
+				handle: addWorkflowConnection
+			}],
+			components: [{
+				type: "overlay",
+				component: Workflow_default
 			}]
 		};
 	}),
@@ -17840,11 +18692,7 @@ var _hoisted_3 = {
 var EditorLayout_default = /* @__PURE__ */ defineComponent({
 	__name: "EditorLayout",
 	props: {
-		...makeMceStrategyProps({
-			activeStrategy: defaultActiveStrategy,
-			doubleclickStrategy: defaultDoubleclickStrategy,
-			hoverStrategy: defaultHoverStrategy
-		}),
+		...makeMceStrategyProps(),
 		editor: Editor
 	},
 	setup(__props) {
@@ -17858,6 +18706,9 @@ var EditorLayout_default = /* @__PURE__ */ defineComponent({
 		editor.setup();
 		provide(IconsSymbol, createIcons());
 		const { sortedComponents, componentRefs, isElement, isFrameNode, drawboardDom, renderEngine, camera, hoverElement, state, setCursor, exec, isLock, t, selectionAabbInDrawboard, selectionMarquee, elementSelection, drawboardAabb, screenCenterOffset, activeTool } = editor;
+		const activeStrategy = computed(() => props.activeStrategy ?? editor.activeStrategy);
+		const doubleclickStrategy = computed(() => props.doubleclickStrategy ?? editor.doubleclickStrategy);
+		const hoverStrategy = computed(() => props.hoverStrategy ?? editor.hoverStrategy);
 		const overlayContainer = useTemplateRef("overlayContainerTpl");
 		const canvas = useTemplateRef("canvasTpl");
 		const grabbing = ref(false);
@@ -17910,7 +18761,7 @@ var EditorLayout_default = /* @__PURE__ */ defineComponent({
 			})) cursor = "move";
 			else {
 				const element = event.target;
-				const result = props.hoverStrategy({
+				const result = hoverStrategy.value({
 					element,
 					event,
 					editor
@@ -17953,7 +18804,7 @@ var EditorLayout_default = /* @__PURE__ */ defineComponent({
 			});
 			if (button === 2) {
 				if (!inSelection) {
-					const result = props.activeStrategy({
+					const result = activeStrategy.value({
 						element,
 						event: downEvent,
 						editor
@@ -17974,7 +18825,7 @@ var EditorLayout_default = /* @__PURE__ */ defineComponent({
 			const _dy = Math.abs(currentPos.y - _lastClickPos.y);
 			if (now - _lastClickTime < 300 && _dx < 5 && _dy < 5) {
 				_lastClickTime = 0;
-				props.doubleclickStrategy({
+				doubleclickStrategy.value({
 					event: downEvent,
 					editor
 				});
@@ -17996,7 +18847,7 @@ var EditorLayout_default = /* @__PURE__ */ defineComponent({
 					break;
 			}
 			function onDrag(event) {
-				const result = props.activeStrategy({
+				const result = activeStrategy.value({
 					element,
 					event,
 					editor
@@ -18017,7 +18868,7 @@ var EditorLayout_default = /* @__PURE__ */ defineComponent({
 				selected = elementSelection.value;
 			}
 			function onActivate() {
-				const result = props.activeStrategy({
+				const result = activeStrategy.value({
 					element,
 					event: downEvent,
 					editor
@@ -18329,4 +19180,4 @@ var Dialog_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { Cropper_default as Cropper, Dialog_default as Dialog, Doc, Editor, Layers_default as EditorLayers, EditorLayout_default as EditorLayout, LayoutItem_default as EditorLayoutItem, Toolbelt_default as EditorToolbelt, Menu_default as Menu, Ruler_default as Ruler, Scrollbar_default as Scrollbar, Transform_default as Transform, defineMixin, definePlugin, mixins, plugins, useEditor };
+export { Cropper_default as Cropper, Dialog_default as Dialog, Doc, Editor, Layers_default as EditorLayers, EditorLayout_default as EditorLayout, LayoutItem_default as EditorLayoutItem, Toolbelt_default as EditorToolbelt, Menu_default as Menu, Ruler_default as Ruler, Scrollbar_default as Scrollbar, Transform_default as Transform, createCardElement, createFlowNodeElement, createImageElement, createShapeElement, createStickyElement, createTextElement, defineMixin, definePlugin, mixins, plugins, useEditor };