@superdoc-dev/esign 1.0.0-next.1

package/README.md

@@ -0,0 +1,205 @@
+# @superdoc-dev/esign
+
+A React eSignature component for SuperDoc that handles document acceptance workflows.
+
+## Installation
+
+```bash
+npm install @superdoc-dev/esign superdoc
+```
+
+## Quick Start
+
+```jsx
+import React, { useRef, useState } from 'react';
+import SuperDocESign from '@superdoc-dev/esign';
+import 'superdoc/dist/style.css';
+
+function App() {
+  const esignRef = useRef();
+  const [status, setStatus] = useState({});
+
+  const handleAccept = async () => {
+    const auditData = await esignRef.current?.accept();
+    if (auditData) {
+      // Send to your API
+      await api.saveSignature(auditData);
+    }
+  };
+
+  return (
+    <div>
+      {/* Document viewer */}
+      <SuperDocESign
+        ref={esignRef}
+        document="https://example.com/agreement.docx"
+        requirements={{
+          scroll: true,
+          signature: true,
+          consents: ['terms', 'privacy']
+        }}
+        onChange={setStatus}
+        onAccept={handleAccept}
+      />
+
+      {/* Your signature UI */}
+      <input
+        type="text"
+        data-esign-signature
+        placeholder="Type your full name"
+        disabled={!status.scroll}
+      />
+
+      {/* Your consent UI */}
+      <label>
+        <input
+          type="checkbox"
+          data-esign-consent="terms"
+          disabled={!status.scroll || !status.signature}
+        />
+        I accept the terms
+      </label>
+
+      {/* Accept button */}
+      <button
+        onClick={() => esignRef.current?.accept()}
+        disabled={!status.isValid}
+      >
+        Accept Agreement
+      </button>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `document` | `string \| File \| Blob` | Document to display |
+| `requirements` | `Object` | What users must complete |
+| `fields` | `Array` | Initial field values |
+| `signatureSelector` | `string` | CSS selector for signature element (default: `[data-esign-signature]`) |
+| `consentSelector` | `string` | CSS selector for consent checkboxes (default: `[data-esign-consent]`) |
+| `onChange` | `(status) => void` | Called when requirements change |
+| `onAccept` | `(data) => void` | Called when document is accepted |
+| `onReady` | `() => void` | Called when component is ready |
+| `onFieldsDiscovered` | `(fields) => void` | Called when document fields are found |
+
+## Methods (via ref)
+
+- `accept()` - Process acceptance and return audit data
+- `reset()` - Clear all state
+- `updateFields(fields)` - Update document field values
+- `getStatus()` - Get current requirement status
+- `getFields()` - Get all document fields
+
+## Requirements
+
+Configure what users must complete before accepting:
+
+```jsx
+<SuperDocESign
+  requirements={{
+    scroll: true,        // Must scroll to bottom
+    signature: true,     // Must provide signature
+    consents: ['terms', 'privacy']  // Must check these boxes
+  }}
+/>
+```
+
+## Signature Input
+
+Use the `data-esign-signature` attribute on any input or canvas:
+
+```jsx
+{/* Text input */}
+<input type="text" data-esign-signature placeholder="Type your name" />
+
+{/* Canvas signature pad */}
+<canvas data-esign-signature width="400" height="200" />
+
+{/* Custom component */}
+<SignaturePad data-esign-signature data-signed={isSigned} />
+```
+
+## Consent Checkboxes
+
+Use the `data-esign-consent` attribute with a unique name:
+
+```jsx
+<label>
+  <input type="checkbox" data-esign-consent="terms" />
+  I accept the terms
+</label>
+
+<label>
+  <input type="checkbox" data-esign-consent="privacy" />
+  I acknowledge the privacy policy
+</label>
+```
+
+## Field Population
+
+Replace placeholders in your document with dynamic data:
+
+```jsx
+<SuperDocESign
+  fields={[
+    { alias: 'userName', value: 'John Doe' },
+    { alias: 'date', value: new Date().toLocaleDateString() },
+    { alias: 'company', value: 'Acme Inc.' }
+  ]}
+/>
+```
+
+## Audit Data
+
+When a user accepts, you receive comprehensive audit data:
+
+```typescript
+{
+  timestamp: "2024-01-15T10:30:00.000Z",
+  duration: 45,  // seconds spent on document
+  fields: [
+    { id: "field1", alias: "userName", value: "John Doe" }
+  ],
+  scrolled: true,
+  signed: true,
+  consents: ["terms", "privacy"],
+  signatureImage: "data:image/png;base64,..."  // if canvas
+}
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```typescript
+import SuperDocESign, { 
+  SuperDocESignHandle, 
+  Status, 
+  AuditData, 
+  FieldUpdate 
+} from '@superdoc-dev/esign';
+
+const esignRef = useRef<SuperDocESignHandle>(null);
+const [status, setStatus] = useState<Status>({
+  scroll: false,
+  signature: false,
+  consents: [],
+  isValid: false
+});
+
+const handleAccept = async (data: AuditData) => {
+  // Process acceptance
+};
+```
+
+## Examples
+
+See the [examples](./examples) directory for complete implementations.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+import { SuperDoc } from 'superdoc';
+export interface FieldUpdate {
+    id?: string;
+    alias?: string;
+    value: any;
+}
+export interface Status {
+    scroll: boolean;
+    signature: boolean;
+    consents: string[];
+    isValid: boolean;
+}
+export interface AuditData {
+    timestamp: string;
+    duration: number;
+    fields: FieldUpdate[];
+    scrolled: boolean;
+    signed: boolean;
+    consents: string[];
+    signatureImage?: string;
+}
+export interface FieldInfo {
+    id: string;
+    label?: string;
+    value?: any;
+}
+export interface DownloadRequestData {
+    blob: Blob;
+    fields: FieldInfo[];
+}
+export interface SuperDocESignProps {
+    document: string | File | Blob;
+    requirements?: {
+        scroll?: boolean;
+        signature?: boolean;
+        consents?: string[];
+    };
+    fields?: FieldUpdate[];
+    signatureSelector?: string;
+    consentSelector?: string;
+    downloadSelector?: string;
+    onReady?: () => void;
+    onChange?: (status: Status) => void;
+    onAccept?: (data: AuditData) => void | Promise<void>;
+    onFieldsDiscovered?: (fields: FieldInfo[]) => void;
+    onDownloadRequest?: (data: DownloadRequestData) => void | Promise<void>;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface SuperDocESignHandle {
+    accept: () => Promise<AuditData | false>;
+    reset: () => void;
+    updateFields: (fields: FieldUpdate[]) => void;
+    getStatus: () => Status;
+    getFields: () => FieldInfo[];
+    requestDownload: () => Promise<DownloadRequestData | false>;
+    superdoc: SuperDoc | null;
+}
+declare const SuperDocESign: React.ForwardRefExoticComponent<SuperDocESignProps & React.RefAttributes<SuperDocESignHandle>>;
+export default SuperDocESign;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IAEjC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAG/B,YAAY,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;IAGF,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IAGvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAG1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC;IACzC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,YAAY,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,SAAS,EAAE,CAAC;IAC7B,eAAe,EAAE,MAAM,OAAO,CAAC,mBAAmB,GAAG,KAAK,CAAC,CAAC;IAC5D,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC3B;AAED,QAAA,MAAM,aAAa,gGAiclB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,22 @@
+"use strict";var re=Object.create;var B=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var se=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var ce=(l,s,d,f)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of ae(s))!oe.call(l,o)&&o!==d&&B(l,o,{get:()=>s[o],enumerable:!(f=ne(s,o))||f.enumerable});return l};var le=(l,s,d)=>(d=l!=null?re(se(l)):{},ce(s||!l||!l.__esModule?B(d,"default",{value:l,enumerable:!0}):d,l));const c=require("react");var G={exports:{}},L={};/**
+ * @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 Z;function ue(){if(Z)return L;Z=1;var l=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function d(f,o,m){var S=null;if(m!==void 0&&(S=""+m),o.key!==void 0&&(S=""+o.key),"key"in o){m={};for(var h in o)h!=="key"&&(m[h]=o[h])}else m=o;return o=m.ref,{$$typeof:l,type:f,key:S,ref:o!==void 0?o:null,props:m}}return L.Fragment=s,L.jsx=d,L.jsxs=d,L}var F={};/**
+ * @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 Q;function ie(){return Q||(Q=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===_?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case R:return"Profiler";case W:return"StrictMode";case k:return"Suspense";case q:return"SuspenseList";case J: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 $:return"Portal";case v:return e.displayName||"Context";case U:return(e._context.displayName||"Context")+".Consumer";case z:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case T:return t=e.displayName||null,t!==null?t:l(e.type)||"Memo";case g:t=e._payload,e=e._init;try{return l(e(t))}catch{}}return null}function s(e){return""+e}function d(e){try{s(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),s(e)}}function f(e){if(e===E)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===g)return"<...>";try{var t=l(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function o(){var e=x.A;return e===null?null:e.getOwner()}function m(){return Error("react-stack-top-frame")}function S(e){if(C.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function h(e,t){function r(){P||(P=!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)",t))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function Y(){var e=l(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 H(e,t,r,n,u,i){var a=r.ref;return e={$$typeof:p,type:e,key:t,props:r,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:Y}):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:u}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function A(e,t,r,n,u,i){var a=t.children;if(a!==void 0)if(n)if(X(a)){for(n=0;n<a.length;n++)M(a[n]);Object.freeze&&Object.freeze(a)}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 M(a);if(C.call(t,"key")){a=l(e);var b=Object.keys(t).filter(function(te){return te!=="key"});n=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",w[a+n]||(b=0<b.length?"{"+b.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} />`,n,a,b,a),w[a+n]=!0)}if(a=null,r!==void 0&&(d(r),a=""+r),S(t)&&(d(t.key),a=""+t.key),"key"in t){r={};for(var I in t)I!=="key"&&(r[I]=t[I])}else r=t;return a&&h(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),H(e,a,r,o(),u,i)}function M(e){V(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===g&&(e._payload.status==="fulfilled"?V(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function V(e){return typeof e=="object"&&e!==null&&e.$$typeof===p}var y=c,p=Symbol.for("react.transitional.element"),$=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),W=Symbol.for("react.strict_mode"),R=Symbol.for("react.profiler"),U=Symbol.for("react.consumer"),v=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),k=Symbol.for("react.suspense"),q=Symbol.for("react.suspense_list"),T=Symbol.for("react.memo"),g=Symbol.for("react.lazy"),J=Symbol.for("react.activity"),_=Symbol.for("react.client.reference"),x=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,C=Object.prototype.hasOwnProperty,X=Array.isArray,O=console.createTask?console.createTask:function(){return null};y={react_stack_bottom_frame:function(e){return e()}};var P,N={},j=y.react_stack_bottom_frame.bind(y,m)(),D=O(f(m)),w={};F.Fragment=E,F.jsx=function(e,t,r){var n=1e4>x.recentlyCreatedOwnerStacks++;return A(e,t,r,!1,n?Error("react-stack-top-frame"):j,n?O(f(e)):D)},F.jsxs=function(e,t,r){var n=1e4>x.recentlyCreatedOwnerStacks++;return A(e,t,r,!0,n?Error("react-stack-top-frame"):j,n?O(f(e)):D)}})()),F}var K;function fe(){return K||(K=1,process.env.NODE_ENV==="production"?G.exports=ue():G.exports=ie()),G.exports}var de=fe();const ee=c.forwardRef(({document:l,requirements:s={},fields:d=[],signatureSelector:f="[data-esign-signature]",consentSelector:o="[data-esign-consent]",downloadSelector:m="[data-esign-download]",onReady:S,onChange:h,onAccept:Y,onFieldsDiscovered:H,onDownloadRequest:A,className:M,style:V},y)=>{const[p,$]=c.useState(!1),[E,W]=c.useState(!1),[R,U]=c.useState(new Set),[v,z]=c.useState(new Map),[k,q]=c.useState(!1),T=c.useRef(null),g=c.useRef(null),J=c.useRef(Date.now()),_=c.useCallback(()=>{const t=(s.consents||[]).every(r=>R.has(r));return{scroll:!s.scroll||p,signature:!s.signature||E,consents:Array.from(R),isValid:(!s.scroll||p)&&(!s.signature||E)&&t}},[p,E,R,s]);c.useEffect(()=>T.current?((async()=>{const{SuperDoc:t}=await import("superdoc"),r=new t({selector:T.current,document:l,documentMode:"viewing",onReady:()=>{q(!0),x(r),S?.()},onException:({error:n})=>{console.error("SuperDoc error:",n)}});g.current=r})(),()=>{g.current?.destroy?.(),g.current=null}):void 0,[l]);const x=e=>{if(!e.activeEditor)return;const t=e.activeEditor,r=t.helpers.structuredContentCommands.getStructuredContentTags(t.state),n=new Map;d.forEach(i=>{const a=i.id||i.alias;a&&n.set(a,i.value)});const u=r.map(({node:i})=>{const a=i.attrs.id,b=i.attrs.alias,I=n.get(a)??n.get(b);return{id:a,label:b,value:I??i.textContent??""}});if(u.length>0){const i=new Map(u.map(a=>[a.id,a]));z(i),H?.(u),d.forEach(a=>{C(a)})}},C=e=>{if(!g.current?.activeEditor)return;const t=g.current.activeEditor,r=String(e.value);e.id?t.commands.updateStructuredContentById(e.id,{text:r}):e.alias&&t.commands.updateStructuredContentByAlias(e.alias,{text:r})};c.useEffect(()=>{if(!s.scroll||!k)return;const e=T.current;if(!e)return;const t=()=>{const{scrollTop:r,scrollHeight:n,clientHeight:u}=e;(r/(n-u)>=.95||n<=u)&&$(!0)};return e.addEventListener("scroll",t),t(),()=>e.removeEventListener("scroll",t)},[s.scroll,k]),c.useEffect(()=>{if(!s.signature)return;const e=()=>{const n=globalThis.document.querySelector(f);if(!n)return;const u=X(n);W(u)},t=new MutationObserver(e);t.observe(globalThis.document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value","data-signed"]});const r=n=>{n.target.matches(f)&&e()};return globalThis.document.addEventListener("input",r,!0),globalThis.document.addEventListener("change",r,!0),e(),()=>{t.disconnect(),globalThis.document.removeEventListener("input",r,!0),globalThis.document.removeEventListener("change",r,!0)}},[s.signature,f]),c.useEffect(()=>{if(!s.consents||s.consents.length===0)return;const e=()=>{const r=globalThis.document.querySelectorAll(o),n=new Set;r.forEach(u=>{const i=u.name||u.dataset.esignConsent||u.id;i&&u.checked&&n.add(i)}),U(n)},t=r=>{r.target.matches(o)&&e()};return globalThis.document.addEventListener("change",t,!0),e(),()=>{globalThis.document.removeEventListener("change",t,!0)}},[s.consents,o]);const X=e=>{if(!e)return!1;if(e.tagName==="CANVAS"){const t=e,r=t.getContext("2d");return r?r.getImageData(0,0,t.width,t.height).data.some(u=>u!==0&&u!==255):!1}return"value"in e?!!e.value?.trim():e.dataset.signed==="true"},O=()=>{const e=globalThis.document.querySelector(f);if(e?.dataset.signatureImage)return e.dataset.signatureImage;if(e?.tagName==="CANVAS")return e.toDataURL("image/png")};c.useEffect(()=>{const e=_();h?.(e)},[p,E,R,s,_,h]);const P=c.useCallback(async()=>{if(!_().isValid)return!1;const t=Array.from(v.values()).map(n=>({id:n.id,alias:n.label,value:n.value})),r={timestamp:new Date().toISOString(),duration:Math.round((Date.now()-J.current)/1e3),fields:t,scrolled:p,signed:E,consents:Array.from(R),signatureImage:O()};return await Y?.(r),r},[v,p,E,R,_,Y]),N=c.useCallback(()=>{$(!1),W(!1),U(new Set),J.current=Date.now(),T.current&&(T.current.scrollTop=0);const e=globalThis.document.querySelector(f);e&&(e.tagName==="CANVAS"?e.getContext("2d")?.clearRect(0,0,e.clientWidth,e.clientHeight):"value"in e&&(e.value=""),e.dataset.signed="false"),globalThis.document.querySelectorAll(o).forEach(r=>{r.checked=!1})},[f,o]),j=c.useCallback(e=>{e.forEach(t=>{C(t);const r=v.get(t.id||"");r&&(r.value=t.value,z(new Map(v)))})},[v]),D=c.useCallback(()=>Array.from(v.values()),[v]),w=c.useCallback(async()=>{if(!g.current)return!1;try{const e=await g.current.export({exportType:["docx"],isFinalDoc:!0,triggerDownload:!1});if(!e)return!1;const t={blob:e,fields:Array.from(v.values())};return await A?.(t),t}catch(e){return console.error("Download request failed:",e),!1}},[v,A]);return c.useEffect(()=>{if(!k)return;const e=r=>{r.preventDefault(),w()},t=globalThis.document.querySelectorAll(m);return t.forEach(r=>{r.addEventListener("click",e)}),()=>{t.forEach(r=>{r.removeEventListener("click",e)})}},[m,k,w]),c.useImperativeHandle(y,()=>({accept:P,reset:N,updateFields:j,getStatus:_,getFields:D,requestDownload:w,superdoc:g.current}),[P,N,j,_,D,w]),de.jsx("div",{ref:T,className:`superdoc-esign ${M||""}`,"data-superdoc":"esign",style:V})});ee.displayName="SuperDocESign";module.exports=ee;

package/dist/index.mjs

@@ -0,0 +1,523 @@
+import ne, { forwardRef as ae, useState as F, useRef as Q, useCallback as A, useEffect as k, useImperativeHandle as oe } from "react";
+var X = { exports: {} }, Y = {};
+/**
+ * @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 K;
+function se() {
+  if (K) return Y;
+  K = 1;
+  var m = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
+  function p(i, c, u) {
+    var _ = null;
+    if (u !== void 0 && (_ = "" + u), c.key !== void 0 && (_ = "" + c.key), "key" in c) {
+      u = {};
+      for (var b in c)
+        b !== "key" && (u[b] = c[b]);
+    } else u = c;
+    return c = u.ref, {
+      $$typeof: m,
+      type: i,
+      key: _,
+      ref: c !== void 0 ? c : null,
+      props: u
+    };
+  }
+  return Y.Fragment = s, Y.jsx = p, Y.jsxs = p, Y;
+}
+var M = {};
+/**
+ * @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 ee;
+function ce() {
+  return ee || (ee = 1, process.env.NODE_ENV !== "production" && (function() {
+    function m(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === T ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case g:
+          return "Fragment";
+        case h:
+          return "Profiler";
+        case z:
+          return "StrictMode";
+        case y:
+          return "Suspense";
+        case B:
+          return "SuspenseList";
+        case H:
+          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 U:
+            return "Portal";
+          case f:
+            return e.displayName || "Context";
+          case J:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case G:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case R:
+            return t = e.displayName || null, t !== null ? t : m(e.type) || "Memo";
+          case d:
+            t = e._payload, e = e._init;
+            try {
+              return m(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function s(e) {
+      return "" + e;
+    }
+    function p(e) {
+      try {
+        s(e);
+        var t = !1;
+      } catch {
+        t = !0;
+      }
+      if (t) {
+        t = console;
+        var r = t.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return r.call(
+          t,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          n
+        ), s(e);
+      }
+    }
+    function i(e) {
+      if (e === g) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === d)
+        return "<...>";
+      try {
+        var t = m(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function c() {
+      var e = C.A;
+      return e === null ? null : e.getOwner();
+    }
+    function u() {
+      return Error("react-stack-top-frame");
+    }
+    function _(e) {
+      if (O.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function b(e, t) {
+      function r() {
+        N || (N = !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)",
+          t
+        ));
+      }
+      r.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: r,
+        configurable: !0
+      });
+    }
+    function V() {
+      var e = m(this.type);
+      return j[e] || (j[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 q(e, t, r, n, o, l) {
+      var a = r.ref;
+      return e = {
+        $$typeof: v,
+        type: e,
+        key: t,
+        props: r,
+        _owner: n
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: V
+      }) : 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: o
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: l
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function x(e, t, r, n, o, l) {
+      var a = t.children;
+      if (a !== void 0)
+        if (n)
+          if (Z(a)) {
+            for (n = 0; n < a.length; n++)
+              $(a[n]);
+            Object.freeze && Object.freeze(a);
+          } 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 $(a);
+      if (O.call(t, "key")) {
+        a = m(e);
+        var E = Object.keys(t).filter(function(re) {
+          return re !== "key";
+        });
+        n = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", S[a + n] || (E = 0 < E.length ? "{" + E.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} />`,
+          n,
+          a,
+          E,
+          a
+        ), S[a + n] = !0);
+      }
+      if (a = null, r !== void 0 && (p(r), a = "" + r), _(t) && (p(t.key), a = "" + t.key), "key" in t) {
+        r = {};
+        for (var L in t)
+          L !== "key" && (r[L] = t[L]);
+      } else r = t;
+      return a && b(
+        r,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), q(
+        e,
+        a,
+        r,
+        c(),
+        o,
+        l
+      );
+    }
+    function $(e) {
+      W(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === d && (e._payload.status === "fulfilled" ? W(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function W(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === v;
+    }
+    var w = ne, v = Symbol.for("react.transitional.element"), U = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), z = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), J = Symbol.for("react.consumer"), f = Symbol.for("react.context"), G = Symbol.for("react.forward_ref"), y = Symbol.for("react.suspense"), B = Symbol.for("react.suspense_list"), R = Symbol.for("react.memo"), d = Symbol.for("react.lazy"), H = Symbol.for("react.activity"), T = Symbol.for("react.client.reference"), C = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, Z = Array.isArray, P = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    w = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var N, j = {}, D = w.react_stack_bottom_frame.bind(
+      w,
+      u
+    )(), I = P(i(u)), S = {};
+    M.Fragment = g, M.jsx = function(e, t, r) {
+      var n = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return x(
+        e,
+        t,
+        r,
+        !1,
+        n ? Error("react-stack-top-frame") : D,
+        n ? P(i(e)) : I
+      );
+    }, M.jsxs = function(e, t, r) {
+      var n = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return x(
+        e,
+        t,
+        r,
+        !0,
+        n ? Error("react-stack-top-frame") : D,
+        n ? P(i(e)) : I
+      );
+    };
+  })()), M;
+}
+var te;
+function le() {
+  return te || (te = 1, process.env.NODE_ENV === "production" ? X.exports = se() : X.exports = ce()), X.exports;
+}
+var ue = le();
+const ie = ae(
+  ({
+    document: m,
+    requirements: s = {},
+    fields: p = [],
+    signatureSelector: i = "[data-esign-signature]",
+    consentSelector: c = "[data-esign-consent]",
+    downloadSelector: u = "[data-esign-download]",
+    onReady: _,
+    onChange: b,
+    onAccept: V,
+    onFieldsDiscovered: q,
+    onDownloadRequest: x,
+    className: $,
+    style: W
+  }, w) => {
+    const [v, U] = F(!1), [g, z] = F(!1), [h, J] = F(/* @__PURE__ */ new Set()), [f, G] = F(/* @__PURE__ */ new Map()), [y, B] = F(!1), R = Q(null), d = Q(null), H = Q(Date.now()), T = A(() => {
+      const t = (s.consents || []).every(
+        (r) => h.has(r)
+      );
+      return {
+        scroll: !s.scroll || v,
+        signature: !s.signature || g,
+        consents: Array.from(h),
+        isValid: (!s.scroll || v) && (!s.signature || g) && t
+      };
+    }, [v, g, h, s]);
+    k(() => R.current ? ((async () => {
+      const { SuperDoc: t } = await import("superdoc"), r = new t({
+        selector: R.current,
+        document: m,
+        documentMode: "viewing",
+        onReady: () => {
+          B(!0), C(r), _?.();
+        },
+        onException: ({ error: n }) => {
+          console.error("SuperDoc error:", n);
+        }
+      });
+      d.current = r;
+    })(), () => {
+      d.current?.destroy?.(), d.current = null;
+    }) : void 0, [m]);
+    const C = (e) => {
+      if (!e.activeEditor) return;
+      const t = e.activeEditor, r = t.helpers.structuredContentCommands.getStructuredContentTags(
+        t.state
+      ), n = /* @__PURE__ */ new Map();
+      p.forEach((l) => {
+        const a = l.id || l.alias;
+        a && n.set(a, l.value);
+      });
+      const o = r.map(({ node: l }) => {
+        const a = l.attrs.id, E = l.attrs.alias, L = n.get(a) ?? n.get(E);
+        return {
+          id: a,
+          label: E,
+          value: L ?? l.textContent ?? ""
+        };
+      });
+      if (o.length > 0) {
+        const l = new Map(o.map((a) => [a.id, a]));
+        G(l), q?.(o), p.forEach((a) => {
+          O(a);
+        });
+      }
+    }, O = (e) => {
+      if (!d.current?.activeEditor) return;
+      const t = d.current.activeEditor, r = String(e.value);
+      e.id ? t.commands.updateStructuredContentById(e.id, {
+        text: r
+      }) : e.alias && t.commands.updateStructuredContentByAlias(e.alias, {
+        text: r
+      });
+    };
+    k(() => {
+      if (!s.scroll || !y) return;
+      const e = R.current;
+      if (!e) return;
+      const t = () => {
+        const { scrollTop: r, scrollHeight: n, clientHeight: o } = e;
+        (r / (n - o) >= 0.95 || n <= o) && U(!0);
+      };
+      return e.addEventListener("scroll", t), t(), () => e.removeEventListener("scroll", t);
+    }, [s.scroll, y]), k(() => {
+      if (!s.signature) return;
+      const e = () => {
+        const n = globalThis.document.querySelector(
+          i
+        );
+        if (!n) return;
+        const o = Z(n);
+        z(o);
+      }, t = new MutationObserver(e);
+      t.observe(globalThis.document.body, {
+        childList: !0,
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["value", "data-signed"]
+      });
+      const r = (n) => {
+        n.target.matches(i) && e();
+      };
+      return globalThis.document.addEventListener("input", r, !0), globalThis.document.addEventListener("change", r, !0), e(), () => {
+        t.disconnect(), globalThis.document.removeEventListener("input", r, !0), globalThis.document.removeEventListener("change", r, !0);
+      };
+    }, [s.signature, i]), k(() => {
+      if (!s.consents || s.consents.length === 0) return;
+      const e = () => {
+        const r = globalThis.document.querySelectorAll(
+          c
+        ), n = /* @__PURE__ */ new Set();
+        r.forEach((o) => {
+          const l = o.name || o.dataset.esignConsent || o.id;
+          l && o.checked && n.add(l);
+        }), J(n);
+      }, t = (r) => {
+        r.target.matches(c) && e();
+      };
+      return globalThis.document.addEventListener("change", t, !0), e(), () => {
+        globalThis.document.removeEventListener("change", t, !0);
+      };
+    }, [s.consents, c]);
+    const Z = (e) => {
+      if (!e) return !1;
+      if (e.tagName === "CANVAS") {
+        const t = e, r = t.getContext("2d");
+        return r ? r.getImageData(0, 0, t.width, t.height).data.some(
+          (o) => o !== 0 && o !== 255
+        ) : !1;
+      }
+      return "value" in e ? !!e.value?.trim() : e.dataset.signed === "true";
+    }, P = () => {
+      const e = globalThis.document.querySelector(
+        i
+      );
+      if (e?.dataset.signatureImage)
+        return e.dataset.signatureImage;
+      if (e?.tagName === "CANVAS")
+        return e.toDataURL("image/png");
+    };
+    k(() => {
+      const e = T();
+      b?.(e);
+    }, [v, g, h, s, T, b]);
+    const N = A(async () => {
+      if (!T().isValid) return !1;
+      const t = Array.from(f.values()).map(
+        (n) => ({
+          id: n.id,
+          alias: n.label,
+          value: n.value
+        })
+      ), r = {
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        duration: Math.round((Date.now() - H.current) / 1e3),
+        fields: t,
+        scrolled: v,
+        signed: g,
+        consents: Array.from(h),
+        signatureImage: P()
+      };
+      return await V?.(r), r;
+    }, [f, v, g, h, T, V]), j = A(() => {
+      U(!1), z(!1), J(/* @__PURE__ */ new Set()), H.current = Date.now(), R.current && (R.current.scrollTop = 0);
+      const e = globalThis.document.querySelector(
+        i
+      );
+      e && (e.tagName === "CANVAS" ? e.getContext("2d")?.clearRect(
+        0,
+        0,
+        e.clientWidth,
+        e.clientHeight
+      ) : "value" in e && (e.value = ""), e.dataset.signed = "false"), globalThis.document.querySelectorAll(
+        c
+      ).forEach((r) => {
+        r.checked = !1;
+      });
+    }, [i, c]), D = A(
+      (e) => {
+        e.forEach((t) => {
+          O(t);
+          const r = f.get(t.id || "");
+          r && (r.value = t.value, G(new Map(f)));
+        });
+      },
+      [f]
+    ), I = A(() => Array.from(f.values()), [f]), S = A(async () => {
+      if (!d.current) return !1;
+      try {
+        const e = await d.current.export({
+          exportType: ["docx"],
+          isFinalDoc: !0,
+          triggerDownload: !1
+        });
+        if (!e) return !1;
+        const t = {
+          blob: e,
+          fields: Array.from(f.values())
+        };
+        return await x?.(t), t;
+      } catch (e) {
+        return console.error("Download request failed:", e), !1;
+      }
+    }, [f, x]);
+    return k(() => {
+      if (!y) return;
+      const e = (r) => {
+        r.preventDefault(), S();
+      }, t = globalThis.document.querySelectorAll(u);
+      return t.forEach((r) => {
+        r.addEventListener("click", e);
+      }), () => {
+        t.forEach((r) => {
+          r.removeEventListener("click", e);
+        });
+      };
+    }, [u, y, S]), oe(
+      w,
+      () => ({
+        accept: N,
+        reset: j,
+        updateFields: D,
+        getStatus: T,
+        getFields: I,
+        requestDownload: S,
+        superdoc: d.current
+      }),
+      [N, j, D, T, I, S]
+    ), /* @__PURE__ */ ue.jsx(
+      "div",
+      {
+        ref: R,
+        className: `superdoc-esign ${$ || ""}`,
+        "data-superdoc": "esign",
+        style: W
+      }
+    );
+  }
+);
+ie.displayName = "SuperDocESign";
+export {
+  ie as default
+};

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@superdoc-dev/esign",
+  "version": "1.0.0-next.1",
+  "description": "React eSignature component for SuperDoc",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "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}\"",
+    "prepare": "husky",
+    "release": "semantic-release",
+    "check:all": "pnpm run type-check && pnpm run lint && pnpm run format"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/superdoc-dev/esign.git"
+  },
+  "keywords": [
+    "superdoc",
+    "esign",
+    "esignature",
+    "clickwrap",
+    "agreement",
+    "document",
+    "signature",
+    "react"
+  ],
+  "author": "SuperDoc Team",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/superdoc-dev/esign/issues"
+  },
+  "homepage": "https://github.com/superdoc-dev/esign#readme",
+  "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.22.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@eslint/js": "^9.36.0",
+    "@types/node": "^24.5.2",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^6.1.0",
+    "husky": "^9.1.7",
+    "prettier": "^3.6.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "semantic-release": "^24.2.9",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.44.1",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}