central-auth-js-sdk 1.0.10

package/theme.js

@@ -0,0 +1,277 @@
+/**
+ * Central Auth SDK — Theme Engine
+ *
+ * Applies optional custom theme to the SDK container via CSS custom properties.
+ * All theme properties are optional — the SDK's built-in warm theme applies
+ * for anything the host app doesn't override.
+ *
+ * @module theme
+ */
+
+// ---------------------------------------------------------------------------
+// Color utilities
+// ---------------------------------------------------------------------------
+
+function hexToRgb(hex) {
+  hex = hex.replace('#', '');
+  if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  const n = parseInt(hex, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function rgbToHex(r, g, b) {
+  return '#' + [r, g, b]
+    .map(v => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0'))
+    .join('');
+}
+
+function relativeLuminance(hex) {
+  const [r, g, b] = hexToRgb(hex).map(v => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function isDark(hex) {
+  return relativeLuminance(hex) < 0.35;
+}
+
+function lighten(hex, amount) {
+  const [r, g, b] = hexToRgb(hex);
+  return rgbToHex(
+    r + (255 - r) * amount,
+    g + (255 - g) * amount,
+    b + (255 - b) * amount,
+  );
+}
+
+function darken(hex, amount) {
+  const [r, g, b] = hexToRgb(hex);
+  return rgbToHex(r * (1 - amount), g * (1 - amount), b * (1 - amount));
+}
+
+function withAlpha(hex, alpha) {
+  const [r, g, b] = hexToRgb(hex);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+function contrastRatio(hex1, hex2) {
+  const l1 = relativeLuminance(hex1);
+  const l2 = relativeLuminance(hex2);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+// ---------------------------------------------------------------------------
+// Theme application
+// ---------------------------------------------------------------------------
+
+/**
+ * Apply a theme to the SDK layout root element.
+ *
+ * @param {HTMLElement} layoutRoot - The `.wf-layout` element created by createLayout
+ * @param {Object}  theme
+ * @param {string}  [theme.primaryColor]     - Primary brand color (hex). Buttons, links, active states.
+ * @param {string}  [theme.secondaryColor]   - Secondary accent color (hex). Reserved for future use.
+ * @param {string}  [theme.backgroundColor]  - Page / layout background color (hex).
+ * @param {string}  [theme.backgroundImage]  - URL for a full-bleed background image.
+ * @param {string}  [theme.cardColor]        - Card panel background color (hex).
+ * @param {string}  [theme.textColor]        - Primary text color (hex).
+ * @param {string}  [theme.fontFamily]       - CSS font-family string.
+ * @param {'light'|'dark'|'auto'} [theme.mode] - Color mode. 'auto' (default) detects from backgroundColor.
+ * @returns {Function} cleanup — call to remove all applied theme styles
+ */
+export function applyTheme(layoutRoot, theme) {
+  if (!theme || typeof theme !== 'object' || !layoutRoot) return noop;
+
+  const hasAny = theme.primaryColor || theme.secondaryColor || theme.backgroundColor
+    || theme.backgroundImage || theme.cardColor || theme.textColor
+    || theme.fontFamily || theme.mode;
+  if (!hasAny) return noop;
+
+  const bgEl = layoutRoot.querySelector('.wf-bg');
+  const appliedVars = [];
+  const inlineBackups = new Map();
+
+  function setVar(name, value) {
+    if (value == null) return;
+    layoutRoot.style.setProperty(name, value);
+    appliedVars.push(name);
+  }
+
+  function backupInline(el) {
+    if (!el || inlineBackups.has(el)) return;
+    inlineBackups.set(el, el.getAttribute('style') || '');
+  }
+
+  // -- Detect color mode --
+  const explicitMode = (theme.mode === 'dark' || theme.mode === 'light') ? theme.mode : null;
+  const bgColor = theme.backgroundColor;
+  const mode = explicitMode
+    || (bgColor ? (isDark(bgColor) ? 'dark' : 'light') : 'light');
+
+  // -- Primary color derivations --
+  const primary = theme.primaryColor;
+  if (primary) {
+    setVar('--wf-primary', primary);
+    setVar('--wf-primary-dark', darken(primary, 0.15));
+    setVar('--wf-primary-light', withAlpha(primary, 0.07));
+    setVar('--wf-primary-glow', withAlpha(primary, 0.18));
+    setVar('--wf-primary-grad-start', lighten(primary, 0.2));
+    setVar('--wf-primary-grad-end', darken(primary, 0.12));
+    setVar('--wf-face-border', withAlpha(primary, 0.5));
+
+    setVar('--wf-shadow-btn',
+      `0 1px 3px rgba(0,0,0,0.06), 0 4px 12px ${withAlpha(primary, 0.18)}`);
+    setVar('--wf-shadow-btn-hover',
+      `0 2px 6px rgba(0,0,0,0.08), 0 8px 24px ${withAlpha(primary, 0.22)}`);
+
+    setVar('--wf-orb-1', withAlpha(lighten(primary, 0.45), 0.4));
+    setVar('--wf-orb-2', withAlpha(lighten(primary, 0.50), 0.35));
+    setVar('--wf-orb-3', withAlpha(lighten(primary, 0.55), 0.3));
+
+    // WCAG AA check (3:1 minimum for UI components)
+    const cardBg = theme.cardColor || (mode === 'dark' ? '#1E1E2E' : '#FFFFFF');
+    const ratio = contrastRatio(primary, cardBg);
+    if (ratio < 3) {
+      console.warn(
+        `[Central Auth SDK] Theme: primaryColor "${primary}" has low contrast (${ratio.toFixed(1)}) against card background "${cardBg}". ` +
+        'WCAG AA requires ≥ 3:1 for UI components. Consider a bolder color.',
+      );
+    }
+  }
+
+  // -- Background color --
+  if (bgColor) {
+    setVar('--wf-bg', bgColor);
+  }
+
+  // -- Card color --
+  const cardColor = theme.cardColor || (mode === 'dark' ? '#1E1E2E' : null);
+  if (cardColor) {
+    setVar('--wf-card', cardColor);
+    setVar('--wf-input-bg',
+      mode === 'dark' ? lighten(cardColor, 0.05) : darken(cardColor, 0.015));
+  }
+
+  // -- Text color --
+  if (theme.textColor) {
+    setVar('--wf-fg', theme.textColor);
+    const [r, g, b] = hexToRgb(theme.textColor);
+    setVar('--wf-fg-soft', `rgba(${r},${g},${b},0.75)`);
+  } else if (mode === 'dark') {
+    setVar('--wf-fg', '#E8E6E3');
+    setVar('--wf-fg-soft', '#B8B4AE');
+  }
+
+  // -- Dark mode surface/border adjustments --
+  if (mode === 'dark') {
+    if (!theme.textColor) {
+      setVar('--wf-muted', '#8A857E');
+      setVar('--wf-muted-bg', 'rgba(255,255,255,0.06)');
+    }
+    setVar('--wf-border', 'rgba(255,255,255,0.1)');
+    setVar('--wf-border-hover', 'rgba(255,255,255,0.18)');
+    setVar('--wf-shadow-card',
+      '0 0 0 1px rgba(255,255,255,0.05), 0 4px 24px rgba(0,0,0,0.3)');
+    setVar('--wf-shadow-input', '0 1px 2px rgba(0,0,0,0.15)');
+  }
+
+  // -- Secondary color (stored for future use) --
+  if (theme.secondaryColor) {
+    setVar('--wf-secondary', theme.secondaryColor);
+  }
+
+  // -- Font --
+  if (theme.fontFamily) {
+    setVar('--wf-font', theme.fontFamily);
+  }
+
+  // -- Background image / mesh gradient override --
+  if (bgEl) {
+    if (theme.backgroundImage) {
+      backupInline(bgEl);
+      layoutRoot.setAttribute('data-wf-bg-image', '');
+      const overlay = mode === 'dark'
+        ? 'rgba(0,0,0,0.55)'
+        : 'rgba(255,255,255,0.6)';
+      bgEl.style.background =
+        `linear-gradient(${overlay}, ${overlay}), url("${theme.backgroundImage}") center/cover no-repeat`;
+      bgEl.querySelectorAll('.wf-bg-orb').forEach(orb => { orb.style.display = 'none'; });
+    } else if (primary || bgColor) {
+      backupInline(bgEl);
+      const p = primary || '#D46B2D';
+      const bg = bgColor || '#F5F1EC';
+      bgEl.style.background = [
+        `radial-gradient(ellipse 80% 50% at 20% 80%, ${withAlpha(lighten(p, 0.45), 0.7)} 0%, transparent 55%)`,
+        `radial-gradient(ellipse 60% 60% at 85% 15%, ${withAlpha(lighten(p, 0.50), 0.5)} 0%, transparent 50%)`,
+        `radial-gradient(ellipse 50% 50% at 50% 50%, ${withAlpha(lighten(p, 0.55), 0.4)} 0%, transparent 60%)`,
+        bg,
+      ].join(', ');
+    }
+  }
+
+  // Store mode for any CSS hooks ([data-wf-mode="dark"])
+  layoutRoot.setAttribute('data-wf-mode', mode);
+
+  // -- Cleanup --
+  return function cleanup() {
+    appliedVars.forEach(v => layoutRoot.style.removeProperty(v));
+    layoutRoot.removeAttribute('data-wf-mode');
+    layoutRoot.removeAttribute('data-wf-bg-image');
+    inlineBackups.forEach((backup, el) => {
+      if (backup) el.setAttribute('style', backup);
+      else el.removeAttribute('style');
+    });
+    if (bgEl) {
+      bgEl.querySelectorAll('.wf-bg-orb').forEach(orb => { orb.style.display = ''; });
+    }
+  };
+}
+
+function noop() {}
+
+// ---------------------------------------------------------------------------
+// Built-in presets
+// ---------------------------------------------------------------------------
+
+/** @type {Record<string, Object|null>} */
+export const THEME_PRESETS = {
+  default: null,
+  dark: {
+    primaryColor: '#E8985A',
+    backgroundColor: '#0F0F14',
+    cardColor: '#1A1A24',
+    textColor: '#E8E6E3',
+    mode: 'dark',
+  },
+  ocean: {
+    primaryColor: '#2563EB',
+    backgroundColor: '#EFF6FF',
+    secondaryColor: '#1E40AF',
+  },
+  forest: {
+    primaryColor: '#16A34A',
+    backgroundColor: '#F0FDF4',
+    secondaryColor: '#166534',
+  },
+  purple: {
+    primaryColor: '#7C3AED',
+    backgroundColor: '#FAF5FF',
+    secondaryColor: '#5B21B6',
+  },
+  rose: {
+    primaryColor: '#E11D48',
+    backgroundColor: '#FFF1F2',
+    secondaryColor: '#9F1239',
+  },
+  midnight: {
+    primaryColor: '#818CF8',
+    backgroundColor: '#0F172A',
+    cardColor: '#1E293B',
+    textColor: '#E2E8F0',
+    mode: 'dark',
+  },
+};

package/ui/components.js

@@ -0,0 +1,94 @@
+/**
+ * Reusable UI primitives - Vanilla JS components
+ */
+
+export function createElement(tag, attrs = {}, children = []) {
+  const el = document.createElement(tag);
+  Object.entries(attrs).forEach(([key, value]) => {
+    if (value == null) return;
+    if (key === 'className') {
+      el.className = value;
+    } else if (key === 'style' && typeof value === 'object') {
+      Object.assign(el.style, value);
+    } else if (key.startsWith('on') && typeof value === 'function') {
+      el.addEventListener(key.slice(2).toLowerCase(), value);
+    } else if (key === 'html') {
+      el.innerHTML = value;
+    } else if (key === 'ref' && typeof value === 'function') {
+      value(el);
+    } else if (key === 'dataset' && typeof value === 'object') {
+      Object.assign(el.dataset, value);
+    } else if (typeof value === 'boolean') {
+      if (value) el.setAttribute(key, '');
+    } else if (key !== 'ref') {
+      el.setAttribute(key, value);
+    }
+  });
+  children.forEach((child) => {
+    if (typeof child === 'string') {
+      el.appendChild(document.createTextNode(child));
+    } else if (child && child.nodeType) {
+      el.appendChild(child);
+    } else if (Array.isArray(child)) {
+      child.forEach((c) => el.appendChild(typeof c === 'string' ? document.createTextNode(c) : c));
+    }
+  });
+  return el;
+}
+
+export function button(text, { variant = 'default', size = 'lg', onClick, className = '', icon, disabled } = {}) {
+  const btn = createElement('button', {
+    type: 'button',
+    className: `wf-btn wf-btn-${variant} wf-btn-${size} ${className}`.trim(),
+    onClick,
+    disabled,
+  });
+  if (icon) btn.appendChild(icon);
+  btn.appendChild(document.createTextNode(text));
+  return btn;
+}
+
+export function input({ id, type = 'text', placeholder, value = '', className = '', required, maxLength, inputMode } = {}) {
+  return createElement('input', {
+    id,
+    type,
+    placeholder,
+    value,
+    className: `wf-input ${className}`.trim(),
+    required,
+    maxLength,
+    inputMode,
+  });
+}
+
+export function label(text, { htmlFor, className = '' } = {}) {
+  return createElement('label', {
+    htmlFor,
+    className: `wf-label ${className}`.trim(),
+  }, [text]);
+}
+
+export function iconSvg(paths) {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('width', '24');
+  svg.setAttribute('height', '24');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-width', '2');
+  svg.setAttribute('stroke-linecap', 'round');
+  svg.setAttribute('stroke-linejoin', 'round');
+  svg.classList.add('wf-icon');
+  if (typeof paths === 'string') {
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', paths);
+    svg.appendChild(path);
+  } else {
+    paths.forEach((d) => {
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('d', d);
+      svg.appendChild(path);
+    });
+  }
+  return svg;
+}

package/ui/layout.js

@@ -0,0 +1,100 @@
+/**
+ * Layout v3 — Centered card on animated gradient mesh
+ * Features an SVG progress ring instead of a traditional step bar
+ */
+
+const SHIELD_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`;
+
+const CIRCUMFERENCE = 100;
+const RING_R = 15.9155;
+
+export function createLayout(container) {
+  container.innerHTML = '';
+
+  const root = document.createElement('div');
+  root.className = 'wf-layout';
+  root.innerHTML = `
+    <div class="wf-bg" aria-hidden="true">
+      <div class="wf-bg-orb wf-bg-orb-1"></div>
+      <div class="wf-bg-orb wf-bg-orb-2"></div>
+      <div class="wf-bg-orb wf-bg-orb-3"></div>
+    </div>
+    <div class="wf-card">
+      <div class="wf-card-accent"></div>
+      <div class="wf-card-inner">
+        <div class="wf-card-header">
+          <div class="wf-card-brand">
+            <div class="wf-card-logo">${SHIELD_SVG}</div>
+            <span class="wf-card-brand-name">Central Auth</span>
+          </div>
+          <div class="wf-ring" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="7" aria-label="Step 1 of 7">
+            <svg class="wf-ring-svg" viewBox="0 0 36 36">
+              <defs>
+                <linearGradient id="wf-ring-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop class="wf-ring-grad-start" offset="0%" stop-color="#E8985A"/>
+                  <stop class="wf-ring-grad-end" offset="100%" stop-color="#C45828"/>
+                </linearGradient>
+              </defs>
+              <circle class="wf-ring-track" cx="18" cy="18" r="${RING_R}"/>
+              <circle class="wf-ring-fill" cx="18" cy="18" r="${RING_R}"
+                stroke="url(#wf-ring-grad)"
+                stroke-dasharray="${CIRCUMFERENCE}"
+                stroke-dashoffset="${CIRCUMFERENCE}"/>
+            </svg>
+            <span class="wf-ring-num" id="wf-ring-num"></span>
+          </div>
+        </div>
+        <div class="wf-card-body">
+          <div class="wf-error-banner hidden" id="wf-error-banner" role="alert"></div>
+          <div id="wf-form-inner"></div>
+        </div>
+      </div>
+    </div>
+    <p class="wf-page-footer">&copy; ${new Date().getFullYear()} Central Auth. All rights reserved.</p>
+  `;
+
+  container.appendChild(root);
+
+  const formInner = root.querySelector('#wf-form-inner');
+  const ringFill = root.querySelector('.wf-ring-fill');
+  const ringNum = root.querySelector('#wf-ring-num');
+  const ring = root.querySelector('.wf-ring');
+  const errorBanner = root.querySelector('#wf-error-banner');
+
+  function setContent(el) {
+    formInner.innerHTML = '';
+    if (el) formInner.appendChild(el);
+  }
+
+  function updateProgress(current, total) {
+    const pct = total > 0 ? (current / total) * CIRCUMFERENCE : 0;
+    ringFill.style.strokeDashoffset = CIRCUMFERENCE - pct;
+
+    ring.setAttribute('aria-valuenow', current);
+    ring.setAttribute('aria-valuemax', total);
+    ring.setAttribute('aria-label', `Step ${current} of ${total}`);
+
+    ringNum.textContent = current;
+    ringNum.classList.remove('wf-ring-pop');
+    void ringNum.offsetWidth;
+    ringNum.classList.add('wf-ring-pop');
+  }
+
+  function showError(message) {
+    if (!message) {
+      errorBanner.classList.add('hidden');
+      errorBanner.textContent = '';
+      return;
+    }
+    errorBanner.textContent = message;
+    errorBanner.classList.remove('hidden');
+  }
+
+  return {
+    root,
+    setContent,
+    updateProgress,
+    showError,
+    renderContent: setContent,
+  };
+}

package/ui/screens/email-entry.js

@@ -0,0 +1,136 @@
+/**
+ * Screen 1 — Create your account
+ * Collects first name, last name, and email address
+ * Social sign-up buttons (Google / Microsoft) shown as alternative
+ */
+
+const GOOGLE_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09a6.95 6.95 0 0 1 0-4.17V7.07H2.18A11.97 11.97 0 0 0 0 12c0 1.94.46 3.77 1.28 5.4l3.56-2.77-.01-.54z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>`;
+
+const MS_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="10" height="10" fill="#F25022"/><rect x="13" y="1" width="10" height="10" fill="#7FBA00"/><rect x="1" y="13" width="10" height="10" fill="#00A4EF"/><rect x="13" y="13" width="10" height="10" fill="#FFB900"/></svg>`;
+
+const USER_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`;
+
+const MAIL_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 7L2 7"/></svg>`;
+
+const ARROW_LEFT = '<path d="M19 12H5m7 7l-7-7 7-7"/>';
+
+export function createEmailEntryScreen(onNext, onSocialSignUp, onSwitchToLogin, onBackToApp) {
+  const screen = document.createElement('div');
+  screen.className = 'wf-screen';
+
+  screen.innerHTML = `
+    <div class="wf-screen-back"><button type="button" class="wf-btn wf-btn-ghost wf-btn-lg" id="wf-email-back" aria-label="Back"><svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${ARROW_LEFT}</svg> Back</button></div>
+    <div class="wf-screen-header">
+      <div class="wf-icon-box">${USER_ICON}</div>
+      <h2 class="wf-screen-title">Create your account</h2>
+      <p class="wf-screen-desc">Get started — it only takes a minute</p>
+    </div>
+
+    <div class="wf-social-buttons">
+      <button type="button" class="wf-btn wf-btn-social wf-btn-flex wf-btn-lg" id="wf-social-google">
+        <span class="wf-icon-sm">${GOOGLE_SVG}</span>
+        Google
+      </button>
+      <button type="button" class="wf-btn wf-btn-social wf-btn-flex wf-btn-lg" id="wf-social-ms">
+        <span class="wf-icon-sm">${MS_SVG}</span>
+        Microsoft
+      </button>
+    </div>
+
+    <div class="wf-divider"><span>or continue with email</span></div>
+
+    <form class="wf-form" id="wf-email-form" novalidate>
+      <div class="wf-row-2">
+        <div class="wf-field">
+          <label class="wf-label" for="wf-first-name">First name</label>
+          <input
+            type="text"
+            id="wf-first-name"
+            class="wf-input"
+            placeholder="John"
+            autocomplete="given-name"
+            required
+          />
+        </div>
+        <div class="wf-field">
+          <label class="wf-label" for="wf-last-name">Last name</label>
+          <input
+            type="text"
+            id="wf-last-name"
+            class="wf-input"
+            placeholder="Doe"
+            autocomplete="family-name"
+            required
+          />
+        </div>
+      </div>
+
+      <div class="wf-field">
+        <label class="wf-label" for="wf-email">Email address</label>
+        <div class="wf-input-wrap">
+          <input
+            type="email"
+            id="wf-email"
+            class="wf-input"
+            placeholder="you@company.com"
+            autocomplete="email"
+            required
+          />
+          <span class="wf-input-icon-left">${MAIL_ICON}</span>
+        </div>
+      </div>
+
+      <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-full">
+        Continue
+        <svg class="wf-icon-sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
+      </button>
+    </form>
+
+    <p class="wf-footer-link">
+      Already have an account? <button type="button" class="wf-link" id="wf-go-login">Sign in</button>
+    </p>
+  `;
+
+  const form = screen.querySelector('#wf-email-form');
+  const firstNameInput = screen.querySelector('#wf-first-name');
+  const lastNameInput = screen.querySelector('#wf-last-name');
+  const emailInput = screen.querySelector('#wf-email');
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const firstName = firstNameInput.value.trim();
+    const lastName = lastNameInput.value.trim();
+    const email = emailInput.value.trim();
+
+    if (!firstName || !lastName) {
+      firstNameInput.focus();
+      return;
+    }
+    if (!email || !email.includes('@')) {
+      emailInput.focus();
+      return;
+    }
+
+    onNext({ email, firstName, lastName });
+  });
+
+  const googleBtn = screen.querySelector('#wf-social-google');
+  const msBtn = screen.querySelector('#wf-social-ms');
+
+  if (typeof onSocialSignUp === 'function') {
+    googleBtn.addEventListener('click', () => onSocialSignUp('google'));
+    msBtn.addEventListener('click', () => onSocialSignUp('microsoft'));
+  }
+
+  const goLoginBtn = screen.querySelector('#wf-go-login');
+  if (goLoginBtn && typeof onSwitchToLogin === 'function') {
+    goLoginBtn.addEventListener('click', () => onSwitchToLogin());
+  }
+
+  const backBtn = screen.querySelector('#wf-email-back');
+  if (backBtn && typeof onBackToApp === 'function') {
+    backBtn.addEventListener('click', () => onBackToApp());
+  }
+
+  return screen;
+}