truescene-face-id-capture-sdk 1.0.0 → 1.0.1

package/dist/index.js

@@ -24849,7 +24849,7 @@ const estimatePoseFromLandmarks = (zc, Wc) => {
 			minFaceHeightRatio: .18,
 			minFaceAreaRatio: .03,
 			meanLum: {
-				min: 70,
+				min: 10,
 				max: 190
 			},
 			blurScoreMin: 90
@@ -25490,378 +25490,264 @@ var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((zc) =
 			})
 		]
 	});
-}, stripDataUrl = (zc) => {
+};
+const REGION_URLS = {
+	eu: "https://eu.api.truescene.ai",
+	us: "https://us.api.truescene.ai",
+	sandbox: "http://13.60.232.144:3031"
+};
+var stripDataUrl = (zc) => {
 	if (!zc) return null;
 	let Wc = zc.indexOf(",");
 	return Wc >= 0 ? zc.slice(Wc + 1) : zc;
-}, formatNumber = (zc, Wc) => typeof zc != "number" || Number.isNaN(zc) ? "--" : zc.toFixed(Wc), CaptureExperience_default = ({ sessionToken: zc, compareUrl: Wc = "/comparev2", tokenHeader: Kc = "Authorization", tokenPrefix: qc = "Bearer", tokenField: Jc = "session_token", autoStart: Yc = !1, initialShowDebug: Zc = !1, showDebugToggle: Qc = !1, className: $c, onReadyChange: el, onStepChange: tl, onMetricsChange: nl, onCapture: rl, onCompareResult: al, onCompareError: ol, onError: sl }) => {
-	let [cl, ll] = (0, import_react.useState)({
+}, CaptureExperience_default = ({ sessionToken: zc, region: Wc, autoStart: Kc = !1, compareTimeoutMs: qc = 1e6, className: Jc, showHeader: Yc = !0, showInstructions: Zc = !0, showStatus: Qc = !0, headerEyebrow: $c = "TrueScene Capture", headerTitle: el = "Fast & Deepfake Resistant", headerSubtitle: tl = "ID Verification", instructions: nl = "Press Start Verification. Align your face in the oval, then place your ID under your nose so it covers your mouth. Keep your eyes visible.", onReadyChange: rl, onStepChange: al, onMetricsChange: ol, onCapture: sl, onVerificationCode: cl, onVerificationError: ll, onError: ul }) => {
+	let [dl, fl] = (0, import_react.useState)({
 		faceReady: !1,
 		idReady: !1
-	}), [ul, dl] = (0, import_react.useState)("FACE_ALIGN"), [fl, pl] = (0, import_react.useState)(null), [ml, hl] = (0, import_react.useState)(Zc), [gl, _l] = (0, import_react.useState)(!1), [vl, yl] = (0, import_react.useState)({
+	}), [pl, ml] = (0, import_react.useState)("FACE_ALIGN"), [hl, gl] = (0, import_react.useState)(!1), [_l, vl] = (0, import_react.useState)({
 		faceImage: null,
 		idImage: null,
 		fullImage: null
-	}), [bl, xl] = (0, import_react.useState)(null), [Sl, Cl] = (0, import_react.useState)(null), [wl, Tl] = (0, import_react.useState)(!1), El = (0, import_react.useRef)(null), Dl = zc?.trim() ?? "", Ol = Dl.length === 0;
+	}), yl = (0, import_react.useRef)(cl), bl = (0, import_react.useRef)(ll), xl = (0, import_react.useRef)(ul), Sl = (0, import_react.useRef)(null), Cl = zc?.trim() ?? "", wl = Cl.length === 0, Tl = Wc ? `${REGION_URLS[Wc]}/comparev2` : "";
 	(0, import_react.useEffect)(() => {
-		!Yc || gl || Ol || _l(!0);
+		!Kc || hl || wl || gl(!0);
 	}, [
-		Yc,
-		gl,
-		Ol
+		Kc,
+		hl,
+		wl
 	]), (0, import_react.useEffect)(() => {
-		if (!vl.faceImage || !vl.idImage) return;
-		if (Ol) {
-			let zc = "Session token is required to compare results.";
-			Cl(zc), xl(null), Tl(!1), ol?.(zc), sl?.(zc);
+		yl.current = cl, bl.current = ll, xl.current = ul;
+	}, [
+		cl,
+		ll,
+		ul
+	]);
+	let El = (zc) => {
+		bl.current?.(zc), xl.current?.(zc.message);
+	};
+	(0, import_react.useEffect)(() => {
+		if (!_l.faceImage || !_l.idImage) return;
+		if (wl) {
+			El({
+				code: "MISSING_TOKEN",
+				message: "Session token is required to submit verification."
+			});
+			return;
+		}
+		if (!Wc) {
+			El({
+				code: "MISSING_REGION",
+				message: "Region is required to submit verification."
+			});
 			return;
 		}
-		let zc = El.current;
-		if (zc && zc.faceImage === vl.faceImage && zc.idImage === vl.idImage && zc.sessionToken === Dl) return;
-		let Yc = stripDataUrl(vl.faceImage), Zc = stripDataUrl(vl.idImage);
-		if (!Yc || !Zc) return;
-		El.current = {
-			faceImage: vl.faceImage,
-			idImage: vl.idImage,
-			sessionToken: Dl
+		let zc = Sl.current;
+		if (zc && zc.faceImage === _l.faceImage && zc.idImage === _l.idImage && zc.sessionToken === Cl) return;
+		let Kc = stripDataUrl(_l.faceImage), Jc = stripDataUrl(_l.idImage);
+		if (!Kc || !Jc) return;
+		Sl.current = {
+			faceImage: _l.faceImage,
+			idImage: _l.idImage,
+			sessionToken: Cl
 		};
-		let Qc = !0;
-		Tl(!0), Cl(null), xl(null), al?.(null);
-		let $c = { "Content-Type": "application/json" };
-		Kc && ($c[Kc] = qc ? `${qc} ${Dl}` : Dl);
-		let el = {
-			image_face: Yc,
-			image_idcard: Zc
+		let Yc = !0;
+		bl.current?.(null), yl.current?.(null);
+		let Zc = new AbortController(), Qc = !1, $c = qc > 0 ? window.setTimeout(() => {
+			Qc = !0, Zc.abort();
+		}, qc) : null, el = { "Content-Type": "application/json" };
+		el.Authorization = `Bearer ${Cl}`;
+		let tl = {
+			image_face: Kc,
+			image_idcard: Jc,
+			session_token: Cl
 		};
-		return Jc && (el[Jc] = Dl), fetch(Wc, {
+		return fetch(Tl, {
 			method: "POST",
-			headers: $c,
-			body: JSON.stringify(el)
-		}).then(async (zc) => {
-			if (!zc.ok) throw Error(`Server error (${zc.status})`);
-			return zc.json();
-		}).then((zc) => {
-			if (Qc) {
-				if (typeof zc?.error == "string" && zc.error.trim().length > 0) {
-					Cl(zc.error), xl(null), ol?.(zc.error), sl?.(zc.error);
+			headers: el,
+			body: JSON.stringify(tl),
+			signal: Zc.signal
+		}).then(async (zc) => zc.ok ? zc.json() : (El({
+			code: "HTTP_ERROR",
+			message: `Server error (${zc.status})`,
+			status: zc.status
+		}), null)).then((zc) => {
+			if (!Yc || !zc) return;
+			if (typeof zc?.error == "string" && zc.error.trim().length > 0) {
+				El({
+					code: "INVALID_RESPONSE",
+					message: zc.error
+				});
+				return;
+			}
+			if (typeof zc?.verification_code != "string" || zc.verification_code.trim().length === 0) {
+				El({
+					code: "INVALID_RESPONSE",
+					message: "Verification code missing in response."
+				});
+				return;
+			}
+			let Wc = {
+				verification_code: zc.verification_code,
+				expires_at: typeof zc?.expires_at == "string" ? zc.expires_at : ""
+			};
+			yl.current?.(Wc);
+		}).catch((zc) => {
+			if (Yc) {
+				if (zc instanceof DOMException && zc.name === "AbortError") {
+					Qc && El({
+						code: "REQUEST_TIMEOUT",
+						message: "Verification request timed out."
+					});
 					return;
 				}
-				xl(zc), al?.(zc);
+				El({
+					code: "NETWORK_ERROR",
+					message: zc instanceof Error ? zc.message : "Verification request failed"
+				});
 			}
-		}).catch((zc) => {
-			if (!Qc) return;
-			let Wc = zc instanceof Error ? zc.message : "Compare failed";
-			Cl(Wc), ol?.(Wc), sl?.(Wc);
 		}).finally(() => {
-			Qc && Tl(!1);
+			$c && window.clearTimeout($c);
 		}), () => {
-			Qc = !1;
+			Yc = !1, $c && window.clearTimeout($c), Zc.abort();
 		};
 	}, [
-		vl.faceImage,
-		vl.idImage,
-		Wc,
-		Jc,
-		Kc,
-		Ol,
+		_l.faceImage,
+		_l.idImage,
 		qc,
-		Dl,
-		ol,
-		al,
-		sl
+		Tl,
+		wl,
+		Cl
 	]);
-	let kl = cl.idReady ? "Ready to continue" : "Not ready", Al = cl.idReady ? "status-pill status-pill--ready" : "status-pill status-pill--not", jl = ul === "FACE_ALIGN" ? "Step 1 of 2: Face align" : "Step 2 of 2: ID align", Ml = (0, import_react.useMemo)(() => fl ? [
-		{
-			label: "Step",
-			value: fl.step
-		},
-		{
-			label: "Face ready",
-			value: fl.ready.faceReady ? "Yes" : "No"
-		},
-		{
-			label: "ID ready",
-			value: fl.ready.idReady ? "Yes" : "No"
-		},
-		{
-			label: "Face count",
-			value: `${fl.face.faceCount}`
-		},
-		{
-			label: "Face box",
-			value: fl.face.faceBoxNorm ? `${fl.face.faceBoxNorm.x.toFixed(2)}, ${fl.face.faceBoxNorm.y.toFixed(2)}, ${fl.face.faceBoxNorm.w.toFixed(2)}, ${fl.face.faceBoxNorm.h.toFixed(2)}` : "--"
-		},
-		{
-			label: "Face yaw",
-			value: fl.face.poseValid ? `${fl.face.yawDeg.toFixed(1)} deg` : "--"
-		},
-		{
-			label: "Face pitch",
-			value: fl.face.poseValid ? `${fl.face.pitchDeg.toFixed(1)} deg` : "--"
-		},
-		{
-			label: "Face roll",
-			value: fl.face.poseValid ? `${fl.face.rollDeg.toFixed(1)} deg` : "--"
-		},
-		{
-			label: "ID rect",
-			value: fl.id.rectNorm ? `${fl.id.rectNorm.x.toFixed(2)}, ${fl.id.rectNorm.y.toFixed(2)}, ${fl.id.rectNorm.w.toFixed(2)}, ${fl.id.rectNorm.h.toFixed(2)}` : "--"
-		},
-		{
-			label: "ID ROI face count",
-			value: `${fl.id.roiFaceCount}`
-		},
-		{
-			label: "ID ROI face box",
-			value: fl.id.roiLargestFaceBoxNorm ? `${fl.id.roiLargestFaceBoxNorm.x.toFixed(2)}, ${fl.id.roiLargestFaceBoxNorm.y.toFixed(2)}, ${fl.id.roiLargestFaceBoxNorm.w.toFixed(2)}, ${fl.id.roiLargestFaceBoxNorm.h.toFixed(2)}` : "--"
-		},
-		{
-			label: "ID ROI face size",
-			value: fl.id.roiLargestFaceSizeRatio.toFixed(3)
-		},
-		{
-			label: "ID ROI mean lum",
-			value: fl.id.meanLumROI.toFixed(0)
-		},
-		{
-			label: "ID ROI blur",
-			value: fl.id.blurScoreROI.toFixed(0)
-		},
-		{
-			label: "Hint",
-			value: fl.hint
-		}
-	] : [], [fl]);
+	let Dl = dl.idReady ? "Ready to continue" : "Not ready", Ol = dl.idReady ? "status-pill status-pill--ready" : "status-pill status-pill--not", kl = pl === "FACE_ALIGN" ? "Step 1 of 2: Face align" : "Step 2 of 2: ID align", Al = Yc || Qc && hl, jl = Yc ? "app__header" : "app__header app__header--status-only";
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: `ts-capture${$c ? ` ${$c}` : ""}`,
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
-			className: "app__header",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: `ts-capture${Jc ? ` ${Jc}` : ""}`,
+		children: [Al && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
+			className: jl,
+			children: [Yc && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+				$c && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 					className: "app__eyebrow",
-					children: "TrueScene Capture"
+					children: $c
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", {
+				(el || tl) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [el && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", {
 					className: "app__title",
-					children: "Fast & Deepfake Resistant"
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", {
+					children: el
+				}), tl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", {
 					className: "app__title",
-					children: "ID Verification"
+					children: tl
 				})] }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				Zc && nl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
 					className: "app__subtitle",
-					children: "Press Start Verification. Align your face in the oval, then place your ID under your nose so it covers your mouth. Keep your eyes visible."
+					children: nl
 				})
-			] }), gl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			] }), hl && Qc && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				className: "app__status",
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: "app__status-stack",
 					children: [
 						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 							className: "status-pill status-pill--step",
-							children: jl
+							children: kl
 						}),
 						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-							className: cl.faceReady ? "status-pill status-pill--ready" : "status-pill status-pill--pending",
-							children: ["Face ", cl.faceReady ? "ready" : "not ready"]
+							className: dl.faceReady ? "status-pill status-pill--ready" : "status-pill status-pill--pending",
+							children: ["Face ", dl.faceReady ? "ready" : "not ready"]
 						}),
 						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-							className: cl.idReady ? "status-pill status-pill--ready" : "status-pill status-pill--pending",
-							children: ["ID ", cl.idReady ? "ready" : "not ready"]
+							className: dl.idReady ? "status-pill status-pill--ready" : "status-pill status-pill--pending",
+							children: ["ID ", dl.idReady ? "ready" : "not ready"]
 						})
 					]
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					className: Al,
-					children: kl
+					className: Ol,
+					children: Dl
 				})]
 			})]
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", {
 			className: "app__grid",
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
 				className: "app__camera",
-				children: [
-					gl ? vl.idImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "app__captures",
-						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-								className: "capture-card",
-								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Face capture" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
-									src: vl.faceImage ?? "",
-									alt: "Face capture"
-								})]
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-								className: "capture-card",
-								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "ID capture (cropped)" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
-									src: vl.idImage,
-									alt: "ID capture"
-								})]
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-								className: "capture-card",
-								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Full frame" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
-									src: vl.fullImage ?? "",
-									alt: "Full frame capture"
-								})]
-							})
-						]
-					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaceAndIdCapture_default, {
-						onReadyChange: (zc) => {
-							ll(zc), el?.(zc);
-						},
-						onMetricsChange: (zc) => {
-							pl(zc), nl?.(zc);
-						},
-						onStepChange: (zc) => {
-							dl(zc), tl?.(zc);
-						},
-						onCapture: (zc) => {
-							yl(zc), rl?.(zc);
-						}
-					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "app__start",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-							className: "btn btn--primary",
-							type: "button",
-							disabled: Ol,
-							onClick: () => _l(!0),
-							children: "Start Verification"
-						}), Ol && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-							className: "app__token-hint",
-							children: "Provide a session token before starting."
-						})]
-					}),
-					gl ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-					gl && Qc && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-						className: "app__actions",
-						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-							className: "btn btn--ghost",
-							type: "button",
-							onClick: () => hl((zc) => !zc),
-							children: ml ? "Hide Capture debug" : "Show Capture Debug"
-						})
-					})
-				]
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", {
+				children: [hl ? _l.idImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "panel-card panel-card--metrics",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Capture complete" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "You can continue in the verification flow." })]
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaceAndIdCapture_default, {
+					onReadyChange: (zc) => {
+						fl(zc), rl?.(zc);
+					},
+					onMetricsChange: (zc) => {
+						ol?.(zc);
+					},
+					onStepChange: (zc) => {
+						ml(zc), al?.(zc);
+					},
+					onCapture: (zc) => {
+						vl(zc), sl?.(zc);
+					}
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "app__start",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						className: "btn btn--primary",
+						type: "button",
+						disabled: wl,
+						onClick: () => gl(!0),
+						children: "Start Verification"
+					}), wl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "app__token-hint",
+						children: "Provide a session token before starting."
+					})]
+				}), hl ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {})]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", {
 				className: "app__panel",
-				children: [
-					vl.idImage && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "panel-card panel-card--accent",
-						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Match result" }),
-							wl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-								className: "metrics-row",
-								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Comparing face to ID..." }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-									className: "spinner",
-									"aria-hidden": "true"
-								})]
-							}),
-							Sl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: Sl }),
-							bl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-								className: "metrics-grid",
-								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-									className: "metrics-row",
-									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Match" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-										className: bl.match ? "match-result match-result--yes" : "match-result match-result--no",
-										children: bl.match ? "YES" : "NO"
-									})]
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", {
-									className: "metrics-details",
-									children: [
-										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("summary", {
-											className: "metrics-summary",
-											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-												className: "metrics-summary__top",
-												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Match %" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-													className: "metrics-summary__value",
-													children: [formatNumber(bl.match_percentage, 2), "%"]
-												})]
-											}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-												className: "metrics-summary__arrow",
-												"aria-hidden": "true"
-											})]
-										}),
-										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-											className: "metrics-row",
-											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Cosine distance" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatNumber(bl.cosine_distance, 4) })]
-										}),
-										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-											className: "metrics-row",
-											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Cosine similarity" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatNumber(bl.cosine_similarity, 4) })]
-										})
-									]
-								})]
-							})
-						]
-					}),
-					vl.idImage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-					ml && fl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "panel-card panel-card--metrics",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Debug metrics" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-							className: "metrics-grid",
-							children: Ml.map((zc) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-								className: "metrics-row",
-								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: zc.label }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: zc.value })]
-							}, zc.label))
-						})]
-					}),
-					ml && fl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}) }),
-					!vl.idImage && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "panel-card",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Quick checklist" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Fill the oval, but avoid getting too close." }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Place the ID under your nose and keep eyes visible." }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Face a soft, even light source and avoid glare." }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Hold steady until the status turns ready." })
-						] })]
-					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "app__cta-row",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Already tried verification? Let's start integrating it into your app." }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
-							className: "btn btn--ghost",
-							href: "https://truescene.site/",
-							target: "_blank",
-							rel: "noreferrer",
-							children: "Start Building"
-						})]
-					})
-				]
+				children: !_l.idImage && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "panel-card",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Quick checklist" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Fill the oval, but avoid getting too close." }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Place the ID under your nose and keep eyes visible." }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Face a soft, even light source and avoid glare." }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Hold steady until the status turns ready." })
+					] })]
+				})
 			})]
 		})]
 	});
-}, parseBoolean = (zc) => {
-	if (zc === null) return !1;
+}, parseBoolean = (zc, Wc = !1) => {
+	if (zc === null) return Wc;
 	if (zc === "") return !0;
-	let Wc = zc.toLowerCase();
-	return !(Wc === "false" || Wc === "0" || Wc === "no");
-}, TrueSceneCaptureElement = class extends HTMLElement {
+	let Kc = zc.toLowerCase();
+	return !(Kc === "false" || Kc === "0" || Kc === "no");
+}, parseNumber = (zc) => {
+	if (zc === null || zc.trim() === "") return;
+	let Wc = Number(zc);
+	return Number.isFinite(Wc) ? Wc : void 0;
+}, parseRegion = (zc) => zc && zc in REGION_URLS ? zc : void 0, TrueSceneCaptureElement = class extends HTMLElement {
 	constructor(...zc) {
 		super(...zc), this.root = null, this.mount = null, this.styleEl = null;
 	}
 	static #e = this.observedAttributes = [
 		"session-token",
-		"compare-url",
-		"token-header",
-		"token-prefix",
-		"token-field",
+		"region",
+		"compare-timeout-ms",
 		"auto-start",
-		"show-debug",
-		"debug-toggle"
+		"show-header",
+		"show-instructions",
+		"show-status",
+		"header-eyebrow",
+		"header-title",
+		"header-subtitle",
+		"instructions"
 	];
 	connectedCallback() {
-		console.count("truescene-capture connected"), this.shadowRoot || this.attachShadow({ mode: "open" });
+		this.shadowRoot || this.attachShadow({ mode: "open" });
 		let zc = this.shadowRoot;
 		if (zc) {
 			if (!this.styleEl) {
 				let Wc = document.createElement("style");
-				Wc.textContent = "@import \"https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap\";:host{display:block}:host,.ts-capture{color:#0f1c2e;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ink:#0f1c2e;--muted:#5a6b7a;--panel:#fff;font-family:Sora,Segoe UI,sans-serif;font-weight:400;line-height:1.5}.ts-capture,.ts-capture *{box-sizing:border-box}.ts-capture{min-height:100%;color:var(--ink);flex-direction:column;gap:2.5rem;padding:clamp(2rem,5vw,4rem);display:flex}.ts-capture button{font-family:inherit}.ts-capture .app__header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:2rem;display:flex}.ts-capture .app__eyebrow{text-transform:uppercase;letter-spacing:.3em;color:var(--muted);font-size:.7rem}.ts-capture .app__title{margin:0;font-size:clamp(2.2rem,4vw,3.4rem)}.ts-capture .app__subtitle{max-width:34rem;color:var(--muted);margin:0;font-size:1.05rem}.ts-capture .app__cta-row{text-align:center;color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex}.ts-capture .app__cta-row p{margin:0;font-size:1rem}.ts-capture .app__status{text-align:right;flex-direction:column;align-items:flex-end;gap:.75rem;max-width:18rem;display:flex}.ts-capture .app__status-stack{flex-direction:column;align-items:flex-end;gap:.5rem;display:flex}.ts-capture .app__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);align-items:start;gap:2rem;display:grid}.ts-capture .app__camera{flex-direction:column;gap:1.1rem;display:flex}.ts-capture .app__actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.ts-capture .app__captures{gap:1rem;display:grid}.ts-capture .app__start{align-self:center;justify-items:center;gap:.5rem;width:fit-content;display:grid}.ts-capture .app__token-hint{color:var(--muted);text-align:center;margin:0;font-size:.95rem}.ts-capture .capture-card{color:#f8fafc;background:#0f172a;border-radius:18px;gap:.5rem;padding:.75rem;display:grid}.ts-capture .capture-card span{font-size:.95rem;font-weight:600}.ts-capture .capture-card img{object-fit:cover;border-radius:12px;width:100%}.ts-capture .status-pill{border:1px solid #0000;border-radius:999px;align-items:center;gap:.5rem;padding:.5rem .95rem;font-size:.9rem;font-weight:600;display:inline-flex}.ts-capture .status-pill--step{color:#1f2937;background:#14212f14;border-color:#14212f1f}.ts-capture .status-pill--ready{color:#1b6d57;background:#46e3a82e;border-color:#46e3a866}.ts-capture .status-pill--not{color:#a33b3b;background:#ff6b6b2e;border-color:#ff6b6b59}.ts-capture .status-pill--pending{color:#8a5c1b;background:#f7c45233;border-color:#f7c45259}.ts-capture .btn{cursor:pointer;border:none;border-radius:999px;padding:.75rem 1.4rem;font-family:Sora,sans-serif;font-size:.95rem;font-weight:600;transition:transform .2s,box-shadow .2s}.ts-capture .btn:active{transform:translateY(1px)}.ts-capture .btn--primary{color:#f8fafc;background:#14212f;box-shadow:0 12px 24px #14212f40}.ts-capture .btn--primary:disabled{color:#64748b;cursor:not-allowed;box-shadow:none;background:#cbd5e1}.ts-capture .btn--ghost{color:#14212f;background:#14212f14;border:1px solid #14212f26}.ts-capture .panel-card{background:var(--panel);border-radius:24px;flex-direction:column;gap:.8rem;padding:1.4rem;display:flex;box-shadow:0 18px 40px #0f172a1f}.ts-capture .panel-card h2{margin:0;font-size:1.2rem}.ts-capture .panel-card ul{color:var(--muted);margin:0;padding-left:1.2rem;line-height:1.6}.ts-capture .panel-card p{color:var(--muted);margin:0;line-height:1.6}.ts-capture .panel-card--accent{background:linear-gradient(135deg,#fef0d9,#e7f6f2);border:1px solid #14212f14}.ts-capture .panel-card--metrics{background:#fbfbf8}.ts-capture .spinner{border:2px solid #14212f33;border-top-color:#14212f;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spinner-rotate}@keyframes spinner-rotate{to{transform:rotate(360deg)}}.ts-capture .metrics-grid{gap:.6rem;font-family:Space Mono,monospace;font-size:.85rem;display:grid}.ts-capture .metrics-row{border-bottom:1px dashed #14212f1f;justify-content:space-between;gap:.75rem;padding-bottom:.4rem;display:flex}.ts-capture .metrics-row span:last-child{color:var(--muted);text-align:right;max-width:12rem}.ts-capture .metrics-details{border-bottom:1px dashed #14212f1f;padding-bottom:.4rem}.ts-capture .metrics-summary{cursor:pointer;flex-direction:column;gap:.35rem;font-family:Space Mono,monospace;font-size:.85rem;list-style:none;display:flex}.ts-capture .metrics-summary::-webkit-details-marker{display:none}.ts-capture .metrics-summary__top{justify-content:space-between;gap:.75rem;display:flex}.ts-capture .metrics-summary__value{color:var(--muted);text-align:right}.ts-capture .metrics-summary__arrow{border-left:6px solid #0000;border-right:6px solid #0000;border-top:7px solid var(--muted);align-self:center;width:0;height:0;transition:transform .2s}.ts-capture .metrics-details[open] .metrics-summary__arrow{transform:rotate(180deg)}.ts-capture .match-result{font-weight:700}.ts-capture .metrics-row span.match-result--yes{color:#1b6d57}.ts-capture .metrics-row span.match-result--no{color:#a33b3b}.ts-capture .face-aligner{aspect-ratio:4/3;background:#10141c;border-radius:24px;width:100%;position:relative;overflow:hidden;box-shadow:0 20px 60px #0b0f1640,inset 0 0 0 1px #ffffff14}.ts-capture .face-aligner__video,.ts-capture .face-aligner__overlay{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.ts-capture .face-aligner__video{background:#0f172a}.ts-capture .face-aligner__overlay{pointer-events:none}.ts-capture .face-aligner__message{color:#f8fafc;text-align:center;background:#0a0c12c7;place-items:center;padding:1.5rem;font-size:1rem;font-weight:600;display:grid;position:absolute;inset:0}.ts-capture .face-aligner__back{z-index:2;color:#f8fafc;cursor:pointer;background:#0f172ab3;border:none;border-radius:999px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;transition:transform .2s,background .2s;position:absolute;top:16px;left:16px;box-shadow:0 12px 20px #0f172a40}.ts-capture .face-aligner__back:hover{background:#0f172ad9}.ts-capture .face-aligner__back:active{transform:translateY(1px)}.ts-capture .face-aligner__sr{clip:rect(0,0,0,0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:980px){.ts-capture .app__grid{grid-template-columns:1fr}.ts-capture .app__status{text-align:left;align-items:flex-start}.ts-capture .app__status-stack{align-items:flex-start}}@media (max-width:640px){.ts-capture{gap:1.5rem;padding:0}.ts-capture .app__title{font-size:2rem}.ts-capture .app__header{padding:1.25rem 1.25rem 0}.ts-capture .app__grid{gap:0}.ts-capture .app__camera{padding:0}.ts-capture .app__actions{padding:0 1.25rem 1.5rem}.ts-capture .app__panel{padding:0 1.25rem 1.75rem}.ts-capture .app__captures{padding:0 1.25rem}.ts-capture .app__cta-row{padding:0 1.25rem;font-size:.95rem}.ts-capture .face-aligner{aspect-ratio:auto;border-radius:0;width:100vw;height:100svh;max-height:100svh}}", zc.appendChild(Wc), this.styleEl = Wc;
+				Wc.textContent = "@import \"https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap\";:host{display:block}:host,.ts-capture{color:#0f1c2e;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ink:#0f1c2e;--muted:#5a6b7a;--panel:#fff;font-family:Sora,Segoe UI,sans-serif;font-weight:400;line-height:1.5}.ts-capture,.ts-capture *{box-sizing:border-box}.ts-capture{min-height:100%;color:var(--ink);flex-direction:column;gap:2.5rem;padding:clamp(2rem,5vw,4rem);display:flex}.ts-capture button{font-family:inherit}.ts-capture .app__header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:2rem;display:flex}.ts-capture .app__header--status-only{justify-content:flex-end}.ts-capture .app__eyebrow{text-transform:uppercase;letter-spacing:.3em;color:var(--muted);font-size:.7rem}.ts-capture .app__title{margin:0;font-size:clamp(2.2rem,4vw,3.4rem)}.ts-capture .app__subtitle{max-width:34rem;color:var(--muted);margin:0;font-size:1.05rem}.ts-capture .app__cta-row{text-align:center;color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex}.ts-capture .app__cta-row p{margin:0;font-size:1rem}.ts-capture .app__status{text-align:right;flex-direction:column;align-items:flex-end;gap:.75rem;max-width:18rem;display:flex}.ts-capture .app__status-stack{flex-direction:column;align-items:flex-end;gap:.5rem;display:flex}.ts-capture .app__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);align-items:start;gap:2rem;display:grid}.ts-capture .app__camera{flex-direction:column;gap:1.1rem;display:flex}.ts-capture .app__actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.ts-capture .app__captures{gap:1rem;display:grid}.ts-capture .app__start{align-self:center;justify-items:center;gap:.5rem;width:fit-content;display:grid}.ts-capture .app__token-hint{color:var(--muted);text-align:center;margin:0;font-size:.95rem}.ts-capture .capture-card{color:#f8fafc;background:#0f172a;border-radius:18px;gap:.5rem;padding:.75rem;display:grid}.ts-capture .capture-card span{font-size:.95rem;font-weight:600}.ts-capture .capture-card img{object-fit:cover;border-radius:12px;width:100%}.ts-capture .status-pill{border:1px solid #0000;border-radius:999px;align-items:center;gap:.5rem;padding:.5rem .95rem;font-size:.9rem;font-weight:600;display:inline-flex}.ts-capture .status-pill--step{color:#1f2937;background:#14212f14;border-color:#14212f1f}.ts-capture .status-pill--ready{color:#1b6d57;background:#46e3a82e;border-color:#46e3a866}.ts-capture .status-pill--not{color:#a33b3b;background:#ff6b6b2e;border-color:#ff6b6b59}.ts-capture .status-pill--pending{color:#8a5c1b;background:#f7c45233;border-color:#f7c45259}.ts-capture .btn{cursor:pointer;border:none;border-radius:999px;padding:.75rem 1.4rem;font-family:Sora,sans-serif;font-size:.95rem;font-weight:600;transition:transform .2s,box-shadow .2s}.ts-capture .btn:active{transform:translateY(1px)}.ts-capture .btn--primary{color:#f8fafc;background:#14212f;box-shadow:0 12px 24px #14212f40}.ts-capture .btn--primary:disabled{color:#64748b;cursor:not-allowed;box-shadow:none;background:#cbd5e1}.ts-capture .btn--ghost{color:#14212f;background:#14212f14;border:1px solid #14212f26}.ts-capture .panel-card{background:var(--panel);border-radius:24px;flex-direction:column;gap:.8rem;padding:1.4rem;display:flex;box-shadow:0 18px 40px #0f172a1f}.ts-capture .panel-card h2{margin:0;font-size:1.2rem}.ts-capture .panel-card ul{color:var(--muted);margin:0;padding-left:1.2rem;line-height:1.6}.ts-capture .panel-card p{color:var(--muted);margin:0;line-height:1.6}.ts-capture .panel-card--accent{background:linear-gradient(135deg,#fef0d9,#e7f6f2);border:1px solid #14212f14}.ts-capture .panel-card--metrics{background:#fbfbf8}.ts-capture .spinner{border:2px solid #14212f33;border-top-color:#14212f;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spinner-rotate}@keyframes spinner-rotate{to{transform:rotate(360deg)}}.ts-capture .metrics-grid{gap:.6rem;font-family:Space Mono,monospace;font-size:.85rem;display:grid}.ts-capture .metrics-row{border-bottom:1px dashed #14212f1f;justify-content:space-between;gap:.75rem;padding-bottom:.4rem;display:flex}.ts-capture .metrics-row span:last-child:not(.spinner){color:var(--muted);text-align:right;overflow-wrap:anywhere;word-break:break-word;flex:1;min-width:0;max-width:100%}.ts-capture .metrics-row .spinner{flex:none;align-self:center;margin-left:.5rem}.ts-capture .metrics-details{border-bottom:1px dashed #14212f1f;padding-bottom:.4rem}.ts-capture .metrics-summary{cursor:pointer;flex-direction:column;gap:.35rem;font-family:Space Mono,monospace;font-size:.85rem;list-style:none;display:flex}.ts-capture .metrics-summary::-webkit-details-marker{display:none}.ts-capture .metrics-summary__top{justify-content:space-between;gap:.75rem;display:flex}.ts-capture .metrics-summary__value{color:var(--muted);text-align:right}.ts-capture .metrics-summary__arrow{border-left:6px solid #0000;border-right:6px solid #0000;border-top:7px solid var(--muted);align-self:center;width:0;height:0;transition:transform .2s}.ts-capture .metrics-details[open] .metrics-summary__arrow{transform:rotate(180deg)}.ts-capture .match-result{font-weight:700}.ts-capture .metrics-row span.match-result--yes{color:#1b6d57}.ts-capture .metrics-row span.match-result--no{color:#a33b3b}.ts-capture .face-aligner{aspect-ratio:4/3;background:#10141c;border-radius:24px;width:100%;position:relative;overflow:hidden;box-shadow:0 20px 60px #0b0f1640,inset 0 0 0 1px #ffffff14}.ts-capture .face-aligner__video,.ts-capture .face-aligner__overlay{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.ts-capture .face-aligner__video{background:#0f172a}.ts-capture .face-aligner__overlay{pointer-events:none}.ts-capture .face-aligner__message{color:#f8fafc;text-align:center;background:#0a0c12c7;place-items:center;padding:1.5rem;font-size:1rem;font-weight:600;display:grid;position:absolute;inset:0}.ts-capture .face-aligner__back{z-index:2;color:#f8fafc;cursor:pointer;background:#0f172ab3;border:none;border-radius:999px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;transition:transform .2s,background .2s;position:absolute;top:16px;left:16px;box-shadow:0 12px 20px #0f172a40}.ts-capture .face-aligner__back:hover{background:#0f172ad9}.ts-capture .face-aligner__back:active{transform:translateY(1px)}.ts-capture .face-aligner__sr{clip:rect(0,0,0,0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:980px){.ts-capture .app__grid{grid-template-columns:1fr}.ts-capture .app__status{text-align:left;align-items:flex-start}.ts-capture .app__status-stack{align-items:flex-start}}@media (max-width:640px){.ts-capture{gap:1.5rem;padding:0}.ts-capture .app__title{font-size:2rem}.ts-capture .app__header{padding:1.25rem 1.25rem 0}.ts-capture .app__grid{gap:0}.ts-capture .app__camera{padding:0}.ts-capture .app__actions{padding:0 1.25rem 1.5rem}.ts-capture .app__panel{padding:0 1.25rem 1.75rem}.ts-capture .app__captures{padding:0 1.25rem}.ts-capture .app__cta-row{padding:0 1.25rem;font-size:.95rem}.ts-capture .face-aligner{aspect-ratio:auto;border-radius:0;width:100vw;height:100svh;max-height:100svh}}", zc.appendChild(Wc), this.styleEl = Wc;
 			}
 			this.mount || (this.mount = document.createElement("div"), zc.appendChild(this.mount)), this.root ||= (0, import_client.createRoot)(this.mount), this.renderReact();
 		}
 	}
 	disconnectedCallback() {
-		console.count("truescene-capture disconnected"), this.root?.unmount(), this.root = null;
+		this.root?.unmount(), this.root = null;
 	}
 	attributeChangedCallback() {
 		this.renderReact();
@@ -25876,75 +25762,104 @@ var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((zc) =
 	get sessionToken() {
 		return this.getAttribute("session-token") ?? "";
 	}
-	set compareUrl(zc) {
+	set region(zc) {
 		if (!zc) {
-			this.removeAttribute("compare-url");
+			this.removeAttribute("region");
 			return;
 		}
-		this.setAttribute("compare-url", zc);
+		this.setAttribute("region", zc);
 	}
-	get compareUrl() {
-		return this.getAttribute("compare-url") ?? void 0;
+	get region() {
+		return parseRegion(this.getAttribute("region"));
 	}
-	set tokenHeader(zc) {
-		if (!zc) {
-			this.removeAttribute("token-header");
+	set compareTimeoutMs(zc) {
+		if (zc == null) {
+			this.removeAttribute("compare-timeout-ms");
 			return;
 		}
-		this.setAttribute("token-header", zc);
+		this.setAttribute("compare-timeout-ms", String(zc));
 	}
-	get tokenHeader() {
-		return this.getAttribute("token-header") ?? void 0;
+	get compareTimeoutMs() {
+		return parseNumber(this.getAttribute("compare-timeout-ms"));
 	}
-	set tokenPrefix(zc) {
-		if (!zc) {
-			this.removeAttribute("token-prefix");
-			return;
-		}
-		this.setAttribute("token-prefix", zc);
+	set autoStart(zc) {
+		zc ? this.setAttribute("auto-start", "") : this.removeAttribute("auto-start");
+	}
+	get autoStart() {
+		return parseBoolean(this.getAttribute("auto-start"));
 	}
-	get tokenPrefix() {
-		return this.getAttribute("token-prefix") ?? void 0;
+	set showHeader(zc) {
+		this.setAttribute("show-header", zc ? "" : "false");
 	}
-	set tokenField(zc) {
-		if (!zc) {
-			this.removeAttribute("token-field");
+	get showHeader() {
+		return parseBoolean(this.getAttribute("show-header"), !0);
+	}
+	set showInstructions(zc) {
+		this.setAttribute("show-instructions", zc ? "" : "false");
+	}
+	get showInstructions() {
+		return parseBoolean(this.getAttribute("show-instructions"), !0);
+	}
+	set showStatus(zc) {
+		this.setAttribute("show-status", zc ? "" : "false");
+	}
+	get showStatus() {
+		return parseBoolean(this.getAttribute("show-status"), !0);
+	}
+	set headerEyebrow(zc) {
+		if (zc == null) {
+			this.removeAttribute("header-eyebrow");
 			return;
 		}
-		this.setAttribute("token-field", zc);
+		this.setAttribute("header-eyebrow", zc);
 	}
-	get tokenField() {
-		return this.getAttribute("token-field") ?? void 0;
+	get headerEyebrow() {
+		return this.getAttribute("header-eyebrow") ?? void 0;
 	}
-	set autoStart(zc) {
-		zc ? this.setAttribute("auto-start", "") : this.removeAttribute("auto-start");
+	set headerTitle(zc) {
+		if (zc == null) {
+			this.removeAttribute("header-title");
+			return;
+		}
+		this.setAttribute("header-title", zc);
 	}
-	get autoStart() {
-		return parseBoolean(this.getAttribute("auto-start"));
+	get headerTitle() {
+		return this.getAttribute("header-title") ?? void 0;
 	}
-	set initialShowDebug(zc) {
-		zc ? this.setAttribute("show-debug", "") : this.removeAttribute("show-debug");
+	set headerSubtitle(zc) {
+		if (zc == null) {
+			this.removeAttribute("header-subtitle");
+			return;
+		}
+		this.setAttribute("header-subtitle", zc);
 	}
-	get initialShowDebug() {
-		return parseBoolean(this.getAttribute("show-debug"));
+	get headerSubtitle() {
+		return this.getAttribute("header-subtitle") ?? void 0;
 	}
-	set showDebugToggle(zc) {
-		zc ? this.setAttribute("debug-toggle", "") : this.removeAttribute("debug-toggle");
+	set instructions(zc) {
+		if (zc == null) {
+			this.removeAttribute("instructions");
+			return;
+		}
+		this.setAttribute("instructions", zc);
 	}
-	get showDebugToggle() {
-		return parseBoolean(this.getAttribute("debug-toggle"));
+	get instructions() {
+		return this.getAttribute("instructions") ?? void 0;
 	}
 	renderReact() {
 		if (!this.root) return;
 		let zc = {
 			sessionToken: this.sessionToken,
-			compareUrl: this.compareUrl,
-			tokenHeader: this.tokenHeader,
-			tokenPrefix: this.tokenPrefix,
-			tokenField: this.tokenField,
+			region: this.region,
+			compareTimeoutMs: this.compareTimeoutMs,
 			autoStart: this.autoStart,
-			initialShowDebug: this.initialShowDebug,
-			showDebugToggle: this.showDebugToggle,
+			showHeader: this.showHeader,
+			showInstructions: this.showInstructions,
+			showStatus: this.showStatus,
+			headerEyebrow: this.headerEyebrow,
+			headerTitle: this.headerTitle,
+			headerSubtitle: this.headerSubtitle,
+			instructions: this.instructions,
 			onReadyChange: (zc) => {
 				this.dispatchEvent(new CustomEvent("ready-change", {
 					detail: zc,
@@ -25973,15 +25888,15 @@ var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((zc) =
 					composed: !0
 				}));
 			},
-			onCompareResult: (zc) => {
-				this.dispatchEvent(new CustomEvent("compare-result", {
+			onVerificationCode: (zc) => {
+				this.dispatchEvent(new CustomEvent("verification-code", {
 					detail: zc,
 					bubbles: !0,
 					composed: !0
 				}));
 			},
-			onCompareError: (zc) => {
-				this.dispatchEvent(new CustomEvent("compare-error", {
+			onVerificationError: (zc) => {
+				this.dispatchEvent(new CustomEvent("verification-error", {
 					detail: zc,
 					bubbles: !0,
 					composed: !0