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

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 (273) hide show
  1. package/dist/{styles/core.css → base.css} +53 -57
  2. package/dist/email/email.es.js +1 -1
  3. package/dist/email/styles.css +11 -11
  4. package/dist/flow/styles.css +688 -1
  5. package/dist/{incodeModule-BF5MX9GT.js → incodeModule-Ct9jp5k6.js} +22 -19
  6. package/dist/index.es.js +18 -18
  7. package/dist/phone/phone.es.js +1 -1
  8. package/dist/phone/styles.css +31 -31
  9. package/dist/selfie/selfie.es.js +16 -16
  10. package/dist/selfie/styles.css +0 -51
  11. package/dist/themes/dark.css +652 -0
  12. package/dist/types/dark.d.ts +1 -0
  13. package/dist/types/light.d.ts +1 -0
  14. package/dist/types/themes/light.d.ts +1 -0
  15. package/package.json +12 -6
  16. package/.turbo/turbo-build.log +0 -58
  17. package/.turbo/turbo-coverage.log +0 -23
  18. package/.turbo/turbo-format.log +0 -6
  19. package/.turbo/turbo-lint$colon$fix.log +0 -6
  20. package/.turbo/turbo-lint.log +0 -6
  21. package/.turbo/turbo-test.log +0 -1033
  22. package/.turbo/turbo-typecheck.log +0 -5
  23. package/coverage/base.css +0 -224
  24. package/coverage/block-navigation.js +0 -87
  25. package/coverage/email/email.tsx.html +0 -850
  26. package/coverage/email/emailInput.tsx.html +0 -340
  27. package/coverage/email/index.html +0 -131
  28. package/coverage/favicon.png +0 -0
  29. package/coverage/flow/flow.tsx.html +0 -961
  30. package/coverage/flow/flowCompleted.tsx.html +0 -448
  31. package/coverage/flow/flowInit.ts.html +0 -367
  32. package/coverage/flow/flowStart.tsx.html +0 -208
  33. package/coverage/flow/index.html +0 -221
  34. package/coverage/flow/preloadFlow.ts.html +0 -598
  35. package/coverage/flow/unsupportedModule.tsx.html +0 -202
  36. package/coverage/flow/useFlowInitialization.ts.html +0 -469
  37. package/coverage/flow/useModuleLoader.ts.html +0 -361
  38. package/coverage/hooks/index.html +0 -116
  39. package/coverage/hooks/useManager.ts.html +0 -205
  40. package/coverage/index.html +0 -401
  41. package/coverage/permissions/boldWithArrow.tsx.html +0 -208
  42. package/coverage/permissions/denied.tsx.html +0 -172
  43. package/coverage/permissions/deniedAndroid.tsx.html +0 -253
  44. package/coverage/permissions/deniedDesktop.tsx.html +0 -277
  45. package/coverage/permissions/deniedIOS.tsx.html +0 -304
  46. package/coverage/permissions/deniedInstructions.tsx.html +0 -142
  47. package/coverage/permissions/iconWrapper.tsx.html +0 -130
  48. package/coverage/permissions/index.html +0 -251
  49. package/coverage/permissions/learnMore.tsx.html +0 -340
  50. package/coverage/permissions/numberedStep.tsx.html +0 -127
  51. package/coverage/permissions/permissions.tsx.html +0 -289
  52. package/coverage/phone/index.html +0 -116
  53. package/coverage/phone/phoneInput.tsx.html +0 -832
  54. package/coverage/prettify.css +0 -1
  55. package/coverage/prettify.js +0 -2
  56. package/coverage/selfie/index.html +0 -131
  57. package/coverage/selfie/selfie.tsx.html +0 -334
  58. package/coverage/selfie/tutorial.tsx.html +0 -214
  59. package/coverage/shared/baseTutorial/baseTutorial.tsx.html +0 -250
  60. package/coverage/shared/baseTutorial/index.html +0 -131
  61. package/coverage/shared/baseTutorial/replaceBaseTutorial.ts.html +0 -289
  62. package/coverage/shared/button/button.tsx.html +0 -226
  63. package/coverage/shared/button/index.html +0 -116
  64. package/coverage/shared/componentRoot/incodeComponent.tsx.html +0 -121
  65. package/coverage/shared/componentRoot/index.html +0 -116
  66. package/coverage/shared/countries/countries.ts.html +0 -502
  67. package/coverage/shared/countries/index.html +0 -116
  68. package/coverage/shared/icons/chevronDown.tsx.html +0 -151
  69. package/coverage/shared/icons/index.html +0 -131
  70. package/coverage/shared/icons/successIcon.tsx.html +0 -163
  71. package/coverage/shared/loader/index.html +0 -116
  72. package/coverage/shared/loader/loadingIcon.tsx.html +0 -286
  73. package/coverage/shared/otpInput/index.html +0 -116
  74. package/coverage/shared/otpInput/otpInput.tsx.html +0 -808
  75. package/coverage/shared/page/index.html +0 -146
  76. package/coverage/shared/page/page.tsx.html +0 -358
  77. package/coverage/shared/page/pageUiConfig.ts.html +0 -277
  78. package/coverage/shared/page/verifiedByIncode.tsx.html +0 -310
  79. package/coverage/shared/spacer/index.html +0 -116
  80. package/coverage/shared/spacer/spacer.tsx.html +0 -349
  81. package/coverage/shared/spinner/index.html +0 -116
  82. package/coverage/shared/spinner/spinner.tsx.html +0 -280
  83. package/coverage/shared/title/index.html +0 -116
  84. package/coverage/shared/title/title.tsx.html +0 -121
  85. package/coverage/shared/uiConfig/index.html +0 -116
  86. package/coverage/shared/uiConfig/uiConfig.ts.html +0 -193
  87. package/coverage/shared/webComponent/incodeModule.ts.html +0 -172
  88. package/coverage/shared/webComponent/index.html +0 -131
  89. package/coverage/shared/webComponent/registerIncodeElement.ts.html +0 -130
  90. package/coverage/sort-arrow-sprite.png +0 -0
  91. package/coverage/sorter.js +0 -210
  92. package/coverage/styles/cn.tsx.html +0 -148
  93. package/coverage/styles/fetchTheme.ts.html +0 -349
  94. package/coverage/styles/index.html +0 -131
  95. package/dev/README.md +0 -163
  96. package/dev/getToken.ts +0 -36
  97. package/dev/headless.html +0 -875
  98. package/dev/index.html +0 -366
  99. package/dev/main-headless.tsx +0 -1332
  100. package/dev/main-orchestrated-flow.tsx +0 -1158
  101. package/dev/main-preact.tsx +0 -323
  102. package/dev/main-simplified.tsx +0 -123
  103. package/dev/main-web-component.tsx +0 -256
  104. package/dev/main.tsx +0 -332
  105. package/dev/manual.html +0 -27
  106. package/dev/orchestrated-flow.html +0 -64
  107. package/dev/simplified.html +0 -64
  108. package/dev/tiktok-logo.svg +0 -7
  109. package/dist/asset-manifest.json +0 -18
  110. package/src/defineCustomElement.tsx +0 -30
  111. package/src/email/email.test.tsx +0 -368
  112. package/src/email/email.tsx +0 -255
  113. package/src/email/emailInput.test.tsx +0 -264
  114. package/src/email/emailInput.tsx +0 -85
  115. package/src/email/styles.css +0 -59
  116. package/src/flow/flow.test.tsx +0 -796
  117. package/src/flow/flow.tsx +0 -292
  118. package/src/flow/flowCompleted.css +0 -30
  119. package/src/flow/flowCompleted.test.tsx +0 -331
  120. package/src/flow/flowCompleted.tsx +0 -121
  121. package/src/flow/flowInit.test.ts +0 -264
  122. package/src/flow/flowInit.ts +0 -94
  123. package/src/flow/flowStart.css +0 -58
  124. package/src/flow/flowStart.test.tsx +0 -49
  125. package/src/flow/flowStart.tsx +0 -41
  126. package/src/flow/incode-logo.svg +0 -8
  127. package/src/flow/index.ts +0 -7
  128. package/src/flow/preloadFlow.test.ts +0 -421
  129. package/src/flow/preloadFlow.ts +0 -171
  130. package/src/flow/styles.css +0 -9
  131. package/src/flow/unsupportedModule.css +0 -21
  132. package/src/flow/unsupportedModule.tsx +0 -39
  133. package/src/flow/useFlowInitialization.test.tsx +0 -292
  134. package/src/flow/useFlowInitialization.ts +0 -128
  135. package/src/flow/useModuleLoader.test.tsx +0 -212
  136. package/src/flow/useModuleLoader.ts +0 -92
  137. package/src/hooks/index.ts +0 -1
  138. package/src/hooks/useManager.test.ts +0 -91
  139. package/src/hooks/useManager.ts +0 -40
  140. package/src/i18n/index.ts +0 -3
  141. package/src/i18n/instance.ts +0 -16
  142. package/src/i18n/setup.ts +0 -184
  143. package/src/i18n/useTranslation.ts +0 -42
  144. package/src/index.ts +0 -27
  145. package/src/permissions/assets/android-dots-icon.svg +0 -7
  146. package/src/permissions/assets/android-settings-icon.svg +0 -16
  147. package/src/permissions/assets/android-toggle-icon.svg +0 -20
  148. package/src/permissions/assets/bank-card-icon.svg +0 -14
  149. package/src/permissions/assets/camera-icon.svg +0 -12
  150. package/src/permissions/assets/camera-ios.svg +0 -53
  151. package/src/permissions/assets/check-icon.svg +0 -8
  152. package/src/permissions/assets/chrome-icon.svg +0 -43
  153. package/src/permissions/assets/password-icon.svg +0 -11
  154. package/src/permissions/assets/permissions-img.svg +0 -51
  155. package/src/permissions/assets/safari-icon.svg +0 -37
  156. package/src/permissions/assets/settings-icon.svg +0 -33
  157. package/src/permissions/assets/toggle-icon.svg +0 -19
  158. package/src/permissions/assets/warning-icon.svg +0 -6
  159. package/src/permissions/boldWithArrow.css +0 -9
  160. package/src/permissions/boldWithArrow.tsx +0 -41
  161. package/src/permissions/denied.css +0 -37
  162. package/src/permissions/denied.tsx +0 -29
  163. package/src/permissions/deniedAndroid.tsx +0 -56
  164. package/src/permissions/deniedDesktop.css +0 -9
  165. package/src/permissions/deniedDesktop.tsx +0 -64
  166. package/src/permissions/deniedIOS.tsx +0 -73
  167. package/src/permissions/deniedInstructions.tsx +0 -19
  168. package/src/permissions/iconWrapper.css +0 -9
  169. package/src/permissions/iconWrapper.tsx +0 -15
  170. package/src/permissions/learnMore.css +0 -37
  171. package/src/permissions/learnMore.tsx +0 -85
  172. package/src/permissions/numberedStep.css +0 -13
  173. package/src/permissions/numberedStep.tsx +0 -14
  174. package/src/permissions/permissions.css +0 -13
  175. package/src/permissions/permissions.tsx +0 -68
  176. package/src/phone/phone.tsx +0 -246
  177. package/src/phone/phoneInput.test.tsx +0 -275
  178. package/src/phone/phoneInput.tsx +0 -249
  179. package/src/phone/styles.css +0 -158
  180. package/src/selfie/cameraButton.css +0 -13
  181. package/src/selfie/cameraButton.tsx +0 -35
  182. package/src/selfie/capture.css +0 -57
  183. package/src/selfie/capture.tsx +0 -232
  184. package/src/selfie/errorModal.tsx +0 -218
  185. package/src/selfie/errorModalContent.css +0 -33
  186. package/src/selfie/errorModalContent.tsx +0 -44
  187. package/src/selfie/faceOutline.css +0 -5
  188. package/src/selfie/faceOutline.tsx +0 -22
  189. package/src/selfie/loadingBorder.css +0 -12
  190. package/src/selfie/loadingBorder.tsx +0 -77
  191. package/src/selfie/manualCaptureButton.css +0 -13
  192. package/src/selfie/manualCaptureButton.tsx +0 -35
  193. package/src/selfie/noMoreAttemptsModal.tsx +0 -44
  194. package/src/selfie/notification.css +0 -9
  195. package/src/selfie/notification.tsx +0 -36
  196. package/src/selfie/retryErrorModal.tsx +0 -56
  197. package/src/selfie/selfie.test.tsx +0 -458
  198. package/src/selfie/selfie.tsx +0 -83
  199. package/src/selfie/selfieTutorial.json +0 -2626
  200. package/src/selfie/styles.css +0 -1
  201. package/src/selfie/tutorial.test.tsx +0 -200
  202. package/src/selfie/tutorial.tsx +0 -43
  203. package/src/setup.ts +0 -33
  204. package/src/shared/baseTutorial/baseTutorial.css +0 -21
  205. package/src/shared/baseTutorial/baseTutorial.test.tsx +0 -184
  206. package/src/shared/baseTutorial/baseTutorial.tsx +0 -55
  207. package/src/shared/baseTutorial/replaceBaseTutorial.test.ts +0 -267
  208. package/src/shared/baseTutorial/replaceBaseTutorial.ts +0 -68
  209. package/src/shared/button/button.css +0 -55
  210. package/src/shared/button/button.test.tsx +0 -101
  211. package/src/shared/button/button.tsx +0 -47
  212. package/src/shared/componentRoot/incodeComponent.tsx +0 -12
  213. package/src/shared/countries/countries.test.ts +0 -75
  214. package/src/shared/countries/countries.ts +0 -139
  215. package/src/shared/countries/index.ts +0 -6
  216. package/src/shared/icons/chevronDown.tsx +0 -22
  217. package/src/shared/icons/index.ts +0 -2
  218. package/src/shared/icons/successIcon.css +0 -5
  219. package/src/shared/icons/successIcon.test.tsx +0 -40
  220. package/src/shared/icons/successIcon.tsx +0 -26
  221. package/src/shared/loader/loadingIcon.css +0 -28
  222. package/src/shared/loader/loadingIcon.tsx +0 -67
  223. package/src/shared/lottie/lottie.tsx +0 -108
  224. package/src/shared/otpInput/otpInput.css +0 -85
  225. package/src/shared/otpInput/otpInput.test.tsx +0 -356
  226. package/src/shared/otpInput/otpInput.tsx +0 -241
  227. package/src/shared/page/incode-logo.svg +0 -3
  228. package/src/shared/page/page.css +0 -47
  229. package/src/shared/page/page.test.tsx +0 -97
  230. package/src/shared/page/page.tsx +0 -91
  231. package/src/shared/page/pageUiConfig.test.ts +0 -112
  232. package/src/shared/page/pageUiConfig.ts +0 -64
  233. package/src/shared/page/verifiedByIncode.css +0 -5
  234. package/src/shared/page/verifiedByIncode.tsx +0 -75
  235. package/src/shared/spacer/spacer.css +0 -149
  236. package/src/shared/spacer/spacer.test.tsx +0 -143
  237. package/src/shared/spacer/spacer.tsx +0 -88
  238. package/src/shared/spinner/index.ts +0 -2
  239. package/src/shared/spinner/spinner.css +0 -28
  240. package/src/shared/spinner/spinner.test.tsx +0 -82
  241. package/src/shared/spinner/spinner.tsx +0 -65
  242. package/src/shared/title/title.css +0 -7
  243. package/src/shared/title/title.tsx +0 -12
  244. package/src/shared/uiConfig/uiConfig.ts +0 -36
  245. package/src/shared/webComponent/incodeModule.ts +0 -29
  246. package/src/shared/webComponent/registerIncodeElement.ts +0 -15
  247. package/src/styles/__mocks__/fetchTheme.ts +0 -19
  248. package/src/styles/applyTheme.ts +0 -37
  249. package/src/styles/cn.test.tsx +0 -57
  250. package/src/styles/cn.tsx +0 -21
  251. package/src/styles/core.css +0 -12
  252. package/src/styles/fetchTheme.test.ts +0 -390
  253. package/src/styles/fetchTheme.ts +0 -88
  254. package/src/styles/generatePalette.ts +0 -111
  255. package/src/styles/reset.css +0 -65
  256. package/src/styles/resolveCssVariableToHex.ts +0 -28
  257. package/src/styles/tailwind.css +0 -291
  258. package/src/styles/themeTypes.ts +0 -18
  259. package/src/styles/tokens/colors.css +0 -190
  260. package/src/styles/tokens/components.css +0 -174
  261. package/src/styles/tokens/index.css +0 -4
  262. package/src/styles/tokens/primitives.css +0 -129
  263. package/src/styles/tokens/semantic.css +0 -51
  264. package/src/svg.d.ts +0 -4
  265. package/src/types/assets.d.ts +0 -1
  266. package/src/types/custom-elements.d.ts +0 -104
  267. package/tsconfig.json +0 -22
  268. package/vite.config.ts +0 -260
  269. package/vitest.config.ts +0 -40
  270. package/vitest.setup.ts +0 -16
  271. /package/dist/{styles/tokens.css → themes/light.css} +0 -0
  272. /package/dist/types/{core.d.ts → base.d.ts} +0 -0
  273. /package/dist/types/{styles/core.d.ts → themes/dark.d.ts} +0 -0
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>