npm - @incodetech/web - Versions diffs - 2.0.0-alpha.1 → 2.0.0-alpha.3 - Mend

@incodetech/web 2.0.0-alpha.1 → 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 (212) hide show

package/dist/asset-manifest.json +18 -0
package/dist/browser-ponyfill-B6W6hHVY.js +344 -0
package/dist/button-DeMZ_34N.js +266 -0
package/dist/button.css +335 -0
package/dist/email/email.es.js +145 -0
package/dist/email/styles.css +123 -0
package/dist/flow/flow.es.js +9 -0
package/dist/flow/styles.css +204 -0
package/dist/flow-ZK6OBsa3.js +568 -0
package/dist/incodeModule-BF5MX9GT.js +243 -0
package/dist/incodeModule.css +119 -0
package/dist/index.es.js +101 -0
package/dist/otpInput-BUrV4IAF.js +151 -0
package/dist/otpInput.css +167 -0
package/dist/phone/phone.es.js +3442 -0
package/dist/phone/styles.css +305 -0
package/dist/selfie/selfie.es.js +893 -0
package/dist/selfie/styles.css +1163 -0
package/dist/selfieTutorial-C-u5GufD.js +29 -0
package/dist/styles/core.css +1013 -0
package/dist/styles/tokens.css +543 -0
package/dist/successIcon.css +4 -0
package/dist/title-ng7q7YDh.js +2161 -0
package/dist/title.css +38 -0
package/dist/types/core.d.ts +1 -0
package/dist/types/email/email.d.ts +2 -0
package/dist/types/email.d.ts +50 -0
package/dist/types/flow/flow.d.ts +2 -0
package/dist/types/flow.d.ts +46 -0
package/dist/types/index.d.ts +223 -0
package/dist/types/phone/phone.d.ts +2 -0
package/dist/types/phone.d.ts +51 -0
package/dist/types/selfie/selfie.d.ts +2 -0
package/dist/types/selfie.d.ts +24 -0
package/dist/types/styles/core.d.ts +1 -0
package/dist/vendor-preact-CK0WeTOR.js +584 -0
package/package.json +20 -17
package/dev/README.md +0 -163
package/dev/getToken.ts +0 -36
package/dev/headless.html +0 -875
package/dev/index.html +0 -366
package/dev/main-headless.tsx +0 -1332
package/dev/main-orchestrated-flow.tsx +0 -1158
package/dev/main-preact.tsx +0 -323
package/dev/main-simplified.tsx +0 -123
package/dev/main-web-component.tsx +0 -256
package/dev/main.tsx +0 -332
package/dev/manual.html +0 -27
package/dev/orchestrated-flow.html +0 -64
package/dev/simplified.html +0 -64
package/dev/tiktok-logo.svg +0 -7
package/src/defineCustomElement.tsx +0 -30
package/src/email/email.test.tsx +0 -368
package/src/email/email.tsx +0 -255
package/src/email/emailInput.test.tsx +0 -264
package/src/email/emailInput.tsx +0 -85
package/src/email/styles.css +0 -59
package/src/flow/flow.test.tsx +0 -796
package/src/flow/flow.tsx +0 -292
package/src/flow/flowCompleted.css +0 -30
package/src/flow/flowCompleted.test.tsx +0 -331
package/src/flow/flowCompleted.tsx +0 -121
package/src/flow/flowInit.test.ts +0 -264
package/src/flow/flowInit.ts +0 -94
package/src/flow/flowStart.css +0 -58
package/src/flow/flowStart.test.tsx +0 -49
package/src/flow/flowStart.tsx +0 -41
package/src/flow/incode-logo.svg +0 -8
package/src/flow/index.ts +0 -7
package/src/flow/preloadFlow.test.ts +0 -421
package/src/flow/preloadFlow.ts +0 -171
package/src/flow/styles.css +0 -9
package/src/flow/unsupportedModule.css +0 -21
package/src/flow/unsupportedModule.tsx +0 -39
package/src/flow/useFlowInitialization.test.tsx +0 -292
package/src/flow/useFlowInitialization.ts +0 -128
package/src/flow/useModuleLoader.test.tsx +0 -212
package/src/flow/useModuleLoader.ts +0 -92
package/src/hooks/index.ts +0 -1
package/src/hooks/useManager.test.ts +0 -91
package/src/hooks/useManager.ts +0 -40
package/src/i18n/index.ts +0 -3
package/src/i18n/instance.ts +0 -16
package/src/i18n/setup.ts +0 -184
package/src/i18n/useTranslation.ts +0 -42
package/src/index.ts +0 -27
package/src/permissions/assets/android-dots-icon.svg +0 -7
package/src/permissions/assets/android-settings-icon.svg +0 -16
package/src/permissions/assets/android-toggle-icon.svg +0 -20
package/src/permissions/assets/bank-card-icon.svg +0 -14
package/src/permissions/assets/camera-icon.svg +0 -12
package/src/permissions/assets/camera-ios.svg +0 -53
package/src/permissions/assets/check-icon.svg +0 -8
package/src/permissions/assets/chrome-icon.svg +0 -43
package/src/permissions/assets/password-icon.svg +0 -11
package/src/permissions/assets/permissions-img.svg +0 -51
package/src/permissions/assets/safari-icon.svg +0 -37
package/src/permissions/assets/settings-icon.svg +0 -33
package/src/permissions/assets/toggle-icon.svg +0 -19
package/src/permissions/assets/warning-icon.svg +0 -6
package/src/permissions/boldWithArrow.css +0 -9
package/src/permissions/boldWithArrow.tsx +0 -41
package/src/permissions/denied.css +0 -37
package/src/permissions/denied.tsx +0 -29
package/src/permissions/deniedAndroid.tsx +0 -56
package/src/permissions/deniedDesktop.css +0 -9
package/src/permissions/deniedDesktop.tsx +0 -64
package/src/permissions/deniedIOS.tsx +0 -73
package/src/permissions/deniedInstructions.tsx +0 -19
package/src/permissions/iconWrapper.css +0 -9
package/src/permissions/iconWrapper.tsx +0 -15
package/src/permissions/learnMore.css +0 -37
package/src/permissions/learnMore.tsx +0 -85
package/src/permissions/numberedStep.css +0 -13
package/src/permissions/numberedStep.tsx +0 -14
package/src/permissions/permissions.css +0 -13
package/src/permissions/permissions.tsx +0 -68
package/src/phone/phone.tsx +0 -246
package/src/phone/phoneInput.test.tsx +0 -275
package/src/phone/phoneInput.tsx +0 -249
package/src/phone/styles.css +0 -158
package/src/selfie/cameraButton.css +0 -13
package/src/selfie/cameraButton.tsx +0 -35
package/src/selfie/capture.css +0 -57
package/src/selfie/capture.tsx +0 -232
package/src/selfie/errorModal.tsx +0 -218
package/src/selfie/errorModalContent.css +0 -33
package/src/selfie/errorModalContent.tsx +0 -44
package/src/selfie/faceOutline.css +0 -5
package/src/selfie/faceOutline.tsx +0 -22
package/src/selfie/loadingBorder.css +0 -12
package/src/selfie/loadingBorder.tsx +0 -77
package/src/selfie/manualCaptureButton.css +0 -13
package/src/selfie/manualCaptureButton.tsx +0 -35
package/src/selfie/noMoreAttemptsModal.tsx +0 -44
package/src/selfie/notification.css +0 -9
package/src/selfie/notification.tsx +0 -36
package/src/selfie/retryErrorModal.tsx +0 -56
package/src/selfie/selfie.test.tsx +0 -458
package/src/selfie/selfie.tsx +0 -83
package/src/selfie/selfieTutorial.json +0 -2626
package/src/selfie/styles.css +0 -1
package/src/selfie/tutorial.test.tsx +0 -200
package/src/selfie/tutorial.tsx +0 -43
package/src/setup.ts +0 -33
package/src/shared/baseTutorial/baseTutorial.css +0 -21
package/src/shared/baseTutorial/baseTutorial.test.tsx +0 -184
package/src/shared/baseTutorial/baseTutorial.tsx +0 -55
package/src/shared/baseTutorial/replaceBaseTutorial.test.ts +0 -267
package/src/shared/baseTutorial/replaceBaseTutorial.ts +0 -68
package/src/shared/button/button.css +0 -55
package/src/shared/button/button.test.tsx +0 -101
package/src/shared/button/button.tsx +0 -47
package/src/shared/componentRoot/incodeComponent.tsx +0 -12
package/src/shared/countries/countries.test.ts +0 -75
package/src/shared/countries/countries.ts +0 -139
package/src/shared/countries/index.ts +0 -6
package/src/shared/icons/chevronDown.tsx +0 -22
package/src/shared/icons/index.ts +0 -2
package/src/shared/icons/successIcon.css +0 -5
package/src/shared/icons/successIcon.test.tsx +0 -40
package/src/shared/icons/successIcon.tsx +0 -26
package/src/shared/loader/loadingIcon.css +0 -28
package/src/shared/loader/loadingIcon.tsx +0 -67
package/src/shared/lottie/lottie.tsx +0 -108
package/src/shared/otpInput/otpInput.css +0 -85
package/src/shared/otpInput/otpInput.test.tsx +0 -356
package/src/shared/otpInput/otpInput.tsx +0 -241
package/src/shared/page/incode-logo.svg +0 -3
package/src/shared/page/page.css +0 -47
package/src/shared/page/page.test.tsx +0 -97
package/src/shared/page/page.tsx +0 -91
package/src/shared/page/pageUiConfig.test.ts +0 -112
package/src/shared/page/pageUiConfig.ts +0 -64
package/src/shared/page/verifiedByIncode.css +0 -5
package/src/shared/page/verifiedByIncode.tsx +0 -75
package/src/shared/spacer/spacer.css +0 -149
package/src/shared/spacer/spacer.test.tsx +0 -143
package/src/shared/spacer/spacer.tsx +0 -88
package/src/shared/spinner/index.ts +0 -2
package/src/shared/spinner/spinner.css +0 -28
package/src/shared/spinner/spinner.test.tsx +0 -82
package/src/shared/spinner/spinner.tsx +0 -65
package/src/shared/title/title.css +0 -7
package/src/shared/title/title.tsx +0 -12
package/src/shared/uiConfig/uiConfig.ts +0 -36
package/src/shared/webComponent/incodeModule.ts +0 -29
package/src/shared/webComponent/registerIncodeElement.ts +0 -15
package/src/styles/__mocks__/fetchTheme.ts +0 -19
package/src/styles/applyTheme.ts +0 -37
package/src/styles/cn.test.tsx +0 -57
package/src/styles/cn.tsx +0 -21
package/src/styles/core.css +0 -12
package/src/styles/fetchTheme.test.ts +0 -390
package/src/styles/fetchTheme.ts +0 -88
package/src/styles/generatePalette.ts +0 -111
package/src/styles/reset.css +0 -65
package/src/styles/resolveCssVariableToHex.ts +0 -28
package/src/styles/tailwind.css +0 -291
package/src/styles/themeTypes.ts +0 -18
package/src/styles/tokens/colors.css +0 -190
package/src/styles/tokens/components.css +0 -174
package/src/styles/tokens/index.css +0 -4
package/src/styles/tokens/primitives.css +0 -129
package/src/styles/tokens/semantic.css +0 -51
package/src/svg.d.ts +0 -4
package/src/types/assets.d.ts +0 -1
package/src/types/custom-elements.d.ts +0 -104
package/tsconfig.json +0 -22
package/vite.config.ts +0 -260
package/vitest.config.ts +0 -40
package/vitest.setup.ts +0 -16

package/dev/headless.html DELETED Viewed

@@ -1,875 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Headless SDK Demo | Build Your Own UI</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <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">
-  <style>
-    :root {
-      --bg-dark: #0a0a0f;
-      --bg-card: #12121a;
-      --bg-elevated: #1a1a24;
-      --bg-input: #0d0d12;
-      --border: #2a2a3a;
-      --border-focus: #00ff88;
-      --text-primary: #e0e0e0;
-      --text-secondary: #888899;
-      --text-muted: #555566;
-      --accent-green: #00ff88;
-      --accent-green-dim: #00cc6a;
-      --accent-blue: #00aaff;
-      --accent-yellow: #ffcc00;
-      --accent-red: #ff4466;
-      --accent-purple: #aa66ff;
-    }
-    * {
-      box-sizing: border-box;
-    }
-    body {
-      font-family: 'Space Grotesk', system-ui, sans-serif;
-      background-color: var(--bg-dark);
-      color: var(--text-primary);
-      margin: 0;
-      padding: 0;
-      min-height: 100vh;
-      background-image:
-        radial-gradient(ellipse at top left, rgba(0, 255, 136, 0.03) 0%, transparent 50%),
-        radial-gradient(ellipse at bottom right, rgba(0, 170, 255, 0.03) 0%, transparent 50%);
-    }
-    /* Layout */
-    .layout {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      min-height: 100vh;
-      gap: 0;
-    }
-    @media (max-width: 1024px) {
-      .layout {
-        grid-template-columns: 1fr;
-      }
-    }
-    /* Left Panel - Custom UI */
-    .ui-panel {
-      padding: 2rem;
-      display: flex;
-      flex-direction: column;
-      border-right: 1px solid var(--border);
-    }
-    .ui-panel-header {
-      margin-bottom: 2rem;
-    }
-    .ui-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      background: rgba(0, 255, 136, 0.1);
-      border: 1px solid rgba(0, 255, 136, 0.3);
-      border-radius: 999px;
-      padding: 0.375rem 0.875rem;
-      font-size: 0.75rem;
-      color: var(--accent-green);
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      font-weight: 600;
-      margin-bottom: 1rem;
-    }
-    .ui-title {
-      font-size: 1.75rem;
-      font-weight: 700;
-      margin: 0 0 0.5rem 0;
-      background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-    .ui-subtitle {
-      color: var(--text-secondary);
-      font-size: 0.875rem;
-      margin: 0;
-    }
-    .ui-content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
-    /* Right Panel - SDK State */
-    .sdk-panel {
-      padding: 2rem;
-      background: var(--bg-card);
-      display: flex;
-      flex-direction: column;
-    }
-    .sdk-panel-header {
-      margin-bottom: 1.5rem;
-    }
-    .sdk-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      background: rgba(0, 170, 255, 0.1);
-      border: 1px solid rgba(0, 170, 255, 0.3);
-      border-radius: 999px;
-      padding: 0.375rem 0.875rem;
-      font-size: 0.75rem;
-      color: var(--accent-blue);
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      font-weight: 600;
-      margin-bottom: 1rem;
-    }
-    .sdk-title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      margin: 0 0 0.25rem 0;
-      color: var(--text-primary);
-    }
-    .sdk-subtitle {
-      color: var(--text-muted);
-      font-size: 0.75rem;
-      margin: 0;
-      font-family: 'JetBrains Mono', monospace;
-    }
-    /* Status indicators */
-    .status-row {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      padding: 0.75rem 1rem;
-      background: var(--bg-elevated);
-      border-radius: 8px;
-      margin-bottom: 1rem;
-    }
-    .status-dot {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      animation: pulse 2s infinite;
-    }
-    .status-dot.idle { background: var(--text-muted); animation: none; }
-    .status-dot.loading { background: var(--accent-blue); }
-    .status-dot.active { background: var(--accent-yellow); }
-    .status-dot.success { background: var(--accent-green); animation: none; }
-    .status-dot.error { background: var(--accent-red); animation: none; }
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-    .status-label {
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.875rem;
-      color: var(--text-primary);
-      flex: 1;
-    }
-    /* State viewer */
-    .state-viewer {
-      flex: 1;
-      min-height: 0;
-      background: var(--bg-input);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-    .state-viewer-header {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.75rem 1rem;
-      background: var(--bg-elevated);
-      border-bottom: 1px solid var(--border);
-    }
-    .state-viewer-header span {
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.75rem;
-      color: var(--text-muted);
-    }
-    .state-viewer-content {
-      flex: 1;
-      min-height: 0;
-      padding: 1rem;
-      overflow: auto;
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.8rem;
-      line-height: 1.6;
-    }
-    .state-viewer-content pre {
-      margin: 0;
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
-    /* Event log */
-    .event-log {
-      flex: 1;
-      min-height: 0;
-      margin-top: 1rem;
-      overflow: hidden;
-      background: var(--bg-input);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      display: flex;
-      flex-direction: column;
-    }
-    .event-log-title {
-      font-size: 0.75rem;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      padding: 0.75rem 1rem;
-      background: var(--bg-elevated);
-      border-bottom: 1px solid var(--border);
-    }
-    .event-log-content {
-      flex: 1;
-      min-height: 0;
-      overflow-y: auto;
-      padding: 0.75rem;
-    }
-    .log-entry {
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.7rem;
-      padding: 0.25rem 0;
-      border-bottom: 1px solid rgba(255,255,255,0.03);
-    }
-    .log-time { color: var(--text-muted); margin-right: 0.5rem; }
-    .log-event { color: var(--accent-green); font-weight: 600; }
-    .log-data { color: var(--text-secondary); }
-    /* Form elements */
-    .form-container {
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      padding: 2rem;
-    }
-    .form-header {
-      text-align: center;
-      margin-bottom: 2rem;
-    }
-    .form-icon {
-      font-size: 3rem;
-      margin-bottom: 1rem;
-    }
-    .form-title {
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin: 0 0 0.5rem 0;
-    }
-    .form-description {
-      color: var(--text-secondary);
-      font-size: 0.875rem;
-      margin: 0;
-    }
-    .input-group {
-      margin-bottom: 1.5rem;
-    }
-    .input-label {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      font-size: 0.875rem;
-      color: var(--text-secondary);
-    }
-    .input-field {
-      width: 100%;
-      padding: 1rem;
-      background: var(--bg-input);
-      border: 2px solid var(--border);
-      border-radius: 12px;
-      color: var(--text-primary);
-      font-size: 1.25rem;
-      font-family: 'JetBrains Mono', monospace;
-      letter-spacing: 0.05em;
-      transition: border-color 0.2s, box-shadow 0.2s;
-    }
-    .input-field:focus {
-      outline: none;
-      border-color: var(--border-focus);
-      box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.1);
-    }
-    .input-field::placeholder {
-      color: var(--text-muted);
-    }
-    .input-hint {
-      font-size: 0.75rem;
-      color: var(--text-muted);
-      margin-top: 0.5rem;
-    }
-    .input-error {
-      font-size: 0.75rem;
-      color: var(--accent-red);
-      margin-top: 0.5rem;
-    }
-    .validation-status {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.875rem;
-      margin-top: 0.75rem;
-    }
-    .validation-status.valid { color: var(--accent-green); }
-    .validation-status.invalid { color: var(--text-muted); }
-    /* Buttons */
-    .btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-      padding: 1rem 2rem;
-      border: none;
-      border-radius: 12px;
-      font-size: 1rem;
-      font-weight: 600;
-      font-family: 'Space Grotesk', system-ui, sans-serif;
-      cursor: pointer;
-      transition: all 0.2s;
-      width: 100%;
-    }
-    .btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    .btn-primary {
-      background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-dim) 100%);
-      color: var(--bg-dark);
-    }
-    .btn-primary:hover:not(:disabled) {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 20px rgba(0, 255, 136, 0.3);
-    }
-    .btn-secondary {
-      background: var(--bg-elevated);
-      color: var(--text-primary);
-      border: 1px solid var(--border);
-    }
-    .btn-secondary:hover:not(:disabled) {
-      background: var(--border);
-    }
-    .btn-ghost {
-      background: transparent;
-      color: var(--text-secondary);
-      padding: 0.5rem 1rem;
-    }
-    .btn-ghost:hover:not(:disabled) {
-      color: var(--text-primary);
-    }
-    .btn-row {
-      display: flex;
-      gap: 1rem;
-      margin-top: 1rem;
-    }
-    /* OTP input */
-    .otp-container {
-      display: flex;
-      gap: 0.75rem;
-      justify-content: center;
-      margin: 1.5rem 0;
-    }
-    .otp-input {
-      width: 56px;
-      height: 64px;
-      text-align: center;
-      font-size: 1.5rem;
-      font-weight: 700;
-      font-family: 'JetBrains Mono', monospace;
-      background: var(--bg-input);
-      border: 2px solid var(--border);
-      border-radius: 12px;
-      color: var(--text-primary);
-      transition: border-color 0.2s, box-shadow 0.2s;
-    }
-    .otp-input:focus {
-      outline: none;
-      border-color: var(--border-focus);
-      box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.1);
-    }
-    /* Timer */
-    .timer {
-      text-align: center;
-      color: var(--text-secondary);
-      font-size: 0.875rem;
-      margin: 1rem 0;
-    }
-    .timer-value {
-      font-family: 'JetBrains Mono', monospace;
-      color: var(--accent-yellow);
-    }
-    /* Success/Error states */
-    .result-container {
-      text-align: center;
-      padding: 3rem 2rem;
-    }
-    .result-icon {
-      font-size: 5rem;
-      margin-bottom: 1.5rem;
-    }
-    .result-title {
-      font-size: 1.75rem;
-      font-weight: 700;
-      margin: 0 0 0.5rem 0;
-    }
-    .result-title.success { color: var(--accent-green); }
-    .result-title.error { color: var(--accent-red); }
-    .result-description {
-      color: var(--text-secondary);
-      margin: 0 0 2rem 0;
-    }
-    /* Loading state */
-    .loading-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 3rem;
-      text-align: center;
-    }
-    .spinner {
-      width: 48px;
-      height: 48px;
-      border: 3px solid var(--border);
-      border-top-color: var(--accent-green);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-      margin-bottom: 1.5rem;
-    }
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-    .loading-text {
-      color: var(--text-secondary);
-      font-size: 0.875rem;
-    }
-    /* Idle state */
-    .idle-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 3rem;
-      text-align: center;
-    }
-    .idle-icon {
-      font-size: 4rem;
-      margin-bottom: 1.5rem;
-      filter: grayscale(1) opacity(0.5);
-    }
-    .idle-title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      margin: 0 0 0.5rem 0;
-      color: var(--text-primary);
-    }
-    .idle-description {
-      color: var(--text-muted);
-      font-size: 0.875rem;
-      margin: 0 0 2rem 0;
-      max-width: 300px;
-    }
-    /* Code comment style */
-    .code-comment {
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.7rem;
-      color: var(--text-muted);
-      margin-top: 2rem;
-      padding: 1rem;
-      background: rgba(0,0,0,0.3);
-      border-radius: 8px;
-      white-space: pre-wrap;
-    }
-    /* JSON syntax highlighting */
-    .json-key { color: var(--accent-green); }
-    .json-string { color: var(--accent-yellow); }
-    .json-number { color: var(--accent-purple); }
-    .json-boolean { color: var(--accent-blue); }
-    .json-null { color: var(--text-muted); }
-    .json-bracket { color: var(--text-secondary); }
-    /* Log types */
-    .log-init { color: var(--accent-blue); }
-    .log-action { color: var(--accent-green); }
-    .log-state { color: var(--accent-yellow); }
-    .log-flow { color: var(--accent-purple); }
-    .log-error { color: var(--accent-red); }
-    /* Welcome screen */
-    .welcome-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 2rem;
-      text-align: center;
-      min-height: 400px;
-    }
-    .welcome-icon {
-      font-size: 4rem;
-      margin-bottom: 1.5rem;
-    }
-    .welcome-title {
-      font-size: 2rem;
-      font-weight: 700;
-      margin: 0 0 0.75rem 0;
-      background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-blue) 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-    .welcome-description {
-      color: var(--text-secondary);
-      font-size: 1rem;
-      margin: 0 0 2rem 0;
-      max-width: 400px;
-    }
-    .config-input-group {
-      width: 100%;
-      max-width: 400px;
-      margin-bottom: 1.5rem;
-      text-align: left;
-    }
-    .config-label {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      font-size: 0.875rem;
-      color: var(--text-secondary);
-    }
-    .config-input {
-      width: 100%;
-      padding: 0.875rem 1rem;
-      background: var(--bg-input);
-      border: 2px solid var(--border);
-      border-radius: 8px;
-      color: var(--text-primary);
-      font-size: 0.9rem;
-      font-family: 'JetBrains Mono', monospace;
-      transition: border-color 0.2s, box-shadow 0.2s;
-    }
-    .config-input:focus {
-      outline: none;
-      border-color: var(--border-focus);
-      box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.1);
-    }
-    .config-input::placeholder {
-      color: var(--text-muted);
-    }
-    .feature-list {
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-      margin-bottom: 2rem;
-      text-align: left;
-    }
-    .feature {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      color: var(--text-secondary);
-      font-size: 0.9rem;
-    }
-    .feature-icon {
-      font-size: 1.25rem;
-    }
-    .btn-large {
-      padding: 1.25rem 3rem;
-      font-size: 1.1rem;
-    }
-    /* Flow progress */
-    .flow-progress {
-      display: flex;
-      justify-content: center;
-      gap: 0.5rem;
-      padding: 1rem;
-      margin-bottom: 1rem;
-      background: var(--bg-elevated);
-      border-radius: 12px;
-    }
-    .flow-step {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.5rem 1rem;
-      border-radius: 8px;
-      font-size: 0.75rem;
-      color: var(--text-muted);
-      transition: all 0.2s;
-    }
-    .flow-step.active {
-      background: rgba(0, 255, 136, 0.1);
-      color: var(--accent-green);
-    }
-    .flow-step.done {
-      color: var(--text-secondary);
-    }
-    .flow-step.done .step-number {
-      background: var(--accent-green);
-      color: var(--bg-dark);
-    }
-    .step-number {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      background: var(--border);
-      font-size: 0.7rem;
-      font-weight: 700;
-    }
-    .flow-step.active .step-number {
-      background: var(--accent-green);
-      color: var(--bg-dark);
-    }
-    .step-name {
-      font-weight: 500;
-    }
-    /* Selfie capture */
-    .capture-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 1rem;
-    }
-    .camera-wrapper {
-      position: relative;
-      width: 100%;
-      max-width: 320px;
-      aspect-ratio: 3/4;
-      border-radius: 16px;
-      overflow: hidden;
-      background: var(--bg-input);
-    }
-    .camera-feed {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      transform: scaleX(-1);
-    }
-    .face-guide {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      pointer-events: none;
-    }
-    .face-oval {
-      width: 70%;
-      height: 70%;
-    }
-    .capture-status {
-      position: absolute;
-      bottom: 1rem;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      background: rgba(0, 0, 0, 0.7);
-      backdrop-filter: blur(8px);
-      padding: 0.5rem 1rem;
-      border-radius: 999px;
-      font-size: 0.875rem;
-    }
-    .capture-status.success {
-      background: rgba(0, 255, 136, 0.2);
-      color: var(--accent-green);
-    }
-    .capture-btn {
-      margin-top: 1rem;
-    }
-    .upload-status {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      color: var(--text-secondary);
-      font-size: 0.875rem;
-    }
-    /* Tips list */
-    .tips-list {
-      list-style: none;
-      padding: 0;
-      margin: 0 0 2rem 0;
-      text-align: left;
-    }
-    .tips-list li {
-      padding: 0.5rem 0;
-      color: var(--text-secondary);
-      font-size: 0.9rem;
-    }
-    /* Finish data */
-    .finish-data {
-      background: var(--bg-input);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 1rem;
-      margin: 1.5rem 0;
-      max-width: 400px;
-      text-align: left;
-    }
-    .finish-data pre {
-      margin: 0;
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.8rem;
-      color: var(--accent-green);
-      white-space: pre-wrap;
-    }
-    /* Small spinner */
-    .spinner-small {
-      width: 16px;
-      height: 16px;
-      border: 2px solid var(--border);
-      border-top-color: var(--accent-green);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-      display: inline-block;
-    }
-    /* Upload error */
-    .upload-error {
-      margin-top: 1.5rem;
-      padding: 1.5rem;
-      background: rgba(255, 68, 102, 0.1);
-      border: 1px solid rgba(255, 68, 102, 0.3);
-      border-radius: 12px;
-      text-align: center;
-    }
-    .upload-error .error-icon {
-      font-size: 2rem;
-      margin-bottom: 0.5rem;
-    }
-    .upload-error .error-message {
-      color: var(--accent-red);
-      font-size: 0.9rem;
-      margin: 0 0 0.5rem 0;
-    }
-    .upload-error .attempts-remaining {
-      color: var(--text-secondary);
-      font-size: 0.8rem;
-      margin: 0 0 1rem 0;
-    }
-    .upload-error .no-attempts {
-      color: var(--accent-red);
-      font-size: 0.8rem;
-      font-weight: 600;
-      margin: 0;
-    }
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="./main-headless.tsx"></script>
-</body>
-</html>