mce 0.18.4 → 0.19.0

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 = "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,
@@ -162,8 +189,9 @@ function createShapeElement(shape, fill, outline) {
 		}
 	};
 }
-function createTextElement(content, style) {
+function createTextElement(content, style, fonts) {
 	const box = measureText({
+		fonts,
 		style,
 		content
 	}).boundingBox;
@@ -191,6 +219,182 @@ 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 }],
+		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 }],
+			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 }],
+		fill,
+		text: { content: normalizeTextContent(content) },
+		meta: {
+			inPptIs: "Shape",
+			inCanvasIs: "Element2D"
+		}
+	};
+}
+/** A grid table backed by the native `table` element property; first row is a header. */
+function createTableElement(rows = 3, cols = 3, options = {}) {
+	const { width = 360, height = 160 } = options;
+	const cells = [];
+	for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) cells.push({
+		row: r,
+		col: c,
+		children: [{
+			style: {
+				fontSize: 13,
+				color: "#333333",
+				textAlign: "center",
+				verticalAlign: "middle",
+				fontWeight: r === 0 ? 700 : 400
+			},
+			text: { content: normalizeTextContent(r === 0 ? `列 ${c + 1}` : "") },
+			meta: { inCanvasIs: "Element2D" }
+		}]
+	});
+	return {
+		style: {
+			width,
+			height
+		},
+		table: {
+			columns: Array.from({ length: cols }, () => ({ width: width / cols })),
+			rows: Array.from({ length: rows }, () => ({ height: height / rows })),
+			cells
+		},
+		meta: {
+			inPptIs: "Shape",
+			inCanvasIs: "Element2D",
+			inEditorIs: "Table"
+		}
+	};
+}
+/** A chart backed by the native `chart` element property (column/line/pie/…). */
+function createChartElement(type = "column", options = {}) {
+	const { width = 360, height = 240, categories = [
+		"一月",
+		"二月",
+		"三月",
+		"四月",
+		"五月"
+	], series = [{
+		name: "系列 1",
+		values: [
+			40,
+			70,
+			55,
+			90,
+			60
+		]
+	}] } = options;
+	return {
+		style: {
+			width,
+			height
+		},
+		chart: {
+			type,
+			categories,
+			series,
+			legend: "bottom"
+		},
+		meta: {
+			inPptIs: "Shape",
+			inCanvasIs: "Element2D",
+			inEditorIs: "Chart"
+		}
+	};
+}
 //#endregion
 //#region src/utils/dnd.ts
 function addDragListener(downEvent, options = {}) {
@@ -906,7 +1110,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 +1216,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 +1394,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 +1602,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 +1621,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 +1645,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 +1696,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 +1723,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 +2997,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 +3045,7 @@ var Curve = class {
 			if (isFunction) transform(p);
 			else transform.apply(p, p);
 		});
+		this.invalidate();
 		return this;
 	}
 	getUnevenVertices(count = 5, output = []) {
@@ -2836,12 +3172,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 +3196,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 +3361,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 +3489,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 +3619,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 +3831,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 +3881,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 +3935,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 +4195,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 +4206,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 +4320,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 +4467,8 @@ var CurvePath = class extends CompositeCurve {
 };
 var Path2D = class Path2D extends CompositeCurve {
 	_meta;
+	_ringsCache;
+	_ringsCacheLen = -1;
 	currentCurve = new CurvePath();
 	style;
 	get startPoint() {
@@ -4077,6 +4580,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 +4590,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 +4600,7 @@ var Path2D = class Path2D extends CompositeCurve {
 		this.getControlPointRefs().forEach((point) => {
 			point.rotate(rad, target);
 		});
+		this.invalidate();
 		return this;
 	}
 	bold(b) {
@@ -4140,47 +4646,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()
@@ -4680,7 +5206,7 @@ var YDoc = class extends Observable {
 			this.transact(() => {
 				const childId = child.id;
 				this._debug(`[removeChild][${childId}]`, child.name, oldIndex);
-				const index = childrenIds.toJSON().indexOf(childId);
+				const index = childrenIds.toArray().indexOf(childId);
 				if (index > -1) childrenIds.delete(index, 1);
 			});
 		});
@@ -4936,6 +5462,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 +5557,7 @@ var _0_context_default = defineMixin((editor, options) => {
 		drawboardPointer,
 		drawboardContextMenuPointer,
 		state,
+		mode,
 		setCursor,
 		getGlobalPointer,
 		parseAnchor,
@@ -5072,8 +5600,16 @@ var _0_context_default = defineMixin((editor, options) => {
 			const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
 			drawboardAabb.value = new Aabb2D(left, top, width, height);
 		});
+		let pointerRafId = null;
+		let lastPointerEvent;
 		function onMouseMove(event) {
-			drawboardPointer.value = new Vector2(event.clientX - drawboardAabb.value.left, event.clientY - drawboardAabb.value.top);
+			lastPointerEvent = event;
+			if (pointerRafId !== null) return;
+			pointerRafId = requestAnimationFrame(() => {
+				pointerRafId = null;
+				const e = lastPointerEvent;
+				drawboardPointer.value = new Vector2(e.clientX - drawboardAabb.value.left, e.clientY - drawboardAabb.value.top);
+			});
 		}
 		onBeforeMount(() => {
 			on("docSet", onSetDoc);
@@ -5084,6 +5620,7 @@ var _0_context_default = defineMixin((editor, options) => {
 			off("docSet", onSetDoc);
 			renderEngine.value.stop();
 			document.removeEventListener("mousemove", onMouseMove);
+			if (pointerRafId !== null) cancelAnimationFrame(pointerRafId);
 		});
 	};
 });
@@ -5153,6 +5690,10 @@ var en_default = {
 	"ellipse": "Ellipse",
 	"polygon": "Polygon",
 	"star": "Star",
+	"table": "Table",
+	"chartBar": "Bar Chart",
+	"chartLine": "Line Chart",
+	"chartPie": "Pie Chart",
 	"image": "Image",
 	"video": "Video",
 	"lottie": "Lottie",
@@ -5166,11 +5707,6 @@ var en_default = {
 	"saveAs:png": "Save as PNG",
 	"saveAs:jpeg": "Save as JPEG",
 	"saveAs:webp": "Save as WEBP",
-	"saveAs:svg": "Save as SVG",
-	"saveAs:gif": "Save as GIF",
-	"saveAs:mp4": "Save as MP4",
-	"saveAs:pdf": "Save as PDF",
-	"saveAs:pptx": "Save as PPTX",
 	"saveAs:json": "Save as JSON",
 	"addSubNode": "Add sub node",
 	"edit": "Edit",
@@ -5193,6 +5729,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",
@@ -5282,6 +5821,10 @@ var zh_Hans_default = {
 	"ellipse": "椭圆",
 	"polygon": "多边形",
 	"star": "星形",
+	"table": "表格",
+	"chartBar": "柱状图",
+	"chartLine": "折线图",
+	"chartPie": "饼图",
 	"image": "图片",
 	"video": "视频",
 	"lottie": "Lottie",
@@ -5295,11 +5838,6 @@ var zh_Hans_default = {
 	"saveAs:png": "另存为 PNG",
 	"saveAs:jpeg": "另存为 JPEG",
 	"saveAs:webp": "另存为 WEBP",
-	"saveAs:svg": "另存为 SVG",
-	"saveAs:gif": "另存为 GIF",
-	"saveAs:mp4": "另存为 MP4",
-	"saveAs:pdf": "另存为 PDF",
-	"saveAs:pptx": "另存为 PPTX",
 	"saveAs:json": "另存为 JSON",
 	"addSubNode": "添加子节点",
 	"edit": "编辑",
@@ -5322,6 +5860,9 @@ var zh_Hans_default = {
 	"selectPreviousSibling": "选择前一个",
 	"selectNextSibling": "选择后一个",
 	"view": "视图",
+	"mode": "模式",
+	"mode:canvas": "画布模式",
+	"mode:workflow": "工作流模式",
 	"checkerboard": "棋盘",
 	"pixelGrid": "像素网格",
 	"ruler": "标尺",
@@ -5382,6 +5923,10 @@ var zh_Hans_default = {
 //#region src/mixins/0.locale.ts
 var _0_locale_default = defineMixin((editor, options) => {
 	const { locale } = options;
+	const pluginMessages = ref({});
+	function registerMessages(value) {
+		pluginMessages.value = merge({}, pluginMessages.value, value);
+	}
 	const messages = computed(() => {
 		const { locale: _locale, fallback: _fallback, messages = {} } = merge({
 			locale: "en",
@@ -5393,8 +5938,8 @@ var _0_locale_default = defineMixin((editor, options) => {
 		}, locale);
 		return {
 			locale: _locale,
-			localeMessages: messages[_locale],
-			fallbackMessages: messages[_fallback]
+			localeMessages: merge({}, messages[_locale], pluginMessages.value[_locale]),
+			fallbackMessages: merge({}, messages[_fallback], pluginMessages.value[_fallback])
 		};
 	});
 	function t(key, fallback) {
@@ -5403,7 +5948,10 @@ var _0_locale_default = defineMixin((editor, options) => {
 		if (value === void 0) console.warn(`[mce] Not found '${key}' key in '${locale}' locale messages.`);
 		return value ?? key ?? fallback ?? "";
 	}
-	Object.assign(editor, { t });
+	Object.assign(editor, {
+		t,
+		registerMessages
+	});
 });
 //#endregion
 //#region src/mixins/1.frame.ts
@@ -5525,10 +6073,17 @@ var _1_timeline_default = defineMixin((editor) => {
 //#endregion
 //#region src/mixins/1.upload.ts
 var _1_upload_default = defineMixin((editor, options) => {
+	const objectUrls = /* @__PURE__ */ new Set();
 	const upload = async (file) => {
 		if (options.customUpload) return await options.customUpload(file);
-		return URL.createObjectURL(file);
+		const url = URL.createObjectURL(file);
+		objectUrls.add(url);
+		return url;
 	};
+	editor.on("docSet", () => {
+		objectUrls.forEach((url) => URL.revokeObjectURL(url));
+		objectUrls.clear();
+	});
 	Object.assign(editor, { upload });
 });
 //#endregion
@@ -5639,11 +6194,13 @@ var _2_box_default = defineMixin((editor) => {
 			};
 			node.forEach((child) => {
 				if (isElement(child)) {
-					const aabb = getAabb(child);
-					min.x = Math.min(min.x, aabb.left);
-					min.y = Math.min(min.y, aabb.top);
-					max.x = Math.max(max.x, aabb.left + aabb.width);
-					max.y = Math.max(max.y, aabb.top + aabb.height);
+					const style = child.style;
+					style.left, style.top, style.width, style.height, style.rotate;
+					const box = child.globalAabb;
+					min.x = Math.min(min.x, box.left);
+					min.y = Math.min(min.y, box.top);
+					max.x = Math.max(max.x, box.left + box.width);
+					max.y = Math.max(max.y, box.top + box.height);
 				}
 			});
 			aabb = new Aabb2D(min.x, min.y, max.x - min.x, max.y - min.y);
@@ -6194,9 +6751,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,186 +6815,241 @@ function createHttp() {
 	}
 	return { request };
 }
+var http_default = defineMixin((editor, options) => {
+	Object.assign(editor, { http: options.http ?? createHttp() });
+});
 //#endregion
-//#region src/mixins/index.ts
-var mixins = [
-	_0_command_default,
-	_0_config_default,
-	base_default,
-	_0_context_default,
-	_0_font_default,
-	_0_locale_default,
-	_1_frame_default,
-	_1_screen_default,
-	_1_timeline_default,
-	_1_upload_default,
-	_2_box_default,
-	_4_0_node_default,
-	_4_2_frame_default,
-	_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;
+//#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;
 			}
-			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();
+		} 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
 			});
-		};
-		Object.assign(editor, {
-			loaders,
-			registerLoader,
-			unregisterLoader,
-			canLoad,
-			load,
-			openFileDialog
+			onChange((files) => resolve(files ? Array.from(files) : []));
+			open();
 		});
-	}),
-	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;
-					}
+	};
+	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
-		});
-	}),
-	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
-			}));
+			if (minDist < snapThreshold.value) position = closest ?? position;
+			if (axis === "x") box.left = position - offset;
+			else box.top = position - offset;
 		}
-		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, {
+		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
-		});
+	}
+	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 = [
+	_0_command_default,
+	_0_config_default,
+	base_default,
+	_0_context_default,
+	_0_font_default,
+	_0_locale_default,
+	_1_frame_default,
+	_1_screen_default,
+	_1_timeline_default,
+	_1_upload_default,
+	_2_box_default,
+	_4_0_node_default,
+	_4_2_frame_default,
+	_4_3_element_default,
+	exporter_default,
+	hotkey_default,
+	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;
@@ -6713,6 +7325,7 @@ var autoNest_default = definePlugin((editor) => {
 	const { getGlobalPointer, frames, isFrameNode, exec, root, elementSelection } = editor;
 	let context;
 	function nestIntoFrame(el, options) {
+		if (el.meta?.inEditorIs?.startsWith("Workflow")) return;
 		const pointer = options?.pointer;
 		const frame1 = el.findAncestor((node) => isFrameNode(node, true));
 		const aabb1 = el.globalAabb;
@@ -6936,7 +7549,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 +7557,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 +7991,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",
@@ -7387,7 +8014,11 @@ var aliases = {
 	arrow: "M5 17.59L15.59 7H9V5h10v10h-2V8.41L6.41 19z",
 	ellipse: "M12 20a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2",
 	polygon: "M12 2L1 21h22M12 6l7.53 13H4.47",
-	star: "m12 15.39l-3.76 2.27l.99-4.28l-3.32-2.88l4.38-.37L12 6.09l1.71 4.04l4.38.37l-3.32 2.88l.99 4.28M22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.45 4.73L5.82 21L12 17.27L18.18 21l-1.64-7.03z"
+	star: "m12 15.39l-3.76 2.27l.99-4.28l-3.32-2.88l4.38-.37L12 6.09l1.71 4.04l4.38.37l-3.32 2.88l.99 4.28M22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.45 4.73L5.82 21L12 17.27L18.18 21l-1.64-7.03z",
+	table: "M4,3H20A2,2 0 0,1 22,5V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V5A2,2 0 0,1 4,3M4,7V11H8V7H4M10,7V11H14V7H10M16,7V11H20V7H16M4,13V17H8V13H4M10,13V17H14V13H10M16,13V17H20V13H16Z",
+	chartBar: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z",
+	chartLine: "M3.5,18.49L9.5,12.48L13.5,16.48L22,6.92L20.59,5.51L13.5,13.47L9.5,9.47L2,16.99L3.5,18.49Z",
+	chartPie: "M11,2V22C5.9,21.5 2,17.2 2,12C2,6.8 5.9,2.5 11,2M13,2V11H22C21.5,6.2 17.8,2.5 13,2M13,13V22C17.7,21.5 21.5,17.8 22,13H13Z"
 };
 var svg = { component: SvgIcon };
 //#endregion
@@ -7882,43 +8513,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 +8570,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 +8579,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 +8725,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 +8744,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 +9013,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"
 };
@@ -8463,6 +9057,13 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 		const selected = computed(() => selection.value.some((v) => v.equal(props.node)));
 		const children = computed(() => props.node.children);
 		const childrenLength = computed(() => children.value.length);
+		const openedShownCount = computed(() => {
+			let n = 0;
+			openedItems.forEach((v) => {
+				if (v.value) n++;
+			});
+			return n;
+		});
 		const inputDom = ref();
 		const isHoverElement = computed(() => props.node?.equal(hoverElement.value));
 		const hovering = ref(false);
@@ -8566,8 +9167,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 +9179,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
@@ -8599,7 +9200,7 @@ var Layer_default = /* @__PURE__ */ defineComponent({
 					createElementVNode("div", { class: normalizeClass(["m-layer__action", {
 						"m-layer__action--hover": hovering.value,
 						"m-layer__action--show": hovering.value || unref(isLock)(props.node) || !unref(isVisible)(props.node)
-					}]) }, [props.root ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [Array.from(unref(openedItems).values()).filter((v) => v.value).length > 1 ? (openBlock(), createBlock(Btn_default, {
+					}]) }, [props.root ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [openedShownCount.value > 1 ? (openBlock(), createBlock(Btn_default, {
 						key: 0,
 						icon: "",
 						class: "m-layer__btn m-layer__btn--show",
@@ -8625,7 +9226,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 +9243,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 +9278,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 +9313,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 +9341,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 +9374,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 +9498,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 +9625,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 +9784,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 +9814,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 +10134,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 +10160,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 +10233,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 +10413,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 +10461,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 +10484,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"
 } };
@@ -10046,15 +10661,15 @@ var Ruler_default = /* @__PURE__ */ defineComponent({
 			canvas,
 			() => props.zoom,
 			() => props.position,
-			() => props.selected,
+			() => props.selected?.left,
+			() => props.selected?.top,
+			() => props.selected?.width,
+			() => props.selected?.height,
 			() => borderColor.value,
 			() => textColor.value
 		], () => {
 			render();
-		}, {
-			immediate: true,
-			deep: true
-		});
+		}, { immediate: true });
 		const resize = useDebounceFn(() => {
 			if (!canvas.value) return;
 			const _box = canvas.value.parentElement.getBoundingClientRect();
@@ -10146,7 +10761,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 +10782,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 +10790,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 +10803,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 +10818,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 +10932,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 +11015,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 +11031,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 +11044,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 +11179,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 +11203,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 +11816,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 +11827,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 +11844,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 +11877,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 +12076,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 +12150,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 +12855,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 +12869,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 +12879,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 +12891,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 +12899,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({
@@ -12323,19 +12938,29 @@ var Selection_default = /* @__PURE__ */ defineComponent({
 		});
 		const parentObbStyles = computed(() => {
 			if (selection.value.length !== 1) return [];
-			const obbs = [];
+			const result = [];
 			selection.value[0]?.findAncestor((ancestor) => {
-				if (isElement(ancestor)) obbs.push(getObb(ancestor, "drawboard"));
+				if (isElement(ancestor)) {
+					const el = ancestor;
+					result.push({
+						id: el.instanceId,
+						style: getObb(el, "drawboard").toCssStyle()
+					});
+				}
 				return false;
 			});
-			return obbs.map((obb) => obb.toCssStyle());
+			return result;
 		});
 		const selectionObbStyles = computed(() => {
 			if (state.value !== "selecting" && elementSelection.value.length === 1) return [];
 			return elementSelection.value.map((el) => {
+				const box = getObb(el, "drawboard");
 				return {
-					...getObb(el, "drawboard").toCssStyle(),
-					borderRadius: `${(el.style.borderRadius ?? 0) * camera.value.zoom.x}px`
+					id: el.instanceId,
+					style: {
+						...box.toCssStyle(),
+						borderRadius: `${(el.style.borderRadius ?? 0) * camera.value.zoom.x}px`
+					}
 				};
 			});
 		});
@@ -12351,47 +12976,58 @@ 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();
 			}
 			return false;
 		});
 		function tip() {
-			const obb = elementSelection.value.length === 1 ? elementSelection.value[0].size : selectionObb.value;
+			if (elementSelection.value.length === 1) {
+				const el = elementSelection.value[0];
+				const sw = el.style.width;
+				const sh = el.style.height;
+				const w = typeof sw === "number" ? sw : el.size.width;
+				const h = typeof sh === "number" ? sh : el.size.height;
+				return `${Number(w.toFixed(2))} × ${Number(h.toFixed(2))}`;
+			}
+			const obb = selectionObb.value;
 			return `${Number(obb.width.toFixed(2))} × ${Number(obb.height.toFixed(2))}`;
 		}
 		__expose({ transform });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$14, [
-				(openBlock(true), createElementBlock(Fragment, null, renderList(parentObbStyles.value, (style, index) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$15, [
+				(openBlock(true), createElementBlock(Fragment, null, renderList(parentObbStyles.value, (item) => {
 					return openBlock(), createElementBlock("div", {
-						key: index,
+						key: item.id,
 						class: "m-selection__parent",
-						style: normalizeStyle(style)
+						style: normalizeStyle(item.style)
 					}, null, 4);
 				}), 128)),
-				unref(state) !== "moving" && unref(state) !== "transforming" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectionObbStyles.value, (style, index) => {
+				unref(state) !== "moving" && unref(state) !== "transforming" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectionObbStyles.value, (item) => {
 					return openBlock(), createElementBlock("div", {
-						key: index,
+						key: item.id,
 						class: "m-selection__node",
-						style: normalizeStyle(style)
+						style: normalizeStyle(item.style)
 					}, null, 4);
 				}), 128)) : createCommentVNode("", true),
 				unref(state) === "selecting" || unref(state) === "painting" ? (openBlock(), createElementBlock("div", {
@@ -12501,11 +13137,20 @@ var selection_default = definePlugin((editor) => {
 	}
 	function marqueeSelect(marquee = selectionMarquee.value) {
 		const area = new Obb2D(marquee);
+		const obbCache = /* @__PURE__ */ new Map();
+		const obbOf = (node) => {
+			let obb = obbCache.get(node);
+			if (!obb) {
+				obb = getObb(node, "drawboard");
+				obbCache.set(node, obb);
+			}
+			return obb;
+		};
 		selection.value = root.value?.children.flatMap((node) => {
-			if (isFrameNode(node, true) && !area.contains(getObb(node, "drawboard"))) return node.children;
+			if (isFrameNode(node, true) && !area.contains(obbOf(node))) return node.children;
 			return [node];
 		}).filter((node) => {
-			return "isVisibleInTree" in node && node.isVisibleInTree() && getObb(node, "drawboard").overlap(area) && !isLock(node) && !node.findAncestor((ancestor) => isLock(ancestor));
+			return "isVisibleInTree" in node && node.isVisibleInTree() && obbOf(node).overlap(area) && !isLock(node) && !node.findAncestor((ancestor) => isLock(ancestor));
 		}) ?? [];
 	}
 	function groupSelection(inEditorIs) {
@@ -12831,6 +13476,46 @@ var shape_default = definePlugin((editor) => {
 			{
 				name: "star",
 				handle: createHandle([{ data: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z" }])
+			},
+			{
+				name: "table",
+				handle: (start) => {
+					addElement(createTableElement(), {
+						position: start,
+						active: true
+					});
+					return { end: () => activateTool(void 0) };
+				}
+			},
+			{
+				name: "chartBar",
+				handle: (start) => {
+					addElement(createChartElement("column"), {
+						position: start,
+						active: true
+					});
+					return { end: () => activateTool(void 0) };
+				}
+			},
+			{
+				name: "chartLine",
+				handle: (start) => {
+					addElement(createChartElement("line"), {
+						position: start,
+						active: true
+					});
+					return { end: () => activateTool(void 0) };
+				}
+			},
+			{
+				name: "chartPie",
+				handle: (start) => {
+					addElement(createChartElement("pie"), {
+						position: start,
+						active: true
+					});
+					return { end: () => activateTool(void 0) };
+				}
 			}
 		],
 		hotkeys: [
@@ -12940,7 +13625,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 +13637,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 +14602,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 +14861,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 +15270,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 +15352,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 +15377,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 +15416,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 +15496,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 +15683,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 +15800,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 +15817,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 +15829,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 +15938,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 +16196,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 +16214,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 +16237,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({
@@ -15570,7 +16255,11 @@ var Toolbelt_default = /* @__PURE__ */ defineComponent({
 				"arrow",
 				"ellipse",
 				"polygon",
-				"star"
+				"star",
+				"table",
+				"chartBar",
+				"chartLine",
+				"chartPie"
 			].map((key, index) => {
 				return {
 					key,
@@ -15642,7 +16331,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 +16349,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 +16767,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 +16805,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);
@@ -16149,7 +16841,6 @@ function isEqualStyle(style1, style2) {
 	const keys = Array.from(new Set([...keys1, ...keys2]));
 	return !keys.length || keys.every((key) => style1[key] === style2[key]);
 }
-var emojiRE = /[#*0-9]\uFE0F?\u20E3|[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23ED-\u23EF\u23F1\u23F2\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB\u25FC\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u265F\u2660\u2663\u2665\u2666\u2668\u267B\u267E\u267F\u2692\u2694-\u2697\u2699\u269B\u269C\u26A0\u26A7\u26AA\u26B0\u26B1\u26BD\u26BE\u26C4\u26C8\u26CF\u26D1\u26E9\u26F0-\u26F5\u26F7\u26F8\u26FA\u2702\u2708\u2709\u270F\u2712\u2714\u2716\u271D\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u27A1\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B55\u3030\u303D\u3297\u3299]\uFE0F?|[\u261D\u270C\u270D](?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?|[\u270A\u270B](?:\uD83C[\uDFFB-\uDFFF])?|[\u23E9-\u23EC\u23F0\u23F3\u25FD\u2693\u26A1\u26AB\u26C5\u26CE\u26D4\u26EA\u26FD\u2705\u2728\u274C\u274E\u2753-\u2755\u2795-\u2797\u27B0\u27BF\u2B50]|\u26D3\uFE0F?(?:\u200D\uD83D\uDCA5)?|\u26F9(?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?(?:\u200D[\u2640\u2642]\uFE0F?)?|\u2764\uFE0F?(?:\u200D(?:\uD83D\uDD25|\uD83E\uDE79))?|\uD83C(?:[\uDC04\uDD70\uDD71\uDD7E\uDD7F\uDE02\uDE37\uDF21\uDF24-\uDF2C\uDF36\uDF7D\uDF96\uDF97\uDF99-\uDF9B\uDF9E\uDF9F\uDFCD\uDFCE\uDFD4-\uDFDF\uDFF5\uDFF7]\uFE0F?|[\uDF85\uDFC2\uDFC7](?:\uD83C[\uDFFB-\uDFFF])?|[\uDFC4\uDFCA](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDFCB\uDFCC](?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDCCF\uDD8E\uDD91-\uDD9A\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF43\uDF45-\uDF4A\uDF4C-\uDF7C\uDF7E-\uDF84\uDF86-\uDF93\uDFA0-\uDFC1\uDFC5\uDFC6\uDFC8\uDFC9\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF8-\uDFFF]|\uDDE6\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF]|\uDDE7\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF]|\uDDE8\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF7\uDDFA-\uDDFF]|\uDDE9\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF]|\uDDEA\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA]|\uDDEB\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7]|\uDDEC\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE]|\uDDED\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA]|\uDDEE\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9]|\uDDEF\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5]|\uDDF0\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF]|\uDDF1\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE]|\uDDF2\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF]|\uDDF3\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF]|\uDDF4\uD83C\uDDF2|\uDDF5\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE]|\uDDF6\uD83C\uDDE6|\uDDF7\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC]|\uDDF8\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF]|\uDDF9\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF]|\uDDFA\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF]|\uDDFB\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA]|\uDDFC\uD83C[\uDDEB\uDDF8]|\uDDFD\uD83C\uDDF0|\uDDFE\uD83C[\uDDEA\uDDF9]|\uDDFF\uD83C[\uDDE6\uDDF2\uDDFC]|\uDF44(?:\u200D\uD83D\uDFEB)?|\uDF4B(?:\u200D\uD83D\uDFE9)?|\uDFC3(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDFF3\uFE0F?(?:\u200D(?:\u26A7\uFE0F?|\uD83C\uDF08))?|\uDFF4(?:\u200D\u2620\uFE0F?|\uDB40\uDC67\uDB40\uDC62\uDB40(?:\uDC65\uDB40\uDC6E\uDB40\uDC67|\uDC73\uDB40\uDC63\uDB40\uDC74|\uDC77\uDB40\uDC6C\uDB40\uDC73)\uDB40\uDC7F)?)|\uD83D(?:[\uDC3F\uDCFD\uDD49\uDD4A\uDD6F\uDD70\uDD73\uDD76-\uDD79\uDD87\uDD8A-\uDD8D\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA\uDECB\uDECD-\uDECF\uDEE0-\uDEE5\uDEE9\uDEF0\uDEF3]\uFE0F?|[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC6B-\uDC6D\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDC8F\uDC91\uDCAA\uDD7A\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC](?:\uD83C[\uDFFB-\uDFFF])?|[\uDC6E\uDC70\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4\uDEB5](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD74\uDD90](?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?|[\uDC00-\uDC07\uDC09-\uDC14\uDC16-\uDC25\uDC27-\uDC3A\uDC3C-\uDC3E\uDC40\uDC44\uDC45\uDC51-\uDC65\uDC6A\uDC79-\uDC7B\uDC7D-\uDC80\uDC84\uDC88-\uDC8E\uDC90\uDC92-\uDCA9\uDCAB-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDDA4\uDDFB-\uDE2D\uDE2F-\uDE34\uDE37-\uDE41\uDE43\uDE44\uDE48-\uDE4A\uDE80-\uDEA2\uDEA4-\uDEB3\uDEB7-\uDEBF\uDEC1-\uDEC5\uDED0-\uDED2\uDED5-\uDED7\uDEDC-\uDEDF\uDEEB\uDEEC\uDEF4-\uDEFC\uDFE0-\uDFEB\uDFF0]|\uDC08(?:\u200D\u2B1B)?|\uDC15(?:\u200D\uD83E\uDDBA)?|\uDC26(?:\u200D(?:\u2B1B|\uD83D\uDD25))?|\uDC3B(?:\u200D\u2744\uFE0F?)?|\uDC41\uFE0F?(?:\u200D\uD83D\uDDE8\uFE0F?)?|\uDC68(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFE])))?))?|\uDC69(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?[\uDC68\uDC69]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?|\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFE])))?))?|\uDC6F(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDD75(?:\uD83C[\uDFFB-\uDFFF]|\uFE0F)?(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDE2E(?:\u200D\uD83D\uDCA8)?|\uDE35(?:\u200D\uD83D\uDCAB)?|\uDE36(?:\u200D\uD83C\uDF2B\uFE0F?)?|\uDE42(?:\u200D[\u2194\u2195]\uFE0F?)?|\uDEB6(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?)|\uD83E(?:[\uDD0C\uDD0F\uDD18-\uDD1F\uDD30-\uDD34\uDD36\uDD77\uDDB5\uDDB6\uDDBB\uDDD2\uDDD3\uDDD5\uDEC3-\uDEC5\uDEF0\uDEF2-\uDEF8](?:\uD83C[\uDFFB-\uDFFF])?|[\uDD26\uDD35\uDD37-\uDD39\uDD3D\uDD3E\uDDB8\uDDB9\uDDCD\uDDCF\uDDD4\uDDD6-\uDDDD](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDDDE\uDDDF](?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD0D\uDD0E\uDD10-\uDD17\uDD20-\uDD25\uDD27-\uDD2F\uDD3A\uDD3F-\uDD45\uDD47-\uDD76\uDD78-\uDDB4\uDDB7\uDDBA\uDDBC-\uDDCC\uDDD0\uDDE0-\uDDFF\uDE70-\uDE7C\uDE80-\uDE89\uDE8F-\uDEC2\uDEC6\uDECE-\uDEDC\uDEDF-\uDEE9]|\uDD3C(?:\u200D[\u2640\u2642]\uFE0F?|\uD83C[\uDFFB-\uDFFF])?|\uDDCE(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDDD1(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1|\uDDD1\u200D\uD83E\uDDD2(?:\u200D\uD83E\uDDD2)?|\uDDD2(?:\u200D\uD83E\uDDD2)?))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFC-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFD-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFD\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFE]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?))?|\uDEF1(?:\uD83C(?:\uDFFB(?:\u200D\uD83E\uDEF2\uD83C[\uDFFC-\uDFFF])?|\uDFFC(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFD-\uDFFF])?|\uDFFD(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])?|\uDFFE(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFD\uDFFF])?|\uDFFF(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFE])?))?)/g;
 function parseHTML(html) {
 	const template = document.createElement("template");
 	template.innerHTML = html;
@@ -16416,10 +17107,6 @@ var TextEditor = class extends HTMLElement {
 	}
 	_getNewContent(content, newString = textContentToString(content), oldString = newString) {
 		newString = normalizeCRLF(newString);
-		newString = newString.replace(emojiRE, (emoji) => {
-			if (Array.from(emoji).length > 1) return "?";
-			return emoji;
-		});
 		oldString = normalizeCRLF(oldString);
 		const oldStyles = textContentToCharStyles(content);
 		const styles = [];
@@ -16428,8 +17115,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]);
@@ -16486,7 +17175,7 @@ var TextEditor = class extends HTMLElement {
 	}
 	_onInput() {
 		const newText = this._textarea.value;
-		this.text.content = this._getNewContent(this.text.content, newText, this._oldText);
+		this.text.content = this._getNewContent(this.text.content, newText, textContentToString(this.text.content));
 		this._oldText = newText;
 		this.text.update();
 		this._emit("update");
@@ -16778,504 +17467,847 @@ __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
+		}, fonts), {
+			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(), void 0, fonts);
+			}
+		}],
+		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}`);
+				}
+			}
+		}]
+	};
+});
+//#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) {
+	const custom = el.shape?.connectionPoints;
+	if (custom?.length) return custom.map((p) => ({
+		...p,
+		kind: p.x < .5 ? "input" : "output"
+	}));
+	if (el.meta?.inEditorIs?.startsWith("Workflow")) return [INPUT_PORT, OUTPUT_PORT];
+	return [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"
 			}
-			fill = fill ?? el.text.fill ?? { color: el.style.color };
-			return fill;
+		];
+		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
+			if (!el || !isConnectable(el) || el.getParent?.()?.id !== root.value?.id) return void 0;
+			return el;
+		});
+		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);
+				const target = findNodeAt(drop, sourceId);
+				if (target) {
+					drag.value = void 0;
+					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;
+			drag.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;
+			drag.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
-				},
-				{
-					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 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);
 		};
-	}),
-	definePlugin((editor) => {
-		const { load, http } = editor;
-		return {
-			name: "mce:url",
-			loaders: [{
-				name: "url",
-				test: (source) => {
-					return typeof source === "string";
+	}
+});
+//#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 自动完成视频生成。"]
+	}
+};
+//#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,
+					backgroundColor: "#ffffff",
+					borderColor: "#ececf0",
+					borderWidth: 1
 				},
-				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}`);
-					}
+				text: { content: buildContent(t) },
+				meta: {
+					inPptIs: "Shape",
+					inCanvasIs: "Element2D",
+					inEditorIs: `Workflow${type.charAt(0).toUpperCase()}${type.slice(1)}`
 				}
-			}]
-		};
-	}),
-	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)
+			};
+		}
+		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"
 				},
-				{
-					command: "showPanel",
-					handle: (name) => setPanelVisible(name, true)
+				connection: {
+					start: {
+						id: startId,
+						idx: startIdx
+					},
+					end: {
+						id: endId,
+						idx: endIdx
+					},
+					mode: "curved"
 				},
-				{
-					command: "togglePanel",
-					handle: (name) => setPanelVisible(name, "toggle")
-				}
-			],
-			hotkeys: [{
-				command: "toggleUi:pixelGrid",
-				key: "Shift+\""
+				meta: { inCanvasIs: "Element2D" }
+			});
+		}
+		return {
+			name: "mce:workflow",
+			commands: [{
+				command: "addWorkflowNode",
+				handle: addWorkflowNode
 			}, {
-				command: "toggleUi:ruler",
-				key: "Shift+R"
+				command: "addWorkflowConnection",
+				handle: addWorkflowConnection
+			}],
+			components: [{
+				type: "overlay",
+				component: Workflow_default
 			}]
 		};
 	}),
@@ -17538,13 +18570,14 @@ var Editor = class Editor extends Observable {
 			let result;
 			if (typeof plugin === "function") result = plugin(this, options);
 			else result = plugin;
-			const { name, events, commands = [], hotkeys = [], loaders = [], exporters = [], tools = [], components = [], setup } = result;
+			const { name, events, commands = [], hotkeys = [], loaders = [], exporters = [], tools = [], components = [], messages, setup } = result;
 			this.registerCommand(commands);
 			this.registerHotkey(hotkeys);
 			this.registerLoader(loaders);
 			this.registerExporter(exporters);
 			this.registerTool(tools);
 			this.registerComponent(name, components);
+			if (messages) this.registerMessages(messages);
 			if (setup) this.setups.push(setup);
 			if (events) for (const k in events) this.on(k, events[k]);
 		}
@@ -17840,11 +18873,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 +18887,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);
@@ -17871,13 +18903,15 @@ var EditorLayout_default = /* @__PURE__ */ defineComponent({
 			renderEngine.value.on("pointermove", onEnginePointerMove);
 			renderEngine.value.on("pointerover", onEnginePointerOver);
 		});
+		let unbindRenderCanvas;
 		onMounted(() => {
-			bindRenderCanvas(canvas.value, drawboardDom.value);
+			unbindRenderCanvas = bindRenderCanvas(canvas.value, drawboardDom.value);
 		});
 		onBeforeUnmount(() => {
 			renderEngine.value.off("pointerdown", onEnginePointerDown);
 			renderEngine.value.off("pointermove", onEnginePointerMove);
 			renderEngine.value.off("pointerover", onEnginePointerOver);
+			unbindRenderCanvas?.();
 		});
 		function bindRenderCanvas(canvas, eventTarget) {
 			function onRendered() {
@@ -17910,7 +18944,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 +18987,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 +19008,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 +19030,7 @@ var EditorLayout_default = /* @__PURE__ */ defineComponent({
 					break;
 			}
 			function onDrag(event) {
-				const result = props.activeStrategy({
+				const result = activeStrategy.value({
 					element,
 					event,
 					editor
@@ -18017,7 +19051,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 +19363,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, createChartElement, createFlowNodeElement, createImageElement, createShapeElement, createStickyElement, createTableElement, createTextElement, defineMixin, definePlugin, mixins, plugins, useEditor };