@aoexl/sign-svelte 1.0.0

package/README.md

@@ -0,0 +1,126 @@
+# @aoexl/sign-svelte
+
+Svelte 4 integration for the [Aoexl Sign](https://aoexl.com) PDF eSignature SDK.
+
+---
+
+## Installation
+
+```bash
+npm install @aoexl/sign-svelte @aoexl/sign
+# peer dep
+npm install svelte
+```
+
+---
+
+## Quick start
+
+```svelte
+<script>
+  import AoexlSign from '@aoexl/sign-svelte'
+
+  const signers = [{ name: 'Jane Doe', email: 'jane@example.com', role: 'signer' }]
+
+  function handleComplete(event) {
+    const { signedPdfBytes, fields } = event.detail
+    console.log('Signing complete', fields)
+    // upload signedPdfBytes to your server
+  }
+
+  function handleError(event) {
+    console.error('Signing error', event.detail)
+  }
+</script>
+
+<AoexlSign
+  licenseKey="pk_live_xxxxxxxxxxxx"
+  pdfUrl="https://your-server.com/contract.pdf"
+  mode="sign"
+  {signers}
+  on:complete={handleComplete}
+  on:error={handleError}
+  style="display:block;height:700px;"
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `licenseKey` | `string` | — | **Required.** Your Aoexl license key. |
+| `pdfUrl` | `string` | — | **Required.** URL or data-URL of the PDF. |
+| `mode` | `'prepare' \| 'sign' \| 'view'` | `'sign'` | Viewer mode. |
+| `signers` | `Signer[]` | `[]` | Signer definitions. |
+| `fields` | `Field[]` | `[]` | Pre-placed fields (required in `sign`/`view` mode). |
+| `theme` | `{ primary?: string; accent?: string }` | `{}` | Color overrides. |
+| `workerSrc` | `string` | — | Custom PDF.js worker URL. |
+
+## Events
+
+| Event | `event.detail` type | Description |
+|-------|---------------------|-------------|
+| `complete` | `CompleteResult` | Fired when the user finishes signing / preparing. |
+| `error` | `Error` | Fired on any error (license, PDF load, etc.). |
+
+---
+
+## Modes
+
+| Mode | Description |
+|------|-------------|
+| `prepare` | Drag and drop fields onto the PDF; emits `complete` with the field layout and signer list. |
+| `sign` | Present pre-placed fields for the signer to fill and sign. |
+| `view` | Read-only rendering of a signed PDF. |
+
+---
+
+## Prepare mode example
+
+```svelte
+<script>
+  import AoexlSign from '@aoexl/sign-svelte'
+
+  let preparedFields = []
+  let preparedSigners = []
+
+  function handleComplete(event) {
+    preparedFields  = event.detail.fields
+    preparedSigners = event.detail.signers
+    // Save to your backend and send signing invitations
+  }
+</script>
+
+<AoexlSign
+  licenseKey="pk_live_xxxxxxxxxxxx"
+  pdfUrl="https://your-server.com/blank-contract.pdf"
+  mode="prepare"
+  on:complete={handleComplete}
+  on:error={(e) => console.error(e.detail)}
+  style="display:block;height:700px;"
+/>
+```
+
+---
+
+## TypeScript
+
+```ts
+import type { AoexlSignProps, AoexlSignEvents, Field, Signer, CompleteResult } from '@aoexl/sign-svelte'
+```
+
+---
+
+## Building
+
+```bash
+npm run build   # outputs dist/aoexl-sign-svelte.js (ESM) + dist/aoexl-sign-svelte.cjs (CJS)
+```
+
+---
+
+## License
+
+UNLICENSED — contact [Aoexl](https://aoexl.com) for a commercial license.

package/dist/aoexl-sign-svelte.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("svelte/internal"),g=require("svelte"),v=require("@aoexl/sign"),x="4";typeof window<"u"&&(window.__svelte||(window.__svelte={v:new Set})).v.add(x);function S(o){let e;return{c(){e=t.element("div"),e.textContent="Activating Aoexl Sign…",t.set_style(e,"position","absolute"),t.set_style(e,"inset","0"),t.set_style(e,"display","flex"),t.set_style(e,"align-items","center"),t.set_style(e,"justify-content","center"),t.set_style(e,"background","#F8FAFC"),t.set_style(e,"font-family","system-ui,sans-serif"),t.set_style(e,"color","#64748B"),t.set_style(e,"font-size","14px"),t.set_style(e,"z-index","10")},m(l,s){t.insert(l,e,s)},d(l){l&&t.detach(e)}}}function A(o){let e,l,s,i=o[1]&&S();return{c(){e=t.element("div"),i&&i.c(),l=t.space(),s=t.element("div"),t.set_style(s,"width","100%"),t.set_style(s,"height","100%"),t.set_style(e,"position","relative"),t.set_style(e,"width","100%"),t.set_style(e,"height","100%")},m(r,c){t.insert(r,e,c),i&&i.m(e,null),t.append(e,l),t.append(e,s),o[9](s)},p(r,[c]){r[1]?i||(i=S(),i.c(),i.m(e,l)):i&&(i.d(1),i=null)},i:t.noop,o:t.noop,d(r){r&&t.detach(e),i&&i.d(),o[9](null)}}}function C(o,e,l){let{licenseKey:s}=e,{pdfUrl:i}=e,{mode:r="sign"}=e,{signers:c=[]}=e,{fields:u=[]}=e,{theme:y={}}=e,{workerSrc:_=void 0}=e;const m=g.createEventDispatcher();let f,d=null,a=!1;async function h(){if(!(!f||!s||!i)){l(1,a=!0);try{d=await v.init({licenseKey:s,container:f,pdfUrl:i,mode:r,signers:c,fields:u,theme:y,workerSrc:_,onComplete:n=>m("complete",n),onError:n=>m("error",n)})}catch(n){m("error",n)}finally{l(1,a=!1)}}}function w(){d==null||d.destroy(),d=null}g.onMount(h),g.onDestroy(w);function k(n){t.binding_callbacks[n?"unshift":"push"](()=>{f=n,l(0,f)})}return o.$$set=n=>{"licenseKey"in n&&l(2,s=n.licenseKey),"pdfUrl"in n&&l(3,i=n.pdfUrl),"mode"in n&&l(4,r=n.mode),"signers"in n&&l(5,c=n.signers),"fields"in n&&l(6,u=n.fields),"theme"in n&&l(7,y=n.theme),"workerSrc"in n&&l(8,_=n.workerSrc)},o.$$.update=()=>{o.$$.dirty&28&&(s||i||r)&&(w(),h())},[f,a,s,i,r,c,u,y,_,k]}class b extends t.SvelteComponent{constructor(e){super(),t.init(this,e,C,A,t.safe_not_equal,{licenseKey:2,pdfUrl:3,mode:4,signers:5,fields:6,theme:7,workerSrc:8})}}exports.AoexlSign=b;exports.default=b;
+//# sourceMappingURL=aoexl-sign-svelte.cjs.map

package/dist/aoexl-sign-svelte.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aoexl-sign-svelte.cjs","sources":["../../../../node_modules/svelte/src/shared/version.js","../../../../node_modules/svelte/src/runtime/internal/disclose-version/index.js","../src/AoexlSign.svelte"],"sourcesContent":["// generated during release, do not modify\n\n/**\n * The current version, as set in package.json.\n *\n * https://svelte.dev/docs/svelte-compiler#svelte-version\n * @type {string}\n */\nexport const VERSION = '4.2.20';\nexport const PUBLIC_VERSION = '4';\n","import { PUBLIC_VERSION } from '../../../shared/version.js';\n\nif (typeof window !== 'undefined')\n\t// @ts-ignore\n\t(window.__svelte || (window.__svelte = { v: new Set() })).v.add(PUBLIC_VERSION);\n","<script>\n  /**\n   * @aoexl/sign-svelte — AoexlSign component\n   *\n   * Usage:\n   *   <script>\n   *   import AoexlSign from '@aoexl/sign-svelte'\n   *   <\\/script>\n   *\n   *   <AoexlSign\n   *     licenseKey=\"pk_live_xxx\"\n   *     pdfUrl=\"https://...\"\n   *     mode=\"sign\"\n   *     {signers}\n   *     {fields}\n   *     on:complete={handleComplete}\n   *     on:error={handleError}\n   *     style=\"height:600px\"\n   *   />\n   */\n\n  import { onMount, onDestroy, createEventDispatcher } from 'svelte'\n  import AoexlSign from '@aoexl/sign'\n\n  export let licenseKey\n  export let pdfUrl\n  export let mode      = 'sign'   // 'prepare' | 'sign' | 'view'\n  export let signers   = []\n  export let fields    = []\n  export let theme     = {}\n  export let workerSrc = undefined\n\n  const dispatch = createEventDispatcher()\n\n  let container\n  let instance = null\n  let loading  = false\n\n  async function mount() {\n    if (!container || !licenseKey || !pdfUrl) return\n    loading = true\n    try {\n      instance = await AoexlSign.init({\n        licenseKey,\n        container,\n        pdfUrl,\n        mode,\n        signers,\n        fields,\n        theme,\n        workerSrc,\n        onComplete: (result) => dispatch('complete', result),\n        onError:    (err)    => dispatch('error', err),\n      })\n    } catch (err) {\n      dispatch('error', err)\n    } finally {\n      loading = false\n    }\n  }\n\n  function destroy() {\n    instance?.destroy()\n    instance = null\n  }\n\n  onMount(mount)\n  onDestroy(destroy)\n\n  // Reactive: re-mount when key, URL or mode changes\n  $: if (licenseKey || pdfUrl || mode) {\n    destroy()\n    mount()\n  }\n</script>\n\n<div style=\"position:relative;width:100%;height:100%\">\n  {#if loading}\n    <!-- Loading overlay shown while the SDK initialises -->\n    <div\n      style=\"\n        position:absolute;\n        inset:0;\n        display:flex;\n        align-items:center;\n        justify-content:center;\n        background:#F8FAFC;\n        font-family:system-ui,sans-serif;\n        color:#64748B;\n        font-size:14px;\n        z-index:10;\n      \"\n    >\n      Activating Aoexl Sign&hellip;\n    </div>\n  {/if}\n  <div bind:this={container} style=\"width:100%;height:100%\" />\n</div>\n"],"names":["PUBLIC_VERSION","insert","target","div","anchor","ctx","create_if_block","div1","append","div0","licenseKey","$$props","pdfUrl","mode","signers","fields","theme","workerSrc","dispatch","createEventDispatcher","container","instance","loading","mount","$$invalidate","AoexlSign","result","err","destroy","onMount","onDestroy","$$value"],"mappings":"4LASaA,EAAiB,ICP1B,OAAO,OAAW,MAEpB,OAAO,WAAa,OAAO,SAAW,CAAE,EAAG,IAAI,GAAK,IAAK,EAAE,IAAIA,CAAc,8cC2E3EC,SAeMC,EAAAC,EAAAC,CAAA,mDAjBHC,EAAO,CAAA,GAAAC,EAAA,+OADdL,SAqBMC,EAAAK,EAAAH,CAAA,+BADJI,EAAAA,OAA4DD,EAAAE,CAAA,oBAnBvDJ,EAAO,CAAA,kIArDD,WAAAK,CAAU,EAAAC,GACV,OAAAC,CAAM,EAAAD,EACN,CAAA,KAAAE,EAAY,MAAM,EAAAF,GAClB,QAAAG,EAAO,CAAA,CAAA,EAAAH,GACP,OAAAI,EAAM,CAAA,CAAA,EAAAJ,GACN,MAAAK,EAAK,CAAA,CAAA,EAAAL,EACL,CAAA,UAAAM,EAAY,MAAS,EAAAN,EAE1B,MAAAO,EAAWC,EAAAA,sBAAqB,MAElCC,EACAC,EAAW,KACXC,EAAW,kBAEAC,GAAK,OACbH,GAAS,CAAKV,GAAU,CAAKE,GAClC,CAAAY,EAAA,EAAAF,EAAU,EAAI,MAEZD,EAAQ,MAASI,EAAU,KAAI,CAC7B,WAAAf,EACA,UAAAU,EACA,OAAAR,EACA,KAAAC,EACA,QAAAC,EACA,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,WAAaS,GAAWR,EAAS,WAAYQ,CAAM,EACnD,QAAaC,GAAWT,EAAS,QAASS,CAAG,UAExCA,EAAG,CACVT,EAAS,QAASS,CAAG,UAErBH,EAAA,EAAAF,EAAU,EAAK,aAIVM,GAAO,CACdP,GAAA,MAAAA,EAAU,UACVA,EAAW,KAGbQ,EAAAA,QAAQN,CAAK,EACbO,EAAAA,UAAUF,CAAO,6DA6BDR,EAASW,4RA1BlBrB,GAAcE,GAAUC,KAC7Be,EAAO,EACPL,EAAK","x_google_ignoreList":[0,1]}

package/dist/aoexl-sign-svelte.js

@@ -0,0 +1,114 @@
+import { SvelteComponent as C, init as U, safe_not_equal as K, noop as S, detach as b, insert as A, append as x, element as h, space as E, set_style as l, binding_callbacks as F } from "svelte/internal";
+import { createEventDispatcher as z, onMount as B, onDestroy as D } from "svelte";
+import I from "@aoexl/sign";
+const j = "4";
+typeof window < "u" && (window.__svelte || (window.__svelte = { v: /* @__PURE__ */ new Set() })).v.add(j);
+function k(r) {
+  let e;
+  return {
+    c() {
+      e = h("div"), e.textContent = "Activating Aoexl Sign…", l(e, "position", "absolute"), l(e, "inset", "0"), l(e, "display", "flex"), l(e, "align-items", "center"), l(e, "justify-content", "center"), l(e, "background", "#F8FAFC"), l(e, "font-family", "system-ui,sans-serif"), l(e, "color", "#64748B"), l(e, "font-size", "14px"), l(e, "z-index", "10");
+    },
+    m(n, f) {
+      A(n, e, f);
+    },
+    d(n) {
+      n && b(e);
+    }
+  };
+}
+function q(r) {
+  let e, n, f, i = (
+    /*loading*/
+    r[1] && k()
+  );
+  return {
+    c() {
+      e = h("div"), i && i.c(), n = E(), f = h("div"), l(f, "width", "100%"), l(f, "height", "100%"), l(e, "position", "relative"), l(e, "width", "100%"), l(e, "height", "100%");
+    },
+    m(o, c) {
+      A(o, e, c), i && i.m(e, null), x(e, n), x(e, f), r[9](f);
+    },
+    p(o, [c]) {
+      /*loading*/
+      o[1] ? i || (i = k(), i.c(), i.m(e, n)) : i && (i.d(1), i = null);
+    },
+    i: S,
+    o: S,
+    d(o) {
+      o && b(e), i && i.d(), r[9](null);
+    }
+  };
+}
+function L(r, e, n) {
+  let { licenseKey: f } = e, { pdfUrl: i } = e, { mode: o = "sign" } = e, { signers: c = [] } = e, { fields: u = [] } = e, { theme: m = {} } = e, { workerSrc: g = void 0 } = e;
+  const y = z();
+  let d, s = null, a = !1;
+  async function _() {
+    if (!(!d || !f || !i)) {
+      n(1, a = !0);
+      try {
+        s = await I.init({
+          licenseKey: f,
+          container: d,
+          pdfUrl: i,
+          mode: o,
+          signers: c,
+          fields: u,
+          theme: m,
+          workerSrc: g,
+          onComplete: (t) => y("complete", t),
+          onError: (t) => y("error", t)
+        });
+      } catch (t) {
+        y("error", t);
+      } finally {
+        n(1, a = !1);
+      }
+    }
+  }
+  function w() {
+    s == null || s.destroy(), s = null;
+  }
+  B(_), D(w);
+  function v(t) {
+    F[t ? "unshift" : "push"](() => {
+      d = t, n(0, d);
+    });
+  }
+  return r.$$set = (t) => {
+    "licenseKey" in t && n(2, f = t.licenseKey), "pdfUrl" in t && n(3, i = t.pdfUrl), "mode" in t && n(4, o = t.mode), "signers" in t && n(5, c = t.signers), "fields" in t && n(6, u = t.fields), "theme" in t && n(7, m = t.theme), "workerSrc" in t && n(8, g = t.workerSrc);
+  }, r.$$.update = () => {
+    r.$$.dirty & /*licenseKey, pdfUrl, mode*/
+    28 && (f || i || o) && (w(), _());
+  }, [
+    d,
+    a,
+    f,
+    i,
+    o,
+    c,
+    u,
+    m,
+    g,
+    v
+  ];
+}
+class P extends C {
+  constructor(e) {
+    super(), U(this, e, L, q, K, {
+      licenseKey: 2,
+      pdfUrl: 3,
+      mode: 4,
+      signers: 5,
+      fields: 6,
+      theme: 7,
+      workerSrc: 8
+    });
+  }
+}
+export {
+  P as AoexlSign,
+  P as default
+};
+//# sourceMappingURL=aoexl-sign-svelte.js.map

package/dist/aoexl-sign-svelte.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aoexl-sign-svelte.js","sources":["../../../../node_modules/svelte/src/shared/version.js","../../../../node_modules/svelte/src/runtime/internal/disclose-version/index.js","../src/AoexlSign.svelte"],"sourcesContent":["// generated during release, do not modify\n\n/**\n * The current version, as set in package.json.\n *\n * https://svelte.dev/docs/svelte-compiler#svelte-version\n * @type {string}\n */\nexport const VERSION = '4.2.20';\nexport const PUBLIC_VERSION = '4';\n","import { PUBLIC_VERSION } from '../../../shared/version.js';\n\nif (typeof window !== 'undefined')\n\t// @ts-ignore\n\t(window.__svelte || (window.__svelte = { v: new Set() })).v.add(PUBLIC_VERSION);\n","<script>\n  /**\n   * @aoexl/sign-svelte — AoexlSign component\n   *\n   * Usage:\n   *   <script>\n   *   import AoexlSign from '@aoexl/sign-svelte'\n   *   <\\/script>\n   *\n   *   <AoexlSign\n   *     licenseKey=\"pk_live_xxx\"\n   *     pdfUrl=\"https://...\"\n   *     mode=\"sign\"\n   *     {signers}\n   *     {fields}\n   *     on:complete={handleComplete}\n   *     on:error={handleError}\n   *     style=\"height:600px\"\n   *   />\n   */\n\n  import { onMount, onDestroy, createEventDispatcher } from 'svelte'\n  import AoexlSign from '@aoexl/sign'\n\n  export let licenseKey\n  export let pdfUrl\n  export let mode      = 'sign'   // 'prepare' | 'sign' | 'view'\n  export let signers   = []\n  export let fields    = []\n  export let theme     = {}\n  export let workerSrc = undefined\n\n  const dispatch = createEventDispatcher()\n\n  let container\n  let instance = null\n  let loading  = false\n\n  async function mount() {\n    if (!container || !licenseKey || !pdfUrl) return\n    loading = true\n    try {\n      instance = await AoexlSign.init({\n        licenseKey,\n        container,\n        pdfUrl,\n        mode,\n        signers,\n        fields,\n        theme,\n        workerSrc,\n        onComplete: (result) => dispatch('complete', result),\n        onError:    (err)    => dispatch('error', err),\n      })\n    } catch (err) {\n      dispatch('error', err)\n    } finally {\n      loading = false\n    }\n  }\n\n  function destroy() {\n    instance?.destroy()\n    instance = null\n  }\n\n  onMount(mount)\n  onDestroy(destroy)\n\n  // Reactive: re-mount when key, URL or mode changes\n  $: if (licenseKey || pdfUrl || mode) {\n    destroy()\n    mount()\n  }\n</script>\n\n<div style=\"position:relative;width:100%;height:100%\">\n  {#if loading}\n    <!-- Loading overlay shown while the SDK initialises -->\n    <div\n      style=\"\n        position:absolute;\n        inset:0;\n        display:flex;\n        align-items:center;\n        justify-content:center;\n        background:#F8FAFC;\n        font-family:system-ui,sans-serif;\n        color:#64748B;\n        font-size:14px;\n        z-index:10;\n      \"\n    >\n      Activating Aoexl Sign&hellip;\n    </div>\n  {/if}\n  <div bind:this={container} style=\"width:100%;height:100%\" />\n</div>\n"],"names":["PUBLIC_VERSION","insert","target","div","anchor","ctx","create_if_block","div1","append","div0","licenseKey","$$props","pdfUrl","mode","signers","fields","theme","workerSrc","dispatch","createEventDispatcher","container","instance","loading","mount","$$invalidate","AoexlSign","result","err","destroy","onMount","onDestroy","$$value"],"mappings":";;;AASO,MAAMA,IAAiB;ACP1B,OAAO,SAAW,QAEpB,OAAO,aAAa,OAAO,WAAW,EAAE,GAAG,oBAAI,IAAG,EAAE,IAAK,EAAE,IAAIA,CAAc;;;;;;;;AC2E3E,MAAAC,EAeMC,GAAAC,GAAAC,CAAA;AAAA;;;;;;;;;IAjBHC,EAAO,CAAA,KAAAC,EAAA;AAAA;;;;;;AADd,MAAAL,EAqBMC,GAAAK,GAAAH,CAAA,+BADJI,EAA4DD,GAAAE,CAAA;;;;MAnBvDJ,EAAO,CAAA;;;;;;;;;;QArDD,YAAAK,EAAU,IAAAC,KACV,QAAAC,EAAM,IAAAD,GACN,EAAA,MAAAE,IAAY,OAAM,IAAAF,KAClB,SAAAG,IAAO,CAAA,EAAA,IAAAH,KACP,QAAAI,IAAM,CAAA,EAAA,IAAAJ,KACN,OAAAK,IAAK,CAAA,EAAA,IAAAL,GACL,EAAA,WAAAM,IAAY,OAAS,IAAAN;AAE1B,QAAAO,IAAWC,EAAqB;MAElCC,GACAC,IAAW,MACXC,IAAW;iBAEAC,IAAK;WACbH,KAAS,CAAKV,KAAU,CAAKE,IAClC;AAAA,MAAAY,EAAA,GAAAF,IAAU,EAAI;;AAEZ,QAAAD,IAAQ,MAASI,EAAU,KAAI;AAAA,UAC7B,YAAAf;AAAA,UACA,WAAAU;AAAA,UACA,QAAAR;AAAA,UACA,MAAAC;AAAA,UACA,SAAAC;AAAA,UACA,QAAAC;AAAA,UACA,OAAAC;AAAA,UACA,WAAAC;AAAA,UACA,YAAa,CAAAS,MAAWR,EAAS,YAAYQ,CAAM;AAAA,UACnD,SAAa,CAAAC,MAAWT,EAAS,SAASS,CAAG;AAAA;eAExCA,GAAG;AACV,QAAAT,EAAS,SAASS,CAAG;AAAA;AAErB,QAAAH,EAAA,GAAAF,IAAU,EAAK;AAAA;;;WAIVM,IAAO;AACd,IAAAP,KAAA,QAAAA,EAAU,WACVA,IAAW;AAAA;AAGb,EAAAQ,EAAQN,CAAK,GACbO,EAAUF,CAAO;;;AA6BD,MAAAR,IAASW;;;;;;;WA1BlBrB,KAAcE,KAAUC,OAC7Be,EAAO,GACPL,EAAK;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1]}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@aoexl/sign-svelte",
+  "version": "1.0.0",
+  "description": "Svelte integration for Aoexl Sign PDF eSignature SDK",
+  "main": "dist/aoexl-sign-svelte.cjs",
+  "module": "dist/aoexl-sign-svelte.js",
+  "svelte": "src/AoexlSign.svelte",
+  "types": "src/index.d.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/AoexlSign.svelte",
+      "import": "./dist/aoexl-sign-svelte.js",
+      "require": "./dist/aoexl-sign-svelte.cjs"
+    }
+  },
+  "files": ["dist", "src/AoexlSign.svelte", "src/index.js", "src/index.d.ts"],
+  "scripts": {
+    "build": "vite build --config vite.config.mjs",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "svelte": ">=4"
+  },
+  "dependencies": {
+    "@aoexl/sign": "^1.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "svelte": "^4.0.0",
+    "vite": "^5.4.2"
+  },
+  "license": "UNLICENSED",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/AoexlSign.svelte

@@ -0,0 +1,98 @@
+<script>
+  /**
+   * @aoexl/sign-svelte — AoexlSign component
+   *
+   * Usage:
+   *   <script>
+   *   import AoexlSign from '@aoexl/sign-svelte'
+   *   <\/script>
+   *
+   *   <AoexlSign
+   *     licenseKey="pk_live_xxx"
+   *     pdfUrl="https://..."
+   *     mode="sign"
+   *     {signers}
+   *     {fields}
+   *     on:complete={handleComplete}
+   *     on:error={handleError}
+   *     style="height:600px"
+   *   />
+   */
+
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte'
+  import AoexlSign from '@aoexl/sign'
+
+  export let licenseKey
+  export let pdfUrl
+  export let mode      = 'sign'   // 'prepare' | 'sign' | 'view'
+  export let signers   = []
+  export let fields    = []
+  export let theme     = {}
+  export let workerSrc = undefined
+
+  const dispatch = createEventDispatcher()
+
+  let container
+  let instance = null
+  let loading  = false
+
+  async function mount() {
+    if (!container || !licenseKey || !pdfUrl) return
+    loading = true
+    try {
+      instance = await AoexlSign.init({
+        licenseKey,
+        container,
+        pdfUrl,
+        mode,
+        signers,
+        fields,
+        theme,
+        workerSrc,
+        onComplete: (result) => dispatch('complete', result),
+        onError:    (err)    => dispatch('error', err),
+      })
+    } catch (err) {
+      dispatch('error', err)
+    } finally {
+      loading = false
+    }
+  }
+
+  function destroy() {
+    instance?.destroy()
+    instance = null
+  }
+
+  onMount(mount)
+  onDestroy(destroy)
+
+  // Reactive: re-mount when key, URL or mode changes
+  $: if (licenseKey || pdfUrl || mode) {
+    destroy()
+    mount()
+  }
+</script>
+
+<div style="position:relative;width:100%;height:100%">
+  {#if loading}
+    <!-- Loading overlay shown while the SDK initialises -->
+    <div
+      style="
+        position:absolute;
+        inset:0;
+        display:flex;
+        align-items:center;
+        justify-content:center;
+        background:#F8FAFC;
+        font-family:system-ui,sans-serif;
+        color:#64748B;
+        font-size:14px;
+        z-index:10;
+      "
+    >
+      Activating Aoexl Sign&hellip;
+    </div>
+  {/if}
+  <div bind:this={container} style="width:100%;height:100%" />
+</div>

package/src/index.d.ts

@@ -0,0 +1,44 @@
+import type { SvelteComponentTyped } from 'svelte'
+import type { Field, Signer, CompleteResult, Theme } from '@aoexl/sign'
+
+// ── Re-export core types ─────────────────────────────────────────────────────
+export type { Field, Signer, CompleteResult, Theme }
+
+// ── Component props ──────────────────────────────────────────────────────────
+export interface AoexlSignProps {
+  licenseKey: string
+  pdfUrl: string
+  mode?: 'prepare' | 'sign' | 'view'
+  signers?: Signer[]
+  fields?: Field[]
+  theme?: Theme
+  workerSrc?: string
+}
+
+// ── Component events ─────────────────────────────────────────────────────────
+export interface AoexlSignEvents {
+  complete: CustomEvent<CompleteResult>
+  error: CustomEvent<Error>
+}
+
+/**
+ * Svelte 4 component wrapping the Aoexl Sign SDK.
+ *
+ * @example
+ * <AoexlSign
+ *   licenseKey="pk_live_xxx"
+ *   pdfUrl="https://example.com/doc.pdf"
+ *   mode="sign"
+ *   {signers}
+ *   on:complete={handleComplete}
+ *   on:error={handleError}
+ *   style="height:600px"
+ * />
+ */
+export declare class AoexlSign extends SvelteComponentTyped<
+  AoexlSignProps,
+  AoexlSignEvents,
+  {}
+> {}
+
+export default AoexlSign

package/src/index.js

@@ -0,0 +1,2 @@
+export { default } from './AoexlSign.svelte'
+export { default as AoexlSign } from './AoexlSign.svelte'