@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/headless.html DELETED
@@ -1,875 +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>Headless SDK Demo | Build Your Own UI</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
10
- <style>
11
- :root {
12
- --bg-dark: #0a0a0f;
13
- --bg-card: #12121a;
14
- --bg-elevated: #1a1a24;
15
- --bg-input: #0d0d12;
16
- --border: #2a2a3a;
17
- --border-focus: #00ff88;
18
- --text-primary: #e0e0e0;
19
- --text-secondary: #888899;
20
- --text-muted: #555566;
21
- --accent-green: #00ff88;
22
- --accent-green-dim: #00cc6a;
23
- --accent-blue: #00aaff;
24
- --accent-yellow: #ffcc00;
25
- --accent-red: #ff4466;
26
- --accent-purple: #aa66ff;
27
- }
28
-
29
- * {
30
- box-sizing: border-box;
31
- }
32
-
33
- body {
34
- font-family: 'Space Grotesk', system-ui, sans-serif;
35
- background-color: var(--bg-dark);
36
- color: var(--text-primary);
37
- margin: 0;
38
- padding: 0;
39
- min-height: 100vh;
40
- background-image:
41
- radial-gradient(ellipse at top left, rgba(0, 255, 136, 0.03) 0%, transparent 50%),
42
- radial-gradient(ellipse at bottom right, rgba(0, 170, 255, 0.03) 0%, transparent 50%);
43
- }
44
-
45
- /* Layout */
46
- .layout {
47
- display: grid;
48
- grid-template-columns: 1fr 1fr;
49
- min-height: 100vh;
50
- gap: 0;
51
- }
52
-
53
- @media (max-width: 1024px) {
54
- .layout {
55
- grid-template-columns: 1fr;
56
- }
57
- }
58
-
59
- /* Left Panel - Custom UI */
60
- .ui-panel {
61
- padding: 2rem;
62
- display: flex;
63
- flex-direction: column;
64
- border-right: 1px solid var(--border);
65
- }
66
-
67
- .ui-panel-header {
68
- margin-bottom: 2rem;
69
- }
70
-
71
- .ui-badge {
72
- display: inline-flex;
73
- align-items: center;
74
- gap: 0.5rem;
75
- background: rgba(0, 255, 136, 0.1);
76
- border: 1px solid rgba(0, 255, 136, 0.3);
77
- border-radius: 999px;
78
- padding: 0.375rem 0.875rem;
79
- font-size: 0.75rem;
80
- color: var(--accent-green);
81
- text-transform: uppercase;
82
- letter-spacing: 0.1em;
83
- font-weight: 600;
84
- margin-bottom: 1rem;
85
- }
86
-
87
- .ui-title {
88
- font-size: 1.75rem;
89
- font-weight: 700;
90
- margin: 0 0 0.5rem 0;
91
- background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
92
- -webkit-background-clip: text;
93
- -webkit-text-fill-color: transparent;
94
- background-clip: text;
95
- }
96
-
97
- .ui-subtitle {
98
- color: var(--text-secondary);
99
- font-size: 0.875rem;
100
- margin: 0;
101
- }
102
-
103
- .ui-content {
104
- flex: 1;
105
- display: flex;
106
- flex-direction: column;
107
- }
108
-
109
- /* Right Panel - SDK State */
110
- .sdk-panel {
111
- padding: 2rem;
112
- background: var(--bg-card);
113
- display: flex;
114
- flex-direction: column;
115
- }
116
-
117
- .sdk-panel-header {
118
- margin-bottom: 1.5rem;
119
- }
120
-
121
- .sdk-badge {
122
- display: inline-flex;
123
- align-items: center;
124
- gap: 0.5rem;
125
- background: rgba(0, 170, 255, 0.1);
126
- border: 1px solid rgba(0, 170, 255, 0.3);
127
- border-radius: 999px;
128
- padding: 0.375rem 0.875rem;
129
- font-size: 0.75rem;
130
- color: var(--accent-blue);
131
- text-transform: uppercase;
132
- letter-spacing: 0.1em;
133
- font-weight: 600;
134
- margin-bottom: 1rem;
135
- }
136
-
137
- .sdk-title {
138
- font-size: 1.25rem;
139
- font-weight: 600;
140
- margin: 0 0 0.25rem 0;
141
- color: var(--text-primary);
142
- }
143
-
144
- .sdk-subtitle {
145
- color: var(--text-muted);
146
- font-size: 0.75rem;
147
- margin: 0;
148
- font-family: 'JetBrains Mono', monospace;
149
- }
150
-
151
- /* Status indicators */
152
- .status-row {
153
- display: flex;
154
- align-items: center;
155
- gap: 1rem;
156
- padding: 0.75rem 1rem;
157
- background: var(--bg-elevated);
158
- border-radius: 8px;
159
- margin-bottom: 1rem;
160
- }
161
-
162
- .status-dot {
163
- width: 10px;
164
- height: 10px;
165
- border-radius: 50%;
166
- animation: pulse 2s infinite;
167
- }
168
-
169
- .status-dot.idle { background: var(--text-muted); animation: none; }
170
- .status-dot.loading { background: var(--accent-blue); }
171
- .status-dot.active { background: var(--accent-yellow); }
172
- .status-dot.success { background: var(--accent-green); animation: none; }
173
- .status-dot.error { background: var(--accent-red); animation: none; }
174
-
175
- @keyframes pulse {
176
- 0%, 100% { opacity: 1; }
177
- 50% { opacity: 0.5; }
178
- }
179
-
180
- .status-label {
181
- font-family: 'JetBrains Mono', monospace;
182
- font-size: 0.875rem;
183
- color: var(--text-primary);
184
- flex: 1;
185
- }
186
-
187
- /* State viewer */
188
- .state-viewer {
189
- flex: 1;
190
- min-height: 0;
191
- background: var(--bg-input);
192
- border: 1px solid var(--border);
193
- border-radius: 8px;
194
- overflow: hidden;
195
- display: flex;
196
- flex-direction: column;
197
- }
198
-
199
- .state-viewer-header {
200
- display: flex;
201
- align-items: center;
202
- gap: 0.5rem;
203
- padding: 0.75rem 1rem;
204
- background: var(--bg-elevated);
205
- border-bottom: 1px solid var(--border);
206
- }
207
-
208
- .state-viewer-header span {
209
- font-family: 'JetBrains Mono', monospace;
210
- font-size: 0.75rem;
211
- color: var(--text-muted);
212
- }
213
-
214
- .state-viewer-content {
215
- flex: 1;
216
- min-height: 0;
217
- padding: 1rem;
218
- overflow: auto;
219
- font-family: 'JetBrains Mono', monospace;
220
- font-size: 0.8rem;
221
- line-height: 1.6;
222
- }
223
-
224
- .state-viewer-content pre {
225
- margin: 0;
226
- white-space: pre-wrap;
227
- word-break: break-all;
228
- }
229
-
230
- /* Event log */
231
- .event-log {
232
- flex: 1;
233
- min-height: 0;
234
- margin-top: 1rem;
235
- overflow: hidden;
236
- background: var(--bg-input);
237
- border: 1px solid var(--border);
238
- border-radius: 8px;
239
- display: flex;
240
- flex-direction: column;
241
- }
242
-
243
- .event-log-title {
244
- font-size: 0.75rem;
245
- color: var(--text-muted);
246
- text-transform: uppercase;
247
- letter-spacing: 0.1em;
248
- padding: 0.75rem 1rem;
249
- background: var(--bg-elevated);
250
- border-bottom: 1px solid var(--border);
251
- }
252
-
253
- .event-log-content {
254
- flex: 1;
255
- min-height: 0;
256
- overflow-y: auto;
257
- padding: 0.75rem;
258
- }
259
-
260
- .log-entry {
261
- font-family: 'JetBrains Mono', monospace;
262
- font-size: 0.7rem;
263
- padding: 0.25rem 0;
264
- border-bottom: 1px solid rgba(255,255,255,0.03);
265
- }
266
-
267
- .log-time { color: var(--text-muted); margin-right: 0.5rem; }
268
- .log-event { color: var(--accent-green); font-weight: 600; }
269
- .log-data { color: var(--text-secondary); }
270
-
271
- /* Form elements */
272
- .form-container {
273
- background: var(--bg-card);
274
- border: 1px solid var(--border);
275
- border-radius: 16px;
276
- padding: 2rem;
277
- }
278
-
279
- .form-header {
280
- text-align: center;
281
- margin-bottom: 2rem;
282
- }
283
-
284
- .form-icon {
285
- font-size: 3rem;
286
- margin-bottom: 1rem;
287
- }
288
-
289
- .form-title {
290
- font-size: 1.5rem;
291
- font-weight: 600;
292
- margin: 0 0 0.5rem 0;
293
- }
294
-
295
- .form-description {
296
- color: var(--text-secondary);
297
- font-size: 0.875rem;
298
- margin: 0;
299
- }
300
-
301
- .input-group {
302
- margin-bottom: 1.5rem;
303
- }
304
-
305
- .input-label {
306
- display: flex;
307
- flex-direction: column;
308
- gap: 0.5rem;
309
- font-size: 0.875rem;
310
- color: var(--text-secondary);
311
- }
312
-
313
- .input-field {
314
- width: 100%;
315
- padding: 1rem;
316
- background: var(--bg-input);
317
- border: 2px solid var(--border);
318
- border-radius: 12px;
319
- color: var(--text-primary);
320
- font-size: 1.25rem;
321
- font-family: 'JetBrains Mono', monospace;
322
- letter-spacing: 0.05em;
323
- transition: border-color 0.2s, box-shadow 0.2s;
324
- }
325
-
326
- .input-field:focus {
327
- outline: none;
328
- border-color: var(--border-focus);
329
- box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.1);
330
- }
331
-
332
- .input-field::placeholder {
333
- color: var(--text-muted);
334
- }
335
-
336
- .input-hint {
337
- font-size: 0.75rem;
338
- color: var(--text-muted);
339
- margin-top: 0.5rem;
340
- }
341
-
342
- .input-error {
343
- font-size: 0.75rem;
344
- color: var(--accent-red);
345
- margin-top: 0.5rem;
346
- }
347
-
348
- .validation-status {
349
- display: flex;
350
- align-items: center;
351
- gap: 0.5rem;
352
- font-size: 0.875rem;
353
- margin-top: 0.75rem;
354
- }
355
-
356
- .validation-status.valid { color: var(--accent-green); }
357
- .validation-status.invalid { color: var(--text-muted); }
358
-
359
- /* Buttons */
360
- .btn {
361
- display: inline-flex;
362
- align-items: center;
363
- justify-content: center;
364
- gap: 0.5rem;
365
- padding: 1rem 2rem;
366
- border: none;
367
- border-radius: 12px;
368
- font-size: 1rem;
369
- font-weight: 600;
370
- font-family: 'Space Grotesk', system-ui, sans-serif;
371
- cursor: pointer;
372
- transition: all 0.2s;
373
- width: 100%;
374
- }
375
-
376
- .btn:disabled {
377
- opacity: 0.5;
378
- cursor: not-allowed;
379
- }
380
-
381
- .btn-primary {
382
- background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-dim) 100%);
383
- color: var(--bg-dark);
384
- }
385
-
386
- .btn-primary:hover:not(:disabled) {
387
- transform: translateY(-2px);
388
- box-shadow: 0 8px 20px rgba(0, 255, 136, 0.3);
389
- }
390
-
391
- .btn-secondary {
392
- background: var(--bg-elevated);
393
- color: var(--text-primary);
394
- border: 1px solid var(--border);
395
- }
396
-
397
- .btn-secondary:hover:not(:disabled) {
398
- background: var(--border);
399
- }
400
-
401
- .btn-ghost {
402
- background: transparent;
403
- color: var(--text-secondary);
404
- padding: 0.5rem 1rem;
405
- }
406
-
407
- .btn-ghost:hover:not(:disabled) {
408
- color: var(--text-primary);
409
- }
410
-
411
- .btn-row {
412
- display: flex;
413
- gap: 1rem;
414
- margin-top: 1rem;
415
- }
416
-
417
- /* OTP input */
418
- .otp-container {
419
- display: flex;
420
- gap: 0.75rem;
421
- justify-content: center;
422
- margin: 1.5rem 0;
423
- }
424
-
425
- .otp-input {
426
- width: 56px;
427
- height: 64px;
428
- text-align: center;
429
- font-size: 1.5rem;
430
- font-weight: 700;
431
- font-family: 'JetBrains Mono', monospace;
432
- background: var(--bg-input);
433
- border: 2px solid var(--border);
434
- border-radius: 12px;
435
- color: var(--text-primary);
436
- transition: border-color 0.2s, box-shadow 0.2s;
437
- }
438
-
439
- .otp-input:focus {
440
- outline: none;
441
- border-color: var(--border-focus);
442
- box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.1);
443
- }
444
-
445
- /* Timer */
446
- .timer {
447
- text-align: center;
448
- color: var(--text-secondary);
449
- font-size: 0.875rem;
450
- margin: 1rem 0;
451
- }
452
-
453
- .timer-value {
454
- font-family: 'JetBrains Mono', monospace;
455
- color: var(--accent-yellow);
456
- }
457
-
458
- /* Success/Error states */
459
- .result-container {
460
- text-align: center;
461
- padding: 3rem 2rem;
462
- }
463
-
464
- .result-icon {
465
- font-size: 5rem;
466
- margin-bottom: 1.5rem;
467
- }
468
-
469
- .result-title {
470
- font-size: 1.75rem;
471
- font-weight: 700;
472
- margin: 0 0 0.5rem 0;
473
- }
474
-
475
- .result-title.success { color: var(--accent-green); }
476
- .result-title.error { color: var(--accent-red); }
477
-
478
- .result-description {
479
- color: var(--text-secondary);
480
- margin: 0 0 2rem 0;
481
- }
482
-
483
- /* Loading state */
484
- .loading-container {
485
- display: flex;
486
- flex-direction: column;
487
- align-items: center;
488
- justify-content: center;
489
- padding: 3rem;
490
- text-align: center;
491
- }
492
-
493
- .spinner {
494
- width: 48px;
495
- height: 48px;
496
- border: 3px solid var(--border);
497
- border-top-color: var(--accent-green);
498
- border-radius: 50%;
499
- animation: spin 1s linear infinite;
500
- margin-bottom: 1.5rem;
501
- }
502
-
503
- @keyframes spin {
504
- to { transform: rotate(360deg); }
505
- }
506
-
507
- .loading-text {
508
- color: var(--text-secondary);
509
- font-size: 0.875rem;
510
- }
511
-
512
- /* Idle state */
513
- .idle-container {
514
- display: flex;
515
- flex-direction: column;
516
- align-items: center;
517
- justify-content: center;
518
- padding: 3rem;
519
- text-align: center;
520
- }
521
-
522
- .idle-icon {
523
- font-size: 4rem;
524
- margin-bottom: 1.5rem;
525
- filter: grayscale(1) opacity(0.5);
526
- }
527
-
528
- .idle-title {
529
- font-size: 1.25rem;
530
- font-weight: 600;
531
- margin: 0 0 0.5rem 0;
532
- color: var(--text-primary);
533
- }
534
-
535
- .idle-description {
536
- color: var(--text-muted);
537
- font-size: 0.875rem;
538
- margin: 0 0 2rem 0;
539
- max-width: 300px;
540
- }
541
-
542
- /* Code comment style */
543
- .code-comment {
544
- font-family: 'JetBrains Mono', monospace;
545
- font-size: 0.7rem;
546
- color: var(--text-muted);
547
- margin-top: 2rem;
548
- padding: 1rem;
549
- background: rgba(0,0,0,0.3);
550
- border-radius: 8px;
551
- white-space: pre-wrap;
552
- }
553
-
554
- /* JSON syntax highlighting */
555
- .json-key { color: var(--accent-green); }
556
- .json-string { color: var(--accent-yellow); }
557
- .json-number { color: var(--accent-purple); }
558
- .json-boolean { color: var(--accent-blue); }
559
- .json-null { color: var(--text-muted); }
560
- .json-bracket { color: var(--text-secondary); }
561
-
562
- /* Log types */
563
- .log-init { color: var(--accent-blue); }
564
- .log-action { color: var(--accent-green); }
565
- .log-state { color: var(--accent-yellow); }
566
- .log-flow { color: var(--accent-purple); }
567
- .log-error { color: var(--accent-red); }
568
-
569
- /* Welcome screen */
570
- .welcome-container {
571
- display: flex;
572
- flex-direction: column;
573
- align-items: center;
574
- justify-content: center;
575
- padding: 2rem;
576
- text-align: center;
577
- min-height: 400px;
578
- }
579
-
580
- .welcome-icon {
581
- font-size: 4rem;
582
- margin-bottom: 1.5rem;
583
- }
584
-
585
- .welcome-title {
586
- font-size: 2rem;
587
- font-weight: 700;
588
- margin: 0 0 0.75rem 0;
589
- background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-blue) 100%);
590
- -webkit-background-clip: text;
591
- -webkit-text-fill-color: transparent;
592
- background-clip: text;
593
- }
594
-
595
- .welcome-description {
596
- color: var(--text-secondary);
597
- font-size: 1rem;
598
- margin: 0 0 2rem 0;
599
- max-width: 400px;
600
- }
601
-
602
- .config-input-group {
603
- width: 100%;
604
- max-width: 400px;
605
- margin-bottom: 1.5rem;
606
- text-align: left;
607
- }
608
-
609
- .config-label {
610
- display: flex;
611
- flex-direction: column;
612
- gap: 0.5rem;
613
- font-size: 0.875rem;
614
- color: var(--text-secondary);
615
- }
616
-
617
- .config-input {
618
- width: 100%;
619
- padding: 0.875rem 1rem;
620
- background: var(--bg-input);
621
- border: 2px solid var(--border);
622
- border-radius: 8px;
623
- color: var(--text-primary);
624
- font-size: 0.9rem;
625
- font-family: 'JetBrains Mono', monospace;
626
- transition: border-color 0.2s, box-shadow 0.2s;
627
- }
628
-
629
- .config-input:focus {
630
- outline: none;
631
- border-color: var(--border-focus);
632
- box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.1);
633
- }
634
-
635
- .config-input::placeholder {
636
- color: var(--text-muted);
637
- }
638
-
639
- .feature-list {
640
- display: flex;
641
- flex-direction: column;
642
- gap: 0.75rem;
643
- margin-bottom: 2rem;
644
- text-align: left;
645
- }
646
-
647
- .feature {
648
- display: flex;
649
- align-items: center;
650
- gap: 0.75rem;
651
- color: var(--text-secondary);
652
- font-size: 0.9rem;
653
- }
654
-
655
- .feature-icon {
656
- font-size: 1.25rem;
657
- }
658
-
659
- .btn-large {
660
- padding: 1.25rem 3rem;
661
- font-size: 1.1rem;
662
- }
663
-
664
- /* Flow progress */
665
- .flow-progress {
666
- display: flex;
667
- justify-content: center;
668
- gap: 0.5rem;
669
- padding: 1rem;
670
- margin-bottom: 1rem;
671
- background: var(--bg-elevated);
672
- border-radius: 12px;
673
- }
674
-
675
- .flow-step {
676
- display: flex;
677
- align-items: center;
678
- gap: 0.5rem;
679
- padding: 0.5rem 1rem;
680
- border-radius: 8px;
681
- font-size: 0.75rem;
682
- color: var(--text-muted);
683
- transition: all 0.2s;
684
- }
685
-
686
- .flow-step.active {
687
- background: rgba(0, 255, 136, 0.1);
688
- color: var(--accent-green);
689
- }
690
-
691
- .flow-step.done {
692
- color: var(--text-secondary);
693
- }
694
-
695
- .flow-step.done .step-number {
696
- background: var(--accent-green);
697
- color: var(--bg-dark);
698
- }
699
-
700
- .step-number {
701
- display: flex;
702
- align-items: center;
703
- justify-content: center;
704
- width: 20px;
705
- height: 20px;
706
- border-radius: 50%;
707
- background: var(--border);
708
- font-size: 0.7rem;
709
- font-weight: 700;
710
- }
711
-
712
- .flow-step.active .step-number {
713
- background: var(--accent-green);
714
- color: var(--bg-dark);
715
- }
716
-
717
- .step-name {
718
- font-weight: 500;
719
- }
720
-
721
- /* Selfie capture */
722
- .capture-container {
723
- display: flex;
724
- flex-direction: column;
725
- align-items: center;
726
- gap: 1rem;
727
- }
728
-
729
- .camera-wrapper {
730
- position: relative;
731
- width: 100%;
732
- max-width: 320px;
733
- aspect-ratio: 3/4;
734
- border-radius: 16px;
735
- overflow: hidden;
736
- background: var(--bg-input);
737
- }
738
-
739
- .camera-feed {
740
- width: 100%;
741
- height: 100%;
742
- object-fit: cover;
743
- transform: scaleX(-1);
744
- }
745
-
746
- .face-guide {
747
- position: absolute;
748
- inset: 0;
749
- display: flex;
750
- align-items: center;
751
- justify-content: center;
752
- pointer-events: none;
753
- }
754
-
755
- .face-oval {
756
- width: 70%;
757
- height: 70%;
758
- }
759
-
760
- .capture-status {
761
- position: absolute;
762
- bottom: 1rem;
763
- left: 50%;
764
- transform: translateX(-50%);
765
- display: flex;
766
- align-items: center;
767
- gap: 0.5rem;
768
- background: rgba(0, 0, 0, 0.7);
769
- backdrop-filter: blur(8px);
770
- padding: 0.5rem 1rem;
771
- border-radius: 999px;
772
- font-size: 0.875rem;
773
- }
774
-
775
- .capture-status.success {
776
- background: rgba(0, 255, 136, 0.2);
777
- color: var(--accent-green);
778
- }
779
-
780
- .capture-btn {
781
- margin-top: 1rem;
782
- }
783
-
784
- .upload-status {
785
- display: flex;
786
- align-items: center;
787
- gap: 0.5rem;
788
- color: var(--text-secondary);
789
- font-size: 0.875rem;
790
- }
791
-
792
- /* Tips list */
793
- .tips-list {
794
- list-style: none;
795
- padding: 0;
796
- margin: 0 0 2rem 0;
797
- text-align: left;
798
- }
799
-
800
- .tips-list li {
801
- padding: 0.5rem 0;
802
- color: var(--text-secondary);
803
- font-size: 0.9rem;
804
- }
805
-
806
- /* Finish data */
807
- .finish-data {
808
- background: var(--bg-input);
809
- border: 1px solid var(--border);
810
- border-radius: 8px;
811
- padding: 1rem;
812
- margin: 1.5rem 0;
813
- max-width: 400px;
814
- text-align: left;
815
- }
816
-
817
- .finish-data pre {
818
- margin: 0;
819
- font-family: 'JetBrains Mono', monospace;
820
- font-size: 0.8rem;
821
- color: var(--accent-green);
822
- white-space: pre-wrap;
823
- }
824
-
825
- /* Small spinner */
826
- .spinner-small {
827
- width: 16px;
828
- height: 16px;
829
- border: 2px solid var(--border);
830
- border-top-color: var(--accent-green);
831
- border-radius: 50%;
832
- animation: spin 1s linear infinite;
833
- display: inline-block;
834
- }
835
-
836
- /* Upload error */
837
- .upload-error {
838
- margin-top: 1.5rem;
839
- padding: 1.5rem;
840
- background: rgba(255, 68, 102, 0.1);
841
- border: 1px solid rgba(255, 68, 102, 0.3);
842
- border-radius: 12px;
843
- text-align: center;
844
- }
845
-
846
- .upload-error .error-icon {
847
- font-size: 2rem;
848
- margin-bottom: 0.5rem;
849
- }
850
-
851
- .upload-error .error-message {
852
- color: var(--accent-red);
853
- font-size: 0.9rem;
854
- margin: 0 0 0.5rem 0;
855
- }
856
-
857
- .upload-error .attempts-remaining {
858
- color: var(--text-secondary);
859
- font-size: 0.8rem;
860
- margin: 0 0 1rem 0;
861
- }
862
-
863
- .upload-error .no-attempts {
864
- color: var(--accent-red);
865
- font-size: 0.8rem;
866
- font-weight: 600;
867
- margin: 0;
868
- }
869
- </style>
870
- </head>
871
- <body>
872
- <div id="root"></div>
873
- <script type="module" src="./main-headless.tsx"></script>
874
- </body>
875
- </html>