@incodetech/web 2.0.0-alpha.2 → 2.0.0-alpha.3

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 (256) hide show
  1. package/dist/asset-manifest.json +16 -16
  2. package/package.json +5 -2
  3. package/.turbo/turbo-build.log +0 -58
  4. package/.turbo/turbo-coverage.log +0 -23
  5. package/.turbo/turbo-format.log +0 -6
  6. package/.turbo/turbo-lint$colon$fix.log +0 -6
  7. package/.turbo/turbo-lint.log +0 -6
  8. package/.turbo/turbo-test.log +0 -1033
  9. package/.turbo/turbo-typecheck.log +0 -5
  10. package/coverage/base.css +0 -224
  11. package/coverage/block-navigation.js +0 -87
  12. package/coverage/email/email.tsx.html +0 -850
  13. package/coverage/email/emailInput.tsx.html +0 -340
  14. package/coverage/email/index.html +0 -131
  15. package/coverage/favicon.png +0 -0
  16. package/coverage/flow/flow.tsx.html +0 -961
  17. package/coverage/flow/flowCompleted.tsx.html +0 -448
  18. package/coverage/flow/flowInit.ts.html +0 -367
  19. package/coverage/flow/flowStart.tsx.html +0 -208
  20. package/coverage/flow/index.html +0 -221
  21. package/coverage/flow/preloadFlow.ts.html +0 -598
  22. package/coverage/flow/unsupportedModule.tsx.html +0 -202
  23. package/coverage/flow/useFlowInitialization.ts.html +0 -469
  24. package/coverage/flow/useModuleLoader.ts.html +0 -361
  25. package/coverage/hooks/index.html +0 -116
  26. package/coverage/hooks/useManager.ts.html +0 -205
  27. package/coverage/index.html +0 -401
  28. package/coverage/permissions/boldWithArrow.tsx.html +0 -208
  29. package/coverage/permissions/denied.tsx.html +0 -172
  30. package/coverage/permissions/deniedAndroid.tsx.html +0 -253
  31. package/coverage/permissions/deniedDesktop.tsx.html +0 -277
  32. package/coverage/permissions/deniedIOS.tsx.html +0 -304
  33. package/coverage/permissions/deniedInstructions.tsx.html +0 -142
  34. package/coverage/permissions/iconWrapper.tsx.html +0 -130
  35. package/coverage/permissions/index.html +0 -251
  36. package/coverage/permissions/learnMore.tsx.html +0 -340
  37. package/coverage/permissions/numberedStep.tsx.html +0 -127
  38. package/coverage/permissions/permissions.tsx.html +0 -289
  39. package/coverage/phone/index.html +0 -116
  40. package/coverage/phone/phoneInput.tsx.html +0 -832
  41. package/coverage/prettify.css +0 -1
  42. package/coverage/prettify.js +0 -2
  43. package/coverage/selfie/index.html +0 -131
  44. package/coverage/selfie/selfie.tsx.html +0 -334
  45. package/coverage/selfie/tutorial.tsx.html +0 -214
  46. package/coverage/shared/baseTutorial/baseTutorial.tsx.html +0 -250
  47. package/coverage/shared/baseTutorial/index.html +0 -131
  48. package/coverage/shared/baseTutorial/replaceBaseTutorial.ts.html +0 -289
  49. package/coverage/shared/button/button.tsx.html +0 -226
  50. package/coverage/shared/button/index.html +0 -116
  51. package/coverage/shared/componentRoot/incodeComponent.tsx.html +0 -121
  52. package/coverage/shared/componentRoot/index.html +0 -116
  53. package/coverage/shared/countries/countries.ts.html +0 -502
  54. package/coverage/shared/countries/index.html +0 -116
  55. package/coverage/shared/icons/chevronDown.tsx.html +0 -151
  56. package/coverage/shared/icons/index.html +0 -131
  57. package/coverage/shared/icons/successIcon.tsx.html +0 -163
  58. package/coverage/shared/loader/index.html +0 -116
  59. package/coverage/shared/loader/loadingIcon.tsx.html +0 -286
  60. package/coverage/shared/otpInput/index.html +0 -116
  61. package/coverage/shared/otpInput/otpInput.tsx.html +0 -808
  62. package/coverage/shared/page/index.html +0 -146
  63. package/coverage/shared/page/page.tsx.html +0 -358
  64. package/coverage/shared/page/pageUiConfig.ts.html +0 -277
  65. package/coverage/shared/page/verifiedByIncode.tsx.html +0 -310
  66. package/coverage/shared/spacer/index.html +0 -116
  67. package/coverage/shared/spacer/spacer.tsx.html +0 -349
  68. package/coverage/shared/spinner/index.html +0 -116
  69. package/coverage/shared/spinner/spinner.tsx.html +0 -280
  70. package/coverage/shared/title/index.html +0 -116
  71. package/coverage/shared/title/title.tsx.html +0 -121
  72. package/coverage/shared/uiConfig/index.html +0 -116
  73. package/coverage/shared/uiConfig/uiConfig.ts.html +0 -193
  74. package/coverage/shared/webComponent/incodeModule.ts.html +0 -172
  75. package/coverage/shared/webComponent/index.html +0 -131
  76. package/coverage/shared/webComponent/registerIncodeElement.ts.html +0 -130
  77. package/coverage/sort-arrow-sprite.png +0 -0
  78. package/coverage/sorter.js +0 -210
  79. package/coverage/styles/cn.tsx.html +0 -148
  80. package/coverage/styles/fetchTheme.ts.html +0 -349
  81. package/coverage/styles/index.html +0 -131
  82. package/dev/README.md +0 -163
  83. package/dev/getToken.ts +0 -36
  84. package/dev/headless.html +0 -875
  85. package/dev/index.html +0 -366
  86. package/dev/main-headless.tsx +0 -1332
  87. package/dev/main-orchestrated-flow.tsx +0 -1158
  88. package/dev/main-preact.tsx +0 -323
  89. package/dev/main-simplified.tsx +0 -123
  90. package/dev/main-web-component.tsx +0 -256
  91. package/dev/main.tsx +0 -332
  92. package/dev/manual.html +0 -27
  93. package/dev/orchestrated-flow.html +0 -64
  94. package/dev/simplified.html +0 -64
  95. package/dev/tiktok-logo.svg +0 -7
  96. package/src/defineCustomElement.tsx +0 -30
  97. package/src/email/email.test.tsx +0 -368
  98. package/src/email/email.tsx +0 -255
  99. package/src/email/emailInput.test.tsx +0 -264
  100. package/src/email/emailInput.tsx +0 -85
  101. package/src/email/styles.css +0 -59
  102. package/src/flow/flow.test.tsx +0 -796
  103. package/src/flow/flow.tsx +0 -292
  104. package/src/flow/flowCompleted.css +0 -30
  105. package/src/flow/flowCompleted.test.tsx +0 -331
  106. package/src/flow/flowCompleted.tsx +0 -121
  107. package/src/flow/flowInit.test.ts +0 -264
  108. package/src/flow/flowInit.ts +0 -94
  109. package/src/flow/flowStart.css +0 -58
  110. package/src/flow/flowStart.test.tsx +0 -49
  111. package/src/flow/flowStart.tsx +0 -41
  112. package/src/flow/incode-logo.svg +0 -8
  113. package/src/flow/index.ts +0 -7
  114. package/src/flow/preloadFlow.test.ts +0 -421
  115. package/src/flow/preloadFlow.ts +0 -171
  116. package/src/flow/styles.css +0 -9
  117. package/src/flow/unsupportedModule.css +0 -21
  118. package/src/flow/unsupportedModule.tsx +0 -39
  119. package/src/flow/useFlowInitialization.test.tsx +0 -292
  120. package/src/flow/useFlowInitialization.ts +0 -128
  121. package/src/flow/useModuleLoader.test.tsx +0 -212
  122. package/src/flow/useModuleLoader.ts +0 -92
  123. package/src/hooks/index.ts +0 -1
  124. package/src/hooks/useManager.test.ts +0 -91
  125. package/src/hooks/useManager.ts +0 -40
  126. package/src/i18n/index.ts +0 -3
  127. package/src/i18n/instance.ts +0 -16
  128. package/src/i18n/setup.ts +0 -184
  129. package/src/i18n/useTranslation.ts +0 -42
  130. package/src/index.ts +0 -27
  131. package/src/permissions/assets/android-dots-icon.svg +0 -7
  132. package/src/permissions/assets/android-settings-icon.svg +0 -16
  133. package/src/permissions/assets/android-toggle-icon.svg +0 -20
  134. package/src/permissions/assets/bank-card-icon.svg +0 -14
  135. package/src/permissions/assets/camera-icon.svg +0 -12
  136. package/src/permissions/assets/camera-ios.svg +0 -53
  137. package/src/permissions/assets/check-icon.svg +0 -8
  138. package/src/permissions/assets/chrome-icon.svg +0 -43
  139. package/src/permissions/assets/password-icon.svg +0 -11
  140. package/src/permissions/assets/permissions-img.svg +0 -51
  141. package/src/permissions/assets/safari-icon.svg +0 -37
  142. package/src/permissions/assets/settings-icon.svg +0 -33
  143. package/src/permissions/assets/toggle-icon.svg +0 -19
  144. package/src/permissions/assets/warning-icon.svg +0 -6
  145. package/src/permissions/boldWithArrow.css +0 -9
  146. package/src/permissions/boldWithArrow.tsx +0 -41
  147. package/src/permissions/denied.css +0 -37
  148. package/src/permissions/denied.tsx +0 -29
  149. package/src/permissions/deniedAndroid.tsx +0 -56
  150. package/src/permissions/deniedDesktop.css +0 -9
  151. package/src/permissions/deniedDesktop.tsx +0 -64
  152. package/src/permissions/deniedIOS.tsx +0 -73
  153. package/src/permissions/deniedInstructions.tsx +0 -19
  154. package/src/permissions/iconWrapper.css +0 -9
  155. package/src/permissions/iconWrapper.tsx +0 -15
  156. package/src/permissions/learnMore.css +0 -37
  157. package/src/permissions/learnMore.tsx +0 -85
  158. package/src/permissions/numberedStep.css +0 -13
  159. package/src/permissions/numberedStep.tsx +0 -14
  160. package/src/permissions/permissions.css +0 -13
  161. package/src/permissions/permissions.tsx +0 -68
  162. package/src/phone/phone.tsx +0 -246
  163. package/src/phone/phoneInput.test.tsx +0 -275
  164. package/src/phone/phoneInput.tsx +0 -249
  165. package/src/phone/styles.css +0 -158
  166. package/src/selfie/cameraButton.css +0 -13
  167. package/src/selfie/cameraButton.tsx +0 -35
  168. package/src/selfie/capture.css +0 -57
  169. package/src/selfie/capture.tsx +0 -232
  170. package/src/selfie/errorModal.tsx +0 -218
  171. package/src/selfie/errorModalContent.css +0 -33
  172. package/src/selfie/errorModalContent.tsx +0 -44
  173. package/src/selfie/faceOutline.css +0 -5
  174. package/src/selfie/faceOutline.tsx +0 -22
  175. package/src/selfie/loadingBorder.css +0 -12
  176. package/src/selfie/loadingBorder.tsx +0 -77
  177. package/src/selfie/manualCaptureButton.css +0 -13
  178. package/src/selfie/manualCaptureButton.tsx +0 -35
  179. package/src/selfie/noMoreAttemptsModal.tsx +0 -44
  180. package/src/selfie/notification.css +0 -9
  181. package/src/selfie/notification.tsx +0 -36
  182. package/src/selfie/retryErrorModal.tsx +0 -56
  183. package/src/selfie/selfie.test.tsx +0 -458
  184. package/src/selfie/selfie.tsx +0 -83
  185. package/src/selfie/selfieTutorial.json +0 -2626
  186. package/src/selfie/styles.css +0 -1
  187. package/src/selfie/tutorial.test.tsx +0 -200
  188. package/src/selfie/tutorial.tsx +0 -43
  189. package/src/setup.ts +0 -33
  190. package/src/shared/baseTutorial/baseTutorial.css +0 -21
  191. package/src/shared/baseTutorial/baseTutorial.test.tsx +0 -184
  192. package/src/shared/baseTutorial/baseTutorial.tsx +0 -55
  193. package/src/shared/baseTutorial/replaceBaseTutorial.test.ts +0 -267
  194. package/src/shared/baseTutorial/replaceBaseTutorial.ts +0 -68
  195. package/src/shared/button/button.css +0 -55
  196. package/src/shared/button/button.test.tsx +0 -101
  197. package/src/shared/button/button.tsx +0 -47
  198. package/src/shared/componentRoot/incodeComponent.tsx +0 -12
  199. package/src/shared/countries/countries.test.ts +0 -75
  200. package/src/shared/countries/countries.ts +0 -139
  201. package/src/shared/countries/index.ts +0 -6
  202. package/src/shared/icons/chevronDown.tsx +0 -22
  203. package/src/shared/icons/index.ts +0 -2
  204. package/src/shared/icons/successIcon.css +0 -5
  205. package/src/shared/icons/successIcon.test.tsx +0 -40
  206. package/src/shared/icons/successIcon.tsx +0 -26
  207. package/src/shared/loader/loadingIcon.css +0 -28
  208. package/src/shared/loader/loadingIcon.tsx +0 -67
  209. package/src/shared/lottie/lottie.tsx +0 -108
  210. package/src/shared/otpInput/otpInput.css +0 -85
  211. package/src/shared/otpInput/otpInput.test.tsx +0 -356
  212. package/src/shared/otpInput/otpInput.tsx +0 -241
  213. package/src/shared/page/incode-logo.svg +0 -3
  214. package/src/shared/page/page.css +0 -47
  215. package/src/shared/page/page.test.tsx +0 -97
  216. package/src/shared/page/page.tsx +0 -91
  217. package/src/shared/page/pageUiConfig.test.ts +0 -112
  218. package/src/shared/page/pageUiConfig.ts +0 -64
  219. package/src/shared/page/verifiedByIncode.css +0 -5
  220. package/src/shared/page/verifiedByIncode.tsx +0 -75
  221. package/src/shared/spacer/spacer.css +0 -149
  222. package/src/shared/spacer/spacer.test.tsx +0 -143
  223. package/src/shared/spacer/spacer.tsx +0 -88
  224. package/src/shared/spinner/index.ts +0 -2
  225. package/src/shared/spinner/spinner.css +0 -28
  226. package/src/shared/spinner/spinner.test.tsx +0 -82
  227. package/src/shared/spinner/spinner.tsx +0 -65
  228. package/src/shared/title/title.css +0 -7
  229. package/src/shared/title/title.tsx +0 -12
  230. package/src/shared/uiConfig/uiConfig.ts +0 -36
  231. package/src/shared/webComponent/incodeModule.ts +0 -29
  232. package/src/shared/webComponent/registerIncodeElement.ts +0 -15
  233. package/src/styles/__mocks__/fetchTheme.ts +0 -19
  234. package/src/styles/applyTheme.ts +0 -37
  235. package/src/styles/cn.test.tsx +0 -57
  236. package/src/styles/cn.tsx +0 -21
  237. package/src/styles/core.css +0 -12
  238. package/src/styles/fetchTheme.test.ts +0 -390
  239. package/src/styles/fetchTheme.ts +0 -88
  240. package/src/styles/generatePalette.ts +0 -111
  241. package/src/styles/reset.css +0 -65
  242. package/src/styles/resolveCssVariableToHex.ts +0 -28
  243. package/src/styles/tailwind.css +0 -291
  244. package/src/styles/themeTypes.ts +0 -18
  245. package/src/styles/tokens/colors.css +0 -190
  246. package/src/styles/tokens/components.css +0 -174
  247. package/src/styles/tokens/index.css +0 -4
  248. package/src/styles/tokens/primitives.css +0 -129
  249. package/src/styles/tokens/semantic.css +0 -51
  250. package/src/svg.d.ts +0 -4
  251. package/src/types/assets.d.ts +0 -1
  252. package/src/types/custom-elements.d.ts +0 -104
  253. package/tsconfig.json +0 -22
  254. package/vite.config.ts +0 -260
  255. package/vitest.config.ts +0 -40
  256. package/vitest.setup.ts +0 -16
package/dev/index.html DELETED
@@ -1,366 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Incode Web SDK - Dev Demos</title>
7
- <style>
8
- /* Incode Design Tokens */
9
- :root {
10
- /* Primitives */
11
- --color-gray-0: #ffffff;
12
- --color-gray-50: #fcfcfd;
13
- --color-gray-100: #ebecef;
14
- --color-gray-200: #c6c8d2;
15
- --color-gray-300: #a3a8b8;
16
- --color-gray-500: #60667c;
17
- --color-gray-700: #3a3e4b;
18
- --color-gray-800: #262831;
19
- --color-gray-900: #14151a;
20
- --color-gray-1000: #000000;
21
-
22
- --color-brand-50: #e5f0ff;
23
- --color-brand-200: #99ceff;
24
- --color-brand-300: #66a6ff;
25
- --color-brand-400: #3388ff;
26
- --color-brand-500: #006aff;
27
- --color-brand-600: #0055cc;
28
-
29
- --color-positive-600: #189f60;
30
- --color-warning-500: #ff9900;
31
- --color-negative-500: #ff5a5f;
32
-
33
- --font-family: "Rethink Sans", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
34
- --font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;
35
- }
36
-
37
- * {
38
- box-sizing: border-box;
39
- margin: 0;
40
- padding: 0;
41
- }
42
-
43
- body {
44
- font-family: var(--font-family);
45
- background: var(--color-gray-900);
46
- min-height: 100vh;
47
- color: var(--color-gray-50);
48
- padding: 2rem;
49
- }
50
-
51
- .container {
52
- max-width: 1200px;
53
- margin: 0 auto;
54
- }
55
-
56
- header {
57
- text-align: center;
58
- margin-bottom: 3rem;
59
- }
60
-
61
- h1 {
62
- font-size: 2.5rem;
63
- font-weight: 700;
64
- color: var(--color-brand-500);
65
- margin-bottom: 0.5rem;
66
- }
67
-
68
- .subtitle {
69
- color: var(--color-gray-300);
70
- font-size: 1.1rem;
71
- }
72
-
73
- .config-section {
74
- background: var(--color-gray-800);
75
- border: 1px solid var(--color-gray-700);
76
- border-radius: 12px;
77
- padding: 1.5rem;
78
- margin-bottom: 2rem;
79
- }
80
-
81
- .config-section label {
82
- display: block;
83
- font-size: 0.875rem;
84
- color: var(--color-gray-300);
85
- margin-bottom: 0.5rem;
86
- }
87
-
88
- .config-input-row {
89
- display: flex;
90
- gap: 1rem;
91
- align-items: center;
92
- }
93
-
94
- .config-input-row input {
95
- flex: 1;
96
- background: var(--color-gray-900);
97
- border: 1px solid var(--color-gray-700);
98
- border-radius: 8px;
99
- padding: 0.75rem 1rem;
100
- font-size: 1rem;
101
- color: var(--color-gray-0);
102
- font-family: var(--font-mono);
103
- transition: border-color 0.2s, box-shadow 0.2s;
104
- }
105
-
106
- .config-input-row input:focus {
107
- outline: none;
108
- border-color: var(--color-brand-500);
109
- box-shadow: 0 0 0 3px rgba(0, 106, 255, 0.2);
110
- }
111
-
112
- .config-input-row input::placeholder {
113
- color: var(--color-gray-500);
114
- }
115
-
116
- .config-hint {
117
- font-size: 0.75rem;
118
- color: var(--color-gray-500);
119
- margin-top: 0.5rem;
120
- }
121
-
122
- .demos-grid {
123
- display: grid;
124
- grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
125
- gap: 1.5rem;
126
- }
127
-
128
- .demo-card {
129
- background: var(--color-gray-800);
130
- border: 1px solid var(--color-gray-700);
131
- border-radius: 16px;
132
- padding: 1.5rem;
133
- text-decoration: none;
134
- color: inherit;
135
- transition: transform 0.2s, border-color 0.2s, background 0.2s;
136
- display: flex;
137
- flex-direction: column;
138
- gap: 0.75rem;
139
- }
140
-
141
- .demo-card:hover {
142
- transform: translateY(-4px);
143
- border-color: var(--color-brand-400);
144
- background: rgba(0, 106, 255, 0.05);
145
- }
146
-
147
- .demo-header {
148
- display: flex;
149
- justify-content: space-between;
150
- align-items: flex-start;
151
- }
152
-
153
- .demo-title {
154
- font-size: 1.25rem;
155
- font-weight: 600;
156
- color: var(--color-gray-0);
157
- }
158
-
159
- .demo-badge {
160
- font-size: 0.7rem;
161
- font-weight: 600;
162
- padding: 0.25rem 0.5rem;
163
- border-radius: 4px;
164
- text-transform: uppercase;
165
- letter-spacing: 0.05em;
166
- }
167
-
168
- .badge-recommended {
169
- background: rgba(24, 159, 96, 0.15);
170
- color: var(--color-positive-600);
171
- }
172
-
173
- .badge-simple {
174
- background: rgba(0, 106, 255, 0.15);
175
- color: var(--color-brand-400);
176
- }
177
-
178
- .badge-advanced {
179
- background: rgba(255, 153, 0, 0.15);
180
- color: var(--color-warning-500);
181
- }
182
-
183
- .badge-legacy {
184
- background: rgba(163, 168, 184, 0.15);
185
- color: var(--color-gray-300);
186
- }
187
-
188
- .demo-pattern {
189
- font-size: 0.8rem;
190
- color: var(--color-brand-400);
191
- font-family: var(--font-mono);
192
- }
193
-
194
- .demo-description {
195
- font-size: 0.9rem;
196
- color: var(--color-gray-300);
197
- line-height: 1.5;
198
- }
199
-
200
- .demo-footer {
201
- display: flex;
202
- justify-content: space-between;
203
- align-items: center;
204
- margin-top: auto;
205
- padding-top: 0.75rem;
206
- border-top: 1px solid var(--color-gray-700);
207
- }
208
-
209
- .demo-complexity {
210
- font-size: 0.75rem;
211
- color: var(--color-gray-500);
212
- }
213
-
214
- .demo-arrow {
215
- color: var(--color-brand-500);
216
- font-size: 1.25rem;
217
- transition: transform 0.2s;
218
- }
219
-
220
- .demo-card:hover .demo-arrow {
221
- transform: translateX(4px);
222
- }
223
-
224
- .section-title {
225
- font-size: 0.875rem;
226
- font-weight: 600;
227
- color: var(--color-gray-500);
228
- text-transform: uppercase;
229
- letter-spacing: 0.1em;
230
- margin-bottom: 1rem;
231
- }
232
-
233
- footer {
234
- margin-top: 3rem;
235
- text-align: center;
236
- color: var(--color-gray-500);
237
- font-size: 0.875rem;
238
- }
239
-
240
- footer a {
241
- color: var(--color-brand-500);
242
- text-decoration: none;
243
- }
244
-
245
- footer a:hover {
246
- text-decoration: underline;
247
- }
248
- </style>
249
- </head>
250
- <body>
251
- <div class="container">
252
- <header>
253
- <h1>Incode Web SDK</h1>
254
- <p class="subtitle">Development Demos</p>
255
- </header>
256
-
257
- <section class="config-section">
258
- <label for="configId">Configuration ID</label>
259
- <div class="config-input-row">
260
- <input
261
- type="text"
262
- id="configId"
263
- placeholder="Enter your configId (e.g., 67ddc65d36b9814a930c4dff)"
264
- />
265
- </div>
266
- <p class="config-hint">Used by Simplified and Orchestrated demos to fetch session tokens</p>
267
- </section>
268
-
269
- <p class="section-title">Choose Your Integration Level</p>
270
- <p style="color: var(--color-gray-300); margin-bottom: 1.5rem; font-size: 0.95rem;">
271
- From zero-code web component to fully custom UI — pick the level of control you need.
272
- </p>
273
-
274
- <div class="demos-grid">
275
- <a href="#" class="demo-card" data-demo="simplified">
276
- <div class="demo-header">
277
- <span class="demo-title">Web Component</span>
278
- <span class="demo-badge badge-simple">Easiest</span>
279
- </div>
280
- <span class="demo-pattern">&lt;incode-flow&gt;</span>
281
- <p class="demo-description">
282
- <strong>Zero customization needed.</strong> Drop-in web component with built-in start screen, module rendering, completion handling, and error states. Just set props and go.
283
- </p>
284
- <div class="demo-footer">
285
- <span class="demo-complexity">Setup: ~5 lines of code</span>
286
- <span class="demo-arrow">→</span>
287
- </div>
288
- </a>
289
-
290
- <a href="#" class="demo-card" data-demo="orchestrated">
291
- <div class="demo-header">
292
- <span class="demo-title">Orchestrated Flow</span>
293
- <span class="demo-badge badge-recommended">Recommended</span>
294
- </div>
295
- <span class="demo-pattern">createOrchestratedFlowManager()</span>
296
- <p class="demo-description">
297
- <strong>Custom wrapper, standard modules.</strong> You control loading states, error handling, screens between modules, and styling. Uses the same Selfie/Phone/Email components internally.
298
- </p>
299
- <div class="demo-footer">
300
- <span class="demo-complexity">Setup: ~50 lines of code</span>
301
- <span class="demo-arrow">→</span>
302
- </div>
303
- </a>
304
-
305
- <a href="#" class="demo-card" data-demo="headless">
306
- <div class="demo-header">
307
- <span class="demo-title">Headless Mode</span>
308
- <span class="demo-badge badge-advanced">Full Control</span>
309
- </div>
310
- <span class="demo-pattern">createPhoneManager()</span>
311
- <p class="demo-description">
312
- <strong>Build your own UI entirely.</strong> Access the state machine directly with no pre-built components. Full control over every visual element using vanilla JS, React, Vue, or any framework.
313
- </p>
314
- <div class="demo-footer">
315
- <span class="demo-complexity">Setup: 100+ lines of code</span>
316
- <span class="demo-arrow">→</span>
317
- </div>
318
- </a>
319
- </div>
320
-
321
- <footer>
322
- <p>See <a href="/README.md">README.md</a> for detailed documentation</p>
323
- </footer>
324
- </div>
325
-
326
- <script>
327
- const configInput = document.getElementById('configId');
328
- const STORAGE_KEY = 'incode-dev-configId';
329
-
330
- // Load saved configId
331
- const savedConfigId = localStorage.getItem(STORAGE_KEY);
332
- if (savedConfigId) {
333
- configInput.value = savedConfigId;
334
- }
335
-
336
- // Save on change
337
- configInput.addEventListener('input', () => {
338
- localStorage.setItem(STORAGE_KEY, configInput.value);
339
- });
340
-
341
- // Handle demo links
342
- document.querySelectorAll('.demo-card[data-demo]').forEach(card => {
343
- card.addEventListener('click', (e) => {
344
- e.preventDefault();
345
- const demo = card.dataset.demo;
346
- const configId = configInput.value.trim();
347
-
348
- let url;
349
- if (demo === 'simplified') {
350
- url = '/simplified.html';
351
- } else if (demo === 'orchestrated') {
352
- url = '/orchestrated-flow.html';
353
- } else if (demo === 'headless') {
354
- url = '/headless.html';
355
- }
356
-
357
- if (configId) {
358
- url += `?configId=${encodeURIComponent(configId)}`;
359
- }
360
-
361
- window.location.href = url;
362
- });
363
- });
364
- </script>
365
- </body>
366
- </html>