@incodetech/web 2.0.1 → 2.1.0-rc.1

package/dist/signature/signature.es.js

@@ -1,546 +1,919 @@
-import { n as e } from "../i18n-9s4OSqwi.js";
-import { _ as t, a as n, h as r, l as i, p as a, u as o, v as s } from "../vendor-preact-D6SntenC.js";
-import { o as c } from "../hooks-BVnGysT7.js";
-import { t as l } from "../incodeComponent-C1o4M0ZK.js";
-import { r as u } from "../loadingIcon-BN5YRQUb.js";
-import { t as d } from "../page-C1yT4DLb.js";
-import "../extensibility-CzEJfRwo.js";
-import { t as f } from "../button-DcCUEn2n.js";
-import { t as p } from "../verificationResult-BrVbUJ4U.js";
-import { t as m } from "../incodeModule-BqCjVgEI.js";
-import { t as h } from "../defineProperty-Dh8nSJpJ.js";
-import { createSignatureManager as g } from "@incodetech/core/signature";
+import { n as useTranslation } from "../i18n-CoCO2ZuN.js";
+import { _ as y, a as D, h as q, l as A, p as d, u as F, v as u } from "../vendor-preact-DThS2ZQ_.js";
+import { c as useManager, o as useModuleTerminalCallbacks } from "../hooks-Da_yP_Dr.js";
+import { t as IncodeComponent } from "../incodeComponent-wfnHlnXx.js";
+import { r as Spacer } from "../loadingIcon-B0ysgiNq.js";
+import { t as Page } from "../page-DxGQj7Gk.js";
+import "../extensibility-Cs3KQQdC.js";
+import { t as Button } from "../button-CM_hgyIP.js";
+import { t as VerificationResult } from "../verificationResult-Do5SpZ6X.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BUDoTwT9.js";
+import { t as _defineProperty } from "../defineProperty-mefzVtTv.js";
+import { createSignatureManager } from "@incodetech/core/signature";
 //#region ../../node_modules/.pnpm/signature_pad@5.1.3/node_modules/signature_pad/dist/signature_pad.js
-var _ = class {
-	constructor(e, t, n, r) {
-		if (h(this, "x", void 0), h(this, "y", void 0), h(this, "pressure", void 0), h(this, "time", void 0), isNaN(e) || isNaN(t)) throw Error(`Point is invalid: (${e}, ${t})`);
-		this.x = +e, this.y = +t, this.pressure = n || 0, this.time = r || Date.now();
-	}
-	distanceTo(e) {
-		return Math.sqrt((this.x - e.x) ** 2 + (this.y - e.y) ** 2);
-	}
-	equals(e) {
-		return this.x === e.x && this.y === e.y && this.pressure === e.pressure && this.time === e.time;
-	}
-	velocityFrom(e) {
-		return this.time === e.time ? 0 : this.distanceTo(e) / (this.time - e.time);
-	}
-}, v = class e {
-	constructor(e, t, n, r, i, a) {
-		this.startPoint = e, this.control2 = t, this.control1 = n, this.endPoint = r, this.startWidth = i, this.endWidth = a;
-	}
-	static fromPoints(t, n) {
-		let r = this.calculateControlPoints(t[0], t[1], t[2]).c2, i = this.calculateControlPoints(t[1], t[2], t[3]).c1;
-		return new e(t[1], r, i, t[2], n.start, n.end);
-	}
-	static calculateControlPoints(e, t, n) {
-		let r = e.x - t.x, i = e.y - t.y, a = t.x - n.x, o = t.y - n.y, s = {
-			x: (e.x + t.x) / 2,
-			y: (e.y + t.y) / 2
-		}, c = {
-			x: (t.x + n.x) / 2,
-			y: (t.y + n.y) / 2
-		}, l = Math.sqrt(r * r + i * i), u = Math.sqrt(a * a + o * o), d = s.x - c.x, f = s.y - c.y, p = l + u == 0 ? 0 : u / (l + u), m = {
-			x: c.x + d * p,
-			y: c.y + f * p
-		}, h = t.x - m.x, g = t.y - m.y;
+/*!
+* Signature Pad v5.1.3 | https://github.com/szimek/signature_pad
+* (c) 2025 Szymon Nowak | Released under the MIT license
+*/
+var Point = class {
+	constructor(x, y, pressure, time) {
+		_defineProperty(this, "x", void 0);
+		_defineProperty(this, "y", void 0);
+		_defineProperty(this, "pressure", void 0);
+		_defineProperty(this, "time", void 0);
+		if (isNaN(x) || isNaN(y)) throw new Error(`Point is invalid: (${x}, ${y})`);
+		this.x = +x;
+		this.y = +y;
+		this.pressure = pressure || 0;
+		this.time = time || Date.now();
+	}
+	distanceTo(start) {
+		return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
+	}
+	equals(other) {
+		return this.x === other.x && this.y === other.y && this.pressure === other.pressure && this.time === other.time;
+	}
+	velocityFrom(start) {
+		return this.time !== start.time ? this.distanceTo(start) / (this.time - start.time) : 0;
+	}
+};
+var Bezier = class _Bezier {
+	constructor(startPoint, control2, control1, endPoint, startWidth, endWidth) {
+		this.startPoint = startPoint;
+		this.control2 = control2;
+		this.control1 = control1;
+		this.endPoint = endPoint;
+		this.startWidth = startWidth;
+		this.endWidth = endWidth;
+	}
+	static fromPoints(points, widths) {
+		const c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
+		const c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
+		return new _Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
+	}
+	static calculateControlPoints(s1, s2, s3) {
+		const dx1 = s1.x - s2.x;
+		const dy1 = s1.y - s2.y;
+		const dx2 = s2.x - s3.x;
+		const dy2 = s2.y - s3.y;
+		const m1 = {
+			x: (s1.x + s2.x) / 2,
+			y: (s1.y + s2.y) / 2
+		};
+		const m2 = {
+			x: (s2.x + s3.x) / 2,
+			y: (s2.y + s3.y) / 2
+		};
+		const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+		const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+		const dxm = m1.x - m2.x;
+		const dym = m1.y - m2.y;
+		const k = l1 + l2 == 0 ? 0 : l2 / (l1 + l2);
+		const cm = {
+			x: m2.x + dxm * k,
+			y: m2.y + dym * k
+		};
+		const tx = s2.x - cm.x;
+		const ty = s2.y - cm.y;
 		return {
-			c1: new _(s.x + h, s.y + g),
-			c2: new _(c.x + h, c.y + g)
+			c1: new Point(m1.x + tx, m1.y + ty),
+			c2: new Point(m2.x + tx, m2.y + ty)
 		};
 	}
 	length() {
-		let e = 0, t, n;
-		for (let r = 0; r <= 10; r += 1) {
-			let i = r / 10, a = this.point(i, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x), o = this.point(i, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
-			if (r > 0) {
-				let r = a - t, i = o - n;
-				e += Math.sqrt(r * r + i * i);
+		const steps = 10;
+		let length = 0;
+		let px;
+		let py;
+		for (let i = 0; i <= steps; i += 1) {
+			const t = i / steps;
+			const cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
+			const cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
+			if (i > 0) {
+				const xdiff = cx - px;
+				const ydiff = cy - py;
+				length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
 			}
-			t = a, n = o;
+			px = cx;
+			py = cy;
 		}
-		return e;
+		return length;
 	}
-	point(e, t, n, r, i) {
-		return t * (1 - e) * (1 - e) * (1 - e) + 3 * n * (1 - e) * (1 - e) * e + 3 * r * (1 - e) * e * e + i * e * e * e;
+	point(t, start, c1, c2, end) {
+		return start * (1 - t) * (1 - t) * (1 - t) + 3 * c1 * (1 - t) * (1 - t) * t + 3 * c2 * (1 - t) * t * t + end * t * t * t;
 	}
-}, y = class {
+};
+var SignatureEventTarget = class {
 	constructor() {
-		h(this, "_et", void 0);
+		_defineProperty(this, "_et", void 0);
 		try {
 			this._et = new EventTarget();
 		} catch {
 			this._et = document;
 		}
 	}
-	addEventListener(e, t, n) {
-		this._et.addEventListener(e, t, n);
+	addEventListener(type, listener, options) {
+		this._et.addEventListener(type, listener, options);
 	}
-	dispatchEvent(e) {
-		return this._et.dispatchEvent(e);
+	dispatchEvent(event) {
+		return this._et.dispatchEvent(event);
 	}
-	removeEventListener(e, t, n) {
-		this._et.removeEventListener(e, t, n);
+	removeEventListener(type, callback, options) {
+		this._et.removeEventListener(type, callback, options);
 	}
 };
-function b(e, t = 250) {
-	let n = 0, r = null, i, a, o, s = () => {
-		n = Date.now(), r = null, i = e.apply(a, o), r || (a = null, o = []);
+function throttle(fn, wait = 250) {
+	let previous = 0;
+	let timeout = null;
+	let result;
+	let storedContext;
+	let storedArgs;
+	const later = () => {
+		previous = Date.now();
+		timeout = null;
+		result = fn.apply(storedContext, storedArgs);
+		if (!timeout) {
+			storedContext = null;
+			storedArgs = [];
+		}
 	};
-	return function(...c) {
-		let l = Date.now(), u = t - (l - n);
-		return a = this, o = c, u <= 0 || u > t ? (r &&= (clearTimeout(r), null), n = l, i = e.apply(a, o), r || (a = null, o = [])) : r ||= window.setTimeout(s, u), i;
+	return function wrapper(...args) {
+		const now = Date.now();
+		const remaining = wait - (now - previous);
+		storedContext = this;
+		storedArgs = args;
+		if (remaining <= 0 || remaining > wait) {
+			if (timeout) {
+				clearTimeout(timeout);
+				timeout = null;
+			}
+			previous = now;
+			result = fn.apply(storedContext, storedArgs);
+			if (!timeout) {
+				storedContext = null;
+				storedArgs = [];
+			}
+		} else if (!timeout) timeout = window.setTimeout(later, remaining);
+		return result;
 	};
 }
-var x = class e extends y {
-	constructor(t, n = {}) {
-		super(), h(this, "dotSize", void 0), h(this, "minWidth", void 0), h(this, "maxWidth", void 0), h(this, "penColor", void 0), h(this, "minDistance", void 0), h(this, "velocityFilterWeight", void 0), h(this, "compositeOperation", void 0), h(this, "backgroundColor", void 0), h(this, "throttle", void 0), h(this, "canvasContextOptions", void 0), h(this, "_ctx", void 0), h(this, "_drawingStroke", !1), h(this, "_isEmpty", !0), h(this, "_dataUrl", void 0), h(this, "_dataUrlOptions", void 0), h(this, "_lastPoints", []), h(this, "_data", []), h(this, "_lastVelocity", 0), h(this, "_lastWidth", 0), h(this, "_strokeMoveUpdate", void 0), h(this, "_strokePointerId", void 0), this.canvas = t, this.velocityFilterWeight = n.velocityFilterWeight || .7, this.minWidth = n.minWidth || .5, this.maxWidth = n.maxWidth || 2.5, this.throttle = n.throttle ?? 16, this.minDistance = n.minDistance ?? 5, this.dotSize = n.dotSize || 0, this.penColor = n.penColor || "black", this.backgroundColor = n.backgroundColor || "rgba(0,0,0,0)", this.compositeOperation = n.compositeOperation || "source-over", this.canvasContextOptions = n.canvasContextOptions ?? {}, this._strokeMoveUpdate = this.throttle ? b(e.prototype._strokeUpdate, this.throttle) : e.prototype._strokeUpdate, this._handleMouseDown = this._handleMouseDown.bind(this), this._handleMouseMove = this._handleMouseMove.bind(this), this._handleMouseUp = this._handleMouseUp.bind(this), this._handleTouchStart = this._handleTouchStart.bind(this), this._handleTouchMove = this._handleTouchMove.bind(this), this._handleTouchEnd = this._handleTouchEnd.bind(this), this._handlePointerDown = this._handlePointerDown.bind(this), this._handlePointerMove = this._handlePointerMove.bind(this), this._handlePointerUp = this._handlePointerUp.bind(this), this._handlePointerCancel = this._handlePointerCancel.bind(this), this._handleTouchCancel = this._handleTouchCancel.bind(this), this._ctx = t.getContext("2d", this.canvasContextOptions), this.clear(), this.on();
+var SignaturePad = class _SignaturePad extends SignatureEventTarget {
+	constructor(canvas, options = {}) {
+		super();
+		_defineProperty(this, "dotSize", void 0);
+		_defineProperty(this, "minWidth", void 0);
+		_defineProperty(this, "maxWidth", void 0);
+		_defineProperty(this, "penColor", void 0);
+		_defineProperty(this, "minDistance", void 0);
+		_defineProperty(this, "velocityFilterWeight", void 0);
+		_defineProperty(this, "compositeOperation", void 0);
+		_defineProperty(this, "backgroundColor", void 0);
+		_defineProperty(this, "throttle", void 0);
+		_defineProperty(this, "canvasContextOptions", void 0);
+		_defineProperty(this, "_ctx", void 0);
+		_defineProperty(this, "_drawingStroke", false);
+		_defineProperty(this, "_isEmpty", true);
+		_defineProperty(this, "_dataUrl", void 0);
+		_defineProperty(this, "_dataUrlOptions", void 0);
+		_defineProperty(this, "_lastPoints", []);
+		_defineProperty(this, "_data", []);
+		_defineProperty(this, "_lastVelocity", 0);
+		_defineProperty(this, "_lastWidth", 0);
+		_defineProperty(this, "_strokeMoveUpdate", void 0);
+		_defineProperty(this, "_strokePointerId", void 0);
+		this.canvas = canvas;
+		this.velocityFilterWeight = options.velocityFilterWeight || .7;
+		this.minWidth = options.minWidth || .5;
+		this.maxWidth = options.maxWidth || 2.5;
+		this.throttle = options.throttle ?? 16;
+		this.minDistance = options.minDistance ?? 5;
+		this.dotSize = options.dotSize || 0;
+		this.penColor = options.penColor || "black";
+		this.backgroundColor = options.backgroundColor || "rgba(0,0,0,0)";
+		this.compositeOperation = options.compositeOperation || "source-over";
+		this.canvasContextOptions = options.canvasContextOptions ?? {};
+		this._strokeMoveUpdate = this.throttle ? throttle(_SignaturePad.prototype._strokeUpdate, this.throttle) : _SignaturePad.prototype._strokeUpdate;
+		this._handleMouseDown = this._handleMouseDown.bind(this);
+		this._handleMouseMove = this._handleMouseMove.bind(this);
+		this._handleMouseUp = this._handleMouseUp.bind(this);
+		this._handleTouchStart = this._handleTouchStart.bind(this);
+		this._handleTouchMove = this._handleTouchMove.bind(this);
+		this._handleTouchEnd = this._handleTouchEnd.bind(this);
+		this._handlePointerDown = this._handlePointerDown.bind(this);
+		this._handlePointerMove = this._handlePointerMove.bind(this);
+		this._handlePointerUp = this._handlePointerUp.bind(this);
+		this._handlePointerCancel = this._handlePointerCancel.bind(this);
+		this._handleTouchCancel = this._handleTouchCancel.bind(this);
+		this._ctx = canvas.getContext("2d", this.canvasContextOptions);
+		this.clear();
+		this.on();
 	}
 	clear() {
-		let { _ctx: e, canvas: t } = this;
-		e.fillStyle = this.backgroundColor, e.clearRect(0, 0, t.width, t.height), e.fillRect(0, 0, t.width, t.height), this._data = [], this._reset(this._getPointGroupOptions()), this._isEmpty = !0, this._dataUrl = void 0, this._dataUrlOptions = void 0, this._strokePointerId = void 0;
+		const { _ctx: ctx, canvas } = this;
+		ctx.fillStyle = this.backgroundColor;
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		this._data = [];
+		this._reset(this._getPointGroupOptions());
+		this._isEmpty = true;
+		this._dataUrl = void 0;
+		this._dataUrlOptions = void 0;
+		this._strokePointerId = void 0;
 	}
 	redraw() {
-		let e = this._data, t = this._dataUrl, n = this._dataUrlOptions;
-		this.clear(), t && this.fromDataURL(t, n), this.fromData(e, { clear: !1 });
-	}
-	fromDataURL(e, t = {}) {
-		return new Promise((n, r) => {
-			let i = new Image(), a = t.ratio || window.devicePixelRatio || 1, o = t.width || this.canvas.width / a, s = t.height || this.canvas.height / a, c = t.xOffset || 0, l = t.yOffset || 0;
-			this._reset(this._getPointGroupOptions()), i.onload = () => {
-				this._ctx.drawImage(i, c, l, o, s), n();
-			}, i.onerror = (e) => {
-				r(e);
-			}, i.crossOrigin = "anonymous", i.src = e, this._isEmpty = !1, this._dataUrl = e, this._dataUrlOptions = { ...t };
+		const data = this._data;
+		const dataUrl = this._dataUrl;
+		const dataUrlOptions = this._dataUrlOptions;
+		this.clear();
+		if (dataUrl) this.fromDataURL(dataUrl, dataUrlOptions);
+		this.fromData(data, { clear: false });
+	}
+	fromDataURL(dataUrl, options = {}) {
+		return new Promise((resolve, reject) => {
+			const image = new Image();
+			const ratio = options.ratio || window.devicePixelRatio || 1;
+			const width = options.width || this.canvas.width / ratio;
+			const height = options.height || this.canvas.height / ratio;
+			const xOffset = options.xOffset || 0;
+			const yOffset = options.yOffset || 0;
+			this._reset(this._getPointGroupOptions());
+			image.onload = () => {
+				this._ctx.drawImage(image, xOffset, yOffset, width, height);
+				resolve();
+			};
+			image.onerror = (error) => {
+				reject(error);
+			};
+			image.crossOrigin = "anonymous";
+			image.src = dataUrl;
+			this._isEmpty = false;
+			this._dataUrl = dataUrl;
+			this._dataUrlOptions = { ...options };
 		});
 	}
-	toDataURL(e = "image/png", t) {
-		switch (e) {
-			case "image/svg+xml": return typeof t != "object" && (t = void 0), `data:image/svg+xml;base64,${btoa(this.toSVG(t))}`;
-			default: return typeof t != "number" && (t = void 0), this.canvas.toDataURL(e, t);
+	toDataURL(type = "image/png", encoderOptions) {
+		switch (type) {
+			case "image/svg+xml":
+				if (typeof encoderOptions !== "object") encoderOptions = void 0;
+				return `data:image/svg+xml;base64,${btoa(this.toSVG(encoderOptions))}`;
+			default:
+				if (typeof encoderOptions !== "number") encoderOptions = void 0;
+				return this.canvas.toDataURL(type, encoderOptions);
 		}
 	}
 	on() {
-		this.canvas.style.touchAction = "none", this.canvas.style.msTouchAction = "none", this.canvas.style.userSelect = "none", this.canvas.style.webkitUserSelect = "none";
-		let e = /Macintosh/.test(navigator.userAgent) && "ontouchstart" in document;
-		window.PointerEvent && !e ? this._handlePointerEvents() : (this._handleMouseEvents(), "ontouchstart" in window && this._handleTouchEvents());
+		this.canvas.style.touchAction = "none";
+		this.canvas.style.msTouchAction = "none";
+		this.canvas.style.userSelect = "none";
+		this.canvas.style.webkitUserSelect = "none";
+		const isIOS = /Macintosh/.test(navigator.userAgent) && "ontouchstart" in document;
+		if (window.PointerEvent && !isIOS) this._handlePointerEvents();
+		else {
+			this._handleMouseEvents();
+			if ("ontouchstart" in window) this._handleTouchEvents();
+		}
 	}
 	off() {
-		this.canvas.style.touchAction = "auto", this.canvas.style.msTouchAction = "auto", this.canvas.style.userSelect = "auto", this.canvas.style.webkitUserSelect = "auto", this.canvas.removeEventListener("pointerdown", this._handlePointerDown), this.canvas.removeEventListener("mousedown", this._handleMouseDown), this.canvas.removeEventListener("touchstart", this._handleTouchStart), this._removeMoveUpEventListeners();
+		this.canvas.style.touchAction = "auto";
+		this.canvas.style.msTouchAction = "auto";
+		this.canvas.style.userSelect = "auto";
+		this.canvas.style.webkitUserSelect = "auto";
+		this.canvas.removeEventListener("pointerdown", this._handlePointerDown);
+		this.canvas.removeEventListener("mousedown", this._handleMouseDown);
+		this.canvas.removeEventListener("touchstart", this._handleTouchStart);
+		this._removeMoveUpEventListeners();
 	}
 	_getListenerFunctions() {
-		let e = window.document === this.canvas.ownerDocument ? window : this.canvas.ownerDocument.defaultView ?? this.canvas.ownerDocument;
+		const canvasWindow = window.document === this.canvas.ownerDocument ? window : this.canvas.ownerDocument.defaultView ?? this.canvas.ownerDocument;
 		return {
-			addEventListener: e.addEventListener.bind(e),
-			removeEventListener: e.removeEventListener.bind(e)
+			addEventListener: canvasWindow.addEventListener.bind(canvasWindow),
+			removeEventListener: canvasWindow.removeEventListener.bind(canvasWindow)
 		};
 	}
 	_removeMoveUpEventListeners() {
-		let { removeEventListener: e } = this._getListenerFunctions();
-		e("pointermove", this._handlePointerMove), e("pointerup", this._handlePointerUp), e("pointercancel", this._handlePointerCancel), e("mousemove", this._handleMouseMove), e("mouseup", this._handleMouseUp), e("touchmove", this._handleTouchMove), e("touchend", this._handleTouchEnd), e("touchcancel", this._handleTouchCancel);
+		const { removeEventListener } = this._getListenerFunctions();
+		removeEventListener("pointermove", this._handlePointerMove);
+		removeEventListener("pointerup", this._handlePointerUp);
+		removeEventListener("pointercancel", this._handlePointerCancel);
+		removeEventListener("mousemove", this._handleMouseMove);
+		removeEventListener("mouseup", this._handleMouseUp);
+		removeEventListener("touchmove", this._handleTouchMove);
+		removeEventListener("touchend", this._handleTouchEnd);
+		removeEventListener("touchcancel", this._handleTouchCancel);
 	}
 	isEmpty() {
 		return this._isEmpty;
 	}
-	fromData(e, { clear: t = !0 } = {}) {
-		t && this.clear(), this._fromData(e, this._drawCurve.bind(this), this._drawDot.bind(this)), this._data = this._data.concat(e);
+	fromData(pointGroups, { clear = true } = {}) {
+		if (clear) this.clear();
+		this._fromData(pointGroups, this._drawCurve.bind(this), this._drawDot.bind(this));
+		this._data = this._data.concat(pointGroups);
 	}
 	toData() {
 		return this._data;
 	}
-	_isLeftButtonPressed(e, t) {
-		return t ? e.buttons === 1 : (e.buttons & 1) == 1;
+	_isLeftButtonPressed(event, only) {
+		if (only) return event.buttons === 1;
+		return (event.buttons & 1) === 1;
 	}
-	_pointerEventToSignatureEvent(e) {
+	_pointerEventToSignatureEvent(event) {
 		return {
-			event: e,
-			type: e.type,
-			x: e.clientX,
-			y: e.clientY,
-			pressure: "pressure" in e ? e.pressure : 0
+			event,
+			type: event.type,
+			x: event.clientX,
+			y: event.clientY,
+			pressure: "pressure" in event ? event.pressure : 0
 		};
 	}
-	_touchEventToSignatureEvent(e) {
-		let t = e.changedTouches[0];
+	_touchEventToSignatureEvent(event) {
+		const touch = event.changedTouches[0];
 		return {
-			event: e,
-			type: e.type,
-			x: t.clientX,
-			y: t.clientY,
-			pressure: t.force
+			event,
+			type: event.type,
+			x: touch.clientX,
+			y: touch.clientY,
+			pressure: touch.force
 		};
 	}
-	_handleMouseDown(e) {
-		!this._isLeftButtonPressed(e, !0) || this._drawingStroke || this._strokeBegin(this._pointerEventToSignatureEvent(e));
+	_handleMouseDown(event) {
+		if (!this._isLeftButtonPressed(event, true) || this._drawingStroke) return;
+		this._strokeBegin(this._pointerEventToSignatureEvent(event));
 	}
-	_handleMouseMove(e) {
-		if (!this._isLeftButtonPressed(e, !0) || !this._drawingStroke) {
-			this._strokeEnd(this._pointerEventToSignatureEvent(e), !1);
+	_handleMouseMove(event) {
+		if (!this._isLeftButtonPressed(event, true) || !this._drawingStroke) {
+			this._strokeEnd(this._pointerEventToSignatureEvent(event), false);
 			return;
 		}
-		this._strokeMoveUpdate(this._pointerEventToSignatureEvent(e));
-	}
-	_handleMouseUp(e) {
-		this._isLeftButtonPressed(e) || this._strokeEnd(this._pointerEventToSignatureEvent(e));
-	}
-	_handleTouchStart(e) {
-		e.targetTouches.length !== 1 || this._drawingStroke || (e.cancelable && e.preventDefault(), this._strokeBegin(this._touchEventToSignatureEvent(e)));
-	}
-	_handleTouchMove(e) {
-		if (e.targetTouches.length === 1) {
-			if (e.cancelable && e.preventDefault(), !this._drawingStroke) {
-				this._strokeEnd(this._touchEventToSignatureEvent(e), !1);
-				return;
-			}
-			this._strokeMoveUpdate(this._touchEventToSignatureEvent(e));
+		this._strokeMoveUpdate(this._pointerEventToSignatureEvent(event));
+	}
+	_handleMouseUp(event) {
+		if (this._isLeftButtonPressed(event)) return;
+		this._strokeEnd(this._pointerEventToSignatureEvent(event));
+	}
+	_handleTouchStart(event) {
+		if (event.targetTouches.length !== 1 || this._drawingStroke) return;
+		if (event.cancelable) event.preventDefault();
+		this._strokeBegin(this._touchEventToSignatureEvent(event));
+	}
+	_handleTouchMove(event) {
+		if (event.targetTouches.length !== 1) return;
+		if (event.cancelable) event.preventDefault();
+		if (!this._drawingStroke) {
+			this._strokeEnd(this._touchEventToSignatureEvent(event), false);
+			return;
 		}
-	}
-	_handleTouchEnd(e) {
-		e.targetTouches.length === 0 && (e.cancelable && e.preventDefault(), this._strokeEnd(this._touchEventToSignatureEvent(e)));
-	}
-	_handlePointerCancel(e) {
-		this._allowPointerId(e) && (e.preventDefault(), this._strokeEnd(this._pointerEventToSignatureEvent(e), !1));
-	}
-	_handleTouchCancel(e) {
-		e.cancelable && e.preventDefault(), this._strokeEnd(this._touchEventToSignatureEvent(e), !1);
-	}
-	_getPointerId(e) {
-		return e.persistentDeviceId || e.pointerId;
-	}
-	_allowPointerId(e, t = !1) {
-		return this._strokePointerId === void 0 ? t : this._getPointerId(e) === this._strokePointerId;
-	}
-	_handlePointerDown(e) {
-		this._drawingStroke || !this._isLeftButtonPressed(e) || !this._allowPointerId(e, !0) || (this._strokePointerId = this._getPointerId(e), e.preventDefault(), this._strokeBegin(this._pointerEventToSignatureEvent(e)));
-	}
-	_handlePointerMove(e) {
-		if (this._allowPointerId(e)) {
-			if (!this._isLeftButtonPressed(e, !0) || !this._drawingStroke) {
-				this._strokeEnd(this._pointerEventToSignatureEvent(e), !1);
-				return;
-			}
-			e.preventDefault(), this._strokeMoveUpdate(this._pointerEventToSignatureEvent(e));
+		this._strokeMoveUpdate(this._touchEventToSignatureEvent(event));
+	}
+	_handleTouchEnd(event) {
+		if (event.targetTouches.length !== 0) return;
+		if (event.cancelable) event.preventDefault();
+		this._strokeEnd(this._touchEventToSignatureEvent(event));
+	}
+	_handlePointerCancel(event) {
+		if (!this._allowPointerId(event)) return;
+		event.preventDefault();
+		this._strokeEnd(this._pointerEventToSignatureEvent(event), false);
+	}
+	_handleTouchCancel(event) {
+		if (event.cancelable) event.preventDefault();
+		this._strokeEnd(this._touchEventToSignatureEvent(event), false);
+	}
+	_getPointerId(event) {
+		return event.persistentDeviceId || event.pointerId;
+	}
+	_allowPointerId(event, allowUndefined = false) {
+		if (typeof this._strokePointerId === "undefined") return allowUndefined;
+		return this._getPointerId(event) === this._strokePointerId;
+	}
+	_handlePointerDown(event) {
+		if (this._drawingStroke || !this._isLeftButtonPressed(event) || !this._allowPointerId(event, true)) return;
+		this._strokePointerId = this._getPointerId(event);
+		event.preventDefault();
+		this._strokeBegin(this._pointerEventToSignatureEvent(event));
+	}
+	_handlePointerMove(event) {
+		if (!this._allowPointerId(event)) return;
+		if (!this._isLeftButtonPressed(event, true) || !this._drawingStroke) {
+			this._strokeEnd(this._pointerEventToSignatureEvent(event), false);
+			return;
 		}
+		event.preventDefault();
+		this._strokeMoveUpdate(this._pointerEventToSignatureEvent(event));
 	}
-	_handlePointerUp(e) {
-		this._isLeftButtonPressed(e) || !this._allowPointerId(e) || (e.preventDefault(), this._strokeEnd(this._pointerEventToSignatureEvent(e)));
+	_handlePointerUp(event) {
+		if (this._isLeftButtonPressed(event) || !this._allowPointerId(event)) return;
+		event.preventDefault();
+		this._strokeEnd(this._pointerEventToSignatureEvent(event));
 	}
-	_getPointGroupOptions(e) {
+	_getPointGroupOptions(group) {
 		return {
-			penColor: e && "penColor" in e ? e.penColor : this.penColor,
-			dotSize: e && "dotSize" in e ? e.dotSize : this.dotSize,
-			minWidth: e && "minWidth" in e ? e.minWidth : this.minWidth,
-			maxWidth: e && "maxWidth" in e ? e.maxWidth : this.maxWidth,
-			velocityFilterWeight: e && "velocityFilterWeight" in e ? e.velocityFilterWeight : this.velocityFilterWeight,
-			compositeOperation: e && "compositeOperation" in e ? e.compositeOperation : this.compositeOperation
+			penColor: group && "penColor" in group ? group.penColor : this.penColor,
+			dotSize: group && "dotSize" in group ? group.dotSize : this.dotSize,
+			minWidth: group && "minWidth" in group ? group.minWidth : this.minWidth,
+			maxWidth: group && "maxWidth" in group ? group.maxWidth : this.maxWidth,
+			velocityFilterWeight: group && "velocityFilterWeight" in group ? group.velocityFilterWeight : this.velocityFilterWeight,
+			compositeOperation: group && "compositeOperation" in group ? group.compositeOperation : this.compositeOperation
 		};
 	}
-	_strokeBegin(e) {
+	_strokeBegin(event) {
 		if (!this.dispatchEvent(new CustomEvent("beginStroke", {
-			detail: e,
-			cancelable: !0
+			detail: event,
+			cancelable: true
 		}))) return;
-		let { addEventListener: t } = this._getListenerFunctions();
-		switch (e.event.type) {
+		const { addEventListener } = this._getListenerFunctions();
+		switch (event.event.type) {
 			case "mousedown":
-				t("mousemove", this._handleMouseMove, { passive: !1 }), t("mouseup", this._handleMouseUp, { passive: !1 });
+				addEventListener("mousemove", this._handleMouseMove, { passive: false });
+				addEventListener("mouseup", this._handleMouseUp, { passive: false });
 				break;
 			case "touchstart":
-				t("touchmove", this._handleTouchMove, { passive: !1 }), t("touchend", this._handleTouchEnd, { passive: !1 }), t("touchcancel", this._handleTouchCancel, { passive: !1 });
+				addEventListener("touchmove", this._handleTouchMove, { passive: false });
+				addEventListener("touchend", this._handleTouchEnd, { passive: false });
+				addEventListener("touchcancel", this._handleTouchCancel, { passive: false });
 				break;
 			case "pointerdown":
-				t("pointermove", this._handlePointerMove, { passive: !1 }), t("pointerup", this._handlePointerUp, { passive: !1 }), t("pointercancel", this._handlePointerCancel, { passive: !1 });
+				addEventListener("pointermove", this._handlePointerMove, { passive: false });
+				addEventListener("pointerup", this._handlePointerUp, { passive: false });
+				addEventListener("pointercancel", this._handlePointerCancel, { passive: false });
 				break;
 			default:
 		}
-		this._drawingStroke = !0;
-		let n = this._getPointGroupOptions(), r = {
-			...n,
+		this._drawingStroke = true;
+		const pointGroupOptions = this._getPointGroupOptions();
+		const newPointGroup = {
+			...pointGroupOptions,
 			points: []
 		};
-		this._data.push(r), this._reset(n), this._strokeUpdate(e);
+		this._data.push(newPointGroup);
+		this._reset(pointGroupOptions);
+		this._strokeUpdate(event);
 	}
-	_strokeUpdate(e) {
+	_strokeUpdate(event) {
 		if (!this._drawingStroke) return;
 		if (this._data.length === 0) {
-			this._strokeBegin(e);
+			this._strokeBegin(event);
 			return;
 		}
-		this.dispatchEvent(new CustomEvent("beforeUpdateStroke", { detail: e }));
-		let t = this._createPoint(e.x, e.y, e.pressure), n = this._data[this._data.length - 1], r = n.points, i = r.length > 0 && r[r.length - 1], a = i ? t.distanceTo(i) <= this.minDistance : !1, o = this._getPointGroupOptions(n);
-		if (!i || !(i && a)) {
-			let e = this._addPoint(t, o);
-			i ? e && this._drawCurve(e, o) : this._drawDot(t, o), r.push({
-				time: t.time,
-				x: t.x,
-				y: t.y,
-				pressure: t.pressure
+		this.dispatchEvent(new CustomEvent("beforeUpdateStroke", { detail: event }));
+		const point = this._createPoint(event.x, event.y, event.pressure);
+		const lastPointGroup = this._data[this._data.length - 1];
+		const lastPoints = lastPointGroup.points;
+		const lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
+		const isLastPointTooClose = lastPoint ? point.distanceTo(lastPoint) <= this.minDistance : false;
+		const pointGroupOptions = this._getPointGroupOptions(lastPointGroup);
+		if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
+			const curve = this._addPoint(point, pointGroupOptions);
+			if (!lastPoint) this._drawDot(point, pointGroupOptions);
+			else if (curve) this._drawCurve(curve, pointGroupOptions);
+			lastPoints.push({
+				time: point.time,
+				x: point.x,
+				y: point.y,
+				pressure: point.pressure
 			});
 		}
-		this.dispatchEvent(new CustomEvent("afterUpdateStroke", { detail: e }));
+		this.dispatchEvent(new CustomEvent("afterUpdateStroke", { detail: event }));
 	}
-	_strokeEnd(e, t = !0) {
-		this._removeMoveUpEventListeners(), this._drawingStroke && (t && this._strokeUpdate(e), this._drawingStroke = !1, this._strokePointerId = void 0, this.dispatchEvent(new CustomEvent("endStroke", { detail: e })));
+	_strokeEnd(event, shouldUpdate = true) {
+		this._removeMoveUpEventListeners();
+		if (!this._drawingStroke) return;
+		if (shouldUpdate) this._strokeUpdate(event);
+		this._drawingStroke = false;
+		this._strokePointerId = void 0;
+		this.dispatchEvent(new CustomEvent("endStroke", { detail: event }));
 	}
 	_handlePointerEvents() {
-		this._drawingStroke = !1, this.canvas.addEventListener("pointerdown", this._handlePointerDown, { passive: !1 });
+		this._drawingStroke = false;
+		this.canvas.addEventListener("pointerdown", this._handlePointerDown, { passive: false });
 	}
 	_handleMouseEvents() {
-		this._drawingStroke = !1, this.canvas.addEventListener("mousedown", this._handleMouseDown, { passive: !1 });
+		this._drawingStroke = false;
+		this.canvas.addEventListener("mousedown", this._handleMouseDown, { passive: false });
 	}
 	_handleTouchEvents() {
-		this.canvas.addEventListener("touchstart", this._handleTouchStart, { passive: !1 });
-	}
-	_reset(e) {
-		this._lastPoints = [], this._lastVelocity = 0, this._lastWidth = (e.minWidth + e.maxWidth) / 2, this._ctx.fillStyle = e.penColor, this._ctx.globalCompositeOperation = e.compositeOperation;
-	}
-	_createPoint(e, t, n) {
-		let r = this.canvas.getBoundingClientRect();
-		return new _(e - r.left, t - r.top, n, (/* @__PURE__ */ new Date()).getTime());
-	}
-	_addPoint(e, t) {
-		let { _lastPoints: n } = this;
-		if (n.push(e), n.length > 2) {
-			n.length === 3 && n.unshift(n[0]);
-			let e = this._calculateCurveWidths(n[1], n[2], t), r = v.fromPoints(n, e);
-			return n.shift(), r;
+		this.canvas.addEventListener("touchstart", this._handleTouchStart, { passive: false });
+	}
+	_reset(options) {
+		this._lastPoints = [];
+		this._lastVelocity = 0;
+		this._lastWidth = (options.minWidth + options.maxWidth) / 2;
+		this._ctx.fillStyle = options.penColor;
+		this._ctx.globalCompositeOperation = options.compositeOperation;
+	}
+	_createPoint(x, y, pressure) {
+		const rect = this.canvas.getBoundingClientRect();
+		return new Point(x - rect.left, y - rect.top, pressure, (/* @__PURE__ */ new Date()).getTime());
+	}
+	_addPoint(point, options) {
+		const { _lastPoints } = this;
+		_lastPoints.push(point);
+		if (_lastPoints.length > 2) {
+			if (_lastPoints.length === 3) _lastPoints.unshift(_lastPoints[0]);
+			const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2], options);
+			const curve = Bezier.fromPoints(_lastPoints, widths);
+			_lastPoints.shift();
+			return curve;
 		}
 		return null;
 	}
-	_calculateCurveWidths(e, t, n) {
-		let r = n.velocityFilterWeight * t.velocityFrom(e) + (1 - n.velocityFilterWeight) * this._lastVelocity, i = this._strokeWidth(r, n), a = {
-			end: i,
+	_calculateCurveWidths(startPoint, endPoint, options) {
+		const velocity = options.velocityFilterWeight * endPoint.velocityFrom(startPoint) + (1 - options.velocityFilterWeight) * this._lastVelocity;
+		const newWidth = this._strokeWidth(velocity, options);
+		const widths = {
+			end: newWidth,
 			start: this._lastWidth
 		};
-		return this._lastVelocity = r, this._lastWidth = i, a;
-	}
-	_strokeWidth(e, t) {
-		return Math.max(t.maxWidth / (e + 1), t.minWidth);
-	}
-	_drawCurveSegment(e, t, n) {
-		let r = this._ctx;
-		r.moveTo(e, t), r.arc(e, t, n, 0, 2 * Math.PI, !1), this._isEmpty = !1;
-	}
-	_drawCurve(e, t) {
-		let n = this._ctx, r = e.endWidth - e.startWidth, i = Math.ceil(e.length()) * 2;
-		n.beginPath(), n.fillStyle = t.penColor;
-		for (let n = 0; n < i; n += 1) {
-			let a = n / i, o = a * a, s = o * a, c = 1 - a, l = c * c, u = l * c, d = u * e.startPoint.x;
-			d += 3 * l * a * e.control1.x, d += 3 * c * o * e.control2.x, d += s * e.endPoint.x;
-			let f = u * e.startPoint.y;
-			f += 3 * l * a * e.control1.y, f += 3 * c * o * e.control2.y, f += s * e.endPoint.y;
-			let p = Math.min(e.startWidth + s * r, t.maxWidth);
-			this._drawCurveSegment(d, f, p);
+		this._lastVelocity = velocity;
+		this._lastWidth = newWidth;
+		return widths;
+	}
+	_strokeWidth(velocity, options) {
+		return Math.max(options.maxWidth / (velocity + 1), options.minWidth);
+	}
+	_drawCurveSegment(x, y, width) {
+		const ctx = this._ctx;
+		ctx.moveTo(x, y);
+		ctx.arc(x, y, width, 0, 2 * Math.PI, false);
+		this._isEmpty = false;
+	}
+	_drawCurve(curve, options) {
+		const ctx = this._ctx;
+		const widthDelta = curve.endWidth - curve.startWidth;
+		const drawSteps = Math.ceil(curve.length()) * 2;
+		ctx.beginPath();
+		ctx.fillStyle = options.penColor;
+		for (let i = 0; i < drawSteps; i += 1) {
+			const t = i / drawSteps;
+			const tt = t * t;
+			const ttt = tt * t;
+			const u = 1 - t;
+			const uu = u * u;
+			const uuu = uu * u;
+			let x = uuu * curve.startPoint.x;
+			x += 3 * uu * t * curve.control1.x;
+			x += 3 * u * tt * curve.control2.x;
+			x += ttt * curve.endPoint.x;
+			let y = uuu * curve.startPoint.y;
+			y += 3 * uu * t * curve.control1.y;
+			y += 3 * u * tt * curve.control2.y;
+			y += ttt * curve.endPoint.y;
+			const width = Math.min(curve.startWidth + ttt * widthDelta, options.maxWidth);
+			this._drawCurveSegment(x, y, width);
 		}
-		n.closePath(), n.fill();
-	}
-	_drawDot(e, t) {
-		let n = this._ctx, r = t.dotSize > 0 ? t.dotSize : (t.minWidth + t.maxWidth) / 2;
-		n.beginPath(), this._drawCurveSegment(e.x, e.y, r), n.closePath(), n.fillStyle = t.penColor, n.fill();
-	}
-	_fromData(e, t, n) {
-		for (let r of e) {
-			let { points: e } = r, i = this._getPointGroupOptions(r);
-			if (e.length > 1) for (let n = 0; n < e.length; n += 1) {
-				let r = e[n], a = new _(r.x, r.y, r.pressure, r.time);
-				n === 0 && this._reset(i);
-				let o = this._addPoint(a, i);
-				o && t(o, i);
+		ctx.closePath();
+		ctx.fill();
+	}
+	_drawDot(point, options) {
+		const ctx = this._ctx;
+		const width = options.dotSize > 0 ? options.dotSize : (options.minWidth + options.maxWidth) / 2;
+		ctx.beginPath();
+		this._drawCurveSegment(point.x, point.y, width);
+		ctx.closePath();
+		ctx.fillStyle = options.penColor;
+		ctx.fill();
+	}
+	_fromData(pointGroups, drawCurve, drawDot) {
+		for (const group of pointGroups) {
+			const { points } = group;
+			const pointGroupOptions = this._getPointGroupOptions(group);
+			if (points.length > 1) for (let j = 0; j < points.length; j += 1) {
+				const basicPoint = points[j];
+				const point = new Point(basicPoint.x, basicPoint.y, basicPoint.pressure, basicPoint.time);
+				if (j === 0) this._reset(pointGroupOptions);
+				const curve = this._addPoint(point, pointGroupOptions);
+				if (curve) drawCurve(curve, pointGroupOptions);
+			}
+			else {
+				this._reset(pointGroupOptions);
+				drawDot(points[0], pointGroupOptions);
 			}
-			else this._reset(i), n(e[0], i);
 		}
 	}
-	toSVG({ includeBackgroundColor: e = !1, includeDataUrl: t = !1 } = {}) {
-		let n = this._data, r = Math.max(window.devicePixelRatio || 1, 1), i = this.canvas.width / r, a = this.canvas.height / r, o = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-		if (o.setAttribute("xmlns", "http://www.w3.org/2000/svg"), o.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"), o.setAttribute("viewBox", `0 0 ${i} ${a}`), o.setAttribute("width", i.toString()), o.setAttribute("height", a.toString()), e && this.backgroundColor) {
-			let e = document.createElement("rect");
-			e.setAttribute("width", "100%"), e.setAttribute("height", "100%"), e.setAttribute("fill", this.backgroundColor), o.appendChild(e);
+	toSVG({ includeBackgroundColor = false, includeDataUrl = false } = {}) {
+		const pointGroups = this._data;
+		const ratio = Math.max(window.devicePixelRatio || 1, 1);
+		const minX = 0;
+		const minY = 0;
+		const maxX = this.canvas.width / ratio;
+		const maxY = this.canvas.height / ratio;
+		const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+		svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+		svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+		svg.setAttribute("viewBox", `${minX} ${minY} ${maxX} ${maxY}`);
+		svg.setAttribute("width", maxX.toString());
+		svg.setAttribute("height", maxY.toString());
+		if (includeBackgroundColor && this.backgroundColor) {
+			const rect = document.createElement("rect");
+			rect.setAttribute("width", "100%");
+			rect.setAttribute("height", "100%");
+			rect.setAttribute("fill", this.backgroundColor);
+			svg.appendChild(rect);
 		}
-		if (t && this._dataUrl) {
-			let e = this._dataUrlOptions?.ratio || window.devicePixelRatio || 1, t = this._dataUrlOptions?.width || this.canvas.width / e, n = this._dataUrlOptions?.height || this.canvas.height / e, r = this._dataUrlOptions?.xOffset || 0, i = this._dataUrlOptions?.yOffset || 0, a = document.createElement("image");
-			a.setAttribute("x", r.toString()), a.setAttribute("y", i.toString()), a.setAttribute("width", t.toString()), a.setAttribute("height", n.toString()), a.setAttribute("preserveAspectRatio", "none"), a.setAttribute("href", this._dataUrl), o.appendChild(a);
+		if (includeDataUrl && this._dataUrl) {
+			const ratio2 = this._dataUrlOptions?.ratio || window.devicePixelRatio || 1;
+			const width = this._dataUrlOptions?.width || this.canvas.width / ratio2;
+			const height = this._dataUrlOptions?.height || this.canvas.height / ratio2;
+			const xOffset = this._dataUrlOptions?.xOffset || 0;
+			const yOffset = this._dataUrlOptions?.yOffset || 0;
+			const image = document.createElement("image");
+			image.setAttribute("x", xOffset.toString());
+			image.setAttribute("y", yOffset.toString());
+			image.setAttribute("width", width.toString());
+			image.setAttribute("height", height.toString());
+			image.setAttribute("preserveAspectRatio", "none");
+			image.setAttribute("href", this._dataUrl);
+			svg.appendChild(image);
 		}
-		return this._fromData(n, (e, { penColor: t }) => {
-			let n = document.createElement("path");
-			if (!isNaN(e.control1.x) && !isNaN(e.control1.y) && !isNaN(e.control2.x) && !isNaN(e.control2.y)) {
-				let r = `M ${e.startPoint.x.toFixed(3)},${e.startPoint.y.toFixed(3)} C ${e.control1.x.toFixed(3)},${e.control1.y.toFixed(3)} ${e.control2.x.toFixed(3)},${e.control2.y.toFixed(3)} ${e.endPoint.x.toFixed(3)},${e.endPoint.y.toFixed(3)}`;
-				n.setAttribute("d", r), n.setAttribute("stroke-width", (e.endWidth * 2.25).toFixed(3)), n.setAttribute("stroke", t), n.setAttribute("fill", "none"), n.setAttribute("stroke-linecap", "round"), o.appendChild(n);
+		this._fromData(pointGroups, (curve, { penColor }) => {
+			const path = document.createElement("path");
+			if (!isNaN(curve.control1.x) && !isNaN(curve.control1.y) && !isNaN(curve.control2.x) && !isNaN(curve.control2.y)) {
+				const attr = `M ${curve.startPoint.x.toFixed(3)},${curve.startPoint.y.toFixed(3)} C ${curve.control1.x.toFixed(3)},${curve.control1.y.toFixed(3)} ${curve.control2.x.toFixed(3)},${curve.control2.y.toFixed(3)} ${curve.endPoint.x.toFixed(3)},${curve.endPoint.y.toFixed(3)}`;
+				path.setAttribute("d", attr);
+				path.setAttribute("stroke-width", (curve.endWidth * 2.25).toFixed(3));
+				path.setAttribute("stroke", penColor);
+				path.setAttribute("fill", "none");
+				path.setAttribute("stroke-linecap", "round");
+				svg.appendChild(path);
 			}
-		}, (e, { penColor: t, dotSize: n, minWidth: r, maxWidth: i }) => {
-			let a = document.createElement("circle"), s = n > 0 ? n : (r + i) / 2;
-			a.setAttribute("r", s.toString()), a.setAttribute("cx", e.x.toString()), a.setAttribute("cy", e.y.toString()), a.setAttribute("fill", t), o.appendChild(a);
-		}), o.outerHTML;
-	}
-}, S = (e) => {
-	if (typeof document > "u") return null;
-	let t = document.createElement("div");
-	t.style.color = e, t.style.position = "absolute", t.style.visibility = "hidden", document.body.appendChild(t);
-	let n = getComputedStyle(t).color;
-	if (document.body.removeChild(t), !n || n === "transparent") return null;
-	let r = n.match(/\d+/g);
-	if (r && r.length >= 3) {
-		let e = Number.parseInt(r[0], 10), t = Number.parseInt(r[1], 10), n = Number.parseInt(r[2], 10), i = (e) => {
-			let t = e.toString(16);
-			return t.length === 1 ? `0${t}` : t;
+		}, (point, { penColor, dotSize, minWidth, maxWidth }) => {
+			const circle = document.createElement("circle");
+			const size = dotSize > 0 ? dotSize : (minWidth + maxWidth) / 2;
+			circle.setAttribute("r", size.toString());
+			circle.setAttribute("cx", point.x.toString());
+			circle.setAttribute("cy", point.y.toString());
+			circle.setAttribute("fill", penColor);
+			svg.appendChild(circle);
+		});
+		return svg.outerHTML;
+	}
+};
+//#endregion
+//#region src/styles/resolveCssVariableToHex.ts
+var resolveCssVariableToHex = (cssVar) => {
+	if (typeof document === "undefined") return null;
+	const tempEl = document.createElement("div");
+	tempEl.style.color = cssVar;
+	tempEl.style.position = "absolute";
+	tempEl.style.visibility = "hidden";
+	document.body.appendChild(tempEl);
+	const computedColor = getComputedStyle(tempEl).color;
+	document.body.removeChild(tempEl);
+	if (!computedColor || computedColor === "transparent") return null;
+	const rgbMatch = computedColor.match(/\d+/g);
+	if (rgbMatch && rgbMatch.length >= 3) {
+		const r = Number.parseInt(rgbMatch[0], 10);
+		const g = Number.parseInt(rgbMatch[1], 10);
+		const b = Number.parseInt(rgbMatch[2], 10);
+		const toHex = (n) => {
+			const hex = n.toString(16);
+			return hex.length === 1 ? `0${hex}` : hex;
 		};
-		return `#${i(e)}${i(t)}${i(n)}`;
+		return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 	}
 	return null;
-}, C = "var(--icon-neutral-800)", w = "#ffffff", T = (e) => {
-	let t = document.createElement("canvas");
-	t.width = e.width, t.height = e.height;
-	let n = t.getContext("2d");
-	if (!n) throw Error("Canvas 2D context is not available");
-	return n.fillStyle = w, n.fillRect(0, 0, t.width, t.height), n.drawImage(e, 0, 0), t;
-}, E = (e, t, n) => new Promise((r, i) => {
-	e.toBlob((e) => {
-		e ? r(e) : i(/* @__PURE__ */ Error("Canvas toBlob() returned null"));
-	}, t, t === "image/jpeg" || t === "image/webp" ? n : void 0);
-}), D = n(({ onBeginStroke: e, hasDrawing: n, placeholder: a, customPenColor: c, customPenStrokeWidth: l, customBackgroundColor: u, customBorderColor: d }, f) => {
-	let p = i(null), m = i(null), h = i(null), g = i(e);
-	g.current = e;
-	let _ = r(() => {
-		let e = p.current, t = m.current, n = h.current;
-		if (!e || !t || !n) return;
-		let r = Math.max(window.devicePixelRatio || 1, 1), i = t.getContext("2d"), { width: a, height: o } = e.getBoundingClientRect();
-		if (a === 0 || o === 0 || !i) return;
-		let s = n.isEmpty() ? null : n.toData();
-		t.width = Math.floor(a * r), t.height = Math.floor(o * r), i.setTransform(r, 0, 0, r, 0, 0), s ? n.fromData(s, { clear: !0 }) : n.clear();
+};
+//#endregion
+//#region src/modules/signature/signatureCanvas.tsx
+var SIGNATURE_PEN_COLOR = "var(--icon-neutral-800)";
+/** Fixed white background for export (avoid transparency and theme dependency) */
+var EXPORT_BACKGROUND_COLOR = "#ffffff";
+var copyCanvasWithWhiteBackground = (source) => {
+	const target = document.createElement("canvas");
+	target.width = source.width;
+	target.height = source.height;
+	const ctx = target.getContext("2d");
+	if (!ctx) throw new Error("Canvas 2D context is not available");
+	ctx.fillStyle = EXPORT_BACKGROUND_COLOR;
+	ctx.fillRect(0, 0, target.width, target.height);
+	ctx.drawImage(source, 0, 0);
+	return target;
+};
+var canvasToBlob = (canvas, mimeType, quality) => {
+	return new Promise((resolve, reject) => {
+		canvas.toBlob((blob) => {
+			if (blob) resolve(blob);
+			else reject(/* @__PURE__ */ new Error("Canvas toBlob() returned null"));
+		}, mimeType, mimeType === "image/jpeg" || mimeType === "image/webp" ? quality : void 0);
+	});
+};
+var SignatureCanvas = D(({ onBeginStroke, hasDrawing, placeholder, ariaLabel, customPenColor, customPenStrokeWidth, customBackgroundColor, customBorderColor }, ref) => {
+	const containerRef = A(null);
+	const canvasRef = A(null);
+	const signaturePadRef = A(null);
+	const onBeginStrokeRef = A(onBeginStroke);
+	onBeginStrokeRef.current = onBeginStroke;
+	const resizeSignaturePad = q(() => {
+		const container = containerRef.current;
+		const canvas = canvasRef.current;
+		const pad = signaturePadRef.current;
+		if (!container || !canvas || !pad) return;
+		const ratio = Math.max(window.devicePixelRatio || 1, 1);
+		const context = canvas.getContext("2d");
+		const { width, height } = container.getBoundingClientRect();
+		if (width === 0 || height === 0 || !context) return;
+		const data = pad.isEmpty() ? null : pad.toData();
+		canvas.width = Math.floor(width * ratio);
+		canvas.height = Math.floor(height * ratio);
+		context.setTransform(ratio, 0, 0, ratio, 0, 0);
+		if (data) pad.fromData(data, { clear: true });
+		else pad.clear();
 	}, []);
-	return o(f, () => ({
+	F(ref, () => ({
 		clear: () => {
-			h.current?.clear();
+			signaturePadRef.current?.clear();
 		},
-		isEmpty: () => h.current?.isEmpty() ?? !0,
-		toDataURL: (e = "image/png", t) => h.current?.toDataURL(e, t) ?? "",
-		getCanvas: () => m.current,
-		getSignaturePad: () => h.current,
-		on: () => h.current?.on(),
-		off: () => h.current?.off(),
+		isEmpty: () => signaturePadRef.current?.isEmpty() ?? true,
+		toDataURL: (type = "image/png", encoderOptions) => signaturePadRef.current?.toDataURL(type, encoderOptions) ?? "",
+		getCanvas: () => canvasRef.current,
+		getSignaturePad: () => signaturePadRef.current,
+		on: () => signaturePadRef.current?.on(),
+		off: () => signaturePadRef.current?.off(),
 		getSignatureWithWhiteBackground: () => {
-			let e = m.current;
-			return e ? T(e) : null;
+			const canvas = canvasRef.current;
+			if (!canvas) return null;
+			return copyCanvasWithWhiteBackground(canvas);
 		},
-		getBlob: (e = m.current ?? void 0, t = "image/jpeg", n = .92) => e ? E(e, t, n) : Promise.reject(/* @__PURE__ */ Error("No canvas available for getBlob"))
-	}), []), t(() => {
-		let e = p.current, t = m.current;
-		if (!e || !t) return;
-		let n = null, r = () => {
-			n === null && (n = requestAnimationFrame(() => {
-				n = null, _();
-			}));
-		}, i = c ?? S(C), a = new x(t, {
-			...i ? { penColor: i } : {},
-			...l ? { maxWidth: l } : {}
+		getBlob: (canvas = canvasRef.current ?? void 0, mimeType = "image/jpeg", quality = .92) => {
+			if (!canvas) return Promise.reject(/* @__PURE__ */ new Error("No canvas available for getBlob"));
+			return canvasToBlob(canvas, mimeType, quality);
+		}
+	}), []);
+	y(() => {
+		const container = containerRef.current;
+		const canvas = canvasRef.current;
+		if (!container || !canvas) return;
+		let resizeRafId = null;
+		const scheduleResizeSignaturePad = () => {
+			if (resizeRafId !== null) return;
+			resizeRafId = requestAnimationFrame(() => {
+				resizeRafId = null;
+				resizeSignaturePad();
+			});
+		};
+		const penColor = customPenColor ?? resolveCssVariableToHex(SIGNATURE_PEN_COLOR);
+		const signaturePad = new SignaturePad(canvas, {
+			...penColor ? { penColor } : {},
+			...customPenStrokeWidth ? { maxWidth: customPenStrokeWidth } : {}
 		});
-		h.current = a;
-		let o = () => g.current?.();
-		a.addEventListener("beginStroke", o), _();
-		let s = new ResizeObserver(() => {
-			r();
+		signaturePadRef.current = signaturePad;
+		const onBegin = () => onBeginStrokeRef.current?.();
+		signaturePad.addEventListener("beginStroke", onBegin);
+		resizeSignaturePad();
+		const resizeObserver = new ResizeObserver(() => {
+			scheduleResizeSignaturePad();
 		});
-		return s.observe(e), () => {
-			n !== null && cancelAnimationFrame(n), s.disconnect(), a.removeEventListener("beginStroke", o), a.off(), h.current = null;
+		resizeObserver.observe(container);
+		return () => {
+			if (resizeRafId !== null) cancelAnimationFrame(resizeRafId);
+			resizeObserver.disconnect();
+			signaturePad.removeEventListener("beginStroke", onBegin);
+			signaturePad.off();
+			signaturePadRef.current = null;
 		};
 	}, [
-		_,
-		c,
-		l
-	]), /* @__PURE__ */ s("div", {
+		resizeSignaturePad,
+		customPenColor,
+		customPenStrokeWidth
+	]);
+	return /* @__PURE__ */ u("div", {
 		class: "SignatureCanvasContainer",
-		style: u || d ? {
-			...u ? { backgroundColor: u } : {},
-			...d ? { borderColor: d } : {}
+		style: customBackgroundColor || customBorderColor ? {
+			...customBackgroundColor ? { backgroundColor: customBackgroundColor } : {},
+			...customBorderColor ? { borderColor: customBorderColor } : {}
 		} : void 0,
-		ref: p,
-		children: [/* @__PURE__ */ s("canvas", {
+		ref: containerRef,
+		children: [/* @__PURE__ */ u("canvas", {
 			class: "SignatureCanvas",
-			ref: m,
-			"aria-label": a
-		}), !n && /* @__PURE__ */ s("p", {
+			ref: canvasRef,
+			role: "img",
+			"aria-label": ariaLabel ?? placeholder
+		}), !hasDrawing && /* @__PURE__ */ u("p", {
 			class: "SignatureCanvasPlaceholder",
-			children: a
+			"aria-hidden": "true",
+			children: placeholder
 		})]
 	});
 });
-D.displayName = "SignatureCanvas";
+SignatureCanvas.displayName = "SignatureCanvas";
 //#endregion
 //#region src/modules/signature/signature.tsx
-var O = ({ config: n, onFinish: o, onError: l }) => {
-	let { t: m } = e(), [h, _] = c(() => g({ config: n }), { autoLoad: !0 }), [v, y] = a(!1), b = i(null), x = h.status === "error" ? h.error : void 0, S = h.status === "submitting", C = h.status === "capture" && h.canContinue && !S, w = r(() => {
-		b.current && (b.current.on(), b.current.clear(), y(!1), _.setSignatureValid(!1));
-	}, [_]);
-	t(() => {
-		h.status === "finished" && o?.();
-	}, [h.status, o]), t(() => {
-		x && (l?.(x), b.current?.on());
-	}, [x, l]);
-	let T = () => n.title?.trim() || m("signature.fullSignatureTitle"), E = () => n.subTitle?.trim() || m("signature.subtitle"), O = async () => {
-		let e = b.current;
-		if (!e) return;
-		let t = e.getSignatureWithWhiteBackground();
-		if (t) return n.sendBase64 ?? !1 ? t.toDataURL("image/png").replace(/^data:image\/png;base64,/, "") : e.getBlob(t);
+var SignatureContent = ({ config, onFinish, onError }) => {
+	const { t } = useTranslation();
+	const [state, manager] = useManager(() => createSignatureManager({ config }), { autoLoad: true });
+	const [hasDrawing, setHasDrawing] = d(false);
+	const [announcement, setAnnouncement] = d("");
+	const signatureRef = A(null);
+	const error = state.status === "error" ? state.error : void 0;
+	const isSubmitting = state.status === "submitting";
+	const canContinue = state.status === "capture" && state.canContinue && !isSubmitting;
+	const clearCanvas = q(() => {
+		if (!signatureRef.current) return;
+		signatureRef.current.on();
+		signatureRef.current.clear();
+		setHasDrawing(false);
+		setAnnouncement(t("signature.cleared"));
+		manager.setSignatureValid(false);
+	}, [manager, t]);
+	useModuleTerminalCallbacks({
+		status: state.status === "finished" ? "finished" : "loading",
+		onFinish
+	});
+	y(() => {
+		if (!error) return;
+		onError?.(error);
+		signatureRef.current?.on();
+	}, [error, onError]);
+	const resolveTitle = () => {
+		const configuredTitle = config.title?.trim();
+		if (configuredTitle) return configuredTitle;
+		return t("signature.fullSignatureTitle");
+	};
+	const resolveSubtitle = () => {
+		const configuredSubtitle = config.subTitle?.trim();
+		if (configuredSubtitle) return configuredSubtitle;
+		return t("signature.subtitle");
+	};
+	const exportSignatureImage = async () => {
+		const canvasHandle = signatureRef.current;
+		if (!canvasHandle) return void 0;
+		const canvasWithWhiteBackground = canvasHandle.getSignatureWithWhiteBackground();
+		if (!canvasWithWhiteBackground) return void 0;
+		if (config.sendBase64 ?? false) return canvasWithWhiteBackground.toDataURL("image/png").replace(/^data:image\/png;base64,/, "");
+		return canvasHandle.getBlob(canvasWithWhiteBackground);
+	};
+	const handleContinue = async () => {
+		const canvasHandle = signatureRef.current;
+		if (!canvasHandle || state.status !== "capture" || canvasHandle.isEmpty()) return;
+		canvasHandle.off();
+		try {
+			const image = await exportSignatureImage();
+			if (!image) {
+				canvasHandle.on();
+				return;
+			}
+			manager.submit(image);
+		} catch {
+			canvasHandle.on();
+		}
 	};
-	return h.status === "idle" || h.status === "finished" || h.status === "error" ? null : h.status === "success" ? /* @__PURE__ */ s(p, {
+	if (state.status === "idle" || state.status === "finished" || state.status === "error") return null;
+	if (state.status === "success") return /* @__PURE__ */ u(VerificationResult, {
 		status: "success",
-		successTitle: m("signature.successTitle")
-	}) : /* @__PURE__ */ s(d, {
+		successTitle: t("signature.successTitle")
+	});
+	return /* @__PURE__ */ u(Page, {
 		className: "IncodeSignature IncodeSignatureFadeIn",
-		title: T(),
-		subtitle: E(),
-		children: [/* @__PURE__ */ s("div", {
+		title: resolveTitle(),
+		subtitle: resolveSubtitle(),
+		children: [/* @__PURE__ */ u("div", {
 			class: "IncodeSignatureContent",
 			children: [
-				/* @__PURE__ */ s(D, {
-					ref: b,
-					hasDrawing: v,
+				/* @__PURE__ */ u(SignatureCanvas, {
+					ref: signatureRef,
+					hasDrawing,
 					onBeginStroke: () => {
-						y(!0), _.setSignatureValid(!0);
+						setHasDrawing(true);
+						setAnnouncement(t("signature.captured"));
+						manager.setSignatureValid(true);
 					},
-					placeholder: m("signature.fullSignaturePlaceholder"),
-					customBackgroundColor: n.canvasBackgroundColor,
-					customBorderColor: n.canvasBorderColor,
-					customPenColor: n.penColor,
-					customPenStrokeWidth: n.penStrokeWidth
+					placeholder: t("signature.fullSignaturePlaceholder"),
+					ariaLabel: t("signature.canvasAriaLabel"),
+					customBackgroundColor: config.canvasBackgroundColor,
+					customBorderColor: config.canvasBorderColor,
+					customPenColor: config.penColor,
+					customPenStrokeWidth: config.penStrokeWidth
 				}),
-				/* @__PURE__ */ s(u, { size: 8 }),
-				/* @__PURE__ */ s(f, {
+				/* @__PURE__ */ u(Spacer, { size: 8 }),
+				/* @__PURE__ */ u(Button, {
 					variant: "link",
-					disabled: !v || S,
-					onClick: w,
-					children: m("signature.clear")
+					disabled: !hasDrawing || isSubmitting,
+					onClick: clearCanvas,
+					children: t("signature.clear")
+				}),
+				/* @__PURE__ */ u("span", {
+					class: "IncodeSrOnly",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: announcement
 				})
 			]
-		}), /* @__PURE__ */ s("div", {
+		}), /* @__PURE__ */ u("div", {
 			class: "IncodeSignatureButtonContainer",
-			children: /* @__PURE__ */ s(f, {
-				disabled: !C,
-				isLoading: S,
-				onClick: async () => {
-					let e = b.current;
-					if (!(!e || h.status !== "capture" || e.isEmpty())) {
-						e.off();
-						try {
-							let t = await O();
-							if (!t) {
-								e.on();
-								return;
-							}
-							_.submit(t);
-						} catch {
-							e.on();
-						}
-					}
-				},
-				children: m("signature.done")
+			children: /* @__PURE__ */ u(Button, {
+				variant: "primary",
+				disabled: !canContinue,
+				isLoading: isSubmitting,
+				onClick: handleContinue,
+				children: t("signature.done")
 			})
 		})]
 	});
-}, k = ({ config: e, onFinish: t, onError: n }) => /* @__PURE__ */ s(l, { children: e ? /* @__PURE__ */ s(O, {
-	config: e,
-	onFinish: t,
-	onError: n
+};
+var Signature = ({ config, onFinish, onError }) => /* @__PURE__ */ u(IncodeComponent, { children: config ? /* @__PURE__ */ u(SignatureContent, {
+	config,
+	onFinish,
+	onError
 }) : null });
-m(k, "incode-signature");
+registerIncodeModuleElement(Signature, "incode-signature");
 //#endregion
-export { k as Signature };
+export { Signature };