@arkyc/widget 1.0.0

package/dist/ui.mjs

@@ -0,0 +1,931 @@
+import { Theme } from "./theme.mjs";
+import { Camera } from "./capture.mjs";
+import { DEFAULT_TUNING, createDefaultFaceAnalyzer, isSelfieReady, makeChallengeDetector } from "./face.mjs";
+import { DEFAULT_DOCUMENT_TUNING, createDefaultDocumentAnalyzer, documentGuidance } from "./document.mjs";
+import { countries } from "./countries.mjs";
+//#region src/ui.ts
+const DOCUMENT_LABELS = {
+	passport: "Passport",
+	id_card: "ID Card",
+	drivers_license: "Driver's License",
+	residence_permit: "Residence Permit"
+};
+const CHALLENGE_LABELS = {
+	turn_left: "Slowly turn your head to the left, and hold",
+	turn_right: "Slowly turn your head to the right, and hold",
+	blink: "Blink slowly",
+	smile: "Smile, and hold it",
+	nod: "Slowly nod your head",
+	move_closer: "Slowly move closer to the camera"
+};
+/** Fallback notice for an expired/unknown terminal session. */
+const EXPIRED_NOTICE = {
+	cls: "warn",
+	icon: "⏳",
+	title: "Link expired",
+	copy: "This verification link has expired."
+};
+/** Close-only notice copy for a session that was already terminal on load. */
+const TERMINAL_NOTICE = {
+	approved: {
+		cls: "ok",
+		icon: "✓",
+		title: "Already complete",
+		copy: "This verification has already been completed."
+	},
+	rejected: {
+		cls: "ok",
+		icon: "✓",
+		title: "Already complete",
+		copy: "This verification has already been completed."
+	},
+	requires_review: {
+		cls: "ok",
+		icon: "✓",
+		title: "Already complete",
+		copy: "This verification has already been submitted and is being reviewed."
+	},
+	expired: EXPIRED_NOTICE,
+	cancelled: {
+		cls: "warn",
+		icon: "⏳",
+		title: "Cancelled",
+		copy: "This verification was cancelled."
+	}
+};
+const SVG = (body) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+/** Per-challenge directional cue icons, animated via CSS over the preview. */
+const CUE_ICONS = {
+	turn_right: SVG("<path d=\"M5 12h14M13 6l6 6-6 6\"/>"),
+	turn_left: SVG("<path d=\"M19 12H5M11 6l-6 6 6 6\"/>"),
+	nod: SVG("<path d=\"M12 5v14M6 13l6 6 6-6\"/>"),
+	move_closer: SVG("<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"/>"),
+	blink: SVG("<path d=\"M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>"),
+	smile: SVG("<path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/><path d=\"M9 9h.01M15 9h.01\"/>")
+};
+const CHECK_ICON = SVG("<path d=\"M20 6 9 17l-5-5\"/>");
+/** Larger line-art illustration used to dress the informative / lead-in screens. */
+const ART = (body) => `<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+/** Per-screen decorative illustrations, keyed by step (plus a welcome hero). */
+const STEP_ART = {
+	welcome: ART("<path d=\"M32 7 52 14v14c0 12.5-8.2 21.6-20 25.6C20.2 49.6 12 40.5 12 28V14z\"/><path d=\"M23 30.5l6.2 6.2L41 24.5\"/>"),
+	front_capture: ART("<rect x=\"7\" y=\"15\" width=\"50\" height=\"34\" rx=\"5\"/><circle cx=\"22\" cy=\"28\" r=\"5\"/><path d=\"M14 42c1-5 5-7 8-7s7 2 8 7\"/><path d=\"M38 27h12M38 34h12M38 41h8\"/>"),
+	back_capture: ART("<rect x=\"7\" y=\"15\" width=\"50\" height=\"34\" rx=\"5\"/><rect x=\"7\" y=\"20\" width=\"50\" height=\"6\" fill=\"currentColor\" stroke=\"none\" opacity=\".18\"/><path d=\"M14 34h36M14 41h24\"/>"),
+	selfie_capture: ART("<path d=\"M10 20v-6a4 4 0 0 1 4-4h6\"/><path d=\"M44 10h6a4 4 0 0 1 4 4v6\"/><path d=\"M54 44v6a4 4 0 0 1-4 4h-6\"/><path d=\"M20 54h-6a4 4 0 0 1-4-4v-6\"/><circle cx=\"32\" cy=\"27\" r=\"8\"/><path d=\"M19 50c0-7 6-11 13-11s13 4 13 11\"/>"),
+	active_liveness: ART("<circle cx=\"32\" cy=\"30\" r=\"13\"/><circle cx=\"27\" cy=\"27\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"37\" cy=\"27\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M26 34c2 2.5 10 2.5 12 0\"/><path d=\"M13 30H6M10 26l-4 4 4 4\"/><path d=\"M51 30h7M54 26l4 4-4 4\"/>")
+};
+/**
+* Renders the widget's screens into a host element. DOM- and camera-injectable
+* so it can run under a fake DOM in tests. The view owns capture-screen camera
+* mechanics and raises only high-level events to the controller.
+*/
+var WidgetView = class {
+	doc;
+	theme;
+	handlers;
+	root;
+	body;
+	footer;
+	/** The `<style>` carrying the theme's CSS vars; swapped on runtime re-brand. */
+	styleEl;
+	/** The header brand group (logo/name/title); rebuilt on runtime re-brand. */
+	brandEl;
+	camera;
+	analyzer;
+	tuning;
+	docAnalyzer;
+	docTuning;
+	/** Interval ids for live quality/recording timers, cleared on re-render. */
+	timers = [];
+	/** Extra teardown run on each re-render (cancels in-flight detection loops). */
+	cleanups = [];
+	constructor(doc, theme, handlers, nav = globalThis.navigator, analyzer = createDefaultFaceAnalyzer(), tuning = DEFAULT_TUNING, docAnalyzer = createDefaultDocumentAnalyzer(), docTuning = DEFAULT_DOCUMENT_TUNING) {
+		this.doc = doc;
+		this.theme = theme;
+		this.handlers = handlers;
+		this.camera = new Camera(doc, nav);
+		this.analyzer = analyzer;
+		this.tuning = tuning;
+		this.docAnalyzer = docAnalyzer;
+		this.docTuning = docTuning;
+		this.root = this.el("div", { class: "arkyc-root" });
+		this.styleEl = this.el("style", { text: theme.stylesheet() });
+		this.root.appendChild(this.styleEl);
+		const card = this.el("div", { class: "arkyc-card" });
+		const header = this.el("div", { class: "arkyc-header" });
+		this.brandEl = this.el("div", { class: "arkyc-brand" });
+		this.fillBrand();
+		header.appendChild(this.brandEl);
+		const close = this.el("button", {
+			class: "arkyc-close",
+			html: "&times;",
+			"aria-label": "Close"
+		});
+		close.addEventListener("click", () => this.handlers.onClose());
+		header.appendChild(close);
+		this.body = this.el("div", { class: "arkyc-body" });
+		this.footer = this.el("div", { class: "arkyc-footer" });
+		card.appendChild(header);
+		card.appendChild(this.body);
+		card.appendChild(this.footer);
+		this.root.appendChild(card);
+	}
+	/**
+	* Populate the header brand group from the current theme: the project logo
+	* and/or name when branding is shown, otherwise a neutral title.
+	*/
+	fillBrand() {
+		this.clear(this.brandEl);
+		const lastTenMins = Date.now() - Math.floor(Math.random() * (600 * 1e3));
+		if (this.theme.showBranding && (this.theme.logoUrl || this.theme.name)) {
+			if (this.theme.logoUrl) this.brandEl.appendChild(this.el("img", {
+				class: "arkyc-logo",
+				src: this.theme.logoUrl + "?stamp=" + lastTenMins
+			}));
+			if (this.theme.name) this.brandEl.appendChild(this.el("span", {
+				class: "arkyc-brand-name",
+				text: this.theme.name
+			}));
+		} else this.brandEl.appendChild(this.el("p", {
+			class: "arkyc-title",
+			text: "Verify your identity"
+		}));
+	}
+	/**
+	* Re-theme the widget at runtime from project branding (resolved server-side):
+	* swap the CSS-variable stylesheet (colours/radius) and rebuild the header
+	* brand (logo/name). Cascades to every already-rendered element via the vars.
+	*/
+	applyBranding(branding) {
+		this.theme = new Theme(branding);
+		this.styleEl.textContent = this.theme.stylesheet();
+		this.fillBrand();
+	}
+	/**
+	* The widget's root element — append this to the overlay / container.
+	*/
+	get element() {
+		return this.root;
+	}
+	/**
+	* Whether live camera capture is available (drives the active-liveness branch).
+	*/
+	get cameraSupported() {
+		return this.camera.supported;
+	}
+	/**
+	* Release any active camera stream and clear live timers.
+	*/
+	destroy() {
+		this.timers.forEach((id) => clearInterval(id));
+		this.timers = [];
+		this.cleanups.forEach((fn) => fn());
+		this.cleanups = [];
+		this.camera.stop();
+	}
+	/**
+	* Render the screen for the given state.
+	*
+	* @param state
+	* @returns
+	*/
+	render(state) {
+		this.destroy();
+		this.clear(this.body);
+		this.clear(this.footer);
+		this.root.classList.remove("arkyc-handoff");
+		switch (state.step) {
+			case "welcome": return this.renderWelcome(state.handoffAvailable);
+			case "document_selection": return this.renderDocumentSelection();
+			case "front_capture": return this.renderCapture("Front of document", "environment", state.allowSkip, false, state.strictCapture);
+			case "back_capture": return this.renderCapture("Back of document", "environment", state.allowSkip, false, state.strictCapture);
+			case "selfie_capture": return this.renderCapture("Take a selfie", "user", state.allowSkip, true, state.strictCapture);
+			case "active_liveness": return this.renderActiveLiveness(state.livenessChallenges ?? [], state.allowSkip, state.requireLiveCamera);
+			case "ocr_processing": return this.renderProcessing("Reading your document…");
+			case "passive_liveness": return this.renderProcessing("Checking liveness…");
+			case "face_match": return this.renderProcessing("Matching your face…");
+			case "processing": return this.renderProcessing(state.statusLabel ?? "Finalising verification…");
+			case "result": return this.renderResult(state.decision ?? null, state.errorMessage, {
+				terminal: state.terminalNotice,
+				status: state.status
+			});
+		}
+	}
+	/** Prepend a decorative illustration for the given screen, when one exists. */
+	appendArt(key) {
+		const art = STEP_ART[key];
+		if (art) this.body.appendChild(this.el("div", {
+			class: "arkyc-illus",
+			html: art
+		}));
+	}
+	renderWelcome(handoffAvailable) {
+		this.appendArt("welcome");
+		this.body.appendChild(this.el("h2", {
+			class: "arkyc-h",
+			text: "Verify your identity"
+		}));
+		this.body.appendChild(this.el("p", {
+			class: "arkyc-p",
+			text: "You will need a government-issued ID and a moment to take a selfie. Your data is processed securely."
+		}));
+		this.footer.appendChild(this.button("Get started", () => this.handlers.onStart()));
+		if (handoffAvailable) this.footer.appendChild(this.button("Continue on your phone", () => this.handlers.onUsePhone(), "arkyc-btn-ghost"));
+	}
+	/** A neutral connecting screen shown while the widget bootstraps the session. */
+	renderLoading(label = "Loading…") {
+		this.destroy();
+		this.clear(this.body);
+		this.clear(this.footer);
+		this.root.classList.remove("arkyc-handoff");
+		this.renderProcessing(label);
+	}
+	/**
+	* An interstitial that tells the user what the next step is, with a single
+	* Continue button — so each step starts deliberately rather than the camera
+	* springing to life unannounced.
+	*/
+	renderInstruction(step, title, body, cta, onContinue) {
+		this.destroy();
+		this.clear(this.body);
+		this.clear(this.footer);
+		this.root.classList.remove("arkyc-handoff");
+		this.appendArt(step);
+		this.body.appendChild(this.el("h2", {
+			class: "arkyc-h",
+			text: title
+		}));
+		this.body.appendChild(this.el("p", {
+			class: "arkyc-p",
+			text: body
+		}));
+		this.footer.appendChild(this.button(cta, onContinue));
+	}
+	/**
+	* Show the cross-device handoff QR: the user scans it to resume this same
+	* session on their phone. The widget then waits for the other device to finish.
+	* `allowContinueHere` offers an escape hatch to keep verifying on this device.
+	*/
+	renderHandoff(qrSvg, allowContinueHere) {
+		this.destroy();
+		this.clear(this.body);
+		this.clear(this.footer);
+		this.root.classList.add("arkyc-handoff");
+		this.body.appendChild(this.el("h2", {
+			class: "arkyc-h",
+			text: "Continue on your phone"
+		}));
+		this.body.appendChild(this.el("p", {
+			class: "arkyc-p",
+			text: "Scan this code with your phone camera to finish verifying there."
+		}));
+		this.body.appendChild(this.el("div", {
+			class: "arkyc-qr",
+			html: qrSvg
+		}));
+		const waiting = this.el("div", { class: "arkyc-handoff-wait" });
+		waiting.appendChild(this.el("div", { class: "arkyc-spinner sm" }));
+		waiting.appendChild(this.el("span", { text: "Waiting for your phone…" }));
+		this.body.appendChild(waiting);
+		if (allowContinueHere) this.footer.appendChild(this.button("Continue on this device", () => this.handlers.onContinueHere(), "arkyc-btn-ghost"));
+	}
+	renderDocumentSelection() {
+		this.body.appendChild(this.el("h2", {
+			class: "arkyc-h",
+			text: "Select your document"
+		}));
+		const country = this.el("select", {
+			class: "arkyc-btn arkyc-btn-ghost arkyc-text-center",
+			name: "country",
+			autocomplete: "country",
+			"aria-label": "Country"
+		});
+		const placeholder = this.el("option", {
+			value: "",
+			selected: "selected"
+		});
+		placeholder.textContent = "Country";
+		country.appendChild(placeholder);
+		countries.forEach(({ name, iso2, flag }) => {
+			const option = this.el("option", { value: iso2 });
+			option.textContent = `${flag} ${name}`;
+			country.appendChild(option);
+		});
+		const choices = this.el("div", { class: "arkyc-choices" });
+		choices.appendChild(country);
+		Object.keys(DOCUMENT_LABELS).forEach((type) => {
+			const btn = this.button(DOCUMENT_LABELS[type], () => this.handlers.onDocumentSelected(type, (country.value || "").trim().toUpperCase()));
+			btn.classList.add("arkyc-btn-ghost");
+			choices.appendChild(btn);
+		});
+		this.body.appendChild(choices);
+	}
+	renderCapture(title, facing, allowSkip, selfie = false, strict = false) {
+		const strictDoc = strict && !selfie;
+		this.body.appendChild(this.el("h2", {
+			class: "arkyc-h",
+			text: title
+		}));
+		this.body.appendChild(this.el("p", {
+			class: "arkyc-p",
+			text: "Position it clearly in frame, then capture."
+		}));
+		const fileInput = this.el("input", {
+			type: "file",
+			accept: "image/*",
+			class: "arkyc-hidden"
+		});
+		fileInput.addEventListener("change", () => this.handlers.onImage(Camera.fileFromInput(fileInput)));
+		this.body.appendChild(fileInput);
+		if (this.camera.supported) {
+			const video = this.el("video", { class: `arkyc-preview${selfie ? " selfie" : ""}` });
+			const face = selfie ? this.buildFaceStage(video) : null;
+			const doc = selfie ? null : this.buildDocStage(video);
+			const mount = face?.stage ?? doc.stage;
+			this.body.appendChild(mount);
+			const hint = this.el("p", { class: "arkyc-p arkyc-hint" });
+			this.body.appendChild(hint);
+			const confirmCapture = (blob) => {
+				this.destroy();
+				if (blob) {
+					const url = URL.createObjectURL(blob);
+					const still = this.el("img", {
+						class: `arkyc-preview${selfie ? " selfie" : ""}`,
+						src: url
+					});
+					mount.replaceWith(still);
+					this.cleanups.push(() => URL.revokeObjectURL(url));
+				} else mount.classList.add("arkyc-hidden");
+				this.clear(this.footer);
+				hint.textContent = "✓ Captured";
+				this.footer.appendChild(this.button("Continue", () => this.handlers.onImage(blob)));
+				const retake = this.button("Retake", () => {
+					this.destroy();
+					this.clear(this.body);
+					this.clear(this.footer);
+					this.renderCapture(title, facing, allowSkip, selfie, strict);
+				});
+				retake.classList.add("arkyc-btn-ghost");
+				this.footer.appendChild(retake);
+			};
+			const onCapture = () => void this.camera.grabFrame(video).then(confirmCapture);
+			this.camera.start(video, facing).catch(() => {
+				mount.classList.add("arkyc-hidden");
+				if (strictDoc) {
+					hint.textContent = "Camera access is required to scan your document. Please allow access and try again.";
+					return;
+				}
+				fileInput.click();
+			});
+			if (selfie) this.runSelfieAutoCapture(video, hint, onCapture, face);
+			else {
+				this.runDocumentAutoCapture(video, hint, doc, strictDoc, onCapture);
+				if (!strictDoc) this.footer.appendChild(this.button("Capture", onCapture));
+			}
+		} else if (strictDoc) {
+			this.body.appendChild(this.el("div", {
+				class: "arkyc-badge err",
+				html: "!"
+			}));
+			this.body.appendChild(this.el("p", {
+				class: "arkyc-p",
+				text: "This step needs a working camera to scan your document. Please retry on a device with a camera."
+			}));
+		} else {
+			const upload = this.button("Upload photo", () => fileInput.click());
+			this.footer.appendChild(upload);
+		}
+		if (allowSkip) {
+			const skip = this.button("Skip (demo)", () => this.handlers.onImage(null));
+			skip.classList.add("arkyc-btn-ghost");
+			this.footer.appendChild(skip);
+		}
+	}
+	/**
+	* Run `cb` once the live camera feed appears (the video has frames). The
+	* detection model may still be downloading at that point, so callers use this
+	* to replace the "starting camera" hint with a neutral one.
+	*
+	* @param video
+	* @param cb
+	*/
+	onCameraLive(video, cb) {
+		if ((video.readyState ?? 0) >= 2) {
+			cb();
+			return;
+		}
+		video.addEventListener("playing", cb, { once: true });
+	}
+	/**
+	* Document capture: detect a real, well-framed, in-focus document (edge
+	* projection) and auto-grab only once it's been held steady. Falls back to the
+	* brightness/glare heuristic when the detector can't run.
+	*
+	* @param video
+	* @returns
+	*/
+	runDocumentAutoCapture(video, hint, doc, strict, capture) {
+		const onNoDetector = () => {
+			if (strict) {
+				hint.textContent = "Document scanning isn’t available on this device.";
+				return;
+			}
+			this.runDocumentBrightnessCapture(video, hint, doc, capture);
+		};
+		const analyzer = this.docAnalyzer;
+		if (!analyzer) return onNoDetector();
+		hint.textContent = "Starting camera…";
+		let cancelled = false;
+		let modelReady = false;
+		this.cleanups.push(() => {
+			cancelled = true;
+		});
+		this.onCameraLive(video, () => {
+			if (!cancelled && !modelReady) hint.textContent = "Getting ready…";
+		});
+		analyzer.ready().then((ok) => {
+			modelReady = true;
+			if (cancelled) return;
+			if (!ok) {
+				onNoDetector();
+				return;
+			}
+			let goodStreak = 0;
+			let fillEma = null;
+			let edgeEma = null;
+			const ema = (prev, next) => prev == null ? next : prev * .6 + next * .4;
+			const timer = setInterval(() => {
+				const sample = analyzer.analyze(video);
+				if (!sample) return;
+				fillEma = ema(fillEma, sample.fill);
+				edgeEma = ema(edgeEma, sample.edgeStrength);
+				const { ready, hint: message } = documentGuidance({
+					...sample,
+					fill: fillEma,
+					edgeStrength: edgeEma
+				}, this.docTuning);
+				hint.textContent = message;
+				doc.setFrame(sample.present ? sample.rect : null);
+				doc.setQuality(ready ? "good" : sample.present ? "wait" : "bad");
+				goodStreak = ready ? goodStreak + 1 : Math.max(0, goodStreak - 1);
+				if (goodStreak >= this.docTuning.hold) {
+					clearInterval(timer);
+					doc.setQuality("good");
+					capture();
+				}
+			}, 250);
+			this.timers.push(timer);
+		});
+	}
+	/**
+	* Coarse fallback: brightness/glare heuristic, used when detection can't run.
+	*
+	* @param video
+	* @param hint
+	* @param doc
+	*/
+	runDocumentBrightnessCapture(video, hint, doc, capture) {
+		let goodStreak = 0;
+		const timer = setInterval(() => {
+			const quality = this.camera.sampleQuality(video);
+			if (!quality) return;
+			if (quality.tooDark) {
+				hint.textContent = "Too dark — find better lighting";
+				goodStreak = 0;
+				doc.setQuality("bad");
+			} else if (quality.glare) {
+				hint.textContent = "Reduce glare on the document";
+				goodStreak = 0;
+				doc.setQuality("bad");
+			} else {
+				hint.textContent = "Looks good — hold steady";
+				goodStreak += 1;
+				doc.setQuality("good");
+			}
+			if (goodStreak >= 5) {
+				clearInterval(timer);
+				capture();
+			}
+		}, 300);
+		this.timers.push(timer);
+	}
+	/**
+	* Selfie capture: when face detection is available, auto-grab once a centred
+	* face is held steady. Falls back to a brightness hint (manual capture) when
+	* the detector can't load (unsupported browser / offline / test host).
+	*
+	* @param video
+	* @param hint
+	* @param capture
+	* @returns
+	*/
+	runSelfieAutoCapture(video, hint, capture, face) {
+		const analyzer = this.analyzer;
+		const addManualCapture = () => this.footer.appendChild(this.button("Capture", capture));
+		if (!analyzer) {
+			hint.textContent = "Center your face, then capture";
+			addManualCapture();
+			return;
+		}
+		hint.textContent = "Starting camera…";
+		let cancelled = false;
+		let modelReady = false;
+		this.cleanups.push(() => {
+			cancelled = true;
+		});
+		this.onCameraLive(video, () => {
+			if (!cancelled && !modelReady) hint.textContent = "Getting ready…";
+		});
+		analyzer.ready().then((ok) => {
+			modelReady = true;
+			if (cancelled) return;
+			if (!ok) {
+				hint.textContent = "Center your face, then capture";
+				addManualCapture();
+				return;
+			}
+			const need = 4;
+			let streak = 0;
+			const timer = setInterval(() => {
+				const sample = analyzer.analyze(video);
+				if (!sample || !sample.present) {
+					hint.textContent = "Position your face in the circle";
+					streak = 0;
+					face.setState("wait");
+					face.setProgress(0);
+					return;
+				}
+				if (isSelfieReady(sample, this.tuning)) {
+					hint.textContent = "Hold still…";
+					streak += 1;
+					face.setState("good");
+					face.setProgress(streak / need);
+				} else {
+					hint.textContent = sample.scale <= this.tuning.selfieMinScale ? "Move a little closer" : "Center your face";
+					streak = 0;
+					face.setState("wait");
+					face.setProgress(0);
+				}
+				if (streak >= need) {
+					clearInterval(timer);
+					face.setState("done");
+					face.setProgress(1);
+					capture();
+				}
+			}, 180);
+			this.timers.push(timer);
+		});
+	}
+	/**
+	* Guided active-liveness screen: live front-camera preview, a recorded video,
+	* and a sequence of challenge prompts the user advances through. The performed
+	* sequence (the prompts shown, in order) is submitted for the driver to verify.
+	*
+	* @param video
+	* @returns
+	*/
+	renderActiveLiveness(challenges, allowSkip, requireLiveCamera) {
+		this.body.appendChild(this.el("h2", {
+			class: "arkyc-h",
+			text: "Liveness check"
+		}));
+		const prompt = this.el("p", {
+			class: "arkyc-p",
+			text: "Follow the on-screen prompts. Keep your face centred in the circle."
+		});
+		this.body.appendChild(prompt);
+		if (!this.camera.supported || !this.camera.canRecord) {
+			if (requireLiveCamera) {
+				this.body.appendChild(this.el("div", {
+					class: "arkyc-badge err",
+					html: "!"
+				}));
+				prompt.textContent = "This check needs camera access on a supported device. Please retry on a device with a working camera.";
+				if (allowSkip) {
+					const skip = this.button("Skip (demo)", () => this.handlers.onActiveLiveness(null, challenges));
+					skip.classList.add("arkyc-btn-ghost");
+					this.footer.appendChild(skip);
+				}
+				return;
+			}
+			const finish = this.button("I performed the steps", () => this.handlers.onActiveLiveness(null, challenges));
+			this.footer.appendChild(finish);
+			if (allowSkip) {
+				const skip = this.button("Skip (demo)", () => this.handlers.onActiveLiveness(null, challenges));
+				skip.classList.add("arkyc-btn-ghost");
+				this.footer.appendChild(skip);
+			}
+			return;
+		}
+		const video = this.el("video", { class: "arkyc-preview selfie" });
+		const face = this.buildFaceStage(video);
+		const dots = this.buildDots(challenges.length);
+		if (challenges.length > 1) this.body.appendChild(dots.el);
+		this.body.appendChild(face.stage);
+		let recording = null;
+		let index = 0;
+		const performed = [];
+		let detector = makeChallengeDetector(challenges[0] ?? "blink", this.tuning);
+		const showPrompt = (done = false) => {
+			const challenge = challenges[index];
+			if (!challenge) {
+				prompt.textContent = "Hold still…";
+				return;
+			}
+			prompt.textContent = done ? `✓ ${CHALLENGE_LABELS[challenge]}` : `Step ${index + 1} of ${challenges.length}: ${CHALLENGE_LABELS[challenge]}`;
+		};
+		const armChallenge = () => {
+			face.setCue(challenges[index] ?? null);
+			face.setState("wait");
+			face.setProgress(0);
+			dots.setActive(index);
+		};
+		const finish = () => {
+			advance.setAttribute("disabled", "true");
+			this.camera.grabFrame(video).then((selfie) => Promise.resolve(recording?.stop() ?? Promise.resolve(null)).then((blob) => this.handlers.onActiveLiveness(blob, performed, selfie)));
+		};
+		const advanceStep = () => {
+			if (index >= challenges.length) return;
+			const current = challenges[index];
+			if (current) performed.push(current);
+			dots.markDone(index);
+			index += 1;
+			if (index >= challenges.length) {
+				finish();
+				return;
+			}
+			detector = makeChallengeDetector(challenges[index], this.tuning);
+			showPrompt();
+			armChallenge();
+			if (index === challenges.length - 1) advance.textContent = "Finish";
+		};
+		const advance = this.button("Next", () => advanceStep());
+		if (challenges.length <= 1) advance.textContent = "Finish";
+		let manualShown = false;
+		const showManualAdvance = () => {
+			if (manualShown) return;
+			manualShown = true;
+			this.footer.appendChild(advance);
+		};
+		this.camera.start(video, "user").then((stream) => {
+			recording = this.camera.recordStart(stream);
+			showPrompt();
+			armChallenge();
+			const analyzer = this.analyzer;
+			if (!analyzer) {
+				showManualAdvance();
+				return;
+			}
+			let cancelled = false;
+			this.cleanups.push(() => {
+				cancelled = true;
+			});
+			analyzer.ready().then((ok) => {
+				if (cancelled) return;
+				if (!ok) {
+					showManualAdvance();
+					return;
+				}
+				let flashing = false;
+				const timer = setInterval(() => {
+					if (index >= challenges.length) {
+						clearInterval(timer);
+						return;
+					}
+					if (flashing) return;
+					const sample = analyzer.analyze(video);
+					if (!sample) return;
+					const hit = detector.feed(sample);
+					face.setProgress(detector.progress);
+					if (hit) {
+						face.setState("done");
+						showPrompt(true);
+						flashing = true;
+						const to = setTimeout(() => {
+							flashing = false;
+							advanceStep();
+						}, 650);
+						this.cleanups.push(() => clearTimeout(to));
+					} else face.setState(detector.progress > 0 ? "good" : "wait");
+				}, 160);
+				this.timers.push(timer);
+			});
+		}).catch(() => {
+			face.stage.classList.add("arkyc-hidden");
+			if (requireLiveCamera) {
+				prompt.textContent = "Camera access is required to continue. Please allow access and try again.";
+				return;
+			}
+			this.handlers.onActiveLiveness(null, challenges);
+		});
+		if (allowSkip) {
+			const skip = this.button("Skip (demo)", () => this.handlers.onActiveLiveness(null, challenges));
+			skip.classList.add("arkyc-btn-ghost");
+			this.footer.appendChild(skip);
+		}
+	}
+	/**
+	* Build the circular selfie/liveness preview overlay: an SVG progress ring, a
+	* gesture-cue layer, and a success checkmark — driven via the returned handles.
+	*
+	* @param video
+	* @returns
+	*/
+	buildFaceStage(video) {
+		const stage = this.el("div", { class: "arkyc-stage" });
+		stage.setAttribute("data-state", "wait");
+		stage.appendChild(video);
+		const ring = this.el("div", {
+			class: "arkyc-ring",
+			html: "<svg viewBox=\"0 0 100 100\"><circle class=\"arkyc-ring-track\" cx=\"50\" cy=\"50\" r=\"46\"/><circle class=\"arkyc-ring-arc\" cx=\"50\" cy=\"50\" r=\"46\"/></svg>"
+		});
+		stage.appendChild(ring);
+		const cue = this.el("div", { class: "arkyc-cue" });
+		stage.appendChild(cue);
+		stage.appendChild(this.el("div", {
+			class: "arkyc-check",
+			html: CHECK_ICON
+		}));
+		const arc = ring.querySelector(".arkyc-ring-arc");
+		const circumference = 2 * Math.PI * 46;
+		if (arc) {
+			arc.style.strokeDasharray = String(circumference);
+			arc.style.strokeDashoffset = String(circumference);
+		}
+		return {
+			stage,
+			setProgress: (p) => {
+				if (arc) arc.style.strokeDashoffset = String(circumference * (1 - Math.max(0, Math.min(1, p))));
+			},
+			setState: (state) => stage.setAttribute("data-state", state),
+			setCue: (challenge) => {
+				cue.className = "arkyc-cue" + (challenge ? ` show arkyc-cue-${challenge}` : "");
+				cue.innerHTML = challenge ? CUE_ICONS[challenge] : "";
+			}
+		};
+	}
+	/**
+	* Build the liveness step-progress dots (one per challenge).
+	*
+	* @param video
+	* @param hint
+	* @param doc
+	*/
+	buildDots(count) {
+		const el = this.el("div", { class: "arkyc-dots" });
+		const dots = [];
+		for (let i = 0; i < count; i += 1) {
+			const dot = this.el("div", { class: "arkyc-dot" });
+			dots.push(dot);
+			el.appendChild(dot);
+		}
+		return {
+			el,
+			setActive: (index) => dots.forEach((d, i) => d.classList.toggle("active", i === index && !d.classList.contains("done"))),
+			markDone: (index) => {
+				const d = dots[index];
+				if (d) {
+					d.classList.remove("active");
+					d.classList.add("done");
+				}
+			}
+		};
+	}
+	/**
+	* Build the document preview overlay: a fixed card-shaped alignment guide
+	* (corner brackets + border) with an animated scan line. The guide is a target,
+	* not a tracker — it stays put so the user aligns the card to it; detection only
+	* tints it for quality and brightens it once a document is in view.
+	*
+	* @param video
+	* @returns
+	*/
+	buildDocStage(video) {
+		const stage = this.el("div", { class: "arkyc-doc" });
+		stage.setAttribute("data-q", "wait");
+		stage.appendChild(video);
+		const frame = this.el("div", { class: "arkyc-doc-frame" });
+		for (const corner of [
+			"tl",
+			"tr",
+			"bl",
+			"br"
+		]) frame.appendChild(this.el("span", { class: `arkyc-corner ${corner}` }));
+		frame.appendChild(this.el("div", { class: "arkyc-scan" }));
+		stage.appendChild(frame);
+		return {
+			stage,
+			setQuality: (quality) => stage.setAttribute("data-q", quality),
+			setFrame: (rect) => stage.setAttribute("data-detected", rect ? "true" : "false")
+		};
+	}
+	renderProcessing(label) {
+		this.body.appendChild(this.el("div", { class: "arkyc-spinner" }));
+		this.body.appendChild(this.el("p", {
+			class: "arkyc-p",
+			text: label
+		}));
+	}
+	renderResult(decision, errorMessage, opts = {}) {
+		if (errorMessage) {
+			this.body.appendChild(this.el("div", {
+				class: "arkyc-badge err",
+				html: "!"
+			}));
+			this.body.appendChild(this.el("h2", {
+				class: "arkyc-h",
+				text: "Something went wrong"
+			}));
+			this.body.appendChild(this.el("p", {
+				class: "arkyc-p",
+				text: errorMessage
+			}));
+		} else if (opts.terminal) {
+			const n = TERMINAL_NOTICE[opts.status ?? "expired"] ?? EXPIRED_NOTICE;
+			this.body.appendChild(this.el("div", {
+				class: `arkyc-badge ${n.cls}`,
+				text: n.icon
+			}));
+			this.body.appendChild(this.el("h2", {
+				class: "arkyc-h",
+				text: n.title
+			}));
+			this.body.appendChild(this.el("p", {
+				class: "arkyc-p",
+				text: n.copy
+			}));
+			this.footer.appendChild(this.button("Close", () => this.handlers.onClose()));
+			return;
+		} else {
+			const map = {
+				approved: {
+					cls: "ok",
+					icon: "✓",
+					title: "Verified",
+					copy: "Your identity has been verified."
+				},
+				requires_review: {
+					cls: "warn",
+					icon: "⏳",
+					title: "Under review",
+					copy: "Your verification is being reviewed. We will be in touch shortly."
+				},
+				rejected: {
+					cls: "err",
+					icon: "✕",
+					title: "Not verified",
+					copy: "We could not verify your identity. Please try again."
+				}
+			};
+			const r = map[decision ?? "requires_review"] ?? map.requires_review;
+			this.body.appendChild(this.el("div", {
+				class: `arkyc-badge ${r.cls}`,
+				text: r.icon
+			}));
+			this.body.appendChild(this.el("h2", {
+				class: "arkyc-h",
+				text: r.title
+			}));
+			this.body.appendChild(this.el("p", {
+				class: "arkyc-p",
+				text: r.copy
+			}));
+		}
+		this.footer.appendChild(this.button("Done", () => this.handlers.onAcknowledge()));
+	}
+	button(label, onClick, extraClass) {
+		const cls = extraClass ? `arkyc-btn ${extraClass}` : "arkyc-btn";
+		const btn = this.el("button", {
+			class: cls,
+			text: label
+		});
+		let fired = false;
+		btn.addEventListener("click", () => {
+			if (fired) return;
+			fired = true;
+			btn.setAttribute("disabled", "true");
+			btn.classList.add("arkyc-busy");
+			onClick();
+		});
+		return btn;
+	}
+	clear(node) {
+		while (node.firstChild) node.removeChild(node.firstChild);
+	}
+	el(tag, props = {}) {
+		const node = this.doc.createElement(tag);
+		for (const [key, value] of Object.entries(props)) {
+			if (value == null) continue;
+			if (key === "class") node.className = value;
+			else if (key === "text") node.textContent = value;
+			else if (key === "html") node.innerHTML = value;
+			else if (key === "value" || key === "src" || key === "type" || key === "accept" || key === "placeholder") node[key] = value;
+			else node.setAttribute(key, value);
+		}
+		return node;
+	}
+};
+//#endregion
+export { WidgetView };
+
+//# sourceMappingURL=ui.mjs.map