@sekyro/elements 0.0.0-stage → 0.1.0-rc.0
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.
- package/CHANGELOG.md +1 -0
- package/LICENSE +29 -0
- package/README.md +247 -2
- package/custom-elements.json +355 -0
- package/dist/cdn/chunks/background-monitor-GCMNCJMG-UXYQ5GX7.js +1 -0
- package/dist/cdn/chunks/camera-trait-HVV5ZEDI-JB4HN6S3.js +1 -0
- package/dist/cdn/chunks/capture-session-doc-K6LVXAGQ-SY3B27LY.js +1 -0
- package/dist/cdn/chunks/chunk-2SENV5CV.js +1 -0
- package/dist/cdn/chunks/chunk-2ZVKLBJD.js +14 -0
- package/dist/cdn/chunks/chunk-3KIFGAEK.js +1 -0
- package/dist/cdn/chunks/chunk-3VYQXVW4.js +1 -0
- package/dist/cdn/chunks/chunk-4FHWXBOB.js +1 -0
- package/dist/cdn/chunks/chunk-562ANROG.js +1 -0
- package/dist/cdn/chunks/chunk-6MEPT5ZS.js +1 -0
- package/dist/cdn/chunks/chunk-7HJH5Q4M.js +1 -0
- package/dist/cdn/chunks/chunk-7XAIG23G.js +1 -0
- package/dist/cdn/chunks/chunk-C66GZ7NN.js +1 -0
- package/dist/cdn/chunks/chunk-CMDITVXF.js +1 -0
- package/dist/cdn/chunks/chunk-CMS5FVGM.js +1 -0
- package/dist/cdn/chunks/chunk-D334IAZJ.js +1 -0
- package/dist/cdn/chunks/chunk-ET7NCKUV.js +1 -0
- package/dist/cdn/chunks/chunk-FAIDO3QL.js +1 -0
- package/dist/cdn/chunks/chunk-HDJ6JFXX.js +1 -0
- package/dist/cdn/chunks/chunk-HODE7UDG.js +1 -0
- package/dist/cdn/chunks/chunk-IBOJTLL7.js +1 -0
- package/dist/cdn/chunks/chunk-IFGPCCJH.js +1 -0
- package/dist/cdn/chunks/chunk-JM3CYFFZ.js +1 -0
- package/dist/cdn/chunks/chunk-JOZCJGRV.js +1 -0
- package/dist/cdn/chunks/chunk-KPGTFHQU.js +1 -0
- package/dist/cdn/chunks/chunk-OBPBHX2J.js +1 -0
- package/dist/cdn/chunks/chunk-OIJVTJML.js +1 -0
- package/dist/cdn/chunks/chunk-RK4HVNRS.js +1 -0
- package/dist/cdn/chunks/chunk-RRLXNT33.js +1 -0
- package/dist/cdn/chunks/chunk-SK6UAYX2.js +1 -0
- package/dist/cdn/chunks/chunk-T4M2J44L.js +1 -0
- package/dist/cdn/chunks/chunk-TCW6XNLI.js +1 -0
- package/dist/cdn/chunks/chunk-UYAVCSQ4.js +25 -0
- package/dist/cdn/chunks/chunk-UZWMCNZI.js +1 -0
- package/dist/cdn/chunks/chunk-X767DBO7.js +1 -0
- package/dist/cdn/chunks/chunk-XYQGAQBQ.js +1 -0
- package/dist/cdn/chunks/chunk-YEPHU5PX.js +1 -0
- package/dist/cdn/chunks/chunk-YMGCOMYZ.js +1 -0
- package/dist/cdn/chunks/chunk-Z3EEB4CI.js +1 -0
- package/dist/cdn/chunks/chunk-ZKEOHGBY.js +33 -0
- package/dist/cdn/chunks/clip-inspect-HZ7N2YOP-DCDXB76T.js +1 -0
- package/dist/cdn/chunks/create-document-capture-LNX6NFSK-A4LP25Y5.js +1 -0
- package/dist/cdn/chunks/create-portrait-capture-VRZZOMJS-I4FBRNBP.js +1 -0
- package/dist/cdn/chunks/detector-scanic-F3Y5X3DF-FGVR4NEM.js +1 -0
- package/dist/cdn/chunks/document-capture-view-JIKJWCFG-MMCEL43X.js +1 -0
- package/dist/cdn/chunks/eid-view-IW2ZP2NG-EB5SCHBD.js +1 -0
- package/dist/cdn/chunks/email-otp-view-VDTMZ4R5-Y5QHQDIB.js +1 -0
- package/dist/cdn/chunks/flow-views-N4FMOYIR-FDN6ATHN.js +1 -0
- package/dist/cdn/chunks/icao-gate-SO6YJ7RV-MPW6W3QN.js +1 -0
- package/dist/cdn/chunks/icao-tuning-DCZCMCEQ-ZQSK7ZOV.js +1 -0
- package/dist/cdn/chunks/keyframe-rank-R4NPQGN3-VRURE6OQ.js +1 -0
- package/dist/cdn/chunks/landmarker-3BBP3RBY-DDXMOLGK.js +1 -0
- package/dist/cdn/chunks/mrz-band-DCXFWDBD-OPMO6HYS.js +1 -0
- package/dist/cdn/chunks/overlay-de-F7GCMCGJ-FBTP3BSM.js +1 -0
- package/dist/cdn/chunks/overlay-es-HIO7CIKS-GDHVHUQW.js +1 -0
- package/dist/cdn/chunks/overlay-pt-YC4HRHKL-J3TGRZRW.js +1 -0
- package/dist/cdn/chunks/plan-runner-DIRERYBF-FANNXQNO.js +1 -0
- package/dist/cdn/chunks/portrait-capture-view-LWESDZPM-SEOHMLJQ.js +1 -0
- package/dist/cdn/chunks/portrait-review-view-FU3QSO4K-DZHDIMQX.js +1 -0
- package/dist/cdn/chunks/print-4WOMNRBE-DNXJ7ERA.js +11 -0
- package/dist/cdn/chunks/scanic-ml-stub-XPNKT2N3-YSXFN7KY.js +1 -0
- package/dist/cdn/chunks/segmenter-3CVPTZMM-WGI6XGWN.js +1 -0
- package/dist/cdn/chunks/turnstile-N4K4U2AI-SLP55XAA.js +1 -0
- package/dist/cdn/chunks/upload-file-C4MFKLT3-DXCNEDXP.js +1 -0
- package/dist/cdn/chunks/vision_bundle-WBHR7TEE.js +41 -0
- package/dist/cdn/define.js +1 -0
- package/dist/cdn/index.js +1 -0
- package/dist/chunk-43YHL2WG.js +1 -0
- package/dist/chunk-4QI2LTJD.js +1 -0
- package/dist/chunk-73JRPFCO.js +33 -0
- package/dist/chunk-HSQWGTF7.js +1 -0
- package/dist/chunk-JJNFGW3A.js +25 -0
- package/dist/chunk-JQ3ANVKN.js +1 -0
- package/dist/chunk-KU4DZ3OQ.js +1 -0
- package/dist/chunk-OSBGOI4W.js +14 -0
- package/dist/chunk-RPLVIGTS.js +1 -0
- package/dist/chunk-SEE6MST7.js +1 -0
- package/dist/chunk-TPIBYY2S.js +1 -0
- package/dist/chunk-UT2KIR2K.js +1 -0
- package/dist/chunk-W2UTL5PI.js +1 -0
- package/dist/chunk-WWGJDMZQ.js +1 -0
- package/dist/chunk-X5K27NXI.js +1 -0
- package/dist/chunk-X5WMOOH2.js +1 -0
- package/dist/define.cjs +66 -0
- package/dist/define.d.cts +7 -0
- package/dist/define.d.ts +7 -0
- package/dist/define.js +1 -0
- package/dist/document-capture-view-JIKJWCFG-OWMTF5A3.js +1 -0
- package/dist/eid-view-IW2ZP2NG-SKEYTRTX.js +1 -0
- package/dist/email-otp-view-VDTMZ4R5-EO7T6SL4.js +1 -0
- package/dist/flow-views-N4FMOYIR-J54ADNRO.js +1 -0
- package/dist/fonts/Cairo-OFL.txt +93 -0
- package/dist/fonts/Geist-OFL.txt +93 -0
- package/dist/fonts/Inter-OFL.txt +93 -0
- package/dist/fonts/SekyroCairo-Bold.woff2 +0 -0
- package/dist/fonts/SekyroCairo-Regular.woff2 +0 -0
- package/dist/fonts/SekyroCairo-SemiBold.woff2 +0 -0
- package/dist/fonts/SekyroGeist-Bold.woff2 +0 -0
- package/dist/fonts/SekyroGeist-SemiBold.woff2 +0 -0
- package/dist/fonts/SekyroInter-Medium.woff2 +0 -0
- package/dist/fonts/SekyroInter-Regular.woff2 +0 -0
- package/dist/fonts/SekyroInter-SemiBold.woff2 +0 -0
- package/dist/index.cjs +66 -0
- package/dist/index.d.cts +1099 -0
- package/dist/index.d.ts +1099 -0
- package/dist/index.js +1 -0
- package/dist/overlay-de-F7GCMCGJ-7OI7SGX4.js +1 -0
- package/dist/overlay-es-HIO7CIKS-LXC2SFGY.js +1 -0
- package/dist/overlay-pt-YC4HRHKL-2QCRICEV.js +1 -0
- package/dist/portrait-capture-view-LWESDZPM-XZOM6LXG.js +1 -0
- package/dist/portrait-review-view-FU3QSO4K-AGWEX2EQ.js +1 -0
- package/dist/styles.css +1475 -0
- package/package.json +117 -4
- package/sbom.cdx.json +153 -0
- package/types/empty.js +2 -0
- package/types/events.d.ts +9 -0
- package/types/jsx.d.ts +15 -0
- package/types/svelte.d.ts +16 -0
- package/types/vue.d.ts +15 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# @sekyro/elements
|
package/LICENSE
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
Sekyro AI SDK License (proprietary)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Ibtikar Technologies, Inc. All rights reserved.
|
|
4
|
+
|
|
5
|
+
This SDK is proprietary software of Ibtikar Technologies, Inc., licensed
|
|
6
|
+
only under the Sekyro AI SDK License:
|
|
7
|
+
https://sekyro.ai/en/legal/sdk-license
|
|
8
|
+
(in French: https://sekyro.ai/fr/legal/sdk-license,
|
|
9
|
+
in Arabic: https://sekyro.ai/ar/legal/sdk-license).
|
|
10
|
+
|
|
11
|
+
In short, and subject to the full license:
|
|
12
|
+
|
|
13
|
+
- You may use the SDK only with a Sekyro AI account, a customer agreement
|
|
14
|
+
with Ibtikar Technologies, Inc. and valid API keys, to integrate the
|
|
15
|
+
Sekyro AI services into your own applications. You may distribute it to
|
|
16
|
+
your end users only as embedded in those applications.
|
|
17
|
+
- You may not use it with another identity verification provider, modify it
|
|
18
|
+
beyond the configuration and theming it exposes, reverse engineer,
|
|
19
|
+
decompile or disassemble it (except where the law expressly allows it),
|
|
20
|
+
circumvent its security, attestation, license checks or usage metering,
|
|
21
|
+
or distribute or sublicense it on its own.
|
|
22
|
+
- Open-source components keep their own licenses. See the third-party
|
|
23
|
+
notices shipped with this SDK.
|
|
24
|
+
- The SDK is provided "as is", without warranty, except as your customer
|
|
25
|
+
agreement provides. The license is governed by the laws of the State of
|
|
26
|
+
Delaware, USA. If this license and your customer agreement conflict,
|
|
27
|
+
the customer agreement prevails.
|
|
28
|
+
|
|
29
|
+
Questions: contact@sekyro.ai
|
package/README.md
CHANGED
|
@@ -1,3 +1,248 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @sekyro/elements
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[Sekyro AI](https://sekyro.ai) identity verification as a custom element, for pages that do not run React: Vue,
|
|
4
|
+
Angular, Svelte, plain HTML. `<sekyro-verification>` renders the same flow as `<SekyroVerification>` from
|
|
5
|
+
`@sekyro/react` (every step of the session's flow, the result, the partner branding, the Sandbox test chrome), with
|
|
6
|
+
React bundled inside the package. In a React or Next.js app, use `@sekyro/react` directly.
|
|
7
|
+
|
|
8
|
+
- Same flow and copy as `@sekyro/react`: Arabic (right to left), French, English, Spanish, Portuguese and German.
|
|
9
|
+
- Light and dark, partner branding from the session, theming through `--sekyro-*` CSS variables.
|
|
10
|
+
- Light DOM, no shadow root: the flow's camera colour flash covers the page and focus returns where it was.
|
|
11
|
+
- Safe to import during server rendering: nothing touches the DOM until the element is defined in a browser.
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install @sekyro/elements@next @sekyro/web@next
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
`@sekyro/web` is a peer dependency: your page and the element share one copy, so a `Verification` you create
|
|
20
|
+
yourself works in the element. React and ReactDOM are inside this package; your app needs neither. Use of the SDK is
|
|
21
|
+
governed by the [Sekyro AI SDK License](https://sekyro.ai/legal/sdk-license) (summarised in `LICENSE`) and your
|
|
22
|
+
Sekyro AI customer agreement.
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
Register the element once and import the stylesheet once (it loads the fonts beside it):
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
import "@sekyro/elements/define";
|
|
30
|
+
import "@sekyro/elements/styles.css";
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Your server creates the session with `@sekyro/node` and hands the page its client token; the page passes it to the
|
|
34
|
+
element:
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<sekyro-verification client-token="…" locale="ar" color-scheme="system" asset-base-url="/models-v3" closable></sekyro-verification>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
const element = document.querySelector("sekyro-verification")!;
|
|
42
|
+
element.addEventListener("sekyro-result", (event) => {
|
|
43
|
+
// A verdict for display. The decision that counts comes from your server (webhook or sessions.get).
|
|
44
|
+
console.log(event.detail.status);
|
|
45
|
+
});
|
|
46
|
+
element.addEventListener("sekyro-close", (event) => {
|
|
47
|
+
// event.detail.reason is "finished" (with the result) or "cancelled": take the person back to your page.
|
|
48
|
+
});
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
`defineSekyroElements()` from `@sekyro/elements` does the same as the `define` import, when you prefer to call it.
|
|
52
|
+
It is idempotent and does nothing without a DOM.
|
|
53
|
+
|
|
54
|
+
### Attributes
|
|
55
|
+
|
|
56
|
+
| Attribute | Property | Meaning |
|
|
57
|
+
|---|---|---|
|
|
58
|
+
| `client-token` | `clientToken` | The session's client token (`clientToken` of the session your server created). Ignored while `verification` is set. |
|
|
59
|
+
| `locale` | `locale` | `ar`, `fr`, `en`, `es`, `pt` or `de`. Without it: the page's `<html lang>` when it is one of them, else `en`. Arabic runs right to left. |
|
|
60
|
+
| `color-scheme` | `colorScheme` | `light` (default), `dark`, or `system` to follow the device. |
|
|
61
|
+
| `asset-base-url` | `assetBaseUrl` | Where your page serves the face detector assets (see "Model assets"). |
|
|
62
|
+
| `closable` | `closable` | Shows the header's close button and the result's "Back to" button; both fire `sekyro-close`. |
|
|
63
|
+
| `back-navigation` | `backNavigation` | `history`: the browser's back button goes one screen back inside the flow. `none` (default) never touches the page's history. |
|
|
64
|
+
| `handoff-url` | `handoffUrl` | The link a desktop shows as a QR code when a camera step needs a phone (the session's `hostedUrl`). Without it, a notice asks to continue on a phone. |
|
|
65
|
+
| `voice` | | `off` turns the spoken guidance off. |
|
|
66
|
+
| `api-origin` | `apiOrigin` | The API origin. Leave it out: the default is the Sekyro AI API. |
|
|
67
|
+
| `dir` | | `ltr` or `rtl` to force the direction; by default it follows the locale. |
|
|
68
|
+
|
|
69
|
+
The string attributes reflect: setting the property sets the attribute, and the other way round.
|
|
70
|
+
|
|
71
|
+
### Properties
|
|
72
|
+
|
|
73
|
+
| Property | Type | Meaning |
|
|
74
|
+
|---|---|---|
|
|
75
|
+
| `verification` | `Verification \| null` | A `Verification` you created with `createVerification` from `@sekyro/web`. Set, it wins over `client-token` and your page destroys it. Read, it is the verification the element runs. |
|
|
76
|
+
| `strings` | `Partial<SekyroStrings>` | Copy overrides, keyed like `@sekyro/react`'s strings. |
|
|
77
|
+
| `theme` | `SekyroTheme` | A runtime theme (`colors`, `radius`, `fontFamily`). It wins over the session's branding. |
|
|
78
|
+
| `livenessProps` | `SekyroElementLivenessOptions` | Face capture options: `autoStart`, `tips`, `tipsSummary`, `coach`, `notice`, `startDisabled`, `startLabel`. |
|
|
79
|
+
| `documentLiveMrz` | `DocumentLiveMrzOptions` | Live MRZ reading on the document step: `workerUrl`, `assetBaseUrl`, or `mode: "off"`. |
|
|
80
|
+
| `voice` | `false \| VoiceOptions` | Spoken guidance options. Set, it wins over the `voice` attribute. |
|
|
81
|
+
|
|
82
|
+
Properties set before the element is defined (a framework binding, a script that ran first) are picked up when it
|
|
83
|
+
upgrades.
|
|
84
|
+
|
|
85
|
+
### Events
|
|
86
|
+
|
|
87
|
+
Every event is a `CustomEvent` that bubbles and is `composed`; `detail` is the argument of the `@sekyro/react`
|
|
88
|
+
callback it mirrors, with the same type.
|
|
89
|
+
|
|
90
|
+
| Event | `detail` | Mirrors |
|
|
91
|
+
|---|---|---|
|
|
92
|
+
| `sekyro-ready` | `{ verification }` | The element created its `Verification` from `client-token`. |
|
|
93
|
+
| `sekyro-step` | `VerificationStep` | `onStep` |
|
|
94
|
+
| `sekyro-result` | `VerificationResult` | `onResult` |
|
|
95
|
+
| `sekyro-close` | `SekyroCloseEvent` | `onClose` (with `closable`) |
|
|
96
|
+
| `sekyro-liveness-captured` | `CapturedArtifacts` | `onLivenessCaptured` |
|
|
97
|
+
| `sekyro-liveness-state` | `CaptureState` | `livenessProps.onStateChange` |
|
|
98
|
+
| `sekyro-liveness-guidance` | `StringKey` | `livenessProps.onGuidance` |
|
|
99
|
+
| `sekyro-liveness-error` | `CaptureError` | `livenessProps.onError` (a refused or missing camera: the flow shows its own screen) |
|
|
100
|
+
| `sekyro-error` | `{ error }` | The element could not create its `Verification` from its attributes. |
|
|
101
|
+
|
|
102
|
+
The types augment `HTMLElementTagNameMap` and the global event map, so `document.querySelector("sekyro-verification")`
|
|
103
|
+
and `addEventListener("sekyro-result", …)` are typed. `custom-elements.json` (in the package, named by
|
|
104
|
+
`package.json#customElements`) describes the tag for editors and tooling.
|
|
105
|
+
|
|
106
|
+
### Slots
|
|
107
|
+
|
|
108
|
+
Children with a `slot` attribute are moved into the flow where it renders them:
|
|
109
|
+
|
|
110
|
+
| Slot | Where |
|
|
111
|
+
|---|---|
|
|
112
|
+
| `header` | Replaces the partner header. |
|
|
113
|
+
| `header-end` | At the inline end of the partner header, before the close button (a language menu). |
|
|
114
|
+
| `footer` | Replaces the "Verified by Sekyro AI" link; an empty element hides it. |
|
|
115
|
+
|
|
116
|
+
```html
|
|
117
|
+
<sekyro-verification client-token="…">
|
|
118
|
+
<select slot="header-end" aria-label="Language">…</select>
|
|
119
|
+
</sekyro-verification>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Lifecycle
|
|
123
|
+
|
|
124
|
+
Connecting the element mounts the flow; attribute and property changes re-render it (several changes in one task
|
|
125
|
+
render once). Removing it from the page unmounts the flow, stops the camera and destroys the `Verification` it
|
|
126
|
+
created; moving it inside the page keeps it. Adding it back resumes the session from its state on the server. A new
|
|
127
|
+
`client-token` starts over with that session.
|
|
128
|
+
|
|
129
|
+
## Vue
|
|
130
|
+
|
|
131
|
+
Tell Vue that `sekyro-` tags are custom elements, and type them for `vue-tsc` with `@sekyro/elements/vue`:
|
|
132
|
+
|
|
133
|
+
```ts
|
|
134
|
+
// vite.config.ts
|
|
135
|
+
import vue from "@vitejs/plugin-vue";
|
|
136
|
+
import { defineConfig } from "vite";
|
|
137
|
+
|
|
138
|
+
export default defineConfig({
|
|
139
|
+
plugins: [vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith("sekyro-") } } })],
|
|
140
|
+
});
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
```ts
|
|
144
|
+
// main.ts
|
|
145
|
+
import "@sekyro/elements/define";
|
|
146
|
+
import "@sekyro/elements/styles.css";
|
|
147
|
+
import "@sekyro/elements/vue";
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
```vue
|
|
151
|
+
<sekyro-verification
|
|
152
|
+
:client-token="clientToken"
|
|
153
|
+
:locale="locale"
|
|
154
|
+
color-scheme="system"
|
|
155
|
+
asset-base-url="/models-v3"
|
|
156
|
+
closable
|
|
157
|
+
@sekyro-result="onResult"
|
|
158
|
+
@sekyro-close="onClose"
|
|
159
|
+
/>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
Vue sets `:client-token` and the other bindings as properties. In Nuxt, import `@sekyro/elements/define` from a
|
|
163
|
+
client-only plugin (`plugins/sekyro.client.ts`) and set `vue.compilerOptions.isCustomElement` in `nuxt.config.ts`.
|
|
164
|
+
|
|
165
|
+
## Angular
|
|
166
|
+
|
|
167
|
+
Allow custom elements in the component that renders the tag, and add the stylesheet to the build:
|
|
168
|
+
|
|
169
|
+
```ts
|
|
170
|
+
import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
|
|
171
|
+
import "@sekyro/elements/define";
|
|
172
|
+
|
|
173
|
+
@Component({
|
|
174
|
+
selector: "app-verify",
|
|
175
|
+
standalone: true,
|
|
176
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
177
|
+
template: `<sekyro-verification
|
|
178
|
+
[clientToken]="clientToken"
|
|
179
|
+
locale="fr"
|
|
180
|
+
closable
|
|
181
|
+
(sekyro-result)="onResult($event)"
|
|
182
|
+
(sekyro-close)="onClose($event)"
|
|
183
|
+
></sekyro-verification>`,
|
|
184
|
+
})
|
|
185
|
+
export class VerifyComponent {}
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
In `angular.json`, add `node_modules/@sekyro/elements/dist/styles.css` to `styles`. Angular's builder emits the fonts
|
|
189
|
+
the stylesheet names. With server rendering, the `define` import does nothing on the server; the element upgrades in
|
|
190
|
+
the browser.
|
|
191
|
+
|
|
192
|
+
## Svelte
|
|
193
|
+
|
|
194
|
+
Nothing to configure. `import "@sekyro/elements/svelte"` in `src/app.d.ts` types the tag and its events for
|
|
195
|
+
`svelte-check`:
|
|
196
|
+
|
|
197
|
+
```svelte
|
|
198
|
+
<sekyro-verification client-token={clientToken} locale="en" onsekyro-result={(e) => (status = e.detail.status)}></sekyro-verification>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## Plain HTML
|
|
202
|
+
|
|
203
|
+
No bundler: load the CDN build, which carries `@sekyro/web` inside:
|
|
204
|
+
|
|
205
|
+
```html
|
|
206
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sekyro/elements@<version>/dist/styles.css" />
|
|
207
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@sekyro/elements@<version>/dist/cdn/define.js"></script>
|
|
208
|
+
|
|
209
|
+
<sekyro-verification client-token="…" closable></sekyro-verification>
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
Pin an exact version. `dist/cdn/index.js` exports the element's API and `createVerification` from the same copy of
|
|
213
|
+
`@sekyro/web`, for a page that creates its own `Verification`. Your Content Security Policy must allow the CDN in
|
|
214
|
+
`script-src`, `style-src` and `font-src`, besides what the [web SDK guide](https://docs.sekyro.ai/en/web/embedded-sdk)
|
|
215
|
+
lists for the SDK itself.
|
|
216
|
+
|
|
217
|
+
## Model assets
|
|
218
|
+
|
|
219
|
+
The face capture loads its detector from `asset-base-url`: the `models-v3` files that `@sekyro/web` documents
|
|
220
|
+
(`@mediapipe/tasks-vision`'s wasm, pinned by `@sekyro/web`, and the detector model), served by your page. See "Model
|
|
221
|
+
assets" in the [web SDK guide](https://docs.sekyro.ai/en/web/embedded-sdk).
|
|
222
|
+
|
|
223
|
+
## Theming
|
|
224
|
+
|
|
225
|
+
The flow reads `--sekyro-*` CSS variables (`--sekyro-color-brand`, `--sekyro-color-surface`, `--sekyro-radius`,
|
|
226
|
+
`--sekyro-font`, …); the `theme` property sets them, and the session's branding (dashboard) sets them when you set
|
|
227
|
+
none. Inside a verification flow, partner branding comes before the Sekyro AI look.
|
|
228
|
+
|
|
229
|
+
The stylesheet scopes everything to `sekyro-` classes and leaves your page alone. It also shields the flow from your
|
|
230
|
+
page's resets: under Bootstrap's reboot or Tailwind's preflight the flow looks as on a bare page.
|
|
231
|
+
|
|
232
|
+
## Sandbox
|
|
233
|
+
|
|
234
|
+
A Sandbox session shows its test chrome in the element exactly as in `@sekyro/react`: the "Test session" badge, the
|
|
235
|
+
"Skip with test data" action and the tester check. Nothing to configure: it follows the session.
|
|
236
|
+
|
|
237
|
+
## Size
|
|
238
|
+
|
|
239
|
+
React and ReactDOM (production builds) and the whole flow, gzip, measured by `npm run size`: about 143 KiB for the
|
|
240
|
+
npm entry (your bundler adds `@sekyro/web`), about 174 KiB for the CDN entry with `@sekyro/web`. Each step's view,
|
|
241
|
+
the document camera and the es, pt and de copy load later, when used.
|
|
242
|
+
|
|
243
|
+
## Scripts
|
|
244
|
+
|
|
245
|
+
- `npm run build`: the npm build (ESM and CJS), rolled-up declarations, `styles.css` and its fonts, and the CDN build.
|
|
246
|
+
- `npm test`: the manifest check and the unit tests (jsdom, over the real flow); `npm run test:dist` checks the build.
|
|
247
|
+
- `npm run e2e`: Playwright, the plain HTML page against a fixture-mode API (after `npm run build`).
|
|
248
|
+
- `npm run size`, `npm run api:check`, `npm run manifest`.
|
|
@@ -0,0 +1,355 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "2.1.0",
|
|
3
|
+
"readme": "README.md",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "dist/index.js",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"name": "SekyroVerificationElement",
|
|
12
|
+
"tagName": "sekyro-verification",
|
|
13
|
+
"customElement": true,
|
|
14
|
+
"description": "The Sekyro AI verification flow (@sekyro/react's <SekyroVerification>) as a custom element, in light DOM. Import @sekyro/elements/styles.css once.",
|
|
15
|
+
"superclass": {
|
|
16
|
+
"name": "HTMLElement"
|
|
17
|
+
},
|
|
18
|
+
"attributes": [
|
|
19
|
+
{
|
|
20
|
+
"name": "client-token",
|
|
21
|
+
"type": {
|
|
22
|
+
"text": "string | null"
|
|
23
|
+
},
|
|
24
|
+
"fieldName": "clientToken",
|
|
25
|
+
"description": "The session's client token, from `clientToken` of the session your server created. Ignored while `verification` is set."
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "api-origin",
|
|
29
|
+
"type": {
|
|
30
|
+
"text": "string | null"
|
|
31
|
+
},
|
|
32
|
+
"fieldName": "apiOrigin",
|
|
33
|
+
"description": "The Sekyro AI API origin. Leave it out: the SDK's default is the production API."
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "locale",
|
|
37
|
+
"type": {
|
|
38
|
+
"text": "SekyroLocale | null"
|
|
39
|
+
},
|
|
40
|
+
"fieldName": "locale",
|
|
41
|
+
"description": "The language of the flow: `ar`, `fr`, `en`, `es`, `pt` or `de`. Without it: the page's `<html lang>` when it is one of them, else `en`. Arabic runs right to left."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "color-scheme",
|
|
45
|
+
"type": {
|
|
46
|
+
"text": "SekyroColorScheme | null"
|
|
47
|
+
},
|
|
48
|
+
"fieldName": "colorScheme",
|
|
49
|
+
"description": "`light` (the default), `dark`, or `system` to follow the device."
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"name": "asset-base-url",
|
|
53
|
+
"type": {
|
|
54
|
+
"text": "string | null"
|
|
55
|
+
},
|
|
56
|
+
"fieldName": "assetBaseUrl",
|
|
57
|
+
"description": "Where your page serves the face detector assets (the `models-v3` files)."
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "back-navigation",
|
|
61
|
+
"type": {
|
|
62
|
+
"text": "'history' | 'none' | null"
|
|
63
|
+
},
|
|
64
|
+
"fieldName": "backNavigation",
|
|
65
|
+
"description": "`history` lets the browser's back button go one screen back inside the flow. `none` (the default) never touches the page's history."
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"name": "handoff-url",
|
|
69
|
+
"type": {
|
|
70
|
+
"text": "string | null"
|
|
71
|
+
},
|
|
72
|
+
"fieldName": "handoffUrl",
|
|
73
|
+
"description": "The link a desktop shows as a QR code when a camera step needs a phone (the session's `hostedUrl`). Without it, a notice asks the person to continue on their phone."
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"name": "closable",
|
|
77
|
+
"type": {
|
|
78
|
+
"text": "boolean"
|
|
79
|
+
},
|
|
80
|
+
"fieldName": "closable",
|
|
81
|
+
"description": "Shows the header's close button and the result's back button. Both fire `sekyro-close`; take the person back to your page there."
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "voice",
|
|
85
|
+
"type": {
|
|
86
|
+
"text": "'off' | null"
|
|
87
|
+
},
|
|
88
|
+
"description": "`off` turns the spoken guidance off. The `voice` property, when set, wins and carries the voice options."
|
|
89
|
+
}
|
|
90
|
+
],
|
|
91
|
+
"members": [
|
|
92
|
+
{
|
|
93
|
+
"kind": "field",
|
|
94
|
+
"name": "clientToken",
|
|
95
|
+
"type": {
|
|
96
|
+
"text": "string | null"
|
|
97
|
+
},
|
|
98
|
+
"attribute": "client-token",
|
|
99
|
+
"reflects": true,
|
|
100
|
+
"description": "The session's client token, from `clientToken` of the session your server created. Ignored while `verification` is set."
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"kind": "field",
|
|
104
|
+
"name": "apiOrigin",
|
|
105
|
+
"type": {
|
|
106
|
+
"text": "string | null"
|
|
107
|
+
},
|
|
108
|
+
"attribute": "api-origin",
|
|
109
|
+
"reflects": true,
|
|
110
|
+
"description": "The Sekyro AI API origin. Leave it out: the SDK's default is the production API."
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"kind": "field",
|
|
114
|
+
"name": "locale",
|
|
115
|
+
"type": {
|
|
116
|
+
"text": "SekyroLocale | null"
|
|
117
|
+
},
|
|
118
|
+
"attribute": "locale",
|
|
119
|
+
"reflects": true,
|
|
120
|
+
"description": "The language of the flow: `ar`, `fr`, `en`, `es`, `pt` or `de`. Without it: the page's `<html lang>` when it is one of them, else `en`. Arabic runs right to left."
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"kind": "field",
|
|
124
|
+
"name": "colorScheme",
|
|
125
|
+
"type": {
|
|
126
|
+
"text": "SekyroColorScheme | null"
|
|
127
|
+
},
|
|
128
|
+
"attribute": "color-scheme",
|
|
129
|
+
"reflects": true,
|
|
130
|
+
"description": "`light` (the default), `dark`, or `system` to follow the device."
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"kind": "field",
|
|
134
|
+
"name": "assetBaseUrl",
|
|
135
|
+
"type": {
|
|
136
|
+
"text": "string | null"
|
|
137
|
+
},
|
|
138
|
+
"attribute": "asset-base-url",
|
|
139
|
+
"reflects": true,
|
|
140
|
+
"description": "Where your page serves the face detector assets (the `models-v3` files)."
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"kind": "field",
|
|
144
|
+
"name": "backNavigation",
|
|
145
|
+
"type": {
|
|
146
|
+
"text": "'history' | 'none' | null"
|
|
147
|
+
},
|
|
148
|
+
"attribute": "back-navigation",
|
|
149
|
+
"reflects": true,
|
|
150
|
+
"description": "`history` lets the browser's back button go one screen back inside the flow. `none` (the default) never touches the page's history."
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"kind": "field",
|
|
154
|
+
"name": "handoffUrl",
|
|
155
|
+
"type": {
|
|
156
|
+
"text": "string | null"
|
|
157
|
+
},
|
|
158
|
+
"attribute": "handoff-url",
|
|
159
|
+
"reflects": true,
|
|
160
|
+
"description": "The link a desktop shows as a QR code when a camera step needs a phone (the session's `hostedUrl`). Without it, a notice asks the person to continue on their phone."
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"kind": "field",
|
|
164
|
+
"name": "closable",
|
|
165
|
+
"type": {
|
|
166
|
+
"text": "boolean"
|
|
167
|
+
},
|
|
168
|
+
"attribute": "closable",
|
|
169
|
+
"reflects": true,
|
|
170
|
+
"description": "Shows the header's close button and the result's back button. Both fire `sekyro-close`; take the person back to your page there."
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
"kind": "field",
|
|
174
|
+
"name": "verification",
|
|
175
|
+
"type": {
|
|
176
|
+
"text": "Verification | null"
|
|
177
|
+
},
|
|
178
|
+
"description": "A `Verification` you created with `createVerification` from `@sekyro/web`. Set, it wins over `client-token`, and your page destroys it. Read, it is the verification the element runs, set or created."
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
"kind": "field",
|
|
182
|
+
"name": "strings",
|
|
183
|
+
"type": {
|
|
184
|
+
"text": "Partial<SekyroStrings> | undefined"
|
|
185
|
+
},
|
|
186
|
+
"description": "Copy overrides, keyed like the SDK's strings."
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"kind": "field",
|
|
190
|
+
"name": "theme",
|
|
191
|
+
"type": {
|
|
192
|
+
"text": "SekyroTheme | undefined"
|
|
193
|
+
},
|
|
194
|
+
"description": "A runtime theme. It wins over the session's branding."
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"kind": "field",
|
|
198
|
+
"name": "livenessProps",
|
|
199
|
+
"type": {
|
|
200
|
+
"text": "SekyroElementLivenessOptions | undefined"
|
|
201
|
+
},
|
|
202
|
+
"description": "Options of the face capture step: `autoStart`, `tips`, `tipsSummary`, `coach`, `notice`, `startDisabled`, `startLabel`."
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"kind": "field",
|
|
206
|
+
"name": "documentLiveMrz",
|
|
207
|
+
"type": {
|
|
208
|
+
"text": "DocumentLiveMrzOptions | undefined"
|
|
209
|
+
},
|
|
210
|
+
"description": "Live MRZ reading on the document step: `workerUrl`, `assetBaseUrl`, or `mode: 'off'`."
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"kind": "field",
|
|
214
|
+
"name": "voice",
|
|
215
|
+
"type": {
|
|
216
|
+
"text": "false | VoiceOptions | undefined"
|
|
217
|
+
},
|
|
218
|
+
"description": "Spoken guidance options, or `false` to turn it off."
|
|
219
|
+
}
|
|
220
|
+
],
|
|
221
|
+
"slots": [
|
|
222
|
+
{
|
|
223
|
+
"name": "header",
|
|
224
|
+
"description": "Replaces the partner header."
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"name": "header-end",
|
|
228
|
+
"description": "Sits at the inline end of the partner header, before the close button (a language menu)."
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"name": "footer",
|
|
232
|
+
"description": "Replaces the \"Verified by Sekyro AI\" link. An empty element hides it."
|
|
233
|
+
}
|
|
234
|
+
],
|
|
235
|
+
"events": [
|
|
236
|
+
{
|
|
237
|
+
"name": "sekyro-ready",
|
|
238
|
+
"type": {
|
|
239
|
+
"text": "CustomEvent<SekyroReadyDetail>"
|
|
240
|
+
},
|
|
241
|
+
"description": "The element created its `Verification` from `client-token` (detail: `{ verification }`)."
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
"name": "sekyro-step",
|
|
245
|
+
"type": {
|
|
246
|
+
"text": "CustomEvent<VerificationStep>"
|
|
247
|
+
},
|
|
248
|
+
"description": "The flow moved to a step. Mirrors `onStep`."
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
"name": "sekyro-result",
|
|
252
|
+
"type": {
|
|
253
|
+
"text": "CustomEvent<VerificationResult>"
|
|
254
|
+
},
|
|
255
|
+
"description": "A verdict for display. Read the decision that counts from your server. Mirrors `onResult`."
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
"name": "sekyro-close",
|
|
259
|
+
"type": {
|
|
260
|
+
"text": "CustomEvent<SekyroCloseEvent>"
|
|
261
|
+
},
|
|
262
|
+
"description": "The person closed the flow (`closable` only): `{ reason: 'finished', result }` or `{ reason: 'cancelled' }`. Mirrors `onClose`."
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"name": "sekyro-liveness-captured",
|
|
266
|
+
"type": {
|
|
267
|
+
"text": "CustomEvent<CapturedArtifacts>"
|
|
268
|
+
},
|
|
269
|
+
"description": "The face capture finished, before its upload. Mirrors `onLivenessCaptured`."
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"name": "sekyro-liveness-state",
|
|
273
|
+
"type": {
|
|
274
|
+
"text": "CustomEvent<CaptureState>"
|
|
275
|
+
},
|
|
276
|
+
"description": "The face capture's state changed. Mirrors `livenessProps.onStateChange`."
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"name": "sekyro-liveness-guidance",
|
|
280
|
+
"type": {
|
|
281
|
+
"text": "CustomEvent<StringKey>"
|
|
282
|
+
},
|
|
283
|
+
"description": "The face capture shows a guidance line (its string key). Mirrors `livenessProps.onGuidance`."
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"name": "sekyro-liveness-error",
|
|
287
|
+
"type": {
|
|
288
|
+
"text": "CustomEvent<CaptureError>"
|
|
289
|
+
},
|
|
290
|
+
"description": "The face capture failed (camera denied or absent, for example). The flow shows its own screen. Mirrors `livenessProps.onError`."
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"name": "sekyro-error",
|
|
294
|
+
"type": {
|
|
295
|
+
"text": "CustomEvent<SekyroElementErrorDetail>"
|
|
296
|
+
},
|
|
297
|
+
"description": "The element could not create its `Verification` from its attributes (detail: `{ error }`)."
|
|
298
|
+
}
|
|
299
|
+
]
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
"kind": "function",
|
|
303
|
+
"name": "defineSekyroElements",
|
|
304
|
+
"description": "Registers <sekyro-verification> once (idempotent; a no-op without a DOM).",
|
|
305
|
+
"return": {
|
|
306
|
+
"type": {
|
|
307
|
+
"text": "boolean"
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
],
|
|
312
|
+
"exports": [
|
|
313
|
+
{
|
|
314
|
+
"kind": "js",
|
|
315
|
+
"name": "SekyroVerificationElement",
|
|
316
|
+
"declaration": {
|
|
317
|
+
"name": "SekyroVerificationElement",
|
|
318
|
+
"module": "dist/index.js"
|
|
319
|
+
}
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
"kind": "js",
|
|
323
|
+
"name": "defineSekyroElements",
|
|
324
|
+
"declaration": {
|
|
325
|
+
"name": "defineSekyroElements",
|
|
326
|
+
"module": "dist/index.js"
|
|
327
|
+
}
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
"kind": "custom-element-definition",
|
|
331
|
+
"name": "sekyro-verification",
|
|
332
|
+
"declaration": {
|
|
333
|
+
"name": "SekyroVerificationElement",
|
|
334
|
+
"module": "dist/index.js"
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
]
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"kind": "javascript-module",
|
|
341
|
+
"path": "dist/define.js",
|
|
342
|
+
"declarations": [],
|
|
343
|
+
"exports": [
|
|
344
|
+
{
|
|
345
|
+
"kind": "custom-element-definition",
|
|
346
|
+
"name": "sekyro-verification",
|
|
347
|
+
"declaration": {
|
|
348
|
+
"name": "SekyroVerificationElement",
|
|
349
|
+
"module": "dist/index.js"
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
]
|
|
353
|
+
}
|
|
354
|
+
]
|
|
355
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as o}from"./chunk-IBOJTLL7.js";import"./chunk-ET7NCKUV.js";import"./chunk-4FHWXBOB.js";export{o as createBackgroundMonitor};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a,b as e,c as r,d as o}from"./chunk-CMDITVXF.js";import"./chunk-4FHWXBOB.js";export{a as bounded,r as cameraHash,e as hex16,o as noteCameraTrait};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{c as a,d as s,e as o,f as r,g as _,h as t,i as A,j as C,k as D,l as p,m as i}from"./chunk-C66GZ7NN.js";import"./chunk-X767DBO7.js";import"./chunk-SK6UAYX2.js";import"./chunk-CMS5FVGM.js";import"./chunk-7HJH5Q4M.js";import"./chunk-TCW6XNLI.js";import"./chunk-UZWMCNZI.js";import"./chunk-RRLXNT33.js";import"./chunk-4FHWXBOB.js";export{i as CAPTURE_CANDIDATE_SPACING_MS,p as CAPTURE_EXTRA_CANDIDATES,C as CaptureSessionDoc,o as DOC_BLACK_FRAME_LUMA,r as DOC_BLACK_FRAME_TICKS,_ as DOC_CADENCE_HZ,s as DOC_FIRST_FRAME_MS,t as DOC_SHUTTER_DEFAULTS,D as passportBandOf,A as resolveDocShutterTuning,a as warmDocDetector};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as d}from"./chunk-UYAVCSQ4.js";import{a as t}from"./chunk-RK4HVNRS.js";import{a as i,c as r}from"./chunk-4FHWXBOB.js";var s=r(d(),1);var u=(0,s.createContext)(null);function c(a,n,o){let e=n.detail;return{check:a,kind:n.kind,...e?.name!==void 0?{name:e.name}:{},...e?.phase!==void 0?{phase:e.phase}:{},...e?.engineKind!==void 0?{engineKind:e.engineKind}:{},attempt:Math.max(0,Math.min(1e3,o))}}i(c,"a");t(c,"captureIssueOf");function m(a,n){if(a!==void 0)try{a(n)}catch{}}i(m,"o");t(m,"sendCaptureIssue");export{u as a,c as b,m as c};
|