@incodetech/web 0.0.0-dev-20260729-9e7b030a → 0.0.0-dev-20260729-a31df3b7

package/dist/flow/styles.css

@@ -6900,6 +6900,10 @@
   display: flex;
 }
 
+.IncodeIdProcessingLayout.IncodeIdProcessingLayoutNoImage .IncodeIdProcessingBottomArea {
+  justify-content: flex-end;
+}
+
 .IncodeIdProcessingLayout .IncodeAnalyzingContent {
   flex-direction: column;
   align-items: center;
@@ -9994,6 +9998,10 @@
   opacity: 1;
 }
 
+.IncodeVsSelfieManualCapture {
+  pointer-events: auto;
+}
+
 .IncodeVideoSelfieOverlay .IncodeVsSelfieMask {
   border-radius: var(--radius-full, var(--border-radius-full));
   z-index: var(--video-selfie-mask-z-index);
@@ -10046,6 +10054,7 @@
 
 .IncodeVsIdMask {
   z-index: 50;
+  padding-inline: var(--spacing-24);
   justify-content: center;
   align-items: center;
   display: flex;
@@ -10053,6 +10062,15 @@
   inset: 0;
 }
 
+.IncodeVsIdMask .IncodeVsIdManualCapture {
+  bottom: var(--spacing-32);
+  z-index: 60;
+  pointer-events: auto;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .IncodeVsIdMask .IncodeIdCaptureNotification {
   top: calc(var(--spacing-24) + var(--video-selfie-stepper-height) + var(--spacing-16));
 }

package/dist/geolocation/geolocation.es.js

@@ -1,12 +1,12 @@
-import { i as useTranslation, r as Trans } from "../uiConfig-Ar3UWfPc.js";
+import { i as useTranslation, r as Trans } from "../uiConfig-B5ASPUL4.js";
 import { S as k, v as u } from "../vendor-preact-mvwZ8mJj.js";
-import { _ as useModuleTerminalCallbacks, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, y as useManager } from "../incodeComponent-CaVm81Om.js";
-import { t as Spacer } from "../spacer-D52odyVb.js";
-import { r as Button } from "../incode-logo-B44XBmUF.js";
-import { t as VerificationResult } from "../verificationResult-Bn1_erQu.js";
-import { t as ConnectionError } from "../connectionError-DbDaaT-B.js";
+import { _ as useModuleTerminalCallbacks, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, y as useManager } from "../incodeComponent-OSkicUIt.js";
+import { t as Spacer } from "../spacer-Dv_GLIg1.js";
+import { r as Button } from "../incode-logo-DfmsgFwc.js";
+import { t as VerificationResult } from "../verificationResult-7dnG2xo-.js";
+import { t as ConnectionError } from "../connectionError-DgH_z5kf.js";
 import { t as NumberedStep } from "../numberedStep-DUs77Gy3.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-B02hDGir.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BE4EvBi8.js";
 import { getBrowser, getDeviceClass } from "@incodetech/core/device";
 import { createGeolocationManager } from "@incodetech/core/geolocation";
 //#region src/modules/geolocation/LocationActiveIcon.tsx

package/dist/government-validation/government-validation.es.js

@@ -1,12 +1,12 @@
-import { i as useTranslation } from "../uiConfig-Ar3UWfPc.js";
+import { i as useTranslation } from "../uiConfig-B5ASPUL4.js";
 import { S as k, v as u } from "../vendor-preact-mvwZ8mJj.js";
-import { _ as useModuleTerminalCallbacks, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, y as useManager } from "../incodeComponent-CaVm81Om.js";
-import { t as Spacer } from "../spacer-D52odyVb.js";
-import "../extensibility-DtlPhQNL.js";
-import { t as AutoFocusTitle } from "../autoFocusTitle-CvZ2oKGw.js";
-import { t as VerificationResult } from "../verificationResult-Bn1_erQu.js";
-import { t as OtpInput } from "../otpInput-Dju8N2oD.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-B02hDGir.js";
+import { _ as useModuleTerminalCallbacks, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, y as useManager } from "../incodeComponent-OSkicUIt.js";
+import { t as Spacer } from "../spacer-Dv_GLIg1.js";
+import "../extensibility-D4tu352m.js";
+import { t as AutoFocusTitle } from "../autoFocusTitle-D1GHOAjH.js";
+import { t as VerificationResult } from "../verificationResult-7dnG2xo-.js";
+import { t as OtpInput } from "../otpInput-BXwcWbC7.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BE4EvBi8.js";
 import { createGovernmentValidationManager } from "@incodetech/core/government-validation";
 //#region src/modules/government-validation/governmentIncodeLogo.tsx
 var VerifiedByGovIncodeLogo = () => {

package/dist/{homeScreen-ayC3SHjN.js → homeScreen-oanS5coR.js}

@@ -1,10 +1,10 @@
-import { i as useTranslation, l as getLanguageEmoji, n as useUiConfig, u as supportedLanguages } from "./uiConfig-Ar3UWfPc.js";
+import { i as useTranslation, l as getLanguageEmoji, n as useUiConfig, u as supportedLanguages } from "./uiConfig-B5ASPUL4.js";
 import { _ as y, d as T, l as A, p as d, v as u } from "./vendor-preact-mvwZ8mJj.js";
-import { t as Spacer } from "./spacer-D52odyVb.js";
-import { r as Button } from "./incode-logo-B44XBmUF.js";
-import { t as Modal } from "./modal-B9tF0ldx.js";
-import { t as DropdownComposed } from "./dropdownComposed-B6FF4cVZ.js";
-import "./dropdownComposed-D_Nb9dcy.js";
+import { t as Spacer } from "./spacer-Dv_GLIg1.js";
+import { r as Button } from "./incode-logo-DfmsgFwc.js";
+import { t as Modal } from "./modal-DtPq9tRg.js";
+import { t as DropdownComposed } from "./dropdownComposed-Dlwcx-aR.js";
+import "./dropdownComposed-D5VwrEX-.js";
 //#region src/shared/homeScreen/language.ts
 function capitalizeLabel(text, locale) {
 	const [firstCharacter, ...rest] = Array.from(text);

package/dist/{icons-CnHH5IUi.js → icons-B4dc7Tc_.js}

@@ -1,5 +1,5 @@
 import { m as g, v as u } from "./vendor-preact-mvwZ8mJj.js";
-import "./incode-logo-B44XBmUF.js";
+import "./incode-logo-DfmsgFwc.js";
 import "./successIcon-Bj8Y9CuI.js";
 //#region src/shared/icons/warningIcon.tsx
 var WarningIcon = ({ size = 32 }) => {

package/dist/id/id.es.js

@@ -1,22 +1,22 @@
-import { i as useTranslation } from "../uiConfig-Ar3UWfPc.js";
+import { i as useTranslation } from "../uiConfig-B5ASPUL4.js";
 import { S as k, _ as y, c as z, d as T, l as A, o as P, p as d, v as u } from "../vendor-preact-mvwZ8mJj.js";
-import { _ as useModuleTerminalCallbacks, d as useTimeoutHandle, l as TransitionSpinner, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, y as useManager } from "../incodeComponent-CaVm81Om.js";
-import { i as preloadAnimations, r as AnimatedAsset, s as Asset, t as Spacer, u as cn } from "../spacer-D52odyVb.js";
-import { n as Title, t as Spinner } from "../spinner-CEzuAsxR.js";
-import { n as ErrorIcon, r as Button } from "../incode-logo-B44XBmUF.js";
-import { a as IdNoAttempts, b as ProgressBar, c as useIdExperiment, i as Capture, l as CaptureFrame, n as Chooser, o as IdExpired, r as Tutorial, s as IdError, t as FlipAnimation } from "../extensibility-DtlPhQNL.js";
-import { t as Processing } from "../processing-DIUdk0S7.js";
-import { r as LockIcon, u as ChevronRightIcon } from "../icons-CnHH5IUi.js";
+import { _ as useModuleTerminalCallbacks, d as useTimeoutHandle, l as TransitionSpinner, o as Page, r as withStandaloneModuleBootstrap, t as IncodeComponent, y as useManager } from "../incodeComponent-OSkicUIt.js";
+import { i as preloadAnimations, r as AnimatedAsset, s as Asset, t as Spacer, u as cn } from "../spacer-Dv_GLIg1.js";
+import { n as Title, t as Spinner } from "../spinner-9U-97vN9.js";
+import { n as ErrorIcon, r as Button } from "../incode-logo-DfmsgFwc.js";
+import { a as IdNoAttempts, b as ProgressBar, c as useIdExperiment, i as Capture, l as CaptureFrame, n as Chooser, o as IdExpired, r as Tutorial, s as IdError, t as FlipAnimation } from "../extensibility-D4tu352m.js";
+import { t as Processing } from "../processing-v72-8SOm.js";
+import { r as LockIcon, u as ChevronRightIcon } from "../icons-B4dc7Tc_.js";
 import { t as SuccessIcon } from "../successIcon-Bj8Y9CuI.js";
-import { i as ErrorContent } from "../tutorial-CiSCBe8S.js";
-import { t as Permissions } from "../permissions-CVWfTL-t.js";
-import { t as PdfViewer } from "../pdfViewer-CvCy4uwi.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-B02hDGir.js";
+import { i as ErrorContent } from "../tutorial-DmfT2_ZD.js";
+import { n as Permissions } from "../manualCaptureButton-sP8OSo15.js";
+import { t as PdfViewer } from "../pdfViewer-CYu11qlC.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BE4EvBi8.js";
 import { t as SvgIdBackOfCard } from "../id-back-of-card-DO593HH8.js";
 import { t as SvgIdBackOfCardVertical } from "../id-back-of-card-vertical-DArEQ0hE.js";
 import { t as SvgIdFrontOfCard } from "../id-front-of-card-Bcit7Pnq.js";
 import { t as SvgIdFrontOfCardVertical } from "../id-front-of-card-vertical-Bcr-KXcl.js";
-import { t as Tabs } from "../tabs-CbAXowHB.js";
+import { t as Tabs } from "../tabs-DLNEOL_N.js";
 import { createIdCaptureManager } from "@incodetech/core/id";
 //#region src/shared/fonts/preloadDisplayFont.ts
 function preloadDisplayFont() {
@@ -224,7 +224,7 @@ var IdFlipTransition = ({ manager, state }) => {
 	const { params } = useIdExperiment({ key: "flipInCapturedState" });
 	const flipInCapturedState = params.flipInCaptureStateBehavior === "test";
 	const direction = state.status === "frontFinished" ? "toBack" : "toFront";
-	if (flipInCapturedState && state.mode !== "passport") return /* @__PURE__ */ u(IdFlipCard, {
+	if (flipInCapturedState && state.mode !== "passport" && state.previewImageUrl) return /* @__PURE__ */ u(IdFlipCard, {
 		manager,
 		direction,
 		imageUrl: state.previewImageUrl,
@@ -1092,9 +1092,9 @@ function preloadIdTutorialAssets() {
 		"id.tutorial.back",
 		"id.tutorial.passport"
 	]);
-	import("../id-tutorial-B5rsdHAH.js");
-	import("../back-tutorial-v9Hk3XFo.js");
-	import("../passport-tutorial-CDUEHwmA.js");
+	import("../id-tutorial-BOOsXlAJ.js");
+	import("../back-tutorial-BHyRHyET.js");
+	import("../passport-tutorial-CeSup6m9.js");
 	import("../id-back-of-card-DO593HH8.js").then((n) => n.n);
 	import("../id-back-of-card-vertical-DArEQ0hE.js").then((n) => n.n);
 	import("../id-front-of-card-Bcit7Pnq.js").then((n) => n.n);
@@ -1102,7 +1102,7 @@ function preloadIdTutorialAssets() {
 }
 //#endregion
 //#region src/modules/id/id.tsx
-var MandatoryConsent = z(() => import("../mandatoryConsent-CfBlj5BM.js").then((module) => ({ default: module.MandatoryConsent })));
+var MandatoryConsent = z(() => import("../mandatoryConsent-5xeUtj4a.js").then((module) => ({ default: module.MandatoryConsent })));
 var IdContent = ({ config, manager: externalManager, onFinish, onError }) => {
 	usePreloadDisplayFont();
 	const { t } = useTranslation();

package/dist/id/styles.css

@@ -869,6 +869,10 @@
   display: flex;
 }
 
+.IncodeIdProcessingLayout.IncodeIdProcessingLayoutNoImage .IncodeIdProcessingBottomArea {
+  justify-content: flex-end;
+}
+
 .IncodeIdProcessingLayout .IncodeAnalyzingContent {
   flex-direction: column;
   align-items: center;

package/dist/id-selfie-flow/id-selfie-flow.es.js

@@ -0,0 +1,239 @@
+import { i as useTranslation } from "../uiConfig-B5ASPUL4.js";
+import { _ as y, d as T, p as d, v as u } from "../vendor-preact-mvwZ8mJj.js";
+import { _ as useModuleTerminalCallbacks, a as TerminalErrorPage, l as TransitionSpinner, o as Page, t as IncodeComponent, y as useManager } from "../incodeComponent-OSkicUIt.js";
+import { n as Title } from "../spinner-9U-97vN9.js";
+import { a as CameraView, r as preloadCaptureAnimations } from "../manualCaptureButton-CuYBkH_6.js";
+import { n as Permissions } from "../manualCaptureButton-sP8OSo15.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BE4EvBi8.js";
+import { a as IdFlipModal, c as VideoSelfieTutorial, i as IdMask, l as useVideoSelfiePermissions, n as SwitchingCameraScreen, o as preloadIdFlipAnimation, r as StepsHeader, s as SelfieMask, t as VideoSelfieFinalSuccessScreen } from "../finalSuccessScreen-BzfPc7PE.js";
+import { createIdSelfieFlowManager, resolveIdSelfieFlowConfig, warmupIdSelfieFlowWasm } from "@incodetech/core/id-selfie-flow";
+import { facingModeForStep } from "@incodetech/core/video-selfie";
+//#region src/modules/id-selfie-flow/id-selfie-flow.tsx
+/**
+* @module @incodetech/web/id-selfie-flow
+*
+* ID + Selfie flow UI (PoC) — the REGULAR onboarding capture pipeline (ID
+* front/back → `process/id`, selfie → `process/face`) presented through the
+* Video Selfie continuous-camera UX: one session stream that follows the
+* camera between steps and is never interrupted. Nothing is recorded and no
+* microphone access is requested.
+*
+* @example Web Component usage
+* ```html
+* <script type="module">
+*   import '@incodetech/web/id-selfie-flow';
+*   import { setup } from '@incodetech/core';
+*   setup({ apiURL: 'https://api.example.com', token: 'your-token' });
+*   const el = document.querySelector('incode-id-selfie-flow');
+*   el.config = {};
+*   el.onFinish = () => console.log('done');
+* <\/script>
+* <incode-id-selfie-flow></incode-id-selfie-flow>
+* ```
+*
+* @see {@link createIdSelfieFlowManager} for headless usage.
+*/
+var DEFAULT_STEPS = [
+	"frontId",
+	"backId",
+	"selfie"
+];
+/**
+* Maps the live detection feedback to the selfie mask's visual state (same
+* mapping as the Video Selfie module).
+*/
+var getSelfieVariant = (detectionStatus) => {
+	switch (detectionStatus) {
+		case "success": return "success";
+		case "error": return "error";
+		case "capturing": return "processing";
+		default: return "idle";
+	}
+};
+/** Full-screen spinner while `process/id` validates the captured document. */
+var ProcessingIdScreen = () => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ u(Page, {
+		hideHeader: true,
+		children: /* @__PURE__ */ u(TransitionSpinner, { spinnerConfig: { title: t("common.processing") } })
+	});
+};
+var IdSelfieFlowContent = ({ config, onFinish, onError }) => {
+	const { t } = useTranslation();
+	const [state, manager] = useManager(() => createIdSelfieFlowManager({ config }), { autoLoad: false });
+	const [phase, setPhase] = d(config?.showTutorials ? "tutorial" : "permissions");
+	const { permissionStatus, manager: permissionsManager } = useVideoSelfiePermissions({
+		enabled: phase === "permissions",
+		onGranted: () => setPhase("capture"),
+		onClose: () => onError?.(void 0),
+		requestAudio: false
+	});
+	const steps = T(() => config?.steps ?? DEFAULT_STEPS, [config]);
+	const hasIdSteps = steps.includes("frontId") || steps.includes("backId");
+	y(() => {
+		if ((phase === "tutorial" || phase === "permissions") && config) {
+			warmupIdSelfieFlowWasm(config);
+			if (hasIdSteps) {
+				preloadCaptureAnimations();
+				preloadIdFlipAnimation();
+			}
+		}
+	}, [
+		phase,
+		config,
+		hasIdSteps
+	]);
+	y(() => {
+		if (phase !== "capture") return;
+		manager.start();
+	}, [manager, phase]);
+	useModuleTerminalCallbacks({
+		status: state.status,
+		onFinish: () => onFinish?.(state.finishStatus)
+	});
+	const step = state.step ?? "selfie";
+	if (phase === "tutorial") return /* @__PURE__ */ u(VideoSelfieTutorial, {
+		steps,
+		copy: {
+			title: "Verify your identity",
+			subtitle: "You'll be requested to:",
+			permissionsLabel: "Allow camera access",
+			startLabel: "Start verification"
+		},
+		onStart: () => setPhase("permissions")
+	});
+	if (phase === "permissions") return /* @__PURE__ */ u(Permissions, {
+		manager: permissionsManager,
+		permissionStatus
+	});
+	if (state.status === "finished" || state.status === "closed") return null;
+	if (state.status === "error") return /* @__PURE__ */ u(TerminalErrorPage, {
+		message: state.error,
+		onRetry: () => manager.retry()
+	});
+	if (state.status === "processingId" || state.status === "finishing") return /* @__PURE__ */ u(ProcessingIdScreen, {});
+	if (state.status === "success") return /* @__PURE__ */ u(VideoSelfieFinalSuccessScreen, {});
+	if (state.status === "switchingCamera") return /* @__PURE__ */ u(SwitchingCameraScreen, {
+		steps,
+		currentIndex: state.stepIndex,
+		facing: facingModeForStep(state.step ?? "selfie")
+	});
+	const isFrontCamera = facingModeForStep(step) === "user";
+	const detectionStatus = state.detectionStatus;
+	const idMode = step === "backId" ? "back" : "front";
+	const stepLabel = t(`videoSelfie.step.${step}`);
+	const selfieMessage = () => {
+		if (detectionStatus === "success") return t("videoSelfie.lookingGood");
+		if (detectionStatus === "capturing") return t("common.processing");
+		if (detectionStatus === "error") return t("common.tryAgain");
+		switch (detectionStatus) {
+			case "tooFar": return t("notifications.moveCloser");
+			case "tooClose": return t("notifications.moveAway");
+			case "blur": return t("notifications.onBlur");
+			case "faceMask": return t("notifications.mask");
+			case "lenses": return t("notifications.removeLenses");
+			case "eyesClosed": return t("notifications.eyesClosed");
+			case "headWear": return t("notifications.removeHeadwear");
+			default: return t("videoSelfie.lookCamera");
+		}
+	};
+	const idValidationMessage = () => {
+		switch (state.validationFailure) {
+			case "idTypeMismatch": return t("videoSelfie.idValidation.idTypeMismatch");
+			case "idScanFailed": return t("notifications.compareID.scanFailed");
+			default: return t("common.tryAgain");
+		}
+	};
+	const idFeedback = () => {
+		if (state.status === "validationFeedback" && state.validationFailure !== "selfieVerificationFailed") return {
+			variant: "error",
+			message: idValidationMessage()
+		};
+		if (detectionStatus === "capturing") return {
+			variant: "processing",
+			message: t("videoSelfie.processingStep")
+		};
+		if (detectionStatus === "success") return {
+			variant: "success",
+			message: t("videoSelfie.allGood")
+		};
+	};
+	const renderStepUi = () => {
+		if (state.status === "flippingId") return /* @__PURE__ */ u(IdFlipModal, { onComplete: () => manager.nextStep() });
+		return isFrontCamera ? /* @__PURE__ */ u(SelfieMask, {
+			variant: getSelfieVariant(detectionStatus),
+			message: selfieMessage(),
+			onManualCapture: state.manualCaptureAvailable ? () => manager.manualCapture() : void 0
+		}) : /* @__PURE__ */ u(IdMask, {
+			mode: idMode,
+			wrongSide: detectionStatus === "wrongSide",
+			feedback: idFeedback(),
+			orientation: state.orientation ?? "horizontal",
+			onManualCapture: state.manualCaptureAvailable ? () => manager.manualCapture() : void 0
+		});
+	};
+	return /* @__PURE__ */ u(Page, {
+		hideHeader: true,
+		hideFooterBranding: true,
+		className: "IncodeVideoSelfieCapturePage",
+		children: [/* @__PURE__ */ u(Title, {
+			className: "IncodeCaptureVisuallyHidden",
+			children: stepLabel
+		}), /* @__PURE__ */ u(CameraView, {
+			stream: state.stream,
+			mirrored: isFrontCamera,
+			children: /* @__PURE__ */ u("div", {
+				class: "IncodeVideoSelfieOverlay",
+				children: [/* @__PURE__ */ u(StepsHeader, {
+					steps,
+					currentIndex: state.stepIndex
+				}), renderStepUi()]
+			})
+		})]
+	});
+};
+/**
+* ID + Selfie flow UI component (PoC). Runs the regular ID + selfie capture
+* pipeline behind the Video Selfie continuous-camera UX.
+*
+* Config is resolved from the active session's FLOW configuration (the same
+* dashboard config the regular ID and SELFIE modules read — steps, attempts,
+* tutorial, selfie validations); any `config` prop values win over the
+* flow-derived ones.
+*
+* @see {@link createIdSelfieFlowManager} for headless usage.
+*/
+var IdSelfieFlow = ({ config, onFinish, onError }) => {
+	const [resolved, setResolved] = d({ status: "loading" });
+	y(() => {
+		const abortController = new AbortController();
+		setResolved({ status: "loading" });
+		resolveIdSelfieFlowConfig({
+			config,
+			signal: abortController.signal
+		}).then((resolvedConfig) => {
+			if (!abortController.signal.aborted) setResolved({
+				status: "ready",
+				config: resolvedConfig
+			});
+		}).catch((error) => {
+			if (!abortController.signal.aborted) setResolved({
+				status: "error",
+				error: String(error)
+			});
+		});
+		return () => abortController.abort();
+	}, [config]);
+	return /* @__PURE__ */ u(IncodeComponent, { children: [
+		resolved.status === "loading" && /* @__PURE__ */ u(TransitionSpinner, {}),
+		resolved.status === "error" && /* @__PURE__ */ u(TerminalErrorPage, { message: resolved.error }),
+		resolved.status === "ready" && /* @__PURE__ */ u(IdSelfieFlowContent, {
+			config: resolved.config,
+			onFinish,
+			onError
+		})
+	] });
+};
+registerIncodeModuleElement(IdSelfieFlow, "incode-id-selfie-flow");
+//#endregion
+export { IdSelfieFlow };