@superdoc-dev/esign 1.4.0-next.3 → 1.4.0-next.4

package/dist/__tests__/signature.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=signature.test.d.ts.map

package/dist/__tests__/signature.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signature.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/signature.test.ts"],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
+import { textToImageDataUrl } from './utils/signature';
 import { SignatureInput, CheckboxInput } from './defaults';
 import type * as Types from './types';
 export * from './types';
+export { textToImageDataUrl };
 export { SignatureInput, CheckboxInput };
 declare const SuperDocESign: import('react').ForwardRefExoticComponent<Types.SuperDocESignProps & import('react').RefAttributes<Types.SuperDocESignHandle>>;
 export default SuperDocESign;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,SAAS,CAAC;AACtC,OAAO,EACL,cAAc,EACd,aAAa,EAGd,MAAM,YAAY,CAAC;AAEpB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC;AAIzC,QAAA,MAAM,aAAa,gIAielB,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EACL,cAAc,EACd,aAAa,EAGd,MAAM,YAAY,CAAC;AAEpB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC;AAIzC,QAAA,MAAM,aAAa,gIAuclB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";var de=Object.create;var P=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var ge=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty;var he=(l,p,u,n)=>{if(p&&typeof p=="object"||typeof p=="function")for(let s of ge(p))!fe.call(l,s)&&s!==u&&P(l,s,{get:()=>p[s],enumerable:!(n=pe(p,s))||n.enumerable});return l};var ve=(l,p,u)=>(u=l!=null?de(me(l)):{},he(p||!l||!l.__esModule?P(u,"default",{value:l,enumerable:!0}):u,l));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),a=require("react"),W=({value:l,onChange:p,isDisabled:u,label:n})=>c.jsxs("div",{className:"superdoc-esign-signature-input",style:{display:"flex",flexDirection:"column",gap:"8px"},children:[n&&c.jsx("label",{children:n}),c.jsx("input",{type:"text",value:String(l||""),onChange:s=>p(s.target.value),disabled:u,placeholder:"Type your full name",style:{fontFamily:"cursive",fontSize:"18px"}})]}),L=({value:l,onChange:p,isDisabled:u,label:n})=>c.jsxs("label",{className:"superdoc-esign-checkbox-input",style:{display:"flex",gap:"8px"},children:[c.jsx("input",{type:"checkbox",checked:!!l,onChange:s=>p(s.target.checked),disabled:u}),c.jsx("span",{children:n})]}),xe=l=>({onClick:u,fileName:n,isDisabled:s,isDownloading:d})=>{const x=l?.label||"Download",m=s||d;return c.jsxs("button",{onClick:u,disabled:m,className:`superdoc-esign-btn superdoc-esign-btn--download${d?" superdoc-esign-btn--loading":""}`,style:{padding:"8px 16px",borderRadius:"6px",border:"1px solid #d0d5dd",background:"#ffffff",color:"#333",cursor:m?"not-allowed":"pointer",opacity:m?.7:1,fontSize:"16px",fontWeight:"bold",display:"inline-flex",alignItems:"center",gap:"8px",transition:"opacity 0.2s ease"},children:[d&&c.jsx("span",{className:"superdoc-esign-spinner"}),d?"Downloading...":x,!d&&n&&` (${n})`]})},ye=l=>({onClick:u,isValid:n,isDisabled:s,isSubmitting:d})=>{const x=l?.label||"Submit",m=!n||s||d;return c.jsxs("button",{onClick:u,disabled:m,className:`superdoc-esign-btn superdoc-esign-btn--submit${d?" superdoc-esign-btn--loading":""}`,style:{padding:"12px 24px",borderRadius:"6px",border:"none",background:"#007bff",color:"#fff",cursor:m?"not-allowed":"pointer",opacity:m&&!d?.5:1,fontSize:"16px",fontWeight:"bold",display:"inline-flex",alignItems:"center",gap:"8px",transition:"opacity 0.2s ease"},children:[d&&c.jsx("span",{className:"superdoc-esign-spinner superdoc-esign-spinner--light"}),d?"Submitting...":x]})},K=a.forwardRef((l,p)=>{const{eventId:u,document:n,fields:s={},download:d,submit:x,onSubmit:m,onDownload:k,onStateChange:E,onFieldChange:N,onFieldsDiscovered:T,isDisabled:h=!1,className:X,style:Y,documentHeight:G="600px"}=l,[y,F]=a.useState(!n.validation?.scroll?.required),[g,I]=a.useState(new Map),[b,q]=a.useState(!1),[v,A]=a.useState(!1),[R,_]=a.useState(!1),[V,B]=a.useState([]),[U,J]=a.useState(!1),j=a.useRef(null),M=a.useRef(null),Q=a.useRef(Date.now()),S=a.useRef(s),w=a.useRef([]),$=a.useRef(T);S.current=s,$.current=T,a.useEffect(()=>{w.current=V},[V]);const C=a.useCallback(e=>{if(!M.current?.activeEditor)return;const t=M.current.activeEditor,o=S.current.signer?.find(r=>r.id===e.id);let i;o?.type==="signature"&&e.value?i={json:{type:"image",attrs:{src:typeof e.value=="string"&&e.value.startsWith("data:image/")?e.value:Z(String(e.value)),alt:"Signature"}}}:i={text:String(e.value??"")},e.id&&t.commands.updateStructuredContentById(e.id,i)},[]);function Z(e){const t=globalThis.document.createElement("canvas"),o=t.getContext("2d"),i=30;o.font=`italic ${i}px cursive`;const f=o.measureText(e).width,ce=i*1.3,le=4,ue=6;return t.width=Math.ceil(f+le*2)+20,t.height=Math.ceil(ce+ue*2),o.font=`italic ${i}px cursive`,o.fillStyle="black",o.textAlign="center",o.textBaseline="middle",o.fillText(e,t.width/2,t.height/2),t.toDataURL("image/png")}const H=a.useCallback(e=>{if(!e)return;const t=e.helpers.structuredContentCommands.getStructuredContentTags(e.state),o=new Map;S.current.document?.forEach(r=>{r.id&&o.set(r.id,r.value)}),S.current.signer?.forEach(r=>{r.value!==void 0&&o.set(r.id,r.value)});const i=t.map(({node:r})=>({id:r.attrs.id,label:r.attrs.label,value:o.get(r.attrs.id)??r.textContent??""})).filter(r=>r.id);i.length>0&&($.current?.(i),[...S.current.document||[],...S.current.signer||[]].filter(f=>f.value!==void 0).forEach(f=>C({id:f.id,value:f.value})))},[C]),D=e=>{const t={...e,timestamp:new Date().toISOString()},o=globalThis?.__SUPERDOC_AUDIT_MOCK__;o&&o(t);const i=[...w.current,t];return w.current=i,B(i),i};a.useEffect(()=>{if(!j.current)return;let e=!1,t=null;return(async()=>{const{SuperDoc:i}=await import("superdoc");e||(t=new i({selector:j.current,document:n.source,documentMode:"viewing",modules:{comments:!1},layoutMode:n.layoutMode,layoutMargins:n.layoutMargins,onReady:()=>{e||(t?.activeEditor&&H(t.activeEditor),D({type:"ready"}),J(!0))}}),M.current=t)})(),()=>{e=!0,t&&typeof t.destroy=="function"&&t.destroy(),M.current=null}},[n.source,n.mode,n.layoutMode,n.layoutMargins?.top,n.layoutMargins?.bottom,n.layoutMargins?.left,n.layoutMargins?.right,H]),a.useEffect(()=>{if(!n.validation?.scroll?.required||!U)return;const e=j.current;if(!e)return;const t=()=>{const{scrollTop:o,scrollHeight:i,clientHeight:r}=e,f=o/(i-r);(f>=.95||i<=r)&&(F(!0),D({type:"scroll",data:{percent:Math.round(f*100)}}))};return e.addEventListener("scroll",t),t(),()=>e.removeEventListener("scroll",t)},[n.validation?.scroll?.required,U]);const ee=a.useCallback((e,t)=>{I(o=>{const i=o.get(e),r=new Map(o);return r.set(e,t),C({id:e,value:t}),D({type:"field_change",data:{fieldId:e,value:t,previousValue:i}}),N?.({id:e,value:t,previousValue:i}),r})},[N,C]),O=a.useCallback(()=>n.validation?.scroll?.required&&!y?!1:(s.signer||[]).every(e=>{if(!e.validation?.required)return!0;const t=g.get(e.id);return t&&(typeof t!="string"||t.trim())}),[y,s.signer,g,n.validation?.scroll?.required]);a.useEffect(()=>{const e=O();q(e),E?.({scrolled:y,fields:g,isValid:e,isSubmitting:v})},[y,g,v,O,E]);const te=a.useCallback(async()=>{if(h||R)return;_(!0);const e={eventId:u,documentSource:n.source,fields:{document:s.document||[],signer:(s.signer||[]).map(t=>({id:t.id,value:g.get(t.id)??null}))},fileName:d?.fileName||"document.pdf"};try{await k?.(e)}finally{_(!1)}},[h,R,u,n.source,s,g,d,k]),ne=a.useCallback(async()=>{if(!b||h||v)return;A(!0),D({type:"submit"});const e=D({type:"submit"}),t={eventId:u,timestamp:new Date().toISOString(),duration:Math.floor((Date.now()-Q.current)/1e3),auditTrail:e,documentFields:s.document||[],signerFields:(s.signer||[]).map(o=>({id:o.id,value:g.get(o.id)??null})),isFullyCompleted:b};try{await m(t)}finally{A(!1)}},[b,h,v,u,s,g,m]),se=e=>{const t=e.component||oe(e.type);return c.jsx(t,{value:g.get(e.id)??null,onChange:o=>ee(e.id,o),isDisabled:h,label:e.label},e.id)},oe=e=>{switch(e){case"signature":case"text":return W;case"checkbox":return L}},re=()=>{const e=d?.component||xe(d);return e?c.jsx(e,{onClick:te,fileName:d?.fileName,isDisabled:h,isDownloading:R}):null},ae=()=>{if(n.mode==="download")return null;const e=x?.component||ye(x);return c.jsx("div",{className:"superdoc-esign-actions superdoc-esign-form-actions",children:c.jsx(e,{onClick:ne,isValid:b,isDisabled:h,isSubmitting:v})})},z=re(),ie=ae();return a.useImperativeHandle(p,()=>({getState:()=>({scrolled:y,fields:g,isValid:b,isSubmitting:v}),getAuditTrail:()=>w.current,reset:()=>{F(!n.validation?.scroll?.required),I(new Map),q(!1),w.current=[],B([])},updateFieldInDocument:C}),[y,g,b,v,n.validation?.scroll?.required,C]),c.jsxs("div",{className:`superdoc-esign-container ${X||""}`,style:Y,children:[c.jsxs("div",{className:"superdoc-esign-document","data-testid":"superdoc-esign-document",children:[z&&c.jsx("div",{className:"superdoc-esign-document-toolbar",children:c.jsx("div",{className:"superdoc-esign-document-controls",children:z})}),c.jsx("div",{ref:j,className:"superdoc-esign-document-viewer","data-testid":"superdoc-scroll-container",style:{height:G,overflow:"auto"}})]}),c.jsxs("div",{className:"superdoc-esign-controls","data-testid":"superdoc-esign-controls",children:[s.signer&&s.signer.length>0&&c.jsx("div",{className:"superdoc-esign-fields","data-testid":"superdoc-esign-fields",children:s.signer.map(se)}),ie]})]})});K.displayName="SuperDocESign";exports.CheckboxInput=L;exports.SignatureInput=W;exports.default=K;
+"use strict";var ce=Object.create;var P=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var ge=(i,c,o,t)=>{if(c&&typeof c=="object"||typeof c=="function")for(let s of ue(c))!pe.call(i,s)&&s!==o&&P(i,s,{get:()=>c[s],enumerable:!(t=le(c,s))||t.enumerable});return i};var me=(i,c,o)=>(o=i!=null?ce(de(i)):{},ge(c||!i||!i.__esModule?P(o,"default",{value:i,enumerable:!0}):o,i));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),r=require("react"),W=i=>{const c=globalThis.document.createElement("canvas"),o=c.getContext("2d"),t=30;o.font=`italic ${t}px cursive`;const u=o.measureText(i).width,f=t*1.3,g=4,j=6;return c.width=Math.ceil(u+g*2)+20,c.height=Math.ceil(f+j*2),o.font=`italic ${t}px cursive`,o.fillStyle="black",o.textAlign="center",o.textBaseline="middle",o.fillText(i,c.width/2,c.height/2),c.toDataURL("image/png")},L=({value:i,onChange:c,isDisabled:o,label:t})=>l.jsxs("div",{className:"superdoc-esign-signature-input",style:{display:"flex",flexDirection:"column",gap:"8px"},children:[t&&l.jsx("label",{children:t}),l.jsx("input",{type:"text",value:String(i||""),onChange:s=>c(s.target.value),disabled:o,placeholder:"Type your full name",style:{fontFamily:"cursive",fontSize:"18px"}})]}),K=({value:i,onChange:c,isDisabled:o,label:t})=>l.jsxs("label",{className:"superdoc-esign-checkbox-input",style:{display:"flex",gap:"8px"},children:[l.jsx("input",{type:"checkbox",checked:!!i,onChange:s=>c(s.target.checked),disabled:o}),l.jsx("span",{children:t})]}),fe=i=>({onClick:o,fileName:t,isDisabled:s,isDownloading:u})=>{const f=i?.label||"Download",g=s||u;return l.jsxs("button",{onClick:o,disabled:g,className:`superdoc-esign-btn superdoc-esign-btn--download${u?" superdoc-esign-btn--loading":""}`,style:{padding:"8px 16px",borderRadius:"6px",border:"1px solid #d0d5dd",background:"#ffffff",color:"#333",cursor:g?"not-allowed":"pointer",opacity:g?.7:1,fontSize:"16px",fontWeight:"bold",display:"inline-flex",alignItems:"center",gap:"8px",transition:"opacity 0.2s ease"},children:[u&&l.jsx("span",{className:"superdoc-esign-spinner"}),u?"Downloading...":f,!u&&t&&` (${t})`]})},he=i=>({onClick:o,isValid:t,isDisabled:s,isSubmitting:u})=>{const f=i?.label||"Submit",g=!t||s||u;return l.jsxs("button",{onClick:o,disabled:g,className:`superdoc-esign-btn superdoc-esign-btn--submit${u?" superdoc-esign-btn--loading":""}`,style:{padding:"12px 24px",borderRadius:"6px",border:"none",background:"#007bff",color:"#fff",cursor:g?"not-allowed":"pointer",opacity:g&&!u?.5:1,fontSize:"16px",fontWeight:"bold",display:"inline-flex",alignItems:"center",gap:"8px",transition:"opacity 0.2s ease"},children:[u&&l.jsx("span",{className:"superdoc-esign-spinner superdoc-esign-spinner--light"}),u?"Submitting...":f]})},X=r.forwardRef((i,c)=>{const{eventId:o,document:t,fields:s={},download:u,submit:f,onSubmit:g,onDownload:j,onStateChange:E,onFieldChange:N,onFieldsDiscovered:T,isDisabled:h=!1,className:Y,style:G,documentHeight:J="600px"}=i,[y,F]=r.useState(!t.validation?.scroll?.required),[m,I]=r.useState(new Map),[b,q]=r.useState(!1),[x,A]=r.useState(!1),[k,_]=r.useState(!1),[V,B]=r.useState([]),[U,Q]=r.useState(!1),M=r.useRef(null),R=r.useRef(null),Z=r.useRef(Date.now()),S=r.useRef(s),w=r.useRef([]),$=r.useRef(T);S.current=s,$.current=T,r.useEffect(()=>{w.current=V},[V]);const C=r.useCallback(e=>{if(!R.current?.activeEditor)return;const n=R.current.activeEditor,d=S.current.signer?.find(a=>a.id===e.id);let p;d?.type==="signature"&&e.value?p={json:{type:"image",attrs:{src:typeof e.value=="string"&&e.value.startsWith("data:image/")?e.value:W(String(e.value)),alt:"Signature"}}}:p={text:String(e.value??"")},e.id&&n.commands.updateStructuredContentById(e.id,p)},[]),H=r.useCallback(e=>{if(!e)return;const n=e.helpers.structuredContentCommands.getStructuredContentTags(e.state),d=new Map;S.current.document?.forEach(a=>{a.id&&d.set(a.id,a.value)}),S.current.signer?.forEach(a=>{a.value!==void 0&&d.set(a.id,a.value)});const p=n.map(({node:a})=>({id:a.attrs.id,label:a.attrs.label,value:d.get(a.attrs.id)??a.textContent??""})).filter(a=>a.id);p.length>0&&($.current?.(p),[...S.current.document||[],...S.current.signer||[]].filter(v=>v.value!==void 0).forEach(v=>C({id:v.id,value:v.value})))},[C]),D=e=>{const n={...e,timestamp:new Date().toISOString()},d=globalThis?.__SUPERDOC_AUDIT_MOCK__;d&&d(n);const p=[...w.current,n];return w.current=p,B(p),p};r.useEffect(()=>{if(!M.current)return;let e=!1,n=null;return(async()=>{const{SuperDoc:p}=await import("superdoc");e||(n=new p({selector:M.current,document:t.source,documentMode:"viewing",modules:{comments:!1},layoutMode:t.layoutMode,layoutMargins:t.layoutMargins,onReady:()=>{e||(n?.activeEditor&&H(n.activeEditor),D({type:"ready"}),Q(!0))}}),R.current=n)})(),()=>{e=!0,n&&typeof n.destroy=="function"&&n.destroy(),R.current=null}},[t.source,t.mode,t.layoutMode,t.layoutMargins?.top,t.layoutMargins?.bottom,t.layoutMargins?.left,t.layoutMargins?.right,H]),r.useEffect(()=>{if(!t.validation?.scroll?.required||!U)return;const e=M.current;if(!e)return;const n=()=>{const{scrollTop:d,scrollHeight:p,clientHeight:a}=e,v=d/(p-a);(v>=.95||p<=a)&&(F(!0),D({type:"scroll",data:{percent:Math.round(v*100)}}))};return e.addEventListener("scroll",n),n(),()=>e.removeEventListener("scroll",n)},[t.validation?.scroll?.required,U]);const ee=r.useCallback((e,n)=>{I(d=>{const p=d.get(e),a=new Map(d);return a.set(e,n),C({id:e,value:n}),D({type:"field_change",data:{fieldId:e,value:n,previousValue:p}}),N?.({id:e,value:n,previousValue:p}),a})},[N,C]),O=r.useCallback(()=>t.validation?.scroll?.required&&!y?!1:(s.signer||[]).every(e=>{if(!e.validation?.required)return!0;const n=m.get(e.id);return n&&(typeof n!="string"||n.trim())}),[y,s.signer,m,t.validation?.scroll?.required]);r.useEffect(()=>{const e=O();q(e),E?.({scrolled:y,fields:m,isValid:e,isSubmitting:x})},[y,m,x,O,E]);const te=r.useCallback(async()=>{if(h||k)return;_(!0);const e={eventId:o,documentSource:t.source,fields:{document:s.document||[],signer:(s.signer||[]).map(n=>({id:n.id,value:m.get(n.id)??null}))},fileName:u?.fileName||"document.pdf"};try{await j?.(e)}finally{_(!1)}},[h,k,o,t.source,s,m,u,j]),ne=r.useCallback(async()=>{if(!b||h||x)return;A(!0),D({type:"submit"});const e=D({type:"submit"}),n={eventId:o,timestamp:new Date().toISOString(),duration:Math.floor((Date.now()-Z.current)/1e3),auditTrail:e,documentFields:s.document||[],signerFields:(s.signer||[]).map(d=>({id:d.id,value:m.get(d.id)??null})),isFullyCompleted:b};try{await g(n)}finally{A(!1)}},[b,h,x,o,s,m,g]),se=e=>{const n=e.component||oe(e.type);return l.jsx(n,{value:m.get(e.id)??null,onChange:d=>ee(e.id,d),isDisabled:h,label:e.label},e.id)},oe=e=>{switch(e){case"signature":case"text":return L;case"checkbox":return K}},re=()=>{const e=u?.component||fe(u);return e?l.jsx(e,{onClick:te,fileName:u?.fileName,isDisabled:h,isDownloading:k}):null},ae=()=>{if(t.mode==="download")return null;const e=f?.component||he(f);return l.jsx("div",{className:"superdoc-esign-actions superdoc-esign-form-actions",children:l.jsx(e,{onClick:ne,isValid:b,isDisabled:h,isSubmitting:x})})},z=re(),ie=ae();return r.useImperativeHandle(c,()=>({getState:()=>({scrolled:y,fields:m,isValid:b,isSubmitting:x}),getAuditTrail:()=>w.current,reset:()=>{F(!t.validation?.scroll?.required),I(new Map),q(!1),w.current=[],B([])},updateFieldInDocument:C}),[y,m,b,x,t.validation?.scroll?.required,C]),l.jsxs("div",{className:`superdoc-esign-container ${Y||""}`,style:G,children:[l.jsxs("div",{className:"superdoc-esign-document","data-testid":"superdoc-esign-document",children:[z&&l.jsx("div",{className:"superdoc-esign-document-toolbar",children:l.jsx("div",{className:"superdoc-esign-document-controls",children:z})}),l.jsx("div",{ref:M,className:"superdoc-esign-document-viewer","data-testid":"superdoc-scroll-container",style:{height:J,overflow:"auto"}})]}),l.jsxs("div",{className:"superdoc-esign-controls","data-testid":"superdoc-esign-controls",children:[s.signer&&s.signer.length>0&&l.jsx("div",{className:"superdoc-esign-fields","data-testid":"superdoc-esign-fields",children:s.signer.map(se)}),ie]})]})});X.displayName="SuperDocESign";exports.CheckboxInput=K;exports.SignatureInput=L;exports.default=X;exports.textToImageDataUrl=W;

package/dist/index.mjs

@@ -1,24 +1,29 @@
-import { jsxs as y, jsx as c } from "react/jsx-runtime";
-import { forwardRef as ue, useState as v, useRef as D, useEffect as R, useCallback as M, useImperativeHandle as pe } from "react";
-const ge = ({
-  value: p,
-  onChange: m,
-  isDisabled: l,
+import { jsxs as b, jsx as d } from "react/jsx-runtime";
+import { forwardRef as ae, useState as y, useRef as D, useEffect as k, useCallback as M, useImperativeHandle as ce } from "react";
+const le = (u) => {
+  const l = globalThis.document.createElement("canvas"), r = l.getContext("2d"), n = 30;
+  r.font = `italic ${n}px cursive`;
+  const i = r.measureText(u).width, m = n * 1.3, p = 4, E = 6;
+  return l.width = Math.ceil(i + p * 2) + 20, l.height = Math.ceil(m + E * 2), r.font = `italic ${n}px cursive`, r.fillStyle = "black", r.textAlign = "center", r.textBaseline = "middle", r.fillText(u, l.width / 2, l.height / 2), l.toDataURL("image/png");
+}, de = ({
+  value: u,
+  onChange: l,
+  isDisabled: r,
   label: n
-}) => /* @__PURE__ */ y(
+}) => /* @__PURE__ */ b(
   "div",
   {
     className: "superdoc-esign-signature-input",
     style: { display: "flex", flexDirection: "column", gap: "8px" },
     children: [
-      n && /* @__PURE__ */ c("label", { children: n }),
-      /* @__PURE__ */ c(
+      n && /* @__PURE__ */ d("label", { children: n }),
+      /* @__PURE__ */ d(
         "input",
         {
           type: "text",
-          value: String(p || ""),
-          onChange: (i) => m(i.target.value),
-          disabled: l,
+          value: String(u || ""),
+          onChange: (o) => l(o.target.value),
+          disabled: r,
           placeholder: "Type your full name",
           style: {
             fontFamily: "cursive",
@@ -28,43 +33,43 @@ const ge = ({
       )
     ]
   }
-), me = ({
-  value: p,
-  onChange: m,
-  isDisabled: l,
+), ue = ({
+  value: u,
+  onChange: l,
+  isDisabled: r,
   label: n
-}) => /* @__PURE__ */ y("label", { className: "superdoc-esign-checkbox-input", style: { display: "flex", gap: "8px" }, children: [
-  /* @__PURE__ */ c(
+}) => /* @__PURE__ */ b("label", { className: "superdoc-esign-checkbox-input", style: { display: "flex", gap: "8px" }, children: [
+  /* @__PURE__ */ d(
     "input",
     {
       type: "checkbox",
-      checked: !!p,
-      onChange: (i) => m(i.target.checked),
-      disabled: l
+      checked: !!u,
+      onChange: (o) => l(o.target.checked),
+      disabled: r
     }
   ),
-  /* @__PURE__ */ c("span", { children: n })
-] }), fe = (p) => ({
-  onClick: l,
+  /* @__PURE__ */ d("span", { children: n })
+] }), pe = (u) => ({
+  onClick: r,
   fileName: n,
-  isDisabled: i,
-  isDownloading: a
+  isDisabled: o,
+  isDownloading: i
 }) => {
-  const b = p?.label || "Download", u = i || a;
-  return /* @__PURE__ */ y(
+  const m = u?.label || "Download", p = o || i;
+  return /* @__PURE__ */ b(
     "button",
     {
-      onClick: l,
-      disabled: u,
-      className: `superdoc-esign-btn superdoc-esign-btn--download${a ? " superdoc-esign-btn--loading" : ""}`,
+      onClick: r,
+      disabled: p,
+      className: `superdoc-esign-btn superdoc-esign-btn--download${i ? " superdoc-esign-btn--loading" : ""}`,
       style: {
         padding: "8px 16px",
         borderRadius: "6px",
         border: "1px solid #d0d5dd",
         background: "#ffffff",
         color: "#333",
-        cursor: u ? "not-allowed" : "pointer",
-        opacity: u ? 0.7 : 1,
+        cursor: p ? "not-allowed" : "pointer",
+        opacity: p ? 0.7 : 1,
         fontSize: "16px",
         fontWeight: "bold",
         display: "inline-flex",
@@ -73,33 +78,33 @@ const ge = ({
         transition: "opacity 0.2s ease"
       },
       children: [
-        a && /* @__PURE__ */ c("span", { className: "superdoc-esign-spinner" }),
-        a ? "Downloading..." : b,
-        !a && n && ` (${n})`
+        i && /* @__PURE__ */ d("span", { className: "superdoc-esign-spinner" }),
+        i ? "Downloading..." : m,
+        !i && n && ` (${n})`
       ]
     }
   );
-}, he = (p) => ({
-  onClick: l,
+}, ge = (u) => ({
+  onClick: r,
   isValid: n,
-  isDisabled: i,
-  isSubmitting: a
+  isDisabled: o,
+  isSubmitting: i
 }) => {
-  const b = p?.label || "Submit", u = !n || i || a;
-  return /* @__PURE__ */ y(
+  const m = u?.label || "Submit", p = !n || o || i;
+  return /* @__PURE__ */ b(
     "button",
     {
-      onClick: l,
-      disabled: u,
-      className: `superdoc-esign-btn superdoc-esign-btn--submit${a ? " superdoc-esign-btn--loading" : ""}`,
+      onClick: r,
+      disabled: p,
+      className: `superdoc-esign-btn superdoc-esign-btn--submit${i ? " superdoc-esign-btn--loading" : ""}`,
       style: {
         padding: "12px 24px",
         borderRadius: "6px",
         border: "none",
         background: "#007bff",
         color: "#fff",
-        cursor: u ? "not-allowed" : "pointer",
-        opacity: u && !a ? 0.5 : 1,
+        cursor: p ? "not-allowed" : "pointer",
+        opacity: p && !i ? 0.5 : 1,
         fontSize: "16px",
         fontWeight: "bold",
         display: "inline-flex",
@@ -108,21 +113,21 @@ const ge = ({
         transition: "opacity 0.2s ease"
       },
       children: [
-        a && /* @__PURE__ */ c("span", { className: "superdoc-esign-spinner superdoc-esign-spinner--light" }),
-        a ? "Submitting..." : b
+        i && /* @__PURE__ */ d("span", { className: "superdoc-esign-spinner superdoc-esign-spinner--light" }),
+        i ? "Submitting..." : m
       ]
     }
   );
-}, ve = ue(
-  (p, m) => {
+}, me = ae(
+  (u, l) => {
     const {
-      eventId: l,
+      eventId: r,
       document: n,
-      fields: i = {},
-      download: a,
-      submit: b,
-      onSubmit: u,
-      onDownload: I,
+      fields: o = {},
+      download: i,
+      submit: m,
+      onSubmit: p,
+      onDownload: E,
       onStateChange: A,
       onFieldChange: q,
       onFieldsDiscovered: V,
@@ -130,50 +135,43 @@ const ge = ({
       className: X,
       style: Y,
       documentHeight: G = "600px"
-    } = p, [x, B] = v(!n.validation?.scroll?.required), [d, _] = v(/* @__PURE__ */ new Map()), [S, U] = v(!1), [h, $] = v(!1), [k, H] = v(!1), [z, O] = v([]), [W, J] = v(!1), E = D(null), F = D(null), Q = D(Date.now()), w = D(i), N = D([]), j = D(V);
-    w.current = i, j.current = V, R(() => {
+    } = u, [x, B] = y(!n.validation?.scroll?.required), [g, _] = y(/* @__PURE__ */ new Map()), [S, U] = y(!1), [h, $] = y(!1), [I, H] = y(!1), [z, O] = y([]), [W, J] = y(!1), F = D(null), R = D(null), Q = D(Date.now()), w = D(o), N = D([]), j = D(V);
+    w.current = o, j.current = V, k(() => {
       N.current = z;
     }, [z]);
     const C = M((e) => {
-      if (!F.current?.activeEditor) return;
-      const t = F.current.activeEditor, o = w.current.signer?.find((s) => s.id === e.id);
-      let r;
-      o?.type === "signature" && e.value ? r = {
+      if (!R.current?.activeEditor) return;
+      const t = R.current.activeEditor, a = w.current.signer?.find((s) => s.id === e.id);
+      let c;
+      a?.type === "signature" && e.value ? c = {
         json: {
           type: "image",
-          attrs: { src: typeof e.value == "string" && e.value.startsWith("data:image/") ? e.value : Z(String(e.value)), alt: "Signature" }
+          attrs: { src: typeof e.value == "string" && e.value.startsWith("data:image/") ? e.value : le(String(e.value)), alt: "Signature" }
         }
-      } : r = { text: String(e.value ?? "") }, e.id && t.commands.updateStructuredContentById(e.id, r);
-    }, []);
-    function Z(e) {
-      const t = globalThis.document.createElement("canvas"), o = t.getContext("2d"), r = 30;
-      o.font = `italic ${r}px cursive`;
-      const g = o.measureText(e).width, ce = r * 1.3, le = 4, de = 6;
-      return t.width = Math.ceil(g + le * 2) + 20, t.height = Math.ceil(ce + de * 2), o.font = `italic ${r}px cursive`, o.fillStyle = "black", o.textAlign = "center", o.textBaseline = "middle", o.fillText(e, t.width / 2, t.height / 2), t.toDataURL("image/png");
-    }
-    const L = M(
+      } : c = { text: String(e.value ?? "") }, e.id && t.commands.updateStructuredContentById(e.id, c);
+    }, []), L = M(
       (e) => {
         if (!e) return;
         const t = e.helpers.structuredContentCommands.getStructuredContentTags(
           e.state
-        ), o = /* @__PURE__ */ new Map();
+        ), a = /* @__PURE__ */ new Map();
         w.current.document?.forEach((s) => {
-          s.id && o.set(s.id, s.value);
+          s.id && a.set(s.id, s.value);
         }), w.current.signer?.forEach((s) => {
-          s.value !== void 0 && o.set(s.id, s.value);
+          s.value !== void 0 && a.set(s.id, s.value);
         });
-        const r = t.map(({ node: s }) => ({
+        const c = t.map(({ node: s }) => ({
           id: s.attrs.id,
           label: s.attrs.label,
-          value: o.get(s.attrs.id) ?? s.textContent ?? ""
+          value: a.get(s.attrs.id) ?? s.textContent ?? ""
         })).filter((s) => s.id);
-        r.length > 0 && (j.current?.(r), [
+        c.length > 0 && (j.current?.(c), [
           ...w.current.document || [],
           ...w.current.signer || []
-        ].filter((g) => g.value !== void 0).forEach(
-          (g) => C({
-            id: g.id,
-            value: g.value
+        ].filter((v) => v.value !== void 0).forEach(
+          (v) => C({
+            id: v.id,
+            value: v.value
           })
         ));
       },
@@ -182,31 +180,32 @@ const ge = ({
       const t = {
         ...e,
         timestamp: (/* @__PURE__ */ new Date()).toISOString()
-      }, o = globalThis?.__SUPERDOC_AUDIT_MOCK__;
-      o && o(t);
-      const r = [...N.current, t];
-      return N.current = r, O(r), r;
+      }, a = globalThis?.__SUPERDOC_AUDIT_MOCK__;
+      a && a(t);
+      const c = [...N.current, t];
+      return N.current = c, O(c), c;
     };
-    R(() => {
-      if (!E.current) return;
+    k(() => {
+      if (!F.current) return;
       let e = !1, t = null;
       return (async () => {
-        const { SuperDoc: r } = await import("superdoc");
-        e || (t = new r({
-          selector: E.current,
+        const { SuperDoc: c } = await import("superdoc");
+        e || (t = new c({
+          selector: F.current,
           document: n.source,
           documentMode: "viewing",
           modules: {
             comments: !1
           },
+          // @ts-expect-error - layoutMode is not supported in SuperDoc v1.1.0 yet
           layoutMode: n.layoutMode,
           layoutMargins: n.layoutMargins,
           onReady: () => {
             e || (t?.activeEditor && L(t.activeEditor), T({ type: "ready" }), J(!0));
           }
-        }), F.current = t);
+        }), R.current = t);
       })(), () => {
-        e = !0, t && typeof t.destroy == "function" && t.destroy(), F.current = null;
+        e = !0, t && typeof t.destroy == "function" && t.destroy(), R.current = null;
       };
     }, [
       n.source,
@@ -217,107 +216,107 @@ const ge = ({
       n.layoutMargins?.left,
       n.layoutMargins?.right,
       L
-    ]), R(() => {
+    ]), k(() => {
       if (!n.validation?.scroll?.required || !W) return;
-      const e = E.current;
+      const e = F.current;
       if (!e) return;
       const t = () => {
-        const { scrollTop: o, scrollHeight: r, clientHeight: s } = e, g = o / (r - s);
-        (g >= 0.95 || r <= s) && (B(!0), T({
+        const { scrollTop: a, scrollHeight: c, clientHeight: s } = e, v = a / (c - s);
+        (v >= 0.95 || c <= s) && (B(!0), T({
           type: "scroll",
-          data: { percent: Math.round(g * 100) }
+          data: { percent: Math.round(v * 100) }
         }));
       };
       return e.addEventListener("scroll", t), t(), () => e.removeEventListener("scroll", t);
     }, [n.validation?.scroll?.required, W]);
-    const ee = M(
+    const Z = M(
       (e, t) => {
-        _((o) => {
-          const r = o.get(e), s = new Map(o);
+        _((a) => {
+          const c = a.get(e), s = new Map(a);
           return s.set(e, t), C({
             id: e,
             value: t
           }), T({
             type: "field_change",
-            data: { fieldId: e, value: t, previousValue: r }
+            data: { fieldId: e, value: t, previousValue: c }
           }), q?.({
             id: e,
             value: t,
-            previousValue: r
+            previousValue: c
           }), s;
         });
       },
       [q, C]
-    ), P = M(() => n.validation?.scroll?.required && !x ? !1 : (i.signer || []).every((e) => {
+    ), P = M(() => n.validation?.scroll?.required && !x ? !1 : (o.signer || []).every((e) => {
       if (!e.validation?.required) return !0;
-      const t = d.get(e.id);
+      const t = g.get(e.id);
       return t && (typeof t != "string" || t.trim());
-    }), [x, i.signer, d, n.validation?.scroll?.required]);
-    R(() => {
+    }), [x, o.signer, g, n.validation?.scroll?.required]);
+    k(() => {
       const e = P();
       U(e), A?.({
         scrolled: x,
-        fields: d,
+        fields: g,
         isValid: e,
         isSubmitting: h
       });
-    }, [x, d, h, P, A]);
-    const te = M(async () => {
-      if (f || k) return;
+    }, [x, g, h, P, A]);
+    const ee = M(async () => {
+      if (f || I) return;
       H(!0);
       const e = {
-        eventId: l,
+        eventId: r,
         documentSource: n.source,
         fields: {
-          document: i.document || [],
-          signer: (i.signer || []).map((t) => ({
+          document: o.document || [],
+          signer: (o.signer || []).map((t) => ({
             id: t.id,
-            value: d.get(t.id) ?? null
+            value: g.get(t.id) ?? null
           }))
         },
-        fileName: a?.fileName || "document.pdf"
+        fileName: i?.fileName || "document.pdf"
       };
       try {
-        await I?.(e);
+        await E?.(e);
       } finally {
         H(!1);
       }
     }, [
       f,
-      k,
-      l,
+      I,
+      r,
       n.source,
+      o,
+      g,
       i,
-      d,
-      a,
-      I
-    ]), ne = M(async () => {
+      E
+    ]), te = M(async () => {
       if (!S || f || h) return;
       $(!0), T({ type: "submit" });
       const e = T({ type: "submit" }), t = {
-        eventId: l,
+        eventId: r,
         timestamp: (/* @__PURE__ */ new Date()).toISOString(),
         duration: Math.floor((Date.now() - Q.current) / 1e3),
         auditTrail: e,
-        documentFields: i.document || [],
-        signerFields: (i.signer || []).map((o) => ({
-          id: o.id,
-          value: d.get(o.id) ?? null
+        documentFields: o.document || [],
+        signerFields: (o.signer || []).map((a) => ({
+          id: a.id,
+          value: g.get(a.id) ?? null
         })),
         isFullyCompleted: S
       };
       try {
-        await u(t);
+        await p(t);
       } finally {
         $(!1);
       }
-    }, [S, f, h, l, i, d, u]), oe = (e) => {
+    }, [S, f, h, r, o, g, p]), ne = (e) => {
       const t = e.component || se(e.type);
-      return /* @__PURE__ */ c(
+      return /* @__PURE__ */ d(
         t,
         {
-          value: d.get(e.id) ?? null,
-          onChange: (o) => ee(e.id, o),
+          value: g.get(e.id) ?? null,
+          onChange: (a) => Z(e.id, a),
           isDisabled: f,
           label: e.label
         },
@@ -327,41 +326,41 @@ const ge = ({
       switch (e) {
         case "signature":
         case "text":
-          return ge;
+          return de;
         case "checkbox":
-          return me;
+          return ue;
       }
-    }, re = () => {
-      const e = a?.component || fe(a);
-      return e ? /* @__PURE__ */ c(
+    }, oe = () => {
+      const e = i?.component || pe(i);
+      return e ? /* @__PURE__ */ d(
         e,
         {
-          onClick: te,
-          fileName: a?.fileName,
+          onClick: ee,
+          fileName: i?.fileName,
           isDisabled: f,
-          isDownloading: k
+          isDownloading: I
         }
       ) : null;
-    }, ie = () => {
+    }, re = () => {
       if (n.mode === "download")
         return null;
-      const e = b?.component || he(b);
-      return /* @__PURE__ */ c("div", { className: "superdoc-esign-actions superdoc-esign-form-actions", children: /* @__PURE__ */ c(
+      const e = m?.component || ge(m);
+      return /* @__PURE__ */ d("div", { className: "superdoc-esign-actions superdoc-esign-form-actions", children: /* @__PURE__ */ d(
         e,
         {
-          onClick: ne,
+          onClick: te,
           isValid: S,
           isDisabled: f,
           isSubmitting: h
         }
       ) });
-    }, K = re(), ae = ie();
-    return pe(
-      m,
+    }, K = oe(), ie = re();
+    return ce(
+      l,
       () => ({
         getState: () => ({
           scrolled: x,
-          fields: d,
+          fields: g,
           isValid: S,
           isSubmitting: h
         }),
@@ -373,35 +372,36 @@ const ge = ({
       }),
       [
         x,
-        d,
+        g,
         S,
         h,
         n.validation?.scroll?.required,
         C
       ]
-    ), /* @__PURE__ */ y("div", { className: `superdoc-esign-container ${X || ""}`, style: Y, children: [
-      /* @__PURE__ */ y("div", { className: "superdoc-esign-document", "data-testid": "superdoc-esign-document", children: [
-        K && /* @__PURE__ */ c("div", { className: "superdoc-esign-document-toolbar", children: /* @__PURE__ */ c("div", { className: "superdoc-esign-document-controls", children: K }) }),
-        /* @__PURE__ */ c(
+    ), /* @__PURE__ */ b("div", { className: `superdoc-esign-container ${X || ""}`, style: Y, children: [
+      /* @__PURE__ */ b("div", { className: "superdoc-esign-document", "data-testid": "superdoc-esign-document", children: [
+        K && /* @__PURE__ */ d("div", { className: "superdoc-esign-document-toolbar", children: /* @__PURE__ */ d("div", { className: "superdoc-esign-document-controls", children: K }) }),
+        /* @__PURE__ */ d(
           "div",
           {
-            ref: E,
+            ref: F,
             className: "superdoc-esign-document-viewer",
             "data-testid": "superdoc-scroll-container",
             style: { height: G, overflow: "auto" }
           }
         )
       ] }),
-      /* @__PURE__ */ y("div", { className: "superdoc-esign-controls", "data-testid": "superdoc-esign-controls", children: [
-        i.signer && i.signer.length > 0 && /* @__PURE__ */ c("div", { className: "superdoc-esign-fields", "data-testid": "superdoc-esign-fields", children: i.signer.map(oe) }),
-        ae
+      /* @__PURE__ */ b("div", { className: "superdoc-esign-controls", "data-testid": "superdoc-esign-controls", children: [
+        o.signer && o.signer.length > 0 && /* @__PURE__ */ d("div", { className: "superdoc-esign-fields", "data-testid": "superdoc-esign-fields", children: o.signer.map(ne) }),
+        ie
       ] })
     ] });
   }
 );
-ve.displayName = "SuperDocESign";
+me.displayName = "SuperDocESign";
 export {
-  me as CheckboxInput,
-  ge as SignatureInput,
-  ve as default
+  ue as CheckboxInput,
+  de as SignatureInput,
+  me as default,
+  le as textToImageDataUrl
 };

package/dist/utils/signature.d.ts

@@ -0,0 +1,2 @@
+export declare const textToImageDataUrl: (text: string) => string;
+//# sourceMappingURL=signature.d.ts.map

package/dist/utils/signature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signature.d.ts","sourceRoot":"","sources":["../../src/utils/signature.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,kBAAkB,GAAI,MAAM,MAAM,KAAG,MAyBjD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superdoc-dev/esign",
-  "version": "1.4.0-next.3",
+  "version": "1.4.0-next.4",
   "description": "React eSignature component for SuperDoc",
   "type": "module",
   "main": "./dist/index.js",
@@ -56,7 +56,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "superdoc": "^0.29.0"
+    "superdoc": "^1.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
@@ -81,7 +81,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "semantic-release": "^24.2.9",
-    "superdoc": "^0.36.1",
+    "superdoc": "1.1.0",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.44.1",
     "vite": "^7.1.7",