@superdoc-dev/esign 1.3.1 → 1.4.1

package/dist/defaults/CheckboxInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/defaults/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoBvD,CAAC"}
+{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/defaults/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiBvD,CAAC"}

package/dist/defaults/DownloadButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../src/defaults/DownloadButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEpE,eAAO,MAAM,oBAAoB,GAAI,SAAS,cAAc,kCA+B3D,CAAC"}
+{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../src/defaults/DownloadButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEpE,eAAO,MAAM,oBAAoB,GAAI,SAAS,cAAc,kCA2B3D,CAAC"}

package/dist/index.d.ts

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

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AASA,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,gIAwejB,CAAC;AAIH,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,EACL,cAAc,EACd,aAAa,EAGd,MAAM,YAAY,CAAC;AAEpB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC;AAIzC,QAAA,MAAM,aAAa,gIAwblB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/index.js

@@ -1,22 +1 @@
-"use strict";var me=Object.create;var oe=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var ve=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,xe=Object.prototype.hasOwnProperty;var he=(i,f,l,a)=>{if(f&&typeof f=="object"||typeof f=="function")for(let r of ve(f))!xe.call(i,r)&&r!==l&&oe(i,r,{get:()=>f[r],enumerable:!(a=ge(f,r))||a.enumerable});return i};var Ee=(i,f,l)=>(l=i!=null?me(be(i)):{},he(f||!i||!i.__esModule?oe(l,"default",{value:i,enumerable:!0}):l,i));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react");var K={exports:{}},U={};/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var ae;function ye(){if(ae)return U;ae=1;var i=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function l(a,r,g){var h=null;if(g!==void 0&&(h=""+g),r.key!==void 0&&(h=""+r.key),"key"in r){g={};for(var T in r)T!=="key"&&(g[T]=r[T])}else g=r;return r=g.ref,{$$typeof:i,type:a,key:h,ref:r!==void 0?r:null,props:g}}return U.Fragment=f,U.jsx=l,U.jsxs=l,U}var L={};/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var se;function Re(){return se||(se=1,process.env.NODE_ENV!=="production"&&(function(){function i(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===te?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case _:return"Fragment";case x:return"Profiler";case B:return"StrictMode";case w:return"Suspense";case G:return"SuspenseList";case Z:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case ee:return"Portal";case O:return e.displayName||"Context";case J:return(e._context.displayName||"Context")+".Consumer";case H:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case X:return n=e.displayName||null,n!==null?n:i(e.type)||"Memo";case D:n=e._payload,e=e._init;try{return i(e(n))}catch{}}return null}function f(e){return""+e}function l(e){try{f(e);var n=!1}catch{n=!0}if(n){n=console;var u=n.error,p=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",p),f(e)}}function a(e){if(e===_)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===D)return"<...>";try{var n=i(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function r(){var e=k.A;return e===null?null:e.getOwner()}function g(){return Error("react-stack-top-frame")}function h(e){if(y.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function T(e,n){function u(){C||(C=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function W(){var e=i(this.type);return N[e]||(N[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function V(e,n,u,p,F,q){var m=u.ref;return e={$$typeof:z,type:e,key:n,props:u,_owner:p},(m!==void 0?m:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:W}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:F}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function M(e,n,u,p,F,q){var m=n.children;if(m!==void 0)if(p)if(re(m)){for(p=0;p<m.length;p++)Y(m[p]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Y(m);if(y.call(n,"key")){m=i(e);var A=Object.keys(n).filter(function(ne){return ne!=="key"});p=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",j[m+p]||(A=0<A.length?"{"+A.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,p,m,A,m),j[m+p]=!0)}if(m=null,u!==void 0&&(l(u),m=""+u),h(n)&&(l(n.key),m=""+n.key),"key"in n){u={};for(var I in n)I!=="key"&&(u[I]=n[I])}else u=n;return m&&T(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),V(e,m,u,r(),F,q)}function Y(e){E(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===D&&(e._payload.status==="fulfilled"?E(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function E(e){return typeof e=="object"&&e!==null&&e.$$typeof===z}var P=d,z=Symbol.for("react.transitional.element"),ee=Symbol.for("react.portal"),_=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),x=Symbol.for("react.profiler"),J=Symbol.for("react.consumer"),O=Symbol.for("react.context"),H=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),G=Symbol.for("react.suspense_list"),X=Symbol.for("react.memo"),D=Symbol.for("react.lazy"),Z=Symbol.for("react.activity"),te=Symbol.for("react.client.reference"),k=P.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,y=Object.prototype.hasOwnProperty,re=Array.isArray,R=console.createTask?console.createTask:function(){return null};P={react_stack_bottom_frame:function(e){return e()}};var C,N={},Q=P.react_stack_bottom_frame.bind(P,g)(),$=R(a(g)),j={};L.Fragment=_,L.jsx=function(e,n,u){var p=1e4>k.recentlyCreatedOwnerStacks++;return M(e,n,u,!1,p?Error("react-stack-top-frame"):Q,p?R(a(e)):$)},L.jsxs=function(e,n,u){var p=1e4>k.recentlyCreatedOwnerStacks++;return M(e,n,u,!0,p?Error("react-stack-top-frame"):Q,p?R(a(e)):$)}})()),L}var ie;function _e(){return ie||(ie=1,process.env.NODE_ENV==="production"?K.exports=ye():K.exports=Re()),K.exports}var b=_e();const ce=({value:i,onChange:f,isDisabled:l,label:a})=>b.jsxs("div",{className:"superdoc-esign-signature-input",style:{display:"flex",flexDirection:"column",gap:"8px"},children:[a&&b.jsx("label",{children:a}),b.jsx("input",{type:"text",value:String(i||""),onChange:r=>f(r.target.value),disabled:l,placeholder:"Type your full name",style:{fontFamily:"cursive",fontSize:"18px"}})]}),le=({value:i,onChange:f,isDisabled:l,label:a})=>b.jsxs("label",{className:"superdoc-esign-checkbox-input",style:{display:"flex",gap:"8px"},children:[b.jsx("input",{type:"checkbox",checked:!!i,onChange:r=>f(r.target.checked),disabled:l}),b.jsx("span",{children:a})]}),Se=i=>({onClick:l,fileName:a,isDisabled:r})=>{const g=i?.label||"Download";return b.jsxs("button",{onClick:l,disabled:r,className:"superdoc-esign-btn superdoc-esign-btn--download",style:{padding:"8px 16px",borderRadius:"6px",border:"1px solid #d0d5dd",background:"#ffffff",color:"#333",cursor:r?"not-allowed":"pointer",opacity:r?.5:1,fontSize:"16px",fontWeight:"bold"},children:[g," ",a&&`(${a})`]})},Te=i=>({onClick:l,isValid:a,isDisabled:r,isSubmitting:g})=>{const h=()=>i?.label||"Submit";return b.jsx("button",{onClick:l,disabled:!a||r||g,className:"superdoc-esign-btn superdoc-esign-btn--submit",style:{padding:"12px 24px",borderRadius:"6px",border:"none",background:"#007bff",color:"#fff",cursor:!a||r?"not-allowed":"pointer",opacity:!a||r?.5:1,fontSize:"16px",fontWeight:"bold"},children:h()})},ue=d.forwardRef((i,f)=>{const{eventId:l,document:a,fields:r={},download:g,submit:h,onSubmit:T,onDownload:W,onStateChange:V,onFieldChange:M,onFieldsDiscovered:Y,isDisabled:E=!1,className:P,style:z,documentHeight:ee="600px"}=i,[_,B]=d.useState(!a.validation?.scroll?.required),[x,J]=d.useState(new Map),[O,H]=d.useState(!1),[w,G]=d.useState(!1),[X,D]=d.useState([]),[Z,te]=d.useState(!1),k=d.useRef(null),y=d.useRef(null),re=d.useRef(Date.now()),R=d.useRef(r),C=d.useRef([]);R.current=r,d.useEffect(()=>{C.current=X},[X]);const N=d.useCallback(t=>{if(!y.current?.activeEditor)return;const o=y.current.activeEditor,s=R.current.signer?.find(c=>c.id===t.id);let v;s?.type==="signature"&&t.value?v={json:{type:"image",attrs:{src:typeof t.value=="string"&&t.value.startsWith("data:image/")?t.value:Q(String(t.value)),alt:"Signature"}}}:v={text:String(t.value??"")},t.id&&o.commands.updateStructuredContentById(t.id,v)},[]);function Q(t){const o=globalThis.document.createElement("canvas"),s=o.getContext("2d"),v=30;s.font=`italic ${v}px cursive`;const S=s.measureText(t).width,de=v*1.3,fe=4,pe=6;return o.width=Math.ceil(S+fe*2)+20,o.height=Math.ceil(de+pe*2),s.font=`italic ${v}px cursive`,s.fillStyle="black",s.textAlign="center",s.textBaseline="middle",s.fillText(t,o.width/2,o.height/2),o.toDataURL("image/png")}const $=d.useCallback(t=>{if(!t)return;const o=t.helpers.structuredContentCommands.getStructuredContentTags(t.state),s=new Map;R.current.document?.forEach(c=>{c.id&&s.set(c.id,c.value)}),R.current.signer?.forEach(c=>{c.value!==void 0&&s.set(c.id,c.value)});const v=o.map(({node:c})=>({id:c.attrs.id,label:c.attrs.label,value:s.get(c.attrs.id)??c.textContent??""})).filter(c=>c.id);v.length>0&&(Y?.(v),[...R.current.document||[],...R.current.signer||[]].filter(S=>S.value!==void 0).forEach(S=>N({id:S.id,value:S.value})))},[Y,N]),j=t=>{const o={...t,timestamp:new Date().toISOString()},s=globalThis?.__SUPERDOC_AUDIT_MOCK__;s&&s(o);const v=[...C.current,o];return C.current=v,D(v),v};d.useEffect(()=>k.current?((async()=>{const{SuperDoc:o}=await import("superdoc"),s=new o({selector:k.current,document:a.source,documentMode:"viewing",onReady:()=>{s.activeEditor&&$(s.activeEditor),j({type:"ready"}),te(!0)}});y.current=s})(),()=>{y.current&&(typeof y.current.destroy=="function"&&y.current.destroy(),y.current=null)}):void 0,[a.source,a.mode,$]),d.useEffect(()=>{if(!a.validation?.scroll?.required||!Z)return;const t=k.current;if(!t)return;const o=()=>{const{scrollTop:s,scrollHeight:v,clientHeight:c}=t,S=s/(v-c);(S>=.95||v<=c)&&(B(!0),j({type:"scroll",data:{percent:Math.round(S*100)}}))};return t.addEventListener("scroll",o),o(),()=>t.removeEventListener("scroll",o)},[a.validation?.scroll?.required,Z]);const e=d.useCallback((t,o)=>{J(s=>{const v=s.get(t),c=new Map(s);return c.set(t,o),N({id:t,value:o}),j({type:"field_change",data:{fieldId:t,value:o,previousValue:v}}),M?.({id:t,value:o,previousValue:v}),c})},[M,N]),n=d.useCallback(()=>a.validation?.scroll?.required&&!_?!1:(r.signer||[]).every(t=>{if(!t.validation?.required)return!0;const o=x.get(t.id);return o&&(typeof o!="string"||o.trim())}),[_,r.signer,x,a.validation?.scroll?.required]);d.useEffect(()=>{const t=n();H(t),V?.({scrolled:_,fields:x,isValid:t,isSubmitting:w})},[_,x,w,n,V]);const u=d.useCallback(async()=>{if(E)return;const t={eventId:l,documentSource:a.source,fields:{document:r.document||[],signer:(r.signer||[]).map(o=>({id:o.id,value:x.get(o.id)??null}))},fileName:g?.fileName||"document.pdf"};await W?.(t)},[E,l,a.source,r,x,g,W]),p=d.useCallback(async()=>{if(!O||E||w)return;G(!0),j({type:"submit"});const t=j({type:"submit"}),o={eventId:l,timestamp:new Date().toISOString(),duration:Math.floor((Date.now()-re.current)/1e3),auditTrail:t,documentFields:r.document||[],signerFields:(r.signer||[]).map(s=>({id:s.id,value:x.get(s.id)??null})),isFullyCompleted:O};try{await T(o)}finally{G(!1)}},[O,E,w,l,r,x,T]),F=t=>{const o=t.component||q(t.type);return b.jsx(o,{value:x.get(t.id)??null,onChange:s=>e(t.id,s),isDisabled:E,label:t.label},t.id)},q=t=>{switch(t){case"signature":case"text":return ce;case"checkbox":return le}},m=()=>{const t=g?.component||Se(g);return t?b.jsx(t,{onClick:u,fileName:g?.fileName,isDisabled:E}):null},A=()=>{if(a.mode==="download")return null;const t=h?.component||Te(h);return b.jsx("div",{className:"superdoc-esign-actions superdoc-esign-form-actions",style:{display:"flex",gap:"10px"},children:b.jsx(t,{onClick:p,isValid:O,isDisabled:E,isSubmitting:w})})},I=m(),ne=A();return d.useImperativeHandle(f,()=>({getState:()=>({scrolled:_,fields:x,isValid:O,isSubmitting:w}),getAuditTrail:()=>C.current,reset:()=>{B(!a.validation?.scroll?.required),J(new Map),H(!1),C.current=[],D([])}})),b.jsxs("div",{className:`superdoc-esign-container ${P||""}`,style:z,children:[b.jsxs("div",{className:"superdoc-esign-document","data-testid":"superdoc-esign-document",style:{display:"flex",flexDirection:"column"},children:[I&&b.jsx("div",{className:"superdoc-esign-document-toolbar",style:{display:"flex",justifyContent:"flex-end",alignItems:"center",padding:"8px 12px"},children:b.jsx("div",{className:"superdoc-esign-document-controls",style:{display:"flex",gap:"8px"},children:I})}),b.jsx("div",{ref:k,className:"superdoc-esign-document-viewer","data-testid":"superdoc-scroll-container",style:{height:ee,overflow:"auto"}})]}),b.jsxs("div",{className:"superdoc-esign-controls",style:{marginTop:"20px"},"data-testid":"superdoc-esign-controls",children:[r.signer&&r.signer.length>0&&b.jsx("div",{className:"superdoc-esign-fields",style:{marginBottom:"20px"},"data-testid":"superdoc-esign-fields",children:r.signer.map(F)}),ne]})]})});ue.displayName="SuperDocESign";exports.CheckboxInput=le;exports.SignatureInput=ce;exports.default=ue;
+"use strict";var le=Object.create;var z=Object.defineProperty;var ue=Object.getOwnPropertyDescriptor;var de=Object.getOwnPropertyNames;var pe=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var me=(c,d,u,s)=>{if(d&&typeof d=="object"||typeof d=="function")for(let n of de(d))!ge.call(c,n)&&n!==u&&z(c,n,{get:()=>d[n],enumerable:!(s=ue(d,n))||s.enumerable});return c};var fe=(c,d,u)=>(u=c!=null?le(pe(c)):{},me(d||!c||!c.__esModule?z(u,"default",{value:c,enumerable:!0}):u,c));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),i=require("react"),L=({value:c,onChange:d,isDisabled:u,label:s})=>l.jsxs("div",{className:"superdoc-esign-signature-input",style:{display:"flex",flexDirection:"column",gap:"8px"},children:[s&&l.jsx("label",{children:s}),l.jsx("input",{type:"text",value:String(c||""),onChange:n=>d(n.target.value),disabled:u,placeholder:"Type your full name",style:{fontFamily:"cursive",fontSize:"18px"}})]}),P=({value:c,onChange:d,isDisabled:u,label:s})=>l.jsxs("label",{className:"superdoc-esign-checkbox-input",style:{display:"flex",gap:"8px"},children:[l.jsx("input",{type:"checkbox",checked:!!c,onChange:n=>d(n.target.checked),disabled:u}),l.jsx("span",{children:s})]}),he=c=>({onClick:u,fileName:s,isDisabled:n})=>{const g=c?.label||"Download";return l.jsxs("button",{onClick:u,disabled:n,className:"superdoc-esign-btn superdoc-esign-btn--download",style:{padding:"8px 16px",borderRadius:"6px",border:"1px solid #d0d5dd",background:"#ffffff",color:"#333",cursor:n?"not-allowed":"pointer",opacity:n?.5:1,fontSize:"16px",fontWeight:"bold"},children:[g," ",s&&`(${s})`]})},ve=c=>({onClick:u,isValid:s,isDisabled:n,isSubmitting:g})=>{const C=()=>c?.label||"Submit";return l.jsx("button",{onClick:u,disabled:!s||n||g,className:"superdoc-esign-btn superdoc-esign-btn--submit",style:{padding:"12px 24px",borderRadius:"6px",border:"none",background:"#007bff",color:"#fff",cursor:!s||n?"not-allowed":"pointer",opacity:!s||n?.5:1,fontSize:"16px",fontWeight:"bold"},children:C()})},W=i.forwardRef((c,d)=>{const{eventId:u,document:s,fields:n={},download:g,submit:C,onSubmit:R,onDownload:k,onStateChange:E,onFieldChange:T,onFieldsDiscovered:N,isDisabled:f=!1,className:$,style:K,documentHeight:X="600px"}=c,[x,F]=i.useState(!s.validation?.scroll?.required),[p,M]=i.useState(new Map),[b,I]=i.useState(!1),[h,A]=i.useState(!1),[q,_]=i.useState([]),[B,Y]=i.useState(!1),w=i.useRef(null),D=i.useRef(null),G=i.useRef(Date.now()),v=i.useRef(n),y=i.useRef([]),U=i.useRef(N);v.current=n,U.current=N,i.useEffect(()=>{y.current=q},[q]);const j=i.useCallback(e=>{if(!D.current?.activeEditor)return;const t=D.current.activeEditor,r=v.current.signer?.find(o=>o.id===e.id);let a;r?.type==="signature"&&e.value?a={json:{type:"image",attrs:{src:typeof e.value=="string"&&e.value.startsWith("data:image/")?e.value:J(String(e.value)),alt:"Signature"}}}:a={text:String(e.value??"")},e.id&&t.commands.updateStructuredContentById(e.id,a)},[]);function J(e){const t=globalThis.document.createElement("canvas"),r=t.getContext("2d"),a=30;r.font=`italic ${a}px cursive`;const m=r.measureText(e).width,ie=a*1.3,ae=4,ce=6;return t.width=Math.ceil(m+ae*2)+20,t.height=Math.ceil(ie+ce*2),r.font=`italic ${a}px cursive`,r.fillStyle="black",r.textAlign="center",r.textBaseline="middle",r.fillText(e,t.width/2,t.height/2),t.toDataURL("image/png")}const V=i.useCallback(e=>{if(!e)return;const t=e.helpers.structuredContentCommands.getStructuredContentTags(e.state),r=new Map;v.current.document?.forEach(o=>{o.id&&r.set(o.id,o.value)}),v.current.signer?.forEach(o=>{o.value!==void 0&&r.set(o.id,o.value)});const a=t.map(({node:o})=>({id:o.attrs.id,label:o.attrs.label,value:r.get(o.attrs.id)??o.textContent??""})).filter(o=>o.id);a.length>0&&(U.current?.(a),[...v.current.document||[],...v.current.signer||[]].filter(m=>m.value!==void 0).forEach(m=>j({id:m.id,value:m.value})))},[j]),S=e=>{const t={...e,timestamp:new Date().toISOString()},r=globalThis?.__SUPERDOC_AUDIT_MOCK__;r&&r(t);const a=[...y.current,t];return y.current=a,_(a),a};i.useEffect(()=>{if(!w.current)return;let e=!1,t=null;return(async()=>{const{SuperDoc:a}=await import("superdoc");e||(t=new a({selector:w.current,document:s.source,documentMode:"viewing",modules:{comments:!1},onReady:()=>{e||(t?.activeEditor&&V(t.activeEditor),S({type:"ready"}),Y(!0))}}),D.current=t)})(),()=>{e=!0,t&&typeof t.destroy=="function"&&t.destroy(),D.current=null}},[s.source,s.mode,V]),i.useEffect(()=>{if(!s.validation?.scroll?.required||!B)return;const e=w.current;if(!e)return;const t=()=>{const{scrollTop:r,scrollHeight:a,clientHeight:o}=e,m=r/(a-o);(m>=.95||a<=o)&&(F(!0),S({type:"scroll",data:{percent:Math.round(m*100)}}))};return e.addEventListener("scroll",t),t(),()=>e.removeEventListener("scroll",t)},[s.validation?.scroll?.required,B]);const Q=i.useCallback((e,t)=>{M(r=>{const a=r.get(e),o=new Map(r);return o.set(e,t),j({id:e,value:t}),S({type:"field_change",data:{fieldId:e,value:t,previousValue:a}}),T?.({id:e,value:t,previousValue:a}),o})},[T,j]),H=i.useCallback(()=>s.validation?.scroll?.required&&!x?!1:(n.signer||[]).every(e=>{if(!e.validation?.required)return!0;const t=p.get(e.id);return t&&(typeof t!="string"||t.trim())}),[x,n.signer,p,s.validation?.scroll?.required]);i.useEffect(()=>{const e=H();I(e),E?.({scrolled:x,fields:p,isValid:e,isSubmitting:h})},[x,p,h,H,E]);const Z=i.useCallback(async()=>{if(f)return;const e={eventId:u,documentSource:s.source,fields:{document:n.document||[],signer:(n.signer||[]).map(t=>({id:t.id,value:p.get(t.id)??null}))},fileName:g?.fileName||"document.pdf"};await k?.(e)},[f,u,s.source,n,p,g,k]),ee=i.useCallback(async()=>{if(!b||f||h)return;A(!0),S({type:"submit"});const e=S({type:"submit"}),t={eventId:u,timestamp:new Date().toISOString(),duration:Math.floor((Date.now()-G.current)/1e3),auditTrail:e,documentFields:n.document||[],signerFields:(n.signer||[]).map(r=>({id:r.id,value:p.get(r.id)??null})),isFullyCompleted:b};try{await R(t)}finally{A(!1)}},[b,f,h,u,n,p,R]),te=e=>{const t=e.component||ne(e.type);return l.jsx(t,{value:p.get(e.id)??null,onChange:r=>Q(e.id,r),isDisabled:f,label:e.label},e.id)},ne=e=>{switch(e){case"signature":case"text":return L;case"checkbox":return P}},se=()=>{const e=g?.component||he(g);return e?l.jsx(e,{onClick:Z,fileName:g?.fileName,isDisabled:f}):null},re=()=>{if(s.mode==="download")return null;const e=C?.component||ve(C);return l.jsx("div",{className:"superdoc-esign-actions superdoc-esign-form-actions",children:l.jsx(e,{onClick:ee,isValid:b,isDisabled:f,isSubmitting:h})})},O=se(),oe=re();return i.useImperativeHandle(d,()=>({getState:()=>({scrolled:x,fields:p,isValid:b,isSubmitting:h}),getAuditTrail:()=>y.current,reset:()=>{F(!s.validation?.scroll?.required),M(new Map),I(!1),y.current=[],_([])}})),l.jsxs("div",{className:`superdoc-esign-container ${$||""}`,style:K,children:[l.jsxs("div",{className:"superdoc-esign-document","data-testid":"superdoc-esign-document",children:[O&&l.jsx("div",{className:"superdoc-esign-document-toolbar",children:l.jsx("div",{className:"superdoc-esign-document-controls",children:O})}),l.jsx("div",{ref:w,className:"superdoc-esign-document-viewer","data-testid":"superdoc-scroll-container",style:{height:X,overflow:"auto"}})]}),l.jsxs("div",{className:"superdoc-esign-controls","data-testid":"superdoc-esign-controls",children:[n.signer&&n.signer.length>0&&l.jsx("div",{className:"superdoc-esign-fields","data-testid":"superdoc-esign-fields",children:n.signer.map(te)}),oe]})]})});W.displayName="SuperDocESign";exports.CheckboxInput=P;exports.SignatureInput=L;exports.default=W;

package/dist/index.mjs

@@ -1,301 +1,24 @@
-import pe, { forwardRef as me, useState as I, useRef as L, useEffect as te, useCallback as M, useImperativeHandle as ge } from "react";
-var re = { exports: {} }, W = {};
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var ie;
-function ve() {
-  if (ie) return W;
-  ie = 1;
-  var g = Symbol.for("react.transitional.element"), v = Symbol.for("react.fragment");
-  function m(a, n, d) {
-    var x = null;
-    if (d !== void 0 && (x = "" + d), n.key !== void 0 && (x = "" + n.key), "key" in n) {
-      d = {};
-      for (var S in n)
-        S !== "key" && (d[S] = n[S]);
-    } else d = n;
-    return n = d.ref, {
-      $$typeof: g,
-      type: a,
-      key: x,
-      ref: n !== void 0 ? n : null,
-      props: d
-    };
-  }
-  return W.Fragment = v, W.jsx = m, W.jsxs = m, W;
-}
-var V = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var ce;
-function be() {
-  return ce || (ce = 1, process.env.NODE_ENV !== "production" && (function() {
-    function g(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === oe ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case _:
-          return "Fragment";
-        case b:
-          return "Profiler";
-        case H:
-          return "StrictMode";
-        case T:
-          return "Suspense";
-        case Z:
-          return "SuspenseList";
-        case K:
-          return "Activity";
-      }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
-          case ne:
-            return "Portal";
-          case A:
-            return e.displayName || "Context";
-          case G:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case X:
-            var r = e.render;
-            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case Q:
-            return r = e.displayName || null, r !== null ? r : g(e.type) || "Memo";
-          case P:
-            r = e._payload, e = e._init;
-            try {
-              return g(e(r));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function v(e) {
-      return "" + e;
-    }
-    function m(e) {
-      try {
-        v(e);
-        var r = !1;
-      } catch {
-        r = !0;
-      }
-      if (r) {
-        r = console;
-        var c = r.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return c.call(
-          r,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          l
-        ), v(e);
-      }
-    }
-    function a(e) {
-      if (e === _) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === P)
-        return "<...>";
-      try {
-        var r = g(e);
-        return r ? "<" + r + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function n() {
-      var e = w.A;
-      return e === null ? null : e.getOwner();
-    }
-    function d() {
-      return Error("react-stack-top-frame");
-    }
-    function x(e) {
-      if (y.call(e, "key")) {
-        var r = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (r && r.isReactWarning) return !1;
-      }
-      return e.key !== void 0;
-    }
-    function S(e, r) {
-      function c() {
-        k || (k = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          r
-        ));
-      }
-      c.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: c,
-        configurable: !0
-      });
-    }
-    function z() {
-      var e = g(this.type);
-      return N[e] || (N[e] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), e = this.props.ref, e !== void 0 ? e : null;
-    }
-    function B(e, r, c, l, D, q) {
-      var u = c.ref;
-      return e = {
-        $$typeof: J,
-        type: e,
-        key: r,
-        props: c,
-        _owner: l
-      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
-        enumerable: !1,
-        get: z
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(e, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: D
-      }), Object.defineProperty(e, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: q
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function Y(e, r, c, l, D, q) {
-      var u = r.children;
-      if (u !== void 0)
-        if (l)
-          if (ae(u)) {
-            for (l = 0; l < u.length; l++)
-              $(u[l]);
-            Object.freeze && Object.freeze(u);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else $(u);
-      if (y.call(r, "key")) {
-        u = g(e);
-        var C = Object.keys(r).filter(function(se) {
-          return se !== "key";
-        });
-        l = 0 < C.length ? "{key: someKey, " + C.join(": ..., ") + ": ...}" : "{key: someKey}", j[u + l] || (C = 0 < C.length ? "{" + C.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          l,
-          u,
-          C,
-          u
-        ), j[u + l] = !0);
-      }
-      if (u = null, c !== void 0 && (m(c), u = "" + c), x(r) && (m(r.key), u = "" + r.key), "key" in r) {
-        c = {};
-        for (var F in r)
-          F !== "key" && (c[F] = r[F]);
-      } else c = r;
-      return u && S(
-        c,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), B(
-        e,
-        u,
-        c,
-        n(),
-        D,
-        q
-      );
-    }
-    function $(e) {
-      h(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === P && (e._payload.status === "fulfilled" ? h(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
-    function h(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === J;
-    }
-    var O = pe, J = Symbol.for("react.transitional.element"), ne = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), H = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), G = Symbol.for("react.consumer"), A = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), T = Symbol.for("react.suspense"), Z = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), K = Symbol.for("react.activity"), oe = Symbol.for("react.client.reference"), w = O.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, y = Object.prototype.hasOwnProperty, ae = Array.isArray, E = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    O = {
-      react_stack_bottom_frame: function(e) {
-        return e();
-      }
-    };
-    var k, N = {}, ee = O.react_stack_bottom_frame.bind(
-      O,
-      d
-    )(), U = E(a(d)), j = {};
-    V.Fragment = _, V.jsx = function(e, r, c) {
-      var l = 1e4 > w.recentlyCreatedOwnerStacks++;
-      return Y(
-        e,
-        r,
-        c,
-        !1,
-        l ? Error("react-stack-top-frame") : ee,
-        l ? E(a(e)) : U
-      );
-    }, V.jsxs = function(e, r, c) {
-      var l = 1e4 > w.recentlyCreatedOwnerStacks++;
-      return Y(
-        e,
-        r,
-        c,
-        !0,
-        l ? Error("react-stack-top-frame") : ee,
-        l ? E(a(e)) : U
-      );
-    };
-  })()), V;
-}
-var le;
-function xe() {
-  return le || (le = 1, process.env.NODE_ENV === "production" ? re.exports = ve() : re.exports = be()), re.exports;
-}
-var p = xe();
-const he = ({
-  value: g,
-  onChange: v,
-  isDisabled: m,
-  label: a
-}) => /* @__PURE__ */ p.jsxs(
+import { jsxs as x, jsx as a } from "react/jsx-runtime";
+import { forwardRef as le, useState as v, useRef as b, useEffect as F, useCallback as y, useImperativeHandle as de } from "react";
+const ue = ({
+  value: d,
+  onChange: m,
+  isDisabled: c,
+  label: s
+}) => /* @__PURE__ */ x(
   "div",
   {
     className: "superdoc-esign-signature-input",
     style: { display: "flex", flexDirection: "column", gap: "8px" },
     children: [
-      a && /* @__PURE__ */ p.jsx("label", { children: a }),
-      /* @__PURE__ */ p.jsx(
+      s && /* @__PURE__ */ a("label", { children: s }),
+      /* @__PURE__ */ a(
         "input",
         {
           type: "text",
-          value: String(g || ""),
-          onChange: (n) => v(n.target.value),
-          disabled: m,
+          value: String(d || ""),
+          onChange: (r) => m(r.target.value),
+          disabled: c,
           placeholder: "Type your full name",
           style: {
             fontFamily: "cursive",
@@ -305,40 +28,29 @@ const he = ({
       )
     ]
   }
-), ye = ({
-  value: g,
-  onChange: v,
-  isDisabled: m,
-  label: a
-}) => /* @__PURE__ */ p.jsxs(
-  "label",
-  {
-    className: "superdoc-esign-checkbox-input",
-    style: { display: "flex", gap: "8px" },
-    children: [
-      /* @__PURE__ */ p.jsx(
-        "input",
-        {
-          type: "checkbox",
-          checked: !!g,
-          onChange: (n) => v(n.target.checked),
-          disabled: m
-        }
-      ),
-      /* @__PURE__ */ p.jsx("span", { children: a })
-    ]
-  }
-), Ee = (g) => ({
-  onClick: m,
-  fileName: a,
-  isDisabled: n
-}) => {
-  const d = g?.label || "Download";
-  return /* @__PURE__ */ p.jsxs(
+), pe = ({
+  value: d,
+  onChange: m,
+  isDisabled: c,
+  label: s
+}) => /* @__PURE__ */ x("label", { className: "superdoc-esign-checkbox-input", style: { display: "flex", gap: "8px" }, children: [
+  /* @__PURE__ */ a(
+    "input",
+    {
+      type: "checkbox",
+      checked: !!d,
+      onChange: (r) => m(r.target.checked),
+      disabled: c
+    }
+  ),
+  /* @__PURE__ */ a("span", { children: s })
+] }), me = (d) => ({ onClick: c, fileName: s, isDisabled: r }) => {
+  const u = d?.label || "Download";
+  return /* @__PURE__ */ x(
     "button",
     {
-      onClick: m,
-      disabled: n,
+      onClick: c,
+      disabled: r,
       className: "superdoc-esign-btn superdoc-esign-btn--download",
       style: {
         padding: "8px 16px",
@@ -346,371 +58,293 @@ const he = ({
         border: "1px solid #d0d5dd",
         background: "#ffffff",
         color: "#333",
-        cursor: n ? "not-allowed" : "pointer",
-        opacity: n ? 0.5 : 1,
+        cursor: r ? "not-allowed" : "pointer",
+        opacity: r ? 0.5 : 1,
         fontSize: "16px",
         fontWeight: "bold"
       },
       children: [
-        d,
+        u,
         " ",
-        a && `(${a})`
+        s && `(${s})`
       ]
     }
   );
-}, _e = (g) => ({
-  onClick: m,
-  isValid: a,
-  isDisabled: n,
-  isSubmitting: d
-}) => {
-  const x = () => g?.label || "Submit";
-  return /* @__PURE__ */ p.jsx(
-    "button",
-    {
-      onClick: m,
-      disabled: !a || n || d,
-      className: "superdoc-esign-btn superdoc-esign-btn--submit",
-      style: {
-        padding: "12px 24px",
-        borderRadius: "6px",
-        border: "none",
-        background: "#007bff",
-        color: "#fff",
-        cursor: !a || n ? "not-allowed" : "pointer",
-        opacity: !a || n ? 0.5 : 1,
-        fontSize: "16px",
-        fontWeight: "bold"
-      },
-      children: x()
-    }
-  );
-}, Re = me((g, v) => {
-  const {
-    eventId: m,
-    document: a,
-    fields: n = {},
-    download: d,
-    submit: x,
-    onSubmit: S,
-    onDownload: z,
-    onStateChange: B,
-    onFieldChange: Y,
-    onFieldsDiscovered: $,
-    isDisabled: h = !1,
-    className: O,
-    style: J,
-    documentHeight: ne = "600px"
-  } = g, [_, H] = I(
-    !a.validation?.scroll?.required
-  ), [b, G] = I(
-    /* @__PURE__ */ new Map()
-  ), [A, X] = I(!1), [T, Z] = I(!1), [Q, P] = I([]), [K, oe] = I(!1), w = L(null), y = L(null), ae = L(Date.now()), E = L(n), k = L([]);
-  E.current = n, te(() => {
-    k.current = Q;
-  }, [Q]);
-  const N = M((t) => {
-    if (!y.current?.activeEditor) return;
-    const o = y.current.activeEditor, s = E.current.signer?.find(
-      (i) => i.id === t.id
-    );
-    let f;
-    s?.type === "signature" && t.value ? f = {
-      json: {
-        type: "image",
-        attrs: { src: typeof t.value == "string" && t.value.startsWith("data:image/") ? t.value : ee(String(t.value)), alt: "Signature" }
-      }
-    } : f = { text: String(t.value ?? "") }, t.id && o.commands.updateStructuredContentById(t.id, f);
-  }, []);
-  function ee(t) {
-    const o = globalThis.document.createElement("canvas"), s = o.getContext("2d"), f = 30;
-    s.font = `italic ${f}px cursive`;
-    const R = s.measureText(t).width, ue = f * 1.3, de = 4, fe = 6;
-    return o.width = Math.ceil(R + de * 2) + 20, o.height = Math.ceil(ue + fe * 2), s.font = `italic ${f}px cursive`, s.fillStyle = "black", s.textAlign = "center", s.textBaseline = "middle", s.fillText(t, o.width / 2, o.height / 2), o.toDataURL("image/png");
-  }
-  const U = M(
-    (t) => {
-      if (!t) return;
-      const o = t.helpers.structuredContentCommands.getStructuredContentTags(
-        t.state
-      ), s = /* @__PURE__ */ new Map();
-      E.current.document?.forEach((i) => {
-        i.id && s.set(i.id, i.value);
-      }), E.current.signer?.forEach((i) => {
-        i.value !== void 0 && s.set(i.id, i.value);
-      });
-      const f = o.map(({ node: i }) => ({
-        id: i.attrs.id,
-        label: i.attrs.label,
-        value: s.get(i.attrs.id) ?? i.textContent ?? ""
-      })).filter((i) => i.id);
-      f.length > 0 && ($?.(f), [
-        ...E.current.document || [],
-        ...E.current.signer || []
-      ].filter((R) => R.value !== void 0).forEach(
-        (R) => N({
-          id: R.id,
-          value: R.value
-        })
-      ));
-    },
-    [$, N]
-  ), j = (t) => {
-    const o = {
-      ...t,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    }, s = globalThis?.__SUPERDOC_AUDIT_MOCK__;
-    s && s(o);
-    const f = [...k.current, o];
-    return k.current = f, P(f), f;
-  };
-  te(() => w.current ? ((async () => {
-    const { SuperDoc: o } = await import("superdoc"), s = new o({
-      selector: w.current,
-      document: a.source,
-      documentMode: "viewing",
-      onReady: () => {
-        s.activeEditor && U(s.activeEditor), j({ type: "ready" }), oe(!0);
-      }
-    });
-    y.current = s;
-  })(), () => {
-    y.current && (typeof y.current.destroy == "function" && y.current.destroy(), y.current = null);
-  }) : void 0, [a.source, a.mode, U]), te(() => {
-    if (!a.validation?.scroll?.required || !K) return;
-    const t = w.current;
-    if (!t) return;
-    const o = () => {
-      const { scrollTop: s, scrollHeight: f, clientHeight: i } = t, R = s / (f - i);
-      (R >= 0.95 || f <= i) && (H(!0), j({
-        type: "scroll",
-        data: { percent: Math.round(R * 100) }
-      }));
-    };
-    return t.addEventListener("scroll", o), o(), () => t.removeEventListener("scroll", o);
-  }, [a.validation?.scroll?.required, K]);
-  const e = M(
-    (t, o) => {
-      G((s) => {
-        const f = s.get(t), i = new Map(s);
-        return i.set(t, o), N({
-          id: t,
-          value: o
-        }), j({
-          type: "field_change",
-          data: { fieldId: t, value: o, previousValue: f }
-        }), Y?.({
-          id: t,
-          value: o,
-          previousValue: f
-        }), i;
-      });
+}, ge = (d) => ({
+  onClick: c,
+  isValid: s,
+  isDisabled: r,
+  isSubmitting: u
+}) => /* @__PURE__ */ a(
+  "button",
+  {
+    onClick: c,
+    disabled: !s || r || u,
+    className: "superdoc-esign-btn superdoc-esign-btn--submit",
+    style: {
+      padding: "12px 24px",
+      borderRadius: "6px",
+      border: "none",
+      background: "#007bff",
+      color: "#fff",
+      cursor: !s || r ? "not-allowed" : "pointer",
+      opacity: !s || r ? 0.5 : 1,
+      fontSize: "16px",
+      fontWeight: "bold"
     },
-    [Y, N]
-  ), r = M(() => a.validation?.scroll?.required && !_ ? !1 : (n.signer || []).every((t) => {
-    if (!t.validation?.required) return !0;
-    const o = b.get(t.id);
-    return o && (typeof o != "string" || o.trim());
-  }), [
-    _,
-    n.signer,
-    b,
-    a.validation?.scroll?.required
-  ]);
-  te(() => {
-    const t = r();
-    X(t), B?.({
-      scrolled: _,
-      fields: b,
-      isValid: t,
-      isSubmitting: T
-    });
-  }, [_, b, T, r, B]);
-  const c = M(async () => {
-    if (h) return;
-    const t = {
-      eventId: m,
-      documentSource: a.source,
-      fields: {
-        document: n.document || [],
-        signer: (n.signer || []).map((o) => ({
-          id: o.id,
-          value: b.get(o.id) ?? null
-        }))
+    children: d?.label || "Submit"
+  }
+), fe = le(
+  (d, m) => {
+    const {
+      eventId: c,
+      document: s,
+      fields: r = {},
+      download: u,
+      submit: R,
+      onSubmit: k,
+      onDownload: M,
+      onStateChange: A,
+      onFieldChange: I,
+      onFieldsDiscovered: q,
+      isDisabled: g = !1,
+      className: P,
+      style: K,
+      documentHeight: X = "600px"
+    } = d, [S, B] = v(!s.validation?.scroll?.required), [l, _] = v(/* @__PURE__ */ new Map()), [w, U] = v(!1), [f, V] = v(!1), [H, L] = v([]), [z, Y] = v(!1), N = b(null), T = b(null), G = b(Date.now()), h = b(r), C = b([]), O = b(q);
+    h.current = r, O.current = q, F(() => {
+      C.current = H;
+    }, [H]);
+    const E = y((e) => {
+      if (!T.current?.activeEditor) return;
+      const t = T.current.activeEditor, n = h.current.signer?.find((o) => o.id === e.id);
+      let i;
+      n?.type === "signature" && e.value ? i = {
+        json: {
+          type: "image",
+          attrs: { src: typeof e.value == "string" && e.value.startsWith("data:image/") ? e.value : J(String(e.value)), alt: "Signature" }
+        }
+      } : i = { text: String(e.value ?? "") }, e.id && t.commands.updateStructuredContentById(e.id, i);
+    }, []);
+    function J(e) {
+      const t = globalThis.document.createElement("canvas"), n = t.getContext("2d"), i = 30;
+      n.font = `italic ${i}px cursive`;
+      const p = n.measureText(e).width, ie = i * 1.3, ae = 4, ce = 6;
+      return t.width = Math.ceil(p + ae * 2) + 20, t.height = Math.ceil(ie + ce * 2), n.font = `italic ${i}px cursive`, n.fillStyle = "black", n.textAlign = "center", n.textBaseline = "middle", n.fillText(e, t.width / 2, t.height / 2), t.toDataURL("image/png");
+    }
+    const W = y(
+      (e) => {
+        if (!e) return;
+        const t = e.helpers.structuredContentCommands.getStructuredContentTags(
+          e.state
+        ), n = /* @__PURE__ */ new Map();
+        h.current.document?.forEach((o) => {
+          o.id && n.set(o.id, o.value);
+        }), h.current.signer?.forEach((o) => {
+          o.value !== void 0 && n.set(o.id, o.value);
+        });
+        const i = t.map(({ node: o }) => ({
+          id: o.attrs.id,
+          label: o.attrs.label,
+          value: n.get(o.attrs.id) ?? o.textContent ?? ""
+        })).filter((o) => o.id);
+        i.length > 0 && (O.current?.(i), [
+          ...h.current.document || [],
+          ...h.current.signer || []
+        ].filter((p) => p.value !== void 0).forEach(
+          (p) => E({
+            id: p.id,
+            value: p.value
+          })
+        ));
       },
-      fileName: d?.fileName || "document.pdf"
-    };
-    await z?.(t);
-  }, [
-    h,
-    m,
-    a.source,
-    n,
-    b,
-    d,
-    z
-  ]), l = M(async () => {
-    if (!A || h || T) return;
-    Z(!0), j({ type: "submit" });
-    const t = j({ type: "submit" }), o = {
-      eventId: m,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      duration: Math.floor((Date.now() - ae.current) / 1e3),
-      auditTrail: t,
-      documentFields: n.document || [],
-      signerFields: (n.signer || []).map((s) => ({
-        id: s.id,
-        value: b.get(s.id) ?? null
-      })),
-      isFullyCompleted: A
+      [E]
+    ), D = (e) => {
+      const t = {
+        ...e,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      }, n = globalThis?.__SUPERDOC_AUDIT_MOCK__;
+      n && n(t);
+      const i = [...C.current, t];
+      return C.current = i, L(i), i;
     };
-    try {
-      await S(o);
-    } finally {
-      Z(!1);
-    }
-  }, [
-    A,
-    h,
-    T,
-    m,
-    n,
-    b,
-    S
-  ]), D = (t) => {
-    const o = t.component || q(t.type);
-    return /* @__PURE__ */ p.jsx(
-      o,
-      {
-        value: b.get(t.id) ?? null,
-        onChange: (s) => e(t.id, s),
-        isDisabled: h,
-        label: t.label
+    F(() => {
+      if (!N.current) return;
+      let e = !1, t = null;
+      return (async () => {
+        const { SuperDoc: i } = await import("superdoc");
+        e || (t = new i({
+          selector: N.current,
+          document: s.source,
+          documentMode: "viewing",
+          modules: {
+            comments: !1
+          },
+          onReady: () => {
+            e || (t?.activeEditor && W(t.activeEditor), D({ type: "ready" }), Y(!0));
+          }
+        }), T.current = t);
+      })(), () => {
+        e = !0, t && typeof t.destroy == "function" && t.destroy(), T.current = null;
+      };
+    }, [s.source, s.mode, W]), F(() => {
+      if (!s.validation?.scroll?.required || !z) return;
+      const e = N.current;
+      if (!e) return;
+      const t = () => {
+        const { scrollTop: n, scrollHeight: i, clientHeight: o } = e, p = n / (i - o);
+        (p >= 0.95 || i <= o) && (B(!0), D({
+          type: "scroll",
+          data: { percent: Math.round(p * 100) }
+        }));
+      };
+      return e.addEventListener("scroll", t), t(), () => e.removeEventListener("scroll", t);
+    }, [s.validation?.scroll?.required, z]);
+    const Q = y(
+      (e, t) => {
+        _((n) => {
+          const i = n.get(e), o = new Map(n);
+          return o.set(e, t), E({
+            id: e,
+            value: t
+          }), D({
+            type: "field_change",
+            data: { fieldId: e, value: t, previousValue: i }
+          }), I?.({
+            id: e,
+            value: t,
+            previousValue: i
+          }), o;
+        });
       },
-      t.id
-    );
-  }, q = (t) => {
-    switch (t) {
-      case "signature":
-      case "text":
-        return he;
-      case "checkbox":
-        return ye;
-    }
-  }, u = () => {
-    const t = d?.component || Ee(d);
-    return t ? /* @__PURE__ */ p.jsx(
-      t,
-      {
-        onClick: c,
-        fileName: d?.fileName,
-        isDisabled: h
+      [I, E]
+    ), $ = y(() => s.validation?.scroll?.required && !S ? !1 : (r.signer || []).every((e) => {
+      if (!e.validation?.required) return !0;
+      const t = l.get(e.id);
+      return t && (typeof t != "string" || t.trim());
+    }), [S, r.signer, l, s.validation?.scroll?.required]);
+    F(() => {
+      const e = $();
+      U(e), A?.({
+        scrolled: S,
+        fields: l,
+        isValid: e,
+        isSubmitting: f
+      });
+    }, [S, l, f, $, A]);
+    const Z = y(async () => {
+      if (g) return;
+      const e = {
+        eventId: c,
+        documentSource: s.source,
+        fields: {
+          document: r.document || [],
+          signer: (r.signer || []).map((t) => ({
+            id: t.id,
+            value: l.get(t.id) ?? null
+          }))
+        },
+        fileName: u?.fileName || "document.pdf"
+      };
+      await M?.(e);
+    }, [g, c, s.source, r, l, u, M]), ee = y(async () => {
+      if (!w || g || f) return;
+      V(!0), D({ type: "submit" });
+      const e = D({ type: "submit" }), t = {
+        eventId: c,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        duration: Math.floor((Date.now() - G.current) / 1e3),
+        auditTrail: e,
+        documentFields: r.document || [],
+        signerFields: (r.signer || []).map((n) => ({
+          id: n.id,
+          value: l.get(n.id) ?? null
+        })),
+        isFullyCompleted: w
+      };
+      try {
+        await k(t);
+      } finally {
+        V(!1);
       }
-    ) : null;
-  }, C = () => {
-    if (a.mode === "download")
-      return null;
-    const t = x?.component || _e(x);
-    return /* @__PURE__ */ p.jsx(
-      "div",
-      {
-        className: "superdoc-esign-actions superdoc-esign-form-actions",
-        style: { display: "flex", gap: "10px" },
-        children: /* @__PURE__ */ p.jsx(
-          t,
-          {
-            onClick: l,
-            isValid: A,
-            isDisabled: h,
-            isSubmitting: T
-          }
-        )
+    }, [w, g, f, c, r, l, k]), te = (e) => {
+      const t = e.component || ne(e.type);
+      return /* @__PURE__ */ a(
+        t,
+        {
+          value: l.get(e.id) ?? null,
+          onChange: (n) => Q(e.id, n),
+          isDisabled: g,
+          label: e.label
+        },
+        e.id
+      );
+    }, ne = (e) => {
+      switch (e) {
+        case "signature":
+        case "text":
+          return ue;
+        case "checkbox":
+          return pe;
       }
-    );
-  }, F = u(), se = C();
-  return ge(v, () => ({
-    getState: () => ({
-      scrolled: _,
-      fields: b,
-      isValid: A,
-      isSubmitting: T
-    }),
-    getAuditTrail: () => k.current,
-    reset: () => {
-      H(!a.validation?.scroll?.required), G(/* @__PURE__ */ new Map()), X(!1), k.current = [], P([]);
-    }
-  })), /* @__PURE__ */ p.jsxs(
-    "div",
-    {
-      className: `superdoc-esign-container ${O || ""}`,
-      style: J,
-      children: [
-        /* @__PURE__ */ p.jsxs(
-          "div",
-          {
-            className: "superdoc-esign-document",
-            "data-testid": "superdoc-esign-document",
-            style: { display: "flex", flexDirection: "column" },
-            children: [
-              F && /* @__PURE__ */ p.jsx(
-                "div",
-                {
-                  className: "superdoc-esign-document-toolbar",
-                  style: {
-                    display: "flex",
-                    justifyContent: "flex-end",
-                    alignItems: "center",
-                    padding: "8px 12px"
-                  },
-                  children: /* @__PURE__ */ p.jsx(
-                    "div",
-                    {
-                      className: "superdoc-esign-document-controls",
-                      style: { display: "flex", gap: "8px" },
-                      children: F
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ p.jsx(
-                "div",
-                {
-                  ref: w,
-                  className: "superdoc-esign-document-viewer",
-                  "data-testid": "superdoc-scroll-container",
-                  style: { height: ne, overflow: "auto" }
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ p.jsxs(
+    }, re = () => {
+      const e = u?.component || me(u);
+      return e ? /* @__PURE__ */ a(
+        e,
+        {
+          onClick: Z,
+          fileName: u?.fileName,
+          isDisabled: g
+        }
+      ) : null;
+    }, oe = () => {
+      if (s.mode === "download")
+        return null;
+      const e = R?.component || ge(R);
+      return /* @__PURE__ */ a("div", { className: "superdoc-esign-actions superdoc-esign-form-actions", children: /* @__PURE__ */ a(
+        e,
+        {
+          onClick: ee,
+          isValid: w,
+          isDisabled: g,
+          isSubmitting: f
+        }
+      ) });
+    }, j = re(), se = oe();
+    return de(m, () => ({
+      getState: () => ({
+        scrolled: S,
+        fields: l,
+        isValid: w,
+        isSubmitting: f
+      }),
+      getAuditTrail: () => C.current,
+      reset: () => {
+        B(!s.validation?.scroll?.required), _(/* @__PURE__ */ new Map()), U(!1), C.current = [], L([]);
+      }
+    })), /* @__PURE__ */ x("div", { className: `superdoc-esign-container ${P || ""}`, style: K, children: [
+      /* @__PURE__ */ x("div", { className: "superdoc-esign-document", "data-testid": "superdoc-esign-document", children: [
+        j && /* @__PURE__ */ a("div", { className: "superdoc-esign-document-toolbar", children: /* @__PURE__ */ a("div", { className: "superdoc-esign-document-controls", children: j }) }),
+        /* @__PURE__ */ a(
           "div",
           {
-            className: "superdoc-esign-controls",
-            style: { marginTop: "20px" },
-            "data-testid": "superdoc-esign-controls",
-            children: [
-              n.signer && n.signer.length > 0 && /* @__PURE__ */ p.jsx(
-                "div",
-                {
-                  className: "superdoc-esign-fields",
-                  style: { marginBottom: "20px" },
-                  "data-testid": "superdoc-esign-fields",
-                  children: n.signer.map(D)
-                }
-              ),
-              se
-            ]
+            ref: N,
+            className: "superdoc-esign-document-viewer",
+            "data-testid": "superdoc-scroll-container",
+            style: { height: X, overflow: "auto" }
           }
         )
-      ]
-    }
-  );
-});
-Re.displayName = "SuperDocESign";
+      ] }),
+      /* @__PURE__ */ x("div", { className: "superdoc-esign-controls", "data-testid": "superdoc-esign-controls", children: [
+        r.signer && r.signer.length > 0 && /* @__PURE__ */ a("div", { className: "superdoc-esign-fields", "data-testid": "superdoc-esign-fields", children: r.signer.map(te) }),
+        se
+      ] })
+    ] });
+  }
+);
+fe.displayName = "SuperDocESign";
 export {
-  ye as CheckboxInput,
-  he as SignatureInput,
-  Re as default
+  pe as CheckboxInput,
+  ue as SignatureInput,
+  fe as default
 };

package/dist/test/setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAQ1C,eAAO,MAAM,gBAAgB,YAE5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,MAAM,MAAM,EACZ,OAAO,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,SAG/B,CAAC;AAEF,eAAO,MAAM,kBAAkB,gBAA+C,CAAC"}
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAQ1C,eAAO,MAAM,gBAAgB,YAE5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,SAE5E,CAAC;AAEF,eAAO,MAAM,kBAAkB,gBAA+C,CAAC"}

package/dist/types.d.ts

@@ -6,7 +6,7 @@ export interface DocumentField extends FieldReference {
     value: FieldValue;
 }
 export interface SignerField extends FieldReference {
-    type: "signature" | "checkbox" | "text";
+    type: 'signature' | 'checkbox' | 'text';
     label?: string;
     value?: FieldValue;
     validation?: {
@@ -44,7 +44,7 @@ export interface SubmitConfig {
 }
 export interface DocumentConfig {
     source: string | File | Blob;
-    mode?: "full" | "download";
+    mode?: 'full' | 'download';
     validation?: {
         scroll?: {
             required?: boolean;
@@ -101,7 +101,7 @@ export interface SubmitData {
 }
 export interface AuditEvent {
     timestamp: string;
-    type: "ready" | "scroll" | "field_change" | "submit";
+    type: 'ready' | 'scroll' | 'field_change' | 'submit';
     data?: Record<string, unknown>;
 }
 export type FieldInfo = DocumentField & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superdoc-dev/esign",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "React eSignature component for SuperDoc",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,23 +11,27 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./styles.css": "./src/styles.css"
   },
   "files": [
     "dist",
+    "src/styles.css",
     "README.md"
   ],
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
     "type-check": "tsc --noEmit",
-    "lint": "eslint src --ext .ts,.tsx",
-    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "lint": "eslint src demo",
+    "lint:fix": "eslint src demo --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"demo/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\" \"demo/**/*.{ts,tsx}\"",
     "test": "vitest",
     "test:watch": "vitest --watch",
     "prepare": "husky",
     "release": "semantic-release",
-    "check:all": "pnpm run type-check && pnpm run lint && pnpm run format"
+    "check:all": "pnpm run format:check && pnpm run lint && pnpm run type-check && pnpm run build"
   },
   "repository": {
     "type": "git",
@@ -72,17 +76,24 @@
     "eslint-plugin-react-hooks": "^6.1.0",
     "husky": "^9.1.7",
     "jsdom": "^27.0.0",
+    "lint-staged": "^16.2.7",
     "prettier": "^3.6.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "semantic-release": "^24.2.9",
-    "superdoc": "^0.29.0",
+    "superdoc": "^0.35.3",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.44.1",
     "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
   },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ]
+  },
   "publishConfig": {
     "access": "public"
   },

package/src/styles.css

@@ -0,0 +1,51 @@
+/**
+ * SuperDoc eSign - Default Styles
+ *
+ * These styles provide sensible defaults for the eSign component.
+ * Import this file to get a basic layout, or skip it and write your own CSS.
+ *
+ * Usage:
+ *   import '@superdoc-dev/esign/styles.css';
+ *
+ * All classes can be customized with standard CSS:
+ *
+ *   .superdoc-esign-container          - Root container (also accepts className prop)
+ *   .superdoc-esign-document           - Document section wrapper
+ *   .superdoc-esign-document-toolbar   - Toolbar with download button
+ *   .superdoc-esign-document-controls  - Control buttons container
+ *   .superdoc-esign-document-viewer    - Scroll container (SuperDoc mounts inside)
+ *   .superdoc-esign-controls           - Bottom section with fields + submit
+ *   .superdoc-esign-fields             - Signer fields container
+ *   .superdoc-esign-actions            - Action buttons container
+ *   .superdoc-esign-form-actions       - Form submit button container (alias for actions)
+ */
+
+.superdoc-esign-document {
+  display: flex;
+  flex-direction: column;
+}
+
+.superdoc-esign-document-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px 12px;
+}
+
+.superdoc-esign-document-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.superdoc-esign-controls {
+  margin-top: 20px;
+}
+
+.superdoc-esign-fields {
+  margin-bottom: 20px;
+}
+
+.superdoc-esign-actions {
+  display: flex;
+  gap: 10px;
+}