@incodetech/web 2.0.0-alpha.1

package/dev/main-orchestrated-flow.tsx

@@ -0,0 +1,1158 @@
+import type { WasmConfig } from '@incodetech/core';
+import {
+  createSession,
+  initializeWasmUtil,
+  setWasmConfig,
+  warmupWasm,
+} from '@incodetech/core';
+import { emailMachine } from '@incodetech/core/email';
+import type { FlowModuleConfig } from '@incodetech/core/flow';
+import {
+  createOrchestratedFlowManager,
+  getRequiredWasmPipelines,
+  type OrchestratedFlowReadyState,
+} from '@incodetech/core/flow';
+import { phoneMachine } from '@incodetech/core/phone';
+import { selfieMachine } from '@incodetech/core/selfie';
+import { render } from 'preact';
+import type { ComponentType, FC } from 'preact/compat';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useManager } from '../src/hooks';
+import '../src/styles/tokens/index.css';
+import '../src/styles/reset.css';
+import '../src/phone/styles.css';
+import '../src/selfie/styles.css';
+import '../src/email/styles.css';
+import '../src/shared/loader/loadingIcon.css';
+import '../src/shared/spinner/spinner.css';
+import '../src/shared/spacer/spacer.css';
+import '../src/shared/title/title.css';
+
+/**
+ * SDK's reusable Spinner component - LoadingIcon + optional text
+ *
+ * Can be styled via CSS variables (see orchestrated-flow.html):
+ *   --spinner-surface-primary, --spinner-surface-secondary
+ *   --spinner-text-title, --spinner-text-subtitle
+ *   --spinner-surface-overlay, --spinner-surface-overlay-opacity
+ */
+import { Spinner } from '../src/shared/spinner';
+
+// Lazy-load UI modules for code splitting
+const LAZY_UI_MODULES = {
+  PHONE: () => import('../src/phone/phone').then((m) => m.Phone),
+  EMAIL: () => import('../src/email/email').then((m) => m.Email),
+  SELFIE: () => import('../src/selfie/selfie').then((m) => m.Selfie),
+};
+
+import tiktokLogo from './tiktok-logo.svg';
+
+// ============================================================================
+// CUSTOM BRAND THEME - Override SDK tokens for your brand colors
+// ============================================================================
+const CustomBrandTheme: FC = () => (
+  <style>
+    {`
+      .IncodeTikTokTheme {
+        --tiktok-logo-height: 24px;
+
+        --surface-neutral-0: #000000;
+        --surface-neutral-50: #0b0b0f;
+        --surface-neutral-100: #14141a;
+        --text-body-primary: #ffffff;
+        --text-body-secondary: rgba(255, 255, 255, 0.72);
+        --text-body-tertiary: rgba(255, 255, 255, 0.45);
+
+        --text-link-default: #25f4ee;
+        --text-accent-brand-static: #25f4ee;
+
+        --button-primary-surface-default: #fe2c55;
+        --button-primary-surface-hover: #e7244a;
+        --button-primary-surface-pressed: #c61c3f;
+        --button-primary-text-default: #ffffff;
+        --button-primary-border-default: #fe2c55;
+        --button-primary-border-hover: #e7244a;
+        --button-primary-border-pressed: #c61c3f;
+
+        --button-secondary-surface-default: rgba(255, 255, 255, 0.04);
+        --button-secondary-surface-hover: rgba(255, 255, 255, 0.08);
+        --button-secondary-text-default: #25f4ee;
+        --button-secondary-border-default: rgba(37, 244, 238, 0.55);
+        --button-secondary-border-hover: rgba(37, 244, 238, 0.8);
+      }
+
+      .IncodeTikTokTheme .IncodePageHeader {
+        background: linear-gradient(135deg, #0b0b0f 0%, #000000 100%);
+      }
+
+      .IncodeTikTokTheme .IncodePageHeader .IncodePageLogo {
+        filter: brightness(0) invert(1);
+        height: var(--tiktok-logo-height);
+        width: auto;
+      }
+
+      .IncodeTikTokTheme .IncodeButton:hover {
+        box-shadow: 0 4px 14px rgba(254, 44, 85, 0.25);
+      }
+    `}
+  </style>
+);
+
+import { setup } from '../src/setup';
+import { getConfigIdFromUrl } from './getToken';
+
+// Configuration
+const API_URL = 'https://user-service-k8s.stage.incodetest.com/0';
+const API_KEY = '5fbc0ab5a652b7808fbec42fffd8b4c9ec248413';
+
+const WASM_CONFIG: WasmConfig = {
+  wasmPath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.wasm',
+  wasmSimdPath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLibSimd.wasm',
+  glueCodePath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.js',
+  modelsBasePath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/models',
+  // pipelines will be determined by flow analysis
+};
+
+// ============================================================================
+// CUSTOM COMPONENTS - These demonstrate full UI customization
+// ============================================================================
+
+/**
+ * Custom animated loader with pulse effect
+ */
+const CustomLoader: FC<{ message?: string }> = ({ message = 'Loading...' }) => (
+  <div
+    style={{
+      minHeight: '100vh',
+      background:
+        'linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #2563eb 100%)',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '2rem',
+    }}
+  >
+    {/* Animated rings - Blue & Gold */}
+    <div style={{ position: 'relative', width: '120px', height: '120px' }}>
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          border: '3px solid transparent',
+          borderTopColor: '#3b82f6',
+          borderRadius: '50%',
+          animation: 'spin 1s linear infinite',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          inset: '10px',
+          border: '3px solid transparent',
+          borderTopColor: '#f59e0b',
+          borderRadius: '50%',
+          animation: 'spin 1.5s linear infinite reverse',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          inset: '20px',
+          border: '3px solid transparent',
+          borderTopColor: '#60a5fa',
+          borderRadius: '50%',
+          animation: 'spin 2s linear infinite',
+        }}
+      />
+      {/* Center dot - Gold */}
+      <div
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: '16px',
+          height: '16px',
+          background: '#f59e0b',
+          borderRadius: '50%',
+          animation: 'pulse 1s ease-in-out infinite',
+        }}
+      />
+    </div>
+
+    {/* Message */}
+    <div style={{ textAlign: 'center' }}>
+      <p
+        style={{
+          color: '#fff',
+          fontSize: '1.25rem',
+          fontWeight: 500,
+          marginBottom: '0.5rem',
+        }}
+      >
+        {message}
+      </p>
+      <p style={{ color: '#94a3b8', fontSize: '0.875rem' }}>
+        Custom loader • Your brand, your style
+      </p>
+    </div>
+
+    {/* CSS Animations */}
+    <style>
+      {`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+        @keyframes pulse {
+          0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+          50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
+        }
+      `}
+    </style>
+  </div>
+);
+
+/**
+ * Custom landing page with gradient design
+ */
+const CustomLandingPage: FC<{
+  onStart: () => void;
+}> = ({ onStart }) => (
+  <div
+    style={{
+      minHeight: '100vh',
+      background: 'linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%)',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '2rem',
+      position: 'relative',
+      overflow: 'hidden',
+    }}
+  >
+    {/* Background decoration */}
+    <div
+      style={{
+        position: 'absolute',
+        top: '-50%',
+        right: '-20%',
+        width: '600px',
+        height: '600px',
+        background: 'rgba(255,255,255,0.1)',
+        borderRadius: '50%',
+        filter: 'blur(60px)',
+      }}
+    />
+    <div
+      style={{
+        position: 'absolute',
+        bottom: '-30%',
+        left: '-10%',
+        width: '400px',
+        height: '400px',
+        background: 'rgba(255,255,255,0.08)',
+        borderRadius: '50%',
+        filter: 'blur(40px)',
+      }}
+    />
+
+    {/* Content */}
+    <div
+      style={{
+        position: 'relative',
+        zIndex: 1,
+        textAlign: 'center',
+        maxWidth: '500px',
+      }}
+    >
+      {/* Badge */}
+      <div
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          background: 'rgba(255,255,255,0.2)',
+          backdropFilter: 'blur(10px)',
+          borderRadius: '9999px',
+          padding: '0.5rem 1rem',
+          marginBottom: '2rem',
+        }}
+      >
+        <span style={{ fontSize: '0.875rem' }}>🎨</span>
+        <span
+          style={{
+            color: '#fff',
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.1em',
+          }}
+        >
+          Custom Landing Page
+        </span>
+      </div>
+
+      {/* Title */}
+      <h1
+        style={{
+          color: '#fff',
+          fontSize: '2.5rem',
+          fontWeight: 700,
+          marginBottom: '1rem',
+          lineHeight: 1.2,
+        }}
+      >
+        Welcome to Your
+        <br />
+        <span style={{ color: '#ffd700' }}>Branded Experience</span>
+      </h1>
+
+      {/* Subtitle */}
+      <p
+        style={{
+          color: 'rgba(255,255,255,0.85)',
+          fontSize: '1.1rem',
+          lineHeight: 1.6,
+          marginBottom: '1rem',
+        }}
+      >
+        This is a fully customized start screen. With the orchestrated flow
+        pattern, you control every pixel of the user experience.
+      </p>
+
+      {/* Feature badges */}
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          gap: '0.5rem',
+          marginBottom: '2rem',
+        }}
+      >
+        {[
+          '🎨 Custom Colors',
+          '✨ Custom Loader',
+          '📝 Custom Screens',
+          '🎯 Brand Fonts',
+        ].map((feature) => (
+          <span
+            key={feature}
+            style={{
+              background: 'rgba(255,255,255,0.1)',
+              borderRadius: '9999px',
+              padding: '0.375rem 0.75rem',
+              fontSize: '0.75rem',
+              color: 'rgba(255,255,255,0.9)',
+            }}
+          >
+            {feature}
+          </span>
+        ))}
+      </div>
+
+      {/* Modules available */}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          gap: '0.75rem',
+          marginBottom: '2.5rem',
+          flexWrap: 'wrap',
+        }}
+      >
+        {['📸 Selfie', '📱 Phone', '✉️ Email'].map((module) => (
+          <div
+            key={module}
+            style={{
+              background: 'rgba(255,255,255,0.15)',
+              borderRadius: '8px',
+              padding: '0.5rem 1rem',
+            }}
+          >
+            <span style={{ color: '#fff', fontSize: '0.875rem' }}>
+              {module}
+            </span>
+          </div>
+        ))}
+      </div>
+      <p
+        style={{
+          color: 'rgba(255,255,255,0.6)',
+          fontSize: '0.75rem',
+          marginBottom: '1.5rem',
+        }}
+      >
+        Step order determined by your flow configuration
+      </p>
+
+      {/* CTA Button - Golden yellow */}
+      <button
+        type="button"
+        onClick={onStart}
+        style={{
+          background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
+          color: '#1e3a5f',
+          border: 'none',
+          borderRadius: '12px',
+          padding: '1rem 3rem',
+          fontSize: '1.1rem',
+          fontWeight: 700,
+          cursor: 'pointer',
+          boxShadow: '0 10px 30px rgba(245, 158, 11, 0.4)',
+          transition: 'transform 0.2s, box-shadow 0.2s',
+        }}
+      >
+        Begin Verification →
+      </button>
+
+      {/* Footer */}
+      <p
+        style={{
+          color: 'rgba(255,255,255,0.5)',
+          fontSize: '0.75rem',
+          marginTop: '3rem',
+        }}
+      >
+        Powered by Incode SDK • Orchestrated Flow Pattern
+      </p>
+    </div>
+  </div>
+);
+
+/**
+ * Custom error screen
+ */
+const CustomErrorScreen: FC<{
+  error: string;
+  onRetry: () => void;
+}> = ({ error, onRetry }) => (
+  <div
+    style={{
+      minHeight: '100vh',
+      background: 'linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%)',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '2rem',
+    }}
+  >
+    {/* Error icon */}
+    <div
+      style={{
+        width: '80px',
+        height: '80px',
+        borderRadius: '50%',
+        background: 'rgba(255, 91, 91, 0.1)',
+        border: '2px solid rgba(255, 91, 91, 0.3)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: '1.5rem',
+      }}
+    >
+      <span style={{ fontSize: '2rem' }}>⚠️</span>
+    </div>
+
+    <h2 style={{ color: '#fff', fontSize: '1.5rem', marginBottom: '0.5rem' }}>
+      Something went wrong
+    </h2>
+
+    <p
+      style={{
+        color: '#ff6b6b',
+        fontSize: '0.875rem',
+        marginBottom: '2rem',
+        maxWidth: '400px',
+        textAlign: 'center',
+      }}
+    >
+      {error}
+    </p>
+
+    <button
+      type="button"
+      onClick={onRetry}
+      style={{
+        background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
+        color: '#1e3a5f',
+        border: 'none',
+        borderRadius: '8px',
+        padding: '0.75rem 2rem',
+        fontSize: '1rem',
+        fontWeight: 600,
+        cursor: 'pointer',
+      }}
+    >
+      Try Again
+    </button>
+
+    <p style={{ color: '#64748b', fontSize: '0.75rem', marginTop: '2rem' }}>
+      Custom error screen • Full control over error states
+    </p>
+  </div>
+);
+
+/**
+ * Custom completion screen with JSON viewer
+ */
+const CustomCompletionScreen: FC<{
+  finishStatus: {
+    redirectionUrl?: string;
+    action?: string;
+    scoreStatus?: string;
+  } | null;
+  onReset: () => void;
+}> = ({ finishStatus, onReset }) => {
+  const finishData = {
+    status: 'completed',
+    timestamp: new Date().toISOString(),
+    result: {
+      redirectionUrl: finishStatus?.redirectionUrl ?? null,
+      action: finishStatus?.action ?? null,
+      scoreStatus: finishStatus?.scoreStatus ?? null,
+    },
+  };
+
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        background: 'linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%)',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '2rem',
+        fontFamily:
+          '"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace',
+      }}
+    >
+      {/* Success badge */}
+      <div
+        style={{
+          background: 'rgba(16, 185, 129, 0.1)',
+          border: '1px solid rgba(16, 185, 129, 0.3)',
+          borderRadius: '9999px',
+          padding: '0.5rem 1rem',
+          marginBottom: '1.5rem',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+        }}
+      >
+        <span style={{ color: '#10b981', fontSize: '1.25rem' }}>✓</span>
+        <span
+          style={{
+            color: '#10b981',
+            fontSize: '0.875rem',
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+          }}
+        >
+          Flow Completed
+        </span>
+      </div>
+
+      {/* Title */}
+      <h1
+        style={{
+          color: '#fff',
+          fontSize: '1.5rem',
+          fontWeight: 600,
+          marginBottom: '0.5rem',
+          fontFamily: 'system-ui, sans-serif',
+        }}
+      >
+        Orchestrated Flow Result
+      </h1>
+      <p
+        style={{
+          color: '#6b7280',
+          fontSize: '0.875rem',
+          marginBottom: '2rem',
+        }}
+      >
+        Custom completion screen • Your UI, your data
+      </p>
+
+      {/* JSON Viewer */}
+      <div
+        style={{
+          background: '#0d1117',
+          border: '1px solid #30363d',
+          borderRadius: '12px',
+          width: '100%',
+          maxWidth: '500px',
+          overflow: 'hidden',
+          boxShadow: '0 4px 24px rgba(0, 0, 0, 0.4)',
+        }}
+      >
+        {/* Header bar */}
+        <div
+          style={{
+            background: '#161b22',
+            padding: '0.75rem 1rem',
+            borderBottom: '1px solid #30363d',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}
+        >
+          <div style={{ display: 'flex', gap: '6px' }}>
+            <span
+              style={{
+                width: '12px',
+                height: '12px',
+                borderRadius: '50%',
+                background: '#ff5f56',
+              }}
+            />
+            <span
+              style={{
+                width: '12px',
+                height: '12px',
+                borderRadius: '50%',
+                background: '#ffbd2e',
+              }}
+            />
+            <span
+              style={{
+                width: '12px',
+                height: '12px',
+                borderRadius: '50%',
+                background: '#27ca40',
+              }}
+            />
+          </div>
+          <span
+            style={{
+              color: '#8b949e',
+              fontSize: '0.75rem',
+              marginLeft: 'auto',
+            }}
+          >
+            response.json
+          </span>
+        </div>
+
+        {/* JSON content */}
+        <pre
+          style={{
+            margin: 0,
+            padding: '1.25rem',
+            color: '#e6edf3',
+            fontSize: '0.8rem',
+            lineHeight: 1.6,
+            overflow: 'auto',
+          }}
+        >
+          <code>
+            <span style={{ color: '#8b949e' }}>{'{\n'}</span>
+            <span style={{ color: '#7ee787' }}> "status"</span>
+            <span style={{ color: '#8b949e' }}>: </span>
+            <span style={{ color: '#a5d6ff' }}>"{finishData.status}"</span>
+            <span style={{ color: '#8b949e' }}>,{'\n'}</span>
+            <span style={{ color: '#7ee787' }}> "timestamp"</span>
+            <span style={{ color: '#8b949e' }}>: </span>
+            <span style={{ color: '#a5d6ff' }}>"{finishData.timestamp}"</span>
+            <span style={{ color: '#8b949e' }}>,{'\n'}</span>
+            <span style={{ color: '#7ee787' }}> "result"</span>
+            <span style={{ color: '#8b949e' }}>: {'{\n'}</span>
+            <span style={{ color: '#7ee787' }}> "redirectionUrl"</span>
+            <span style={{ color: '#8b949e' }}>: </span>
+            <span style={{ color: '#a5d6ff' }}>
+              {finishData.result.redirectionUrl
+                ? `"${finishData.result.redirectionUrl}"`
+                : 'null'}
+            </span>
+            <span style={{ color: '#8b949e' }}>,{'\n'}</span>
+            <span style={{ color: '#7ee787' }}> "action"</span>
+            <span style={{ color: '#8b949e' }}>: </span>
+            <span
+              style={{
+                color:
+                  finishData.result.action === 'approved'
+                    ? '#7ee787'
+                    : finishData.result.action === 'rejected'
+                      ? '#ff7b72'
+                      : '#a5d6ff',
+              }}
+            >
+              {finishData.result.action
+                ? `"${finishData.result.action}"`
+                : 'null'}
+            </span>
+            <span style={{ color: '#8b949e' }}>,{'\n'}</span>
+            <span style={{ color: '#7ee787' }}> "scoreStatus"</span>
+            <span style={{ color: '#8b949e' }}>: </span>
+            <span
+              style={{
+                color:
+                  finishData.result.scoreStatus === 'OK'
+                    ? '#7ee787'
+                    : finishData.result.scoreStatus === 'FAIL'
+                      ? '#ff7b72'
+                      : '#ffa657',
+              }}
+            >
+              {finishData.result.scoreStatus
+                ? `"${finishData.result.scoreStatus}"`
+                : 'null'}
+            </span>
+            <span style={{ color: '#8b949e' }}>{'\n  }\n}'}</span>
+          </code>
+        </pre>
+      </div>
+
+      {/* Actions */}
+      <div style={{ display: 'flex', gap: '1rem', marginTop: '2rem' }}>
+        <button
+          type="button"
+          onClick={onReset}
+          style={{
+            background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
+            color: '#1e3a5f',
+            border: 'none',
+            borderRadius: '8px',
+            padding: '0.75rem 1.5rem',
+            fontSize: '0.875rem',
+            fontWeight: 600,
+            cursor: 'pointer',
+          }}
+        >
+          Start Over
+        </button>
+        {finishData.result.redirectionUrl && (
+          <button
+            type="button"
+            onClick={() => {
+              const url = finishData.result.redirectionUrl;
+              if (url) {
+                window.location.assign(url);
+              }
+            }}
+            style={{
+              background: 'transparent',
+              color: '#60a5fa',
+              border: '1px solid #30363d',
+              borderRadius: '8px',
+              padding: '0.75rem 1.5rem',
+              fontSize: '0.875rem',
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}
+          >
+            Go to Redirect URL →
+          </button>
+        )}
+      </div>
+
+      <p style={{ color: '#484f58', fontSize: '0.75rem', marginTop: '3rem' }}>
+        Custom completion screen • Orchestrated Flow Pattern
+      </p>
+    </div>
+  );
+};
+
+// ============================================================================
+// MAIN APP
+// ============================================================================
+
+const App: FC = () => {
+  const [isInitializing, setIsInitializing] = useState(true);
+  const [initError, setInitError] = useState<string | null>(null);
+  const [hasStarted, setHasStarted] = useState(false);
+  const [loadedComponent, setLoadedComponent] = useState<ComponentType<{
+    config: FlowModuleConfig[keyof FlowModuleConfig];
+    onFinish: () => void;
+    onError: (error: string | undefined) => void;
+  }> | null>(null);
+  const [loadingModule, setLoadingModule] = useState<string | null>(null);
+  const [moduleError, setModuleError] = useState<string | null>(null);
+  const prefetchedModulesRef = useRef<Set<string>>(new Set());
+
+  const [state, flowManager] = useManager(
+    () =>
+      createOrchestratedFlowManager({
+        modules: {
+          SELFIE: selfieMachine,
+          PHONE: phoneMachine,
+          EMAIL: emailMachine,
+        },
+      }),
+    { autoLoad: false },
+  );
+
+  // Initialize SDK and create session
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const configurationId = getConfigIdFromUrl();
+
+        // Setup SDK without token first (no WASM - will warmup conditionally)
+        await setup({
+          apiURL: API_URL,
+          token: '',
+          i18n: { lang: 'en' },
+          uiConfig: {
+            logoSrc: tiktokLogo,
+            logoHeight: '24px',
+          },
+        });
+
+        // Create session
+        const session = await createSession(API_KEY, {
+          configurationId,
+          language: 'en-US',
+        });
+
+        // Re-setup with the session token (no WASM - will warmup conditionally)
+        await setup({
+          apiURL: API_URL,
+          token: session.token,
+          i18n: { lang: 'en' },
+          uiConfig: {
+            logoSrc: tiktokLogo,
+            logoHeight: '24px',
+          },
+        });
+
+        setIsInitializing(false);
+      } catch (error) {
+        console.error('Initialization error:', error);
+        setInitError(
+          error instanceof Error ? error.message : 'Failed to initialize',
+        );
+        setIsInitializing(false);
+      }
+    };
+    init();
+  }, []);
+
+  // Handle starting the flow
+  const handleStart = () => {
+    setHasStarted(true);
+    flowManager.load();
+  };
+
+  // Conditional WASM warmup based on flow modules
+  useEffect(() => {
+    if (state.status === 'ready' && WASM_CONFIG) {
+      const readyState = state as OrchestratedFlowReadyState;
+      const requiredPipelines = getRequiredWasmPipelines(readyState.flow);
+      if (requiredPipelines.length > 0) {
+        const warmupConfig = {
+          ...WASM_CONFIG,
+          pipelines: requiredPipelines,
+        };
+        setWasmConfig(warmupConfig);
+        void (async () => {
+          try {
+            await warmupWasm(warmupConfig);
+            await initializeWasmUtil(warmupConfig);
+          } catch (error) {
+            console.error('WASM warmup failed:', error);
+          }
+        })();
+      }
+    }
+  }, [state.status, state]);
+
+  // Prefetch next module while user interacts with current module
+  useEffect(() => {
+    if (state.status === 'ready') {
+      const readyState = state;
+      if (readyState.currentStepIndex < readyState.steps.length - 1) {
+        const nextStep = readyState.steps[readyState.currentStepIndex + 1];
+        if (nextStep && !prefetchedModulesRef.current.has(nextStep)) {
+          prefetchedModulesRef.current.add(nextStep);
+          const loader =
+            LAZY_UI_MODULES[nextStep as keyof typeof LAZY_UI_MODULES];
+          if (loader) {
+            loader().catch(() => {
+              prefetchedModulesRef.current.delete(nextStep);
+            });
+          }
+        }
+      }
+    }
+  }, [state]);
+
+  // Load current module component
+  useEffect(() => {
+    if (state.status === 'ready') {
+      const readyState = state;
+      const moduleKey = readyState.currentStep;
+      if (!moduleKey) {
+        setLoadedComponent(null);
+        setLoadingModule(null);
+        setModuleError(null);
+        return;
+      }
+      const loader = LAZY_UI_MODULES[moduleKey as keyof typeof LAZY_UI_MODULES];
+
+      if (!loader) {
+        setModuleError(`Unsupported module: ${moduleKey}`);
+        setLoadingModule(null);
+        setLoadedComponent(null);
+        return;
+      }
+
+      setLoadingModule(moduleKey);
+      setModuleError(null);
+      setLoadedComponent(null);
+
+      let cancelled = false;
+
+      loader()
+        .then((Component) => {
+          if (!cancelled) {
+            setLoadedComponent(() => Component);
+            setLoadingModule(null);
+          }
+        })
+        .catch((error) => {
+          if (!cancelled) {
+            const errorMessage =
+              error instanceof Error ? error.message : 'Failed to load module';
+            setModuleError(errorMessage);
+            setLoadingModule(null);
+            console.error(`Failed to load ${moduleKey}:`, errorMessage);
+          }
+        });
+
+      return () => {
+        cancelled = true;
+      };
+    } else {
+      setLoadedComponent(null);
+      setLoadingModule(null);
+      setModuleError(null);
+    }
+  }, [state]);
+
+  // ============================================================================
+  // RENDER STATES
+  // ============================================================================
+
+  // 1. Custom Loader while initializing
+  if (isInitializing) {
+    return <CustomLoader message="Preparing your experience..." />;
+  }
+
+  // 2. Custom Error Screen
+  if (initError) {
+    return (
+      <CustomErrorScreen
+        error={initError}
+        onRetry={() => window.location.reload()}
+      />
+    );
+  }
+
+  // 3. Custom Landing Page (before user clicks start)
+  if (!hasStarted) {
+    return <CustomLandingPage onStart={handleStart} />;
+  }
+
+  // 4. Loading flow configuration
+  if (state.status === 'loading') {
+    return <CustomLoader message="Loading verification steps..." />;
+  }
+
+  // 5. Flow error
+  if (state.status === 'error') {
+    return (
+      <CustomErrorScreen
+        error={state.error ?? 'An unknown error occurred'}
+        onRetry={() => flowManager.reset()}
+      />
+    );
+  }
+
+  // 6. Flow completed - Custom completion screen
+  if (state.status === 'finished') {
+    return (
+      <CustomCompletionScreen
+        finishStatus={state.finishStatus}
+        onReset={() => {
+          setHasStarted(false);
+          flowManager.reset();
+        }}
+      />
+    );
+  }
+
+  // 7. Ready - Render modules
+  if (state.status === 'ready') {
+    const { currentStep, config, moduleState } = state;
+
+    if (!currentStep) {
+      return <CustomLoader message="Preparing next step..." />;
+    }
+
+    // Show loading state while module is being loaded
+    // This demonstrates using the SDK's reusable Spinner component
+    // with CSS variable overrides (see orchestrated-flow.html for the CSS)
+    if (loadingModule || !loadedComponent) {
+      return (
+        <div class="IncodeComponent">
+          <Spinner title="Loading..." size="large" fullScreen />
+        </div>
+      );
+    }
+
+    // Show error state if module failed to load
+    if (moduleError) {
+      return (
+        <CustomErrorScreen
+          error={`Failed to load ${currentStep} module: ${moduleError}`}
+          onRetry={() => {
+            setModuleError(null);
+            setLoadingModule(currentStep);
+            const loader =
+              LAZY_UI_MODULES[currentStep as keyof typeof LAZY_UI_MODULES];
+            if (loader) {
+              loader()
+                .then((Component) => {
+                  setLoadedComponent(() => Component);
+                  setLoadingModule(null);
+                })
+                .catch((error) => {
+                  setModuleError(
+                    error instanceof Error
+                      ? error.message
+                      : 'Failed to load module',
+                  );
+                  setLoadingModule(null);
+                });
+            }
+          }}
+        />
+      );
+    }
+
+    // Render the appropriate module based on current step
+    // Note: CustomBrandTheme overrides SDK colors for your brand
+    const Component = loadedComponent;
+
+    if (currentStep === 'SELFIE') {
+      const selfieConfig = config as FlowModuleConfig['SELFIE'];
+      return (
+        <div class="IncodeComponent IncodeTikTokTheme">
+          <CustomBrandTheme />
+          <Component
+            key="selfie"
+            config={selfieConfig}
+            onFinish={() => flowManager.completeModule()}
+            onError={(error: string | undefined) => {
+              console.error('Selfie error:', error);
+            }}
+          />
+        </div>
+      );
+    }
+
+    if (currentStep === 'PHONE') {
+      const phoneConfig = config as FlowModuleConfig['PHONE'];
+      return (
+        <div class="IncodeComponent IncodeTikTokTheme">
+          <CustomBrandTheme />
+          <Component
+            key="phone"
+            config={phoneConfig}
+            onFinish={() => flowManager.completeModule()}
+            onError={(error: string | undefined) => {
+              console.error('Phone error:', error);
+              alert(`Phone error: ${error ?? 'Unknown error'}`);
+            }}
+          />
+        </div>
+      );
+    }
+
+    if (currentStep === 'EMAIL') {
+      const flowEmailConfig = config as FlowModuleConfig['EMAIL'];
+      const emailConfig = {
+        ...flowEmailConfig,
+        prefill: flowEmailConfig.prefill ?? false,
+      };
+      return (
+        <div class="IncodeComponent IncodeTikTokTheme">
+          <CustomBrandTheme />
+          <Component
+            key="email"
+            config={emailConfig}
+            onFinish={() => flowManager.completeModule()}
+            onError={(error: string | undefined) => {
+              console.error('Email error:', error);
+              alert(`Email error: ${error ?? 'Unknown error'}`);
+            }}
+          />
+        </div>
+      );
+    }
+
+    // Unsupported module - show debug info
+    return (
+      <div
+        style={{
+          minHeight: '100vh',
+          background: '#1a1a2e',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '2rem',
+        }}
+      >
+        <h2 style={{ color: '#ffa500', marginBottom: '1rem' }}>
+          Unsupported Module: {currentStep}
+        </h2>
+        <pre
+          style={{
+            background: '#0d1117',
+            padding: '1rem',
+            borderRadius: '8px',
+            color: '#e6edf3',
+            maxWidth: '500px',
+            overflow: 'auto',
+          }}
+        >
+          {JSON.stringify(moduleState, null, 2)}
+        </pre>
+        <button
+          type="button"
+          onClick={() => flowManager.completeModule()}
+          style={{
+            marginTop: '1rem',
+            background: '#ffa500',
+            color: '#000',
+            border: 'none',
+            borderRadius: '8px',
+            padding: '0.75rem 1.5rem',
+            cursor: 'pointer',
+          }}
+        >
+          Skip Module
+        </button>
+      </div>
+    );
+  }
+
+  return <CustomLoader message="Initializing..." />;
+};
+
+const root = document.getElementById('root');
+if (root) {
+  render(<App />, root);
+}