@polyguard/sdk 1.3.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/sdk.esm.js +15 -10
  2. package/dist/sdk.js +15 -10
  3. package/package.json +1 -1
  4. package/src/ui.js +15 -10
package/dist/sdk.esm.js CHANGED
@@ -10839,7 +10839,7 @@ var reconnecting_websocket_mjs_default = ReconnectingWebSocket;
10839
10839
 
10840
10840
  // src/ui.js
10841
10841
  var import_qrcode = __toESM(require_browser(), 1);
10842
- var LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" fill="none">
10842
+ var LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 200 200" fill="none">
10843
10843
  <style>
10844
10844
  .spinner-circle {
10845
10845
  animation: spin 1s linear infinite;
@@ -10869,19 +10869,24 @@ function buildModal() {
10869
10869
  modal.style.overflowY = "auto";
10870
10870
  modal.style.paddingTop = "24px";
10871
10871
  modal.innerHTML = `
10872
- <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 32px 24px 24px 24px; max-width: 340px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
10873
- <button id="polyguard-modal-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
10874
- <h2 style="margin-top: 0; font-size: 1.3rem; font-weight: 700; color: #222;">Identity Verification</h2>
10875
- <div style="font-size: 13px; color: #888; margin-bottom: 12px; font-weight: 500;">Powered by Polyguard</div>
10876
- <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 12px;"></div>
10877
- <div style="margin-bottom: 12px; font-weight: 600; color: #222;">Scan this QR code to verify your identity.</div>
10878
- <div style="display: flex; justify-content: center; gap: 12px; font-size: 12px; color: #5a6c7d; margin-bottom: 12px; flex-wrap: wrap;">
10872
+ <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 26px 19px 19px 19px; max-width: 272px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
10873
+ <button id="polyguard-modal-close" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
10874
+ <h2 style="margin-top: 0; font-size: 1.04rem; font-weight: 700; color: #222;">Quick Identity Verification</h2>
10875
+ <div style="font-size: 10px; color: #888; margin-bottom: 10px; font-weight: 500;">Powered by Polyguard</div>
10876
+ <div id="polyguard-qr" style="width: 160px; height: 160px; margin: 0 auto 13px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 10px;"></div>
10877
+ <div style="margin-bottom: 10px; font-weight: 600; font-size: 13px; color: #222;">Scan this QR code to verify your identity.</div>
10878
+ <ul style="text-align: left; margin: 0 0 13px 0; padding-left: 16px; font-size: 11px; color: #444;">
10879
+ <li>We use the Polyguard service to verify your identity.</li>
10880
+ <li>If you do not have the Polyguard app, the QR code will redirect you to download it from the App Store or Google Play.</li>
10881
+ <li>Your credentials remain private on your device.</li>
10882
+ </ul>
10883
+ <div style="display: flex; justify-content: center; gap: 10px; font-size: 10px; color: #5a6c7d; margin-bottom: 10px; flex-wrap: wrap;">
10879
10884
  <span>&#128274; Encrypted</span>
10880
10885
  <span>&#128241; On-device</span>
10881
10886
  <span>&#9202; Expires</span>
10882
10887
  </div>
10883
- <div id="polyguard-error" style="color: #b31d28; font-size: 14px; margin-bottom: 8px; display: none;"></div>
10884
- <button id="polyguard-modal-cancel" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer; margin-top: 8px; width: 100%; max-width: 240px;">Cancel</button>
10888
+ <div id="polyguard-error" style="color: #b31d28; font-size: 11px; margin-bottom: 6px; display: none;"></div>
10889
+ <button id="polyguard-modal-cancel" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 8px 26px; font-size: 13px; cursor: pointer; margin-top: 6px; width: 100%; max-width: 192px;">Cancel</button>
10885
10890
  </div>
10886
10891
  `;
10887
10892
  return modal;
package/dist/sdk.js CHANGED
@@ -10872,7 +10872,7 @@ var Polyguard = (() => {
10872
10872
 
10873
10873
  // src/ui.js
10874
10874
  var import_qrcode = __toESM(require_browser(), 1);
10875
- var LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" fill="none">
10875
+ var LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 200 200" fill="none">
10876
10876
  <style>
10877
10877
  .spinner-circle {
10878
10878
  animation: spin 1s linear infinite;
@@ -10902,19 +10902,24 @@ var Polyguard = (() => {
10902
10902
  modal.style.overflowY = "auto";
10903
10903
  modal.style.paddingTop = "24px";
10904
10904
  modal.innerHTML = `
10905
- <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 32px 24px 24px 24px; max-width: 340px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
10906
- <button id="polyguard-modal-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
10907
- <h2 style="margin-top: 0; font-size: 1.3rem; font-weight: 700; color: #222;">Identity Verification</h2>
10908
- <div style="font-size: 13px; color: #888; margin-bottom: 12px; font-weight: 500;">Powered by Polyguard</div>
10909
- <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 12px;"></div>
10910
- <div style="margin-bottom: 12px; font-weight: 600; color: #222;">Scan this QR code to verify your identity.</div>
10911
- <div style="display: flex; justify-content: center; gap: 12px; font-size: 12px; color: #5a6c7d; margin-bottom: 12px; flex-wrap: wrap;">
10905
+ <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 26px 19px 19px 19px; max-width: 272px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
10906
+ <button id="polyguard-modal-close" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
10907
+ <h2 style="margin-top: 0; font-size: 1.04rem; font-weight: 700; color: #222;">Quick Identity Verification</h2>
10908
+ <div style="font-size: 10px; color: #888; margin-bottom: 10px; font-weight: 500;">Powered by Polyguard</div>
10909
+ <div id="polyguard-qr" style="width: 160px; height: 160px; margin: 0 auto 13px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 10px;"></div>
10910
+ <div style="margin-bottom: 10px; font-weight: 600; font-size: 13px; color: #222;">Scan this QR code to verify your identity.</div>
10911
+ <ul style="text-align: left; margin: 0 0 13px 0; padding-left: 16px; font-size: 11px; color: #444;">
10912
+ <li>We use the Polyguard service to verify your identity.</li>
10913
+ <li>If you do not have the Polyguard app, the QR code will redirect you to download it from the App Store or Google Play.</li>
10914
+ <li>Your credentials remain private on your device.</li>
10915
+ </ul>
10916
+ <div style="display: flex; justify-content: center; gap: 10px; font-size: 10px; color: #5a6c7d; margin-bottom: 10px; flex-wrap: wrap;">
10912
10917
  <span>&#128274; Encrypted</span>
10913
10918
  <span>&#128241; On-device</span>
10914
10919
  <span>&#9202; Expires</span>
10915
10920
  </div>
10916
- <div id="polyguard-error" style="color: #b31d28; font-size: 14px; margin-bottom: 8px; display: none;"></div>
10917
- <button id="polyguard-modal-cancel" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer; margin-top: 8px; width: 100%; max-width: 240px;">Cancel</button>
10921
+ <div id="polyguard-error" style="color: #b31d28; font-size: 11px; margin-bottom: 6px; display: none;"></div>
10922
+ <button id="polyguard-modal-cancel" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 8px 26px; font-size: 13px; cursor: pointer; margin-top: 6px; width: 100%; max-width: 192px;">Cancel</button>
10918
10923
  </div>
10919
10924
  `;
10920
10925
  return modal;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@polyguard/sdk",
3
- "version": "1.3.0",
3
+ "version": "1.3.1",
4
4
  "type": "module",
5
5
  "main": "dist/sdk.esm.js",
6
6
  "module": "dist/sdk.esm.js",
package/src/ui.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import QRCode from 'qrcode';
2
2
 
3
3
  // Animated spinner SVG
4
- export const LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" fill="none">
4
+ export const LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 200 200" fill="none">
5
5
  <style>
6
6
  .spinner-circle {
7
7
  animation: spin 1s linear infinite;
@@ -32,19 +32,24 @@ export function buildModal() {
32
32
  modal.style.overflowY = 'auto';
33
33
  modal.style.paddingTop = '24px';
34
34
  modal.innerHTML = `
35
- <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 32px 24px 24px 24px; max-width: 340px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
36
- <button id="polyguard-modal-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
37
- <h2 style="margin-top: 0; font-size: 1.3rem; font-weight: 700; color: #222;">Identity Verification</h2>
38
- <div style="font-size: 13px; color: #888; margin-bottom: 12px; font-weight: 500;">Powered by Polyguard</div>
39
- <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 12px;"></div>
40
- <div style="margin-bottom: 12px; font-weight: 600; color: #222;">Scan this QR code to verify your identity.</div>
41
- <div style="display: flex; justify-content: center; gap: 12px; font-size: 12px; color: #5a6c7d; margin-bottom: 12px; flex-wrap: wrap;">
35
+ <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 26px 19px 19px 19px; max-width: 272px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
36
+ <button id="polyguard-modal-close" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
37
+ <h2 style="margin-top: 0; font-size: 1.04rem; font-weight: 700; color: #222;">Quick Identity Verification</h2>
38
+ <div style="font-size: 10px; color: #888; margin-bottom: 10px; font-weight: 500;">Powered by Polyguard</div>
39
+ <div id="polyguard-qr" style="width: 160px; height: 160px; margin: 0 auto 13px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 10px;"></div>
40
+ <div style="margin-bottom: 10px; font-weight: 600; font-size: 13px; color: #222;">Scan this QR code to verify your identity.</div>
41
+ <ul style="text-align: left; margin: 0 0 13px 0; padding-left: 16px; font-size: 11px; color: #444;">
42
+ <li>We use the Polyguard service to verify your identity.</li>
43
+ <li>If you do not have the Polyguard app, the QR code will redirect you to download it from the App Store or Google Play.</li>
44
+ <li>Your credentials remain private on your device.</li>
45
+ </ul>
46
+ <div style="display: flex; justify-content: center; gap: 10px; font-size: 10px; color: #5a6c7d; margin-bottom: 10px; flex-wrap: wrap;">
42
47
  <span>&#128274; Encrypted</span>
43
48
  <span>&#128241; On-device</span>
44
49
  <span>&#9202; Expires</span>
45
50
  </div>
46
- <div id="polyguard-error" style="color: #b31d28; font-size: 14px; margin-bottom: 8px; display: none;"></div>
47
- <button id="polyguard-modal-cancel" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 10px 32px; font-size: 16px; cursor: pointer; margin-top: 8px; width: 100%; max-width: 240px;">Cancel</button>
51
+ <div id="polyguard-error" style="color: #b31d28; font-size: 11px; margin-bottom: 6px; display: none;"></div>
52
+ <button id="polyguard-modal-cancel" style="background: #407796; color: #fff; font-weight: 600; border-radius: 8px; border: none; padding: 8px 26px; font-size: 13px; cursor: pointer; margin-top: 6px; width: 100%; max-width: 192px;">Cancel</button>
48
53
  </div>
49
54
  `;
50
55
  return modal;