@incodetech/web 0.0.0-dev-20260421-1845b47 → 0.0.0-dev-20260422-96fafd7

package/dist/signature/signature.es.js

@@ -1,18 +1,18 @@
 import { n as e } from "../i18n-ntrVdqVv.js";
-import { _ as t, a as n, d as r, h as i, l as a, p as o, u as s, v as c } from "../vendor-preact-D6SntenC.js";
-import { o as l, t as u } from "../incodeComponent-pGWsrcca.js";
-import { t as d } from "../spacer-DCljE53A.js";
-import { t as f } from "../page-D5Mt-0zn.js";
-import { r as p } from "../typography-B7nxauEL.js";
-import { t as m } from "../button-4-ToV5B_.js";
-import { t as h } from "../successIcon-C4GI_9SU.js";
-import { t as g } from "../incodeModule-BH9gV7jI.js";
-import { t as _ } from "../defineProperty-DB5OmvER.js";
-import { createSignatureManager as v } from "@incodetech/core/signature";
+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, t as l } from "../incodeComponent-pGWsrcca.js";
+import { t as u } from "../spacer-DCljE53A.js";
+import { t as d } from "../page-D5Mt-0zn.js";
+import { r as f } from "../typography-B7nxauEL.js";
+import { t as p } from "../button-4-ToV5B_.js";
+import { t as m } from "../successIcon-C4GI_9SU.js";
+import { t as h } from "../incodeModule-BH9gV7jI.js";
+import { t as g } from "../defineProperty-DB5OmvER.js";
+import { createSignatureManager as _ } from "@incodetech/core/signature";
 //#region ../../node_modules/.pnpm/signature_pad@5.1.3/node_modules/signature_pad/dist/signature_pad.js
-var y = class {
+var v = class {
 	constructor(e, t, n, r) {
-		if (_(this, "x", void 0), _(this, "y", void 0), _(this, "pressure", void 0), _(this, "time", void 0), isNaN(e) || isNaN(t)) throw Error(`Point is invalid: (${e}, ${t})`);
+		if (g(this, "x", void 0), g(this, "y", void 0), g(this, "pressure", void 0), g(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) {
@@ -24,7 +24,7 @@ var y = class {
 	velocityFrom(e) {
 		return this.time === e.time ? 0 : this.distanceTo(e) / (this.time - e.time);
 	}
-}, b = class e {
+}, y = 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;
 	}
@@ -44,8 +44,8 @@ var y = class {
 			y: c.y + f * p
 		}, h = t.x - m.x, g = t.y - m.y;
 		return {
-			c1: new y(s.x + h, s.y + g),
-			c2: new y(c.x + h, c.y + g)
+			c1: new v(s.x + h, s.y + g),
+			c2: new v(c.x + h, c.y + g)
 		};
 	}
 	length() {
@@ -63,9 +63,9 @@ var y = class {
 	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;
 	}
-}, x = class {
+}, b = class {
 	constructor() {
-		_(this, "_et", void 0);
+		g(this, "_et", void 0);
 		try {
 			this._et = new EventTarget();
 		} catch {
@@ -82,7 +82,7 @@ var y = class {
 		this._et.removeEventListener(e, t, n);
 	}
 };
-function S(e, t = 250) {
+function x(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 = []);
 	};
@@ -91,9 +91,9 @@ function S(e, t = 250) {
 		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;
 	};
 }
-var C = class e extends x {
+var S = class e extends b {
 	constructor(t, n = {}) {
-		super(), _(this, "dotSize", void 0), _(this, "minWidth", void 0), _(this, "maxWidth", void 0), _(this, "penColor", void 0), _(this, "minDistance", void 0), _(this, "velocityFilterWeight", void 0), _(this, "compositeOperation", void 0), _(this, "backgroundColor", void 0), _(this, "throttle", void 0), _(this, "canvasContextOptions", void 0), _(this, "_ctx", void 0), _(this, "_drawingStroke", !1), _(this, "_isEmpty", !0), _(this, "_dataUrl", void 0), _(this, "_dataUrlOptions", void 0), _(this, "_lastPoints", []), _(this, "_data", []), _(this, "_lastVelocity", 0), _(this, "_lastWidth", 0), _(this, "_strokeMoveUpdate", void 0), _(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 ? S(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();
+		super(), g(this, "dotSize", void 0), g(this, "minWidth", void 0), g(this, "maxWidth", void 0), g(this, "penColor", void 0), g(this, "minDistance", void 0), g(this, "velocityFilterWeight", void 0), g(this, "compositeOperation", void 0), g(this, "backgroundColor", void 0), g(this, "throttle", void 0), g(this, "canvasContextOptions", void 0), g(this, "_ctx", void 0), g(this, "_drawingStroke", !1), g(this, "_isEmpty", !0), g(this, "_dataUrl", void 0), g(this, "_dataUrlOptions", void 0), g(this, "_lastPoints", []), g(this, "_data", []), g(this, "_lastVelocity", 0), g(this, "_lastWidth", 0), g(this, "_strokeMoveUpdate", void 0), g(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 ? x(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();
 	}
 	clear() {
 		let { _ctx: e, canvas: t } = this;
@@ -295,13 +295,13 @@ var C = class e extends x {
 	}
 	_createPoint(e, t, n) {
 		let r = this.canvas.getBoundingClientRect();
-		return new y(e - r.left, t - r.top, n, (/* @__PURE__ */ new Date()).getTime());
+		return new v(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 = b.fromPoints(n, e);
+			let e = this._calculateCurveWidths(n[1], n[2], t), r = y.fromPoints(n, e);
 			return n.shift(), r;
 		}
 		return null;
@@ -341,7 +341,7 @@ var C = class e extends x {
 		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 y(r.x, r.y, r.pressure, r.time);
+				let r = e[n], a = new v(r.x, r.y, r.pressure, r.time);
 				n === 0 && this._reset(i);
 				let o = this._addPoint(a, i);
 				o && t(o, i);
@@ -370,7 +370,7 @@ var C = class e extends x {
 			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;
 	}
-}, w = (e) => {
+}, C = (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);
@@ -385,174 +385,169 @@ var C = class e extends x {
 		return `#${i(e)}${i(t)}${i(n)}`;
 	}
 	return null;
-}, T = "var(--icon-neutral-800)", E = "#ffffff", D = (e) => {
+}, w = "var(--icon-neutral-800)", T = "#ffffff", E = (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 = E, n.fillRect(0, 0, t.width, t.height), n.drawImage(e, 0, 0), t;
-}, O = (e, t, n) => new Promise((r, i) => {
+	return n.fillStyle = T, n.fillRect(0, 0, t.width, t.height), n.drawImage(e, 0, 0), t;
+}, D = (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);
-}), k = n(({ onBeginStroke: e, hasDrawing: n, placeholder: r, customPenColor: o, customPenStrokeWidth: l, customBackgroundColor: u }, d) => {
-	let f = a(null), p = a(null), m = a(null), h = a(e);
-	h.current = e;
-	let g = i(() => {
-		let e = f.current, t = p.current, n = m.current;
+}), O = 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();
 	}, []);
-	return s(d, () => ({
+	return o(f, () => ({
 		clear: () => {
-			m.current?.clear();
+			h.current?.clear();
 		},
-		isEmpty: () => m.current?.isEmpty() ?? !0,
-		toDataURL: (e = "image/png", t) => m.current?.toDataURL(e, t) ?? "",
-		getCanvas: () => p.current,
-		getSignaturePad: () => m.current,
-		on: () => m.current?.on(),
-		off: () => m.current?.off(),
+		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(),
 		getSignatureWithWhiteBackground: () => {
-			let e = p.current;
-			return e ? D(e) : null;
+			let e = m.current;
+			return e ? E(e) : null;
 		},
-		getBlob: (e = p.current ?? void 0, t = "image/jpeg", n = .92) => e ? O(e, t, n) : Promise.reject(/* @__PURE__ */ Error("No canvas available for getBlob"))
+		getBlob: (e = m.current ?? void 0, t = "image/jpeg", n = .92) => e ? D(e, t, n) : Promise.reject(/* @__PURE__ */ Error("No canvas available for getBlob"))
 	}), []), t(() => {
-		let e = f.current, t = p.current;
+		let e = p.current, t = m.current;
 		if (!e || !t) return;
 		let n = null, r = () => {
 			n === null && (n = requestAnimationFrame(() => {
-				n = null, g();
+				n = null, _();
 			}));
-		}, i = o ?? w(T), a = new C(t, {
+		}, i = c ?? C(w), a = new S(t, {
 			...i ? { penColor: i } : {},
 			...l ? { maxWidth: l } : {}
 		});
-		m.current = a;
-		let s = () => h.current?.();
-		a.addEventListener("beginStroke", s), g();
-		let c = new ResizeObserver(() => {
+		h.current = a;
+		let o = () => g.current?.();
+		a.addEventListener("beginStroke", o), _();
+		let s = new ResizeObserver(() => {
 			r();
 		});
-		return c.observe(e), () => {
-			n !== null && cancelAnimationFrame(n), c.disconnect(), a.removeEventListener("beginStroke", s), a.off(), m.current = null;
+		return s.observe(e), () => {
+			n !== null && cancelAnimationFrame(n), s.disconnect(), a.removeEventListener("beginStroke", o), a.off(), h.current = null;
 		};
 	}, [
-		g,
-		o,
+		_,
+		c,
 		l
-	]), /* @__PURE__ */ c("div", {
+	]), /* @__PURE__ */ s("div", {
 		class: "SignatureCanvasContainer",
-		style: u ? { backgroundColor: u } : void 0,
-		ref: f,
-		children: [/* @__PURE__ */ c("canvas", {
+		style: u || d ? {
+			...u ? { backgroundColor: u } : {},
+			...d ? { borderColor: d } : {}
+		} : void 0,
+		ref: p,
+		children: [/* @__PURE__ */ s("canvas", {
 			class: "SignatureCanvas",
-			ref: p,
-			"aria-label": r
-		}), !n && /* @__PURE__ */ c("p", {
+			ref: m,
+			"aria-label": a
+		}), !n && /* @__PURE__ */ s("p", {
 			class: "SignatureCanvasPlaceholder",
-			children: r
+			children: a
 		})]
 	});
 });
-k.displayName = "SignatureCanvas";
+O.displayName = "SignatureCanvas";
 //#endregion
 //#region src/modules/signature/signature.tsx
-var A = ({ config: n, onFinish: s, onError: u }) => {
-	let { t: g } = e(), [_, y] = l(() => v({ config: n }), { autoLoad: !0 }), [b, x] = o(!1), S = a(null), C = a(void 0), w = r(() => {
-		if (_.status === "capture" || _.status === "submitting") return _.phase;
-	}, [_]), T = _.status === "error" ? _.error : void 0, E = _.status === "submitting", D = _.status === "capture" && _.canContinue && !E, O = i(() => {
-		S.current && (S.current.on(), S.current.clear(), x(!1), y.setSignatureValid(!1));
-	}, [y]);
+var k = ({ config: n, onFinish: o, onError: l }) => {
+	let { t: h } = e(), [g, v] = c(() => _({ config: n }), { autoLoad: !0 }), [y, b] = a(!1), x = i(null), S = g.status === "error" ? g.error : void 0, C = g.status === "submitting", w = g.status === "capture" && g.canContinue && !C, T = r(() => {
+		x.current && (x.current.on(), x.current.clear(), b(!1), v.setSignatureValid(!1));
+	}, [v]);
 	t(() => {
-		_.status === "finished" && s?.();
-	}, [_.status, s]), t(() => {
-		T && (u?.(T), S.current?.on());
-	}, [T, u]), t(() => {
-		let e = C.current;
-		w && e && e !== w && (x(!1), y.setSignatureValid(!1), O()), C.current = w;
-	}, [
-		w,
-		y,
-		O
-	]);
-	let A = (e) => n.title?.trim() || g(e === "initials" ? "signature.initialsTitle" : "signature.fullSignatureTitle"), j = () => n.subTitle?.trim() || g("signature.subtitle"), M = async () => {
-		let e = S.current;
+		g.status === "finished" && o?.();
+	}, [g.status, o]), t(() => {
+		S && (l?.(S), x.current?.on());
+	}, [S, l]);
+	let E = () => n.title?.trim() || h("signature.fullSignatureTitle"), D = () => n.subTitle?.trim() || h("signature.subtitle"), k = async () => {
+		let e = x.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);
 	};
-	return _.status === "idle" || _.status === "finished" || _.status === "error" ? null : _.status === "success" ? /* @__PURE__ */ c(f, {
+	return g.status === "idle" || g.status === "finished" || g.status === "error" ? null : g.status === "success" ? /* @__PURE__ */ s(d, {
 		className: "IncodeSignature IncodeSignatureFadeIn",
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ s("div", {
 			class: "IncodeSignatureContent IncodeSignatureSuccess",
 			role: "status",
 			children: [
-				/* @__PURE__ */ c(h, { size: 48 }),
-				/* @__PURE__ */ c(d, { size: 16 }),
-				/* @__PURE__ */ c(p, { children: g("signature.successTitle") })
+				/* @__PURE__ */ s(m, { size: 48 }),
+				/* @__PURE__ */ s(u, { size: 16 }),
+				/* @__PURE__ */ s(f, { children: h("signature.successTitle") })
 			]
 		})
-	}) : /* @__PURE__ */ c(f, {
+	}) : /* @__PURE__ */ s(d, {
 		className: "IncodeSignature IncodeSignatureFadeIn",
-		title: A(w),
-		subtitle: j(),
-		children: [/* @__PURE__ */ c("div", {
+		title: E(),
+		subtitle: D(),
+		children: [/* @__PURE__ */ s("div", {
 			class: "IncodeSignatureContent",
 			children: [
-				/* @__PURE__ */ c(k, {
-					ref: S,
-					hasDrawing: b,
+				/* @__PURE__ */ s(O, {
+					ref: x,
+					hasDrawing: y,
 					onBeginStroke: () => {
-						x(!0), y.setSignatureValid(!0);
+						b(!0), v.setSignatureValid(!0);
 					},
-					placeholder: g(w === "initials" ? "signature.initialsPlaceholder" : "signature.fullSignaturePlaceholder"),
+					placeholder: h("signature.fullSignaturePlaceholder"),
 					customBackgroundColor: n.canvasBackgroundColor,
+					customBorderColor: n.canvasBorderColor,
 					customPenColor: n.penColor,
 					customPenStrokeWidth: n.penStrokeWidth
 				}),
-				/* @__PURE__ */ c(d, { size: 8 }),
-				/* @__PURE__ */ c(m, {
+				/* @__PURE__ */ s(u, { size: 8 }),
+				/* @__PURE__ */ s(p, {
 					variant: "link",
-					disabled: !b || E,
-					onClick: O,
-					children: g("signature.clear")
+					disabled: !y || C,
+					onClick: T,
+					children: h("signature.clear")
 				})
 			]
-		}), /* @__PURE__ */ c("div", {
+		}), /* @__PURE__ */ s("div", {
 			class: "IncodeSignatureButtonContainer",
-			children: /* @__PURE__ */ c(m, {
-				disabled: !D,
-				isLoading: E,
+			children: /* @__PURE__ */ s(p, {
+				disabled: !w,
+				isLoading: C,
 				onClick: async () => {
-					let e = S.current;
-					if (!(!e || _.status !== "capture" || e.isEmpty())) {
+					let e = x.current;
+					if (!(!e || g.status !== "capture" || e.isEmpty())) {
 						e.off();
 						try {
-							let t = await M();
+							let t = await k();
 							if (!t) {
 								e.on();
 								return;
 							}
-							y.submit(t);
+							v.submit(t);
 						} catch {
 							e.on();
 						}
 					}
 				},
-				children: g(w === "initials" ? "common.continue" : "signature.done")
+				children: h("signature.done")
 			})
 		})]
 	});
-}, j = ({ config: e, onFinish: t, onError: n }) => /* @__PURE__ */ c(u, { children: e ? /* @__PURE__ */ c(A, {
+}, A = ({ config: e, onFinish: t, onError: n }) => /* @__PURE__ */ s(l, { children: e ? /* @__PURE__ */ s(k, {
 	config: e,
 	onFinish: t,
 	onError: n
 }) : null });
-g(j, "incode-signature");
+h(A, "incode-signature");
 //#endregion
-export { j as Signature };
+export { A as Signature };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260421-1845b47",
+  "version": "0.0.0-dev-20260422-96fafd7",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -183,7 +183,7 @@
     "qrcode": "^1.5.4",
     "signature_pad": "^5.1.3",
     "tailwindcss": "^4.1.17",
-    "@incodetech/core": "0.0.0-dev-20260421-1845b47"
+    "@incodetech/core": "0.0.0-dev-20260422-96fafd7"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.53.3",