@incodetech/web 0.0.0-dev-20260402-682edb5 → 0.0.0-dev-20260402-43cf9b8

package/dist/signature/signature.es.js

@@ -1,238 +1,708 @@
-import { u, I as k, b as T, a as D, S as R, B as w } from "../button-DXIWeie9.js";
-import { D as N, A as I, q as E, F as L, y, d as O, T as W } from "../vendor-preact-BoMmvSgn.js";
+var O = Object.defineProperty;
+var L = (o, n, t) => n in o ? O(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
+var g = (o, n, t) => L(o, typeof n != "symbol" ? n + "" : n, t);
+import { u as w, I, b as B, a as A, S as k, B as T } from "../button-DXIWeie9.js";
+import { D as R, A as P, q as W, F, y as E, d as N, T as z } from "../vendor-preact-BoMmvSgn.js";
 import "@incodetech/core";
 import "../uiConfig-DmIn-g8M.js";
-import { P } from "../page-D4OThpFS.js";
-import { r as z } from "../incodeModule-C4XIllao.js";
-import { SignaturePad as M, createSignatureManager as H } from "@incodetech/core/signature";
-import { S as A } from "../successIcon-BZphSsQr.js";
-import { f as U } from "../typography-CBPoLoAP.js";
-const F = (r) => {
+import { P as M } from "../page-D4OThpFS.js";
+import { r as $ } from "../incodeModule-C4XIllao.js";
+import { createSignatureManager as G } from "@incodetech/core/signature";
+import { S as V } from "../successIcon-BZphSsQr.js";
+import { f as q } from "../typography-CBPoLoAP.js";
+var b = class {
+  constructor(o, n, t, e) {
+    g(this, "x");
+    g(this, "y");
+    g(this, "pressure");
+    g(this, "time");
+    if (isNaN(o) || isNaN(n))
+      throw new Error(`Point is invalid: (${o}, ${n})`);
+    this.x = +o, this.y = +n, this.pressure = t || 0, this.time = e || Date.now();
+  }
+  distanceTo(o) {
+    return Math.sqrt(
+      Math.pow(this.x - o.x, 2) + Math.pow(this.y - o.y, 2)
+    );
+  }
+  equals(o) {
+    return this.x === o.x && this.y === o.y && this.pressure === o.pressure && this.time === o.time;
+  }
+  velocityFrom(o) {
+    return this.time !== o.time ? this.distanceTo(o) / (this.time - o.time) : 0;
+  }
+}, H = class D {
+  constructor(n, t, e, i, s, a) {
+    this.startPoint = n, this.control2 = t, this.control1 = e, this.endPoint = i, this.startWidth = s, this.endWidth = a;
+  }
+  static fromPoints(n, t) {
+    const e = this.calculateControlPoints(n[0], n[1], n[2]).c2, i = this.calculateControlPoints(n[1], n[2], n[3]).c1;
+    return new D(n[1], e, i, n[2], t.start, t.end);
+  }
+  static calculateControlPoints(n, t, e) {
+    const i = n.x - t.x, s = n.y - t.y, a = t.x - e.x, l = t.y - e.y, h = { x: (n.x + t.x) / 2, y: (n.y + t.y) / 2 }, c = { x: (t.x + e.x) / 2, y: (t.y + e.y) / 2 }, d = Math.sqrt(i * i + s * s), r = Math.sqrt(a * a + l * l), u = h.x - c.x, f = h.y - c.y, _ = d + r == 0 ? 0 : r / (d + r), v = { x: c.x + u * _, y: c.y + f * _ }, m = t.x - v.x, y = t.y - v.y;
+    return {
+      c1: new b(h.x + m, h.y + y),
+      c2: new b(c.x + m, c.y + y)
+    };
+  }
+  // Returns approximated length. Code taken from https://www.lemoda.net/maths/bezier-length/index.html.
+  length() {
+    let t = 0, e, i;
+    for (let s = 0; s <= 10; s += 1) {
+      const a = s / 10, l = this.point(
+        a,
+        this.startPoint.x,
+        this.control1.x,
+        this.control2.x,
+        this.endPoint.x
+      ), h = this.point(
+        a,
+        this.startPoint.y,
+        this.control1.y,
+        this.control2.y,
+        this.endPoint.y
+      );
+      if (s > 0) {
+        const c = l - e, d = h - i;
+        t += Math.sqrt(c * c + d * d);
+      }
+      e = l, i = h;
+    }
+    return t;
+  }
+  // Calculate parametric value of x or y given t and the four point coordinates of a cubic bezier curve.
+  point(n, t, e, i, s) {
+    return t * (1 - n) * (1 - n) * (1 - n) + 3 * e * (1 - n) * (1 - n) * n + 3 * i * (1 - n) * n * n + s * n * n * n;
+  }
+}, j = class {
+  /* tslint:enable: variable-name */
+  constructor() {
+    /* tslint:disable: variable-name */
+    g(this, "_et");
+    try {
+      this._et = new EventTarget();
+    } catch {
+      this._et = document;
+    }
+  }
+  addEventListener(o, n, t) {
+    this._et.addEventListener(o, n, t);
+  }
+  dispatchEvent(o) {
+    return this._et.dispatchEvent(o);
+  }
+  removeEventListener(o, n, t) {
+    this._et.removeEventListener(o, n, t);
+  }
+};
+function X(o, n = 250) {
+  let t = 0, e = null, i, s, a;
+  const l = () => {
+    t = Date.now(), e = null, i = o.apply(s, a), e || (s = null, a = []);
+  };
+  return function(...c) {
+    const d = Date.now(), r = n - (d - t);
+    return s = this, a = c, r <= 0 || r > n ? (e && (clearTimeout(e), e = null), t = d, i = o.apply(s, a), e || (s = null, a = [])) : e || (e = window.setTimeout(l, r)), i;
+  };
+}
+var Y = class C extends j {
+  /* tslint:enable: variable-name */
+  constructor(t, e = {}) {
+    super();
+    // Public stuff
+    g(this, "dotSize");
+    g(this, "minWidth");
+    g(this, "maxWidth");
+    g(this, "penColor");
+    g(this, "minDistance");
+    g(this, "velocityFilterWeight");
+    g(this, "compositeOperation");
+    g(this, "backgroundColor");
+    g(this, "throttle");
+    g(this, "canvasContextOptions");
+    // Private stuff
+    /* tslint:disable: variable-name */
+    g(this, "_ctx");
+    g(this, "_drawingStroke", !1);
+    g(this, "_isEmpty", !0);
+    g(this, "_dataUrl");
+    g(this, "_dataUrlOptions");
+    g(this, "_lastPoints", []);
+    // Stores up to 4 most recent points; used to generate a new curve
+    g(this, "_data", []);
+    // Stores all points in groups (one group per line or dot)
+    g(this, "_lastVelocity", 0);
+    g(this, "_lastWidth", 0);
+    g(this, "_strokeMoveUpdate");
+    g(this, "_strokePointerId");
+    this.canvas = t, this.velocityFilterWeight = e.velocityFilterWeight || 0.7, this.minWidth = e.minWidth || 0.5, this.maxWidth = e.maxWidth || 2.5, this.throttle = e.throttle ?? 16, this.minDistance = e.minDistance ?? 5, this.dotSize = e.dotSize || 0, this.penColor = e.penColor || "black", this.backgroundColor = e.backgroundColor || "rgba(0,0,0,0)", this.compositeOperation = e.compositeOperation || "source-over", this.canvasContextOptions = e.canvasContextOptions ?? {}, this._strokeMoveUpdate = this.throttle ? X(C.prototype._strokeUpdate, this.throttle) : C.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() {
+    const { _ctx: t, canvas: e } = this;
+    t.fillStyle = this.backgroundColor, t.clearRect(0, 0, e.width, e.height), t.fillRect(0, 0, e.width, e.height), this._data = [], this._reset(this._getPointGroupOptions()), this._isEmpty = !0, this._dataUrl = void 0, this._dataUrlOptions = void 0, this._strokePointerId = void 0;
+  }
+  redraw() {
+    const t = this._data, e = this._dataUrl, i = this._dataUrlOptions;
+    this.clear(), e && this.fromDataURL(e, i), this.fromData(t, { clear: !1 });
+  }
+  fromDataURL(t, e = {}) {
+    return new Promise((i, s) => {
+      const a = new Image(), l = e.ratio || window.devicePixelRatio || 1, h = e.width || this.canvas.width / l, c = e.height || this.canvas.height / l, d = e.xOffset || 0, r = e.yOffset || 0;
+      this._reset(this._getPointGroupOptions()), a.onload = () => {
+        this._ctx.drawImage(a, d, r, h, c), i();
+      }, a.onerror = (u) => {
+        s(u);
+      }, a.crossOrigin = "anonymous", a.src = t, this._isEmpty = !1, this._dataUrl = t, this._dataUrlOptions = { ...e };
+    });
+  }
+  toDataURL(t = "image/png", e) {
+    switch (t) {
+      case "image/svg+xml":
+        return typeof e != "object" && (e = void 0), `data:image/svg+xml;base64,${btoa(
+          this.toSVG(e)
+        )}`;
+      default:
+        return typeof e != "number" && (e = void 0), this.canvas.toDataURL(t, e);
+    }
+  }
+  on() {
+    this.canvas.style.touchAction = "none", this.canvas.style.msTouchAction = "none", this.canvas.style.userSelect = "none", this.canvas.style.webkitUserSelect = "none";
+    const t = /Macintosh/.test(navigator.userAgent) && "ontouchstart" in document;
+    window.PointerEvent && !t ? this._handlePointerEvents() : (this._handleMouseEvents(), "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();
+  }
+  _getListenerFunctions() {
+    const t = window.document === this.canvas.ownerDocument ? window : this.canvas.ownerDocument.defaultView ?? this.canvas.ownerDocument;
+    return {
+      addEventListener: t.addEventListener.bind(
+        t
+      ),
+      removeEventListener: t.removeEventListener.bind(
+        t
+      )
+    };
+  }
+  _removeMoveUpEventListeners() {
+    const { removeEventListener: t } = this._getListenerFunctions();
+    t("pointermove", this._handlePointerMove), t("pointerup", this._handlePointerUp), t("pointercancel", this._handlePointerCancel), t("mousemove", this._handleMouseMove), t("mouseup", this._handleMouseUp), t("touchmove", this._handleTouchMove), t("touchend", this._handleTouchEnd), t("touchcancel", this._handleTouchCancel);
+  }
+  isEmpty() {
+    return this._isEmpty;
+  }
+  fromData(t, { clear: e = !0 } = {}) {
+    e && this.clear(), this._fromData(
+      t,
+      this._drawCurve.bind(this),
+      this._drawDot.bind(this)
+    ), this._data = this._data.concat(t);
+  }
+  toData() {
+    return this._data;
+  }
+  _isLeftButtonPressed(t, e) {
+    return e ? t.buttons === 1 : (t.buttons & 1) === 1;
+  }
+  _pointerEventToSignatureEvent(t) {
+    return {
+      event: t,
+      type: t.type,
+      x: t.clientX,
+      y: t.clientY,
+      pressure: "pressure" in t ? t.pressure : 0
+    };
+  }
+  _touchEventToSignatureEvent(t) {
+    const e = t.changedTouches[0];
+    return {
+      event: t,
+      type: t.type,
+      x: e.clientX,
+      y: e.clientY,
+      pressure: e.force
+    };
+  }
+  // Event handlers
+  _handleMouseDown(t) {
+    !this._isLeftButtonPressed(t, !0) || this._drawingStroke || this._strokeBegin(this._pointerEventToSignatureEvent(t));
+  }
+  _handleMouseMove(t) {
+    if (!this._isLeftButtonPressed(t, !0) || !this._drawingStroke) {
+      this._strokeEnd(this._pointerEventToSignatureEvent(t), !1);
+      return;
+    }
+    this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t));
+  }
+  _handleMouseUp(t) {
+    this._isLeftButtonPressed(t) || this._strokeEnd(this._pointerEventToSignatureEvent(t));
+  }
+  _handleTouchStart(t) {
+    t.targetTouches.length !== 1 || this._drawingStroke || (t.cancelable && t.preventDefault(), this._strokeBegin(this._touchEventToSignatureEvent(t)));
+  }
+  _handleTouchMove(t) {
+    if (t.targetTouches.length === 1) {
+      if (t.cancelable && t.preventDefault(), !this._drawingStroke) {
+        this._strokeEnd(this._touchEventToSignatureEvent(t), !1);
+        return;
+      }
+      this._strokeMoveUpdate(this._touchEventToSignatureEvent(t));
+    }
+  }
+  _handleTouchEnd(t) {
+    t.targetTouches.length === 0 && (t.cancelable && t.preventDefault(), this._strokeEnd(this._touchEventToSignatureEvent(t)));
+  }
+  _handlePointerCancel(t) {
+    this._allowPointerId(t) && (t.preventDefault(), this._strokeEnd(this._pointerEventToSignatureEvent(t), !1));
+  }
+  _handleTouchCancel(t) {
+    t.cancelable && t.preventDefault(), this._strokeEnd(this._touchEventToSignatureEvent(t), !1);
+  }
+  _getPointerId(t) {
+    return t.persistentDeviceId || t.pointerId;
+  }
+  _allowPointerId(t, e = !1) {
+    return typeof this._strokePointerId > "u" ? e : this._getPointerId(t) === this._strokePointerId;
+  }
+  _handlePointerDown(t) {
+    this._drawingStroke || !this._isLeftButtonPressed(t) || !this._allowPointerId(t, !0) || (this._strokePointerId = this._getPointerId(t), t.preventDefault(), this._strokeBegin(this._pointerEventToSignatureEvent(t)));
+  }
+  _handlePointerMove(t) {
+    if (this._allowPointerId(t)) {
+      if (!this._isLeftButtonPressed(t, !0) || !this._drawingStroke) {
+        this._strokeEnd(this._pointerEventToSignatureEvent(t), !1);
+        return;
+      }
+      t.preventDefault(), this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t));
+    }
+  }
+  _handlePointerUp(t) {
+    this._isLeftButtonPressed(t) || !this._allowPointerId(t) || (t.preventDefault(), this._strokeEnd(this._pointerEventToSignatureEvent(t)));
+  }
+  _getPointGroupOptions(t) {
+    return {
+      penColor: t && "penColor" in t ? t.penColor : this.penColor,
+      dotSize: t && "dotSize" in t ? t.dotSize : this.dotSize,
+      minWidth: t && "minWidth" in t ? t.minWidth : this.minWidth,
+      maxWidth: t && "maxWidth" in t ? t.maxWidth : this.maxWidth,
+      velocityFilterWeight: t && "velocityFilterWeight" in t ? t.velocityFilterWeight : this.velocityFilterWeight,
+      compositeOperation: t && "compositeOperation" in t ? t.compositeOperation : this.compositeOperation
+    };
+  }
+  // Private methods
+  _strokeBegin(t) {
+    if (!this.dispatchEvent(
+      new CustomEvent("beginStroke", { detail: t, cancelable: !0 })
+    ))
+      return;
+    const { addEventListener: i } = this._getListenerFunctions();
+    switch (t.event.type) {
+      case "mousedown":
+        i("mousemove", this._handleMouseMove, {
+          passive: !1
+        }), i("mouseup", this._handleMouseUp, { passive: !1 });
+        break;
+      case "touchstart":
+        i("touchmove", this._handleTouchMove, {
+          passive: !1
+        }), i("touchend", this._handleTouchEnd, { passive: !1 }), i("touchcancel", this._handleTouchCancel, { passive: !1 });
+        break;
+      case "pointerdown":
+        i("pointermove", this._handlePointerMove, {
+          passive: !1
+        }), i("pointerup", this._handlePointerUp, {
+          passive: !1
+        }), i("pointercancel", this._handlePointerCancel, {
+          passive: !1
+        });
+        break;
+    }
+    this._drawingStroke = !0;
+    const s = this._getPointGroupOptions(), a = {
+      ...s,
+      points: []
+    };
+    this._data.push(a), this._reset(s), this._strokeUpdate(t);
+  }
+  _strokeUpdate(t) {
+    if (!this._drawingStroke)
+      return;
+    if (this._data.length === 0) {
+      this._strokeBegin(t);
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("beforeUpdateStroke", { detail: t })
+    );
+    const e = this._createPoint(t.x, t.y, t.pressure), i = this._data[this._data.length - 1], s = i.points, a = s.length > 0 && s[s.length - 1], l = a ? e.distanceTo(a) <= this.minDistance : !1, h = this._getPointGroupOptions(i);
+    if (!a || !(a && l)) {
+      const c = this._addPoint(e, h);
+      a ? c && this._drawCurve(c, h) : this._drawDot(e, h), s.push({
+        time: e.time,
+        x: e.x,
+        y: e.y,
+        pressure: e.pressure
+      });
+    }
+    this.dispatchEvent(new CustomEvent("afterUpdateStroke", { detail: t }));
+  }
+  _strokeEnd(t, e = !0) {
+    this._removeMoveUpEventListeners(), this._drawingStroke && (e && this._strokeUpdate(t), this._drawingStroke = !1, this._strokePointerId = void 0, this.dispatchEvent(new CustomEvent("endStroke", { detail: t })));
+  }
+  _handlePointerEvents() {
+    this._drawingStroke = !1, this.canvas.addEventListener("pointerdown", this._handlePointerDown, {
+      passive: !1
+    });
+  }
+  _handleMouseEvents() {
+    this._drawingStroke = !1, this.canvas.addEventListener("mousedown", this._handleMouseDown, {
+      passive: !1
+    });
+  }
+  _handleTouchEvents() {
+    this.canvas.addEventListener("touchstart", this._handleTouchStart, {
+      passive: !1
+    });
+  }
+  // Called when a new line is started
+  _reset(t) {
+    this._lastPoints = [], this._lastVelocity = 0, this._lastWidth = (t.minWidth + t.maxWidth) / 2, this._ctx.fillStyle = t.penColor, this._ctx.globalCompositeOperation = t.compositeOperation;
+  }
+  _createPoint(t, e, i) {
+    const s = this.canvas.getBoundingClientRect();
+    return new b(
+      t - s.left,
+      e - s.top,
+      i,
+      (/* @__PURE__ */ new Date()).getTime()
+    );
+  }
+  // Add point to _lastPoints array and generate a new curve if there are enough points (i.e. 3)
+  _addPoint(t, e) {
+    const { _lastPoints: i } = this;
+    if (i.push(t), i.length > 2) {
+      i.length === 3 && i.unshift(i[0]);
+      const s = this._calculateCurveWidths(
+        i[1],
+        i[2],
+        e
+      ), a = H.fromPoints(i, s);
+      return i.shift(), a;
+    }
+    return null;
+  }
+  _calculateCurveWidths(t, e, i) {
+    const s = i.velocityFilterWeight * e.velocityFrom(t) + (1 - i.velocityFilterWeight) * this._lastVelocity, a = this._strokeWidth(s, i), l = {
+      end: a,
+      start: this._lastWidth
+    };
+    return this._lastVelocity = s, this._lastWidth = a, l;
+  }
+  _strokeWidth(t, e) {
+    return Math.max(e.maxWidth / (t + 1), e.minWidth);
+  }
+  _drawCurveSegment(t, e, i) {
+    const s = this._ctx;
+    s.moveTo(t, e), s.arc(t, e, i, 0, 2 * Math.PI, !1), this._isEmpty = !1;
+  }
+  _drawCurve(t, e) {
+    const i = this._ctx, s = t.endWidth - t.startWidth, a = Math.ceil(t.length()) * 2;
+    i.beginPath(), i.fillStyle = e.penColor;
+    for (let l = 0; l < a; l += 1) {
+      const h = l / a, c = h * h, d = c * h, r = 1 - h, u = r * r, f = u * r;
+      let _ = f * t.startPoint.x;
+      _ += 3 * u * h * t.control1.x, _ += 3 * r * c * t.control2.x, _ += d * t.endPoint.x;
+      let v = f * t.startPoint.y;
+      v += 3 * u * h * t.control1.y, v += 3 * r * c * t.control2.y, v += d * t.endPoint.y;
+      const m = Math.min(
+        t.startWidth + d * s,
+        e.maxWidth
+      );
+      this._drawCurveSegment(_, v, m);
+    }
+    i.closePath(), i.fill();
+  }
+  _drawDot(t, e) {
+    const i = this._ctx, s = e.dotSize > 0 ? e.dotSize : (e.minWidth + e.maxWidth) / 2;
+    i.beginPath(), this._drawCurveSegment(t.x, t.y, s), i.closePath(), i.fillStyle = e.penColor, i.fill();
+  }
+  _fromData(t, e, i) {
+    for (const s of t) {
+      const { points: a } = s, l = this._getPointGroupOptions(s);
+      if (a.length > 1)
+        for (let h = 0; h < a.length; h += 1) {
+          const c = a[h], d = new b(
+            c.x,
+            c.y,
+            c.pressure,
+            c.time
+          );
+          h === 0 && this._reset(l);
+          const r = this._addPoint(d, l);
+          r && e(r, l);
+        }
+      else
+        this._reset(l), i(a[0], l);
+    }
+  }
+  toSVG({ includeBackgroundColor: t = !1, includeDataUrl: e = !1 } = {}) {
+    const i = this._data, s = Math.max(window.devicePixelRatio || 1, 1), a = 0, l = 0, h = this.canvas.width / s, c = this.canvas.height / s, d = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    if (d.setAttribute("xmlns", "http://www.w3.org/2000/svg"), d.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"), d.setAttribute("viewBox", `${a} ${l} ${h} ${c}`), d.setAttribute("width", h.toString()), d.setAttribute("height", c.toString()), t && this.backgroundColor) {
+      const r = document.createElement("rect");
+      r.setAttribute("width", "100%"), r.setAttribute("height", "100%"), r.setAttribute("fill", this.backgroundColor), d.appendChild(r);
+    }
+    if (e && this._dataUrl) {
+      const r = this._dataUrlOptions?.ratio || window.devicePixelRatio || 1, u = this._dataUrlOptions?.width || this.canvas.width / r, f = this._dataUrlOptions?.height || this.canvas.height / r, _ = this._dataUrlOptions?.xOffset || 0, v = this._dataUrlOptions?.yOffset || 0, m = document.createElement("image");
+      m.setAttribute("x", _.toString()), m.setAttribute("y", v.toString()), m.setAttribute("width", u.toString()), m.setAttribute("height", f.toString()), m.setAttribute("preserveAspectRatio", "none"), m.setAttribute("href", this._dataUrl), d.appendChild(m);
+    }
+    return this._fromData(
+      i,
+      (r, { penColor: u }) => {
+        const f = document.createElement("path");
+        if (!isNaN(r.control1.x) && !isNaN(r.control1.y) && !isNaN(r.control2.x) && !isNaN(r.control2.y)) {
+          const _ = `M ${r.startPoint.x.toFixed(3)},${r.startPoint.y.toFixed(
+            3
+          )} C ${r.control1.x.toFixed(3)},${r.control1.y.toFixed(3)} ${r.control2.x.toFixed(3)},${r.control2.y.toFixed(3)} ${r.endPoint.x.toFixed(3)},${r.endPoint.y.toFixed(3)}`;
+          f.setAttribute("d", _), f.setAttribute("stroke-width", (r.endWidth * 2.25).toFixed(3)), f.setAttribute("stroke", u), f.setAttribute("fill", "none"), f.setAttribute("stroke-linecap", "round"), d.appendChild(f);
+        }
+      },
+      (r, { penColor: u, dotSize: f, minWidth: _, maxWidth: v }) => {
+        const m = document.createElement("circle"), y = f > 0 ? f : (_ + v) / 2;
+        m.setAttribute("r", y.toString()), m.setAttribute("cx", r.x.toString()), m.setAttribute("cy", r.y.toString()), m.setAttribute("fill", u), d.appendChild(m);
+      }
+    ), d.outerHTML;
+  }
+};
+const K = (o) => {
   if (typeof document > "u") return null;
-  const e = document.createElement("div");
-  e.style.color = r, e.style.position = "absolute", e.style.visibility = "hidden", document.body.appendChild(e);
-  const a = getComputedStyle(e).color;
-  if (document.body.removeChild(e), !a || a === "transparent") return null;
-  const s = a.match(/\d+/g);
-  if (s && s.length >= 3) {
-    const t = Number.parseInt(s[0], 10), d = Number.parseInt(s[1], 10), C = Number.parseInt(s[2], 10), m = (c) => {
-      const l = c.toString(16);
-      return l.length === 1 ? `0${l}` : l;
+  const n = document.createElement("div");
+  n.style.color = o, n.style.position = "absolute", n.style.visibility = "hidden", document.body.appendChild(n);
+  const t = getComputedStyle(n).color;
+  if (document.body.removeChild(n), !t || t === "transparent") return null;
+  const e = t.match(/\d+/g);
+  if (e && e.length >= 3) {
+    const i = Number.parseInt(e[0], 10), s = Number.parseInt(e[1], 10), a = Number.parseInt(e[2], 10), l = (h) => {
+      const c = h.toString(16);
+      return c.length === 1 ? `0${c}` : c;
     };
-    return `#${m(t)}${m(d)}${m(C)}`;
+    return `#${l(i)}${l(s)}${l(a)}`;
   }
   return null;
-}, V = "var(--icon-neutral-800)", _ = "#ffffff", $ = (r) => {
-  const e = document.createElement("canvas");
-  e.width = r.width, e.height = r.height;
-  const a = e.getContext("2d");
-  if (!a)
+}, J = "var(--icon-neutral-800)", Q = "#ffffff", Z = (o) => {
+  const n = document.createElement("canvas");
+  n.width = o.width, n.height = o.height;
+  const t = n.getContext("2d");
+  if (!t)
     throw new Error("Canvas 2D context is not available");
-  return a.fillStyle = _, a.fillRect(0, 0, e.width, e.height), a.drawImage(r, 0, 0), e;
-}, j = (r, e, a) => new Promise((s, t) => {
-  r.toBlob(
-    (d) => {
-      d ? s(d) : t(new Error("Canvas toBlob() returned null"));
+  return t.fillStyle = Q, t.fillRect(0, 0, n.width, n.height), t.drawImage(o, 0, 0), n;
+}, tt = (o, n, t) => new Promise((e, i) => {
+  o.toBlob(
+    (s) => {
+      s ? e(s) : i(new Error("Canvas toBlob() returned null"));
     },
-    e,
-    e === "image/jpeg" || e === "image/webp" ? a : void 0
+    n,
+    n === "image/jpeg" || n === "image/webp" ? t : void 0
   );
-}), x = N(
+}), U = R(
   ({
-    onBeginStroke: r,
-    hasDrawing: e,
-    placeholder: a,
-    customPenColor: s,
-    customPenStrokeWidth: t,
-    customBackgroundColor: d
-  }, C) => {
-    const m = I(null), c = I(null), l = I(null), h = I(r);
-    h.current = r;
-    const S = E(() => {
-      const i = m.current, g = c.current, o = l.current;
-      if (!i || !g || !o) return;
-      const p = Math.max(window.devicePixelRatio || 1, 1), b = g.getContext("2d"), { width: B, height: v } = i.getBoundingClientRect();
-      if (B === 0 || v === 0 || !b) return;
-      const n = o.isEmpty() ? null : o.toData();
-      g.width = Math.floor(B * p), g.height = Math.floor(v * p), b.setTransform(p, 0, 0, p, 0, 0), n ? o.fromData(n, { clear: !0 }) : o.clear();
+    onBeginStroke: o,
+    hasDrawing: n,
+    placeholder: t,
+    customPenColor: e,
+    customPenStrokeWidth: i,
+    customBackgroundColor: s
+  }, a) => {
+    const l = P(null), h = P(null), c = P(null), d = P(o);
+    d.current = o;
+    const r = W(() => {
+      const u = l.current, f = h.current, _ = c.current;
+      if (!u || !f || !_) return;
+      const v = Math.max(window.devicePixelRatio || 1, 1), m = f.getContext("2d"), { width: y, height: S } = u.getBoundingClientRect();
+      if (y === 0 || S === 0 || !m) return;
+      const p = _.isEmpty() ? null : _.toData();
+      f.width = Math.floor(y * v), f.height = Math.floor(S * v), m.setTransform(v, 0, 0, v, 0, 0), p ? _.fromData(p, { clear: !0 }) : _.clear();
     }, []);
-    return L(
-      C,
+    return F(
+      a,
       () => ({
         clear: () => {
-          l.current?.clear();
+          c.current?.clear();
         },
-        isEmpty: () => l.current?.isEmpty() ?? !0,
-        toDataURL: (i = "image/png", g) => l.current?.toDataURL(i, g) ?? "",
-        getCanvas: () => c.current,
-        getSignaturePad: () => l.current,
-        on: () => l.current?.on(),
-        off: () => l.current?.off(),
+        isEmpty: () => c.current?.isEmpty() ?? !0,
+        toDataURL: (u = "image/png", f) => c.current?.toDataURL(u, f) ?? "",
+        getCanvas: () => h.current,
+        getSignaturePad: () => c.current,
+        on: () => c.current?.on(),
+        off: () => c.current?.off(),
         getSignatureWithWhiteBackground: () => {
-          const i = c.current;
-          return i ? $(i) : null;
+          const u = h.current;
+          return u ? Z(u) : null;
         },
-        getBlob: (i = c.current ?? void 0, g = "image/jpeg", o = 0.92) => i ? j(i, g, o) : Promise.reject(new Error("No canvas available for getBlob"))
+        getBlob: (u = h.current ?? void 0, f = "image/jpeg", _ = 0.92) => u ? tt(u, f, _) : Promise.reject(new Error("No canvas available for getBlob"))
       }),
       []
-    ), y(() => {
-      const i = m.current, g = c.current;
-      if (!i || !g) return;
-      let o = null;
-      const p = () => {
-        o === null && (o = requestAnimationFrame(() => {
-          o = null, S();
+    ), E(() => {
+      const u = l.current, f = h.current;
+      if (!u || !f) return;
+      let _ = null;
+      const v = () => {
+        _ === null && (_ = requestAnimationFrame(() => {
+          _ = null, r();
         }));
-      }, b = s ?? F(V), B = {
-        ...b ? { penColor: b } : {},
-        ...t ? { maxWidth: t } : {}
-      }, v = new M(g, B);
-      l.current = v;
-      const n = () => h.current?.();
-      v.addEventListener("beginStroke", n), S();
-      const f = new ResizeObserver(() => {
-        p();
+      }, m = e ?? K(J), y = {
+        ...m ? { penColor: m } : {},
+        ...i ? { maxWidth: i } : {}
+      }, S = new Y(f, y);
+      c.current = S;
+      const p = () => d.current?.();
+      S.addEventListener("beginStroke", p), r();
+      const x = new ResizeObserver(() => {
+        v();
       });
-      return f.observe(i), () => {
-        o !== null && cancelAnimationFrame(o), f.disconnect(), v.removeEventListener("beginStroke", n), v.off(), l.current = null;
+      return x.observe(u), () => {
+        _ !== null && cancelAnimationFrame(_), x.disconnect(), S.removeEventListener("beginStroke", p), S.off(), c.current = null;
       };
-    }, [S, s, t]), /* @__PURE__ */ u(
+    }, [r, e, i]), /* @__PURE__ */ w(
       "div",
       {
         class: "SignatureCanvasContainer",
-        style: d ? { backgroundColor: d } : void 0,
-        ref: m,
+        style: s ? { backgroundColor: s } : void 0,
+        ref: l,
         children: [
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ w(
             "canvas",
             {
               class: "SignatureCanvas",
-              ref: c,
-              "aria-label": a
+              ref: h,
+              "aria-label": t
             }
           ),
-          !e && /* @__PURE__ */ u("p", { class: "SignatureCanvasPlaceholder", children: a })
+          !n && /* @__PURE__ */ w("p", { class: "SignatureCanvasPlaceholder", children: t })
         ]
       }
     );
   }
 );
-x.displayName = "SignatureCanvas";
-const q = ({
-  config: r,
-  onFinish: e,
-  onError: a
+U.displayName = "SignatureCanvas";
+const et = ({
+  config: o,
+  onFinish: n,
+  onError: t
 }) => {
-  const { t: s } = T(), [t, d] = D(
-    () => H({ config: r }),
+  const { t: e } = B(), [i, s] = A(
+    () => G({ config: o }),
     { autoLoad: !0 }
-  ), [C, m] = O(!1), c = I(null), l = I(void 0), h = W(() => {
-    if (t.status === "capture" || t.status === "submitting")
-      return t.phase;
-  }, [t]), S = t.status === "error" ? t.error : void 0, i = t.status === "submitting", g = t.status === "capture" && t.canContinue && !i, o = E(() => {
-    c.current && (c.current.on(), c.current.clear(), m(!1), d.setSignatureValid(!1));
-  }, [d]);
-  y(() => {
-    t.status === "finished" && e?.();
-  }, [t.status, e]), y(() => {
-    S && (a?.(S), c.current?.on());
-  }, [S, a]), y(() => {
-    const n = l.current;
-    h && n && n !== h && (m(!1), d.setSignatureValid(!1), o()), l.current = h;
-  }, [h, d, o]);
-  const p = (n) => {
-    const f = r.title?.trim();
-    return f || s(n === "initials" ? "signature.initialsTitle" : "signature.fullSignatureTitle");
-  }, b = () => {
-    const n = r.subtitle?.trim();
-    return n || s("signature.subtitle");
-  }, B = async () => {
-    const n = c.current;
-    if (!n) return;
-    const f = n.getSignatureWithWhiteBackground();
-    return f ? r.sendBase64 ?? !1 ? f.toDataURL("image/png").replace(/^data:image\/png;base64,/, "") : n.getBlob(f) : void 0;
-  }, v = async () => {
-    const n = c.current;
-    if (!(!n || t.status !== "capture" || n.isEmpty())) {
-      n.off();
+  ), [a, l] = N(!1), h = P(null), c = P(void 0), d = z(() => {
+    if (i.status === "capture" || i.status === "submitting")
+      return i.phase;
+  }, [i]), r = i.status === "error" ? i.error : void 0, u = i.status === "submitting", f = i.status === "capture" && i.canContinue && !u, _ = W(() => {
+    h.current && (h.current.on(), h.current.clear(), l(!1), s.setSignatureValid(!1));
+  }, [s]);
+  E(() => {
+    i.status === "finished" && n?.();
+  }, [i.status, n]), E(() => {
+    r && (t?.(r), h.current?.on());
+  }, [r, t]), E(() => {
+    const p = c.current;
+    d && p && p !== d && (l(!1), s.setSignatureValid(!1), _()), c.current = d;
+  }, [d, s, _]);
+  const v = (p) => {
+    const x = o.title?.trim();
+    return x || e(p === "initials" ? "signature.initialsTitle" : "signature.fullSignatureTitle");
+  }, m = () => {
+    const p = o.subtitle?.trim();
+    return p || e("signature.subtitle");
+  }, y = async () => {
+    const p = h.current;
+    if (!p) return;
+    const x = p.getSignatureWithWhiteBackground();
+    return x ? o.sendBase64 ?? !1 ? x.toDataURL("image/png").replace(/^data:image\/png;base64,/, "") : p.getBlob(x) : void 0;
+  }, S = async () => {
+    const p = h.current;
+    if (!(!p || i.status !== "capture" || p.isEmpty())) {
+      p.off();
       try {
-        const f = await B();
-        if (!f) {
-          n.on();
+        const x = await y();
+        if (!x) {
+          p.on();
           return;
         }
-        d.submit(f);
+        s.submit(x);
       } catch {
-        n.on();
+        p.on();
       }
     }
   };
-  return t.status === "idle" || t.status === "finished" || t.status === "error" ? null : t.status === "success" ? /* @__PURE__ */ u(P, { className: "IncodeSignature IncodeSignatureFadeIn", children: /* @__PURE__ */ u(
+  return i.status === "idle" || i.status === "finished" || i.status === "error" ? null : i.status === "success" ? /* @__PURE__ */ w(M, { className: "IncodeSignature IncodeSignatureFadeIn", children: /* @__PURE__ */ w(
     "div",
     {
       class: "IncodeSignatureContent IncodeSignatureSuccess",
       role: "status",
       children: [
-        /* @__PURE__ */ u(A, { size: 48 }),
-        /* @__PURE__ */ u(R, { size: 16 }),
-        /* @__PURE__ */ u(U, { children: s("signature.successTitle") })
+        /* @__PURE__ */ w(V, { size: 48 }),
+        /* @__PURE__ */ w(k, { size: 16 }),
+        /* @__PURE__ */ w(q, { children: e("signature.successTitle") })
       ]
     }
-  ) }) : /* @__PURE__ */ u(
-    P,
+  ) }) : /* @__PURE__ */ w(
+    M,
     {
       className: "IncodeSignature IncodeSignatureFadeIn",
-      title: p(h),
-      subtitle: b(),
+      title: v(d),
+      subtitle: m(),
       children: [
-        /* @__PURE__ */ u("div", { class: "IncodeSignatureContent", children: [
-          /* @__PURE__ */ u(
-            x,
+        /* @__PURE__ */ w("div", { class: "IncodeSignatureContent", children: [
+          /* @__PURE__ */ w(
+            U,
             {
-              ref: c,
-              hasDrawing: C,
+              ref: h,
+              hasDrawing: a,
               onBeginStroke: () => {
-                m(!0), d.setSignatureValid(!0);
+                l(!0), s.setSignatureValid(!0);
               },
-              placeholder: s(
-                h === "initials" ? "signature.initialsPlaceholder" : "signature.fullSignaturePlaceholder"
+              placeholder: e(
+                d === "initials" ? "signature.initialsPlaceholder" : "signature.fullSignaturePlaceholder"
               ),
-              customBackgroundColor: r.canvasBackgroundColor,
-              customPenColor: r.penColor,
-              customPenStrokeWidth: r.penStrokeWidth
+              customBackgroundColor: o.canvasBackgroundColor,
+              customPenColor: o.penColor,
+              customPenStrokeWidth: o.penStrokeWidth
             }
           ),
-          /* @__PURE__ */ u(R, { size: 8 }),
-          /* @__PURE__ */ u(
-            w,
+          /* @__PURE__ */ w(k, { size: 8 }),
+          /* @__PURE__ */ w(
+            T,
             {
               variant: "link",
-              disabled: !C || i,
-              onClick: o,
-              children: s("signature.clear")
+              disabled: !a || u,
+              onClick: _,
+              children: e("signature.clear")
             }
           )
         ] }),
-        /* @__PURE__ */ u("div", { class: "IncodeSignatureButtonContainer", children: /* @__PURE__ */ u(
-          w,
+        /* @__PURE__ */ w("div", { class: "IncodeSignatureButtonContainer", children: /* @__PURE__ */ w(
+          T,
           {
-            disabled: !g,
-            isLoading: i,
-            onClick: v,
-            children: s(
-              h === "initials" ? "common.continue" : "signature.done"
+            disabled: !f,
+            isLoading: u,
+            onClick: S,
+            children: e(
+              d === "initials" ? "common.continue" : "signature.done"
             )
           }
         ) })
       ]
     }
   );
-}, G = ({
-  config: r,
-  onFinish: e,
-  onError: a
-}) => /* @__PURE__ */ u(k, { children: r ? /* @__PURE__ */ u(q, { config: r, onFinish: e, onError: a }) : null });
-z(G, "incode-signature");
+}, it = ({
+  config: o,
+  onFinish: n,
+  onError: t
+}) => /* @__PURE__ */ w(I, { children: o ? /* @__PURE__ */ w(et, { config: o, onFinish: n, onError: t }) : null });
+$(it, "incode-signature");
 export {
-  G as Signature
+  it as Signature
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260402-682edb5",
+  "version": "0.0.0-dev-20260402-43cf9b8",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -135,8 +135,9 @@
     "preact-custom-element": "^4.6.0",
     "preact-markup": "^2.1.1",
     "qrcode": "^1.5.4",
+    "signature_pad": "^5.1.3",
     "tailwindcss": "^4.1.17",
-    "@incodetech/core": "0.0.0-dev-20260402-682edb5"
+    "@incodetech/core": "0.0.0-dev-20260402-43cf9b8"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.53.3",
@@ -167,7 +168,7 @@
     "@incodetech/config": "1.0.0"
   },
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite",
     "dev:http": "VITE_DEV_HTTPS=false vite --host",
     "dev:debug": "vite --host --no-open",
     "build:dev": "vite build --watch",