@incodetech/web 2.0.1 → 2.1.0-rc.0

package/dist/workflow/workflow.es.js

@@ -1,244 +1,330 @@
-import { n as e } from "../i18n-9s4OSqwi.js";
-import { _ as t, c as n, l as r, o as i, p as a, v as o } from "../vendor-preact-D6SntenC.js";
-import { t as s } from "../uiConfig-CwpQ-IM6.js";
-import { o as c } from "../hooks-BVnGysT7.js";
-import { t as l } from "../incodeComponent-C1o4M0ZK.js";
-import "../spinner-B4dcie2T.js";
-import { t as u } from "../transitionSpinner-PIEPU2Vx.js";
-import { t as d } from "../incodeModule-BqCjVgEI.js";
-import { a as f, g as p, i as m, m as h, s as g, t as _ } from "../useModuleLoader-BFiVA41N.js";
-import { resolveWasmConfig as v, upgradeToWasmHttpClient as y, warmupWasm as b } from "@incodetech/core/wasm";
-import { getDeviceClass as x } from "@incodetech/core/device";
-import { QrValidationError as S, refreshQrUrlUuid as C } from "@incodetech/core/session";
-import { createWorkflowManager as w } from "@incodetech/core/workflow";
+import { n as useTranslation, o as readStoredLanguage } from "../i18n-CoCO2ZuN.js";
+import { _ as y, c as z, l as A, o as P, p as d, v as u } from "../vendor-preact-DThS2ZQ_.js";
+import { t as setUiConfig } from "../uiConfig-D2_wawvr.js";
+import { c as useManager } from "../hooks-Da_yP_Dr.js";
+import { t as IncodeComponent } from "../incodeComponent-wfnHlnXx.js";
+import { t as TransitionSpinner } from "../transitionSpinner-DRRz-NV8.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BUDoTwT9.js";
+import { a as resolveApiKey, g as setupSDK, i as HEADLESS_WORKFLOW_MODULE_KEYS, l as LAZY_UI_MODULES, o as extractIncodeStatus, s as UnsupportedModule, t as useModuleLoader, v as fetchAndApplyTheme, y as TerminalErrorPage } from "../useModuleLoader-CeJ2jL25.js";
+import { resolveWasmConfig, upgradeToWasmHttpClient, warmupWasm } from "@incodetech/core/wasm";
+import { getDeviceClass } from "@incodetech/core/device";
+import { bootstrapSession, refreshQrUrlUuid } from "@incodetech/core/session";
+import { createWorkflowManager } from "@incodetech/core/workflow";
 //#region src/modules/workflow/workflowInit.ts
-var T = {
-	...g,
-	REDIRECT_TO_MOBILE: () => import("../redirectToMobile-C3k1gloW.js").then((e) => e.RedirectToMobile),
-	ID: () => import("../id-verification/id-verification.es.js").then((e) => e.IdVerification)
+var LAZY_WORKFLOW_MODULES = {
+	...LAZY_UI_MODULES,
+	REDIRECT_TO_MOBILE: () => import("../redirect-to-mobile/redirect-to-mobile.es.js").then((m) => m.RedirectToMobile),
+	ID: () => import("../id-verification/id-verification.es.js").then((m) => m.IdVerification),
+	IDENTITY_REUSE: () => import("../identity-reuse/identity-reuse.es.js").then((m) => m.IdentityReuse)
 };
-async function E() {
+async function fetchWorkflowTheme() {
 	try {
-		let e = await p();
+		const theme = await fetchAndApplyTheme();
 		return {
-			theme: e,
+			theme,
 			uiConfig: {
-				logoSrc: e.logo,
-				hideFooterBranding: e.hideFooterBranding
+				logoSrc: theme.logo,
+				hideFooterBranding: theme.hideFooterBranding
 			}
 		};
 	} catch {
 		return {};
 	}
 }
-function D(e = {}) {
-	return w({
-		customModuleCallback: e.customModuleCallback,
-		interviewId: e.interviewId,
-		isDesktop: e.isDesktop ?? x() === "desktop"
+function createWorkflowUIManager(options = {}) {
+	return createWorkflowManager({
+		customModuleCallback: options.customModuleCallback,
+		interviewId: options.interviewId,
+		isDesktop: options.isDesktop ?? getDeviceClass() === "desktop"
 	});
 }
-function O(e) {
-	if (e === !1) return;
-	let t = v({
-		...e,
-		pipelines: e?.pipelines ?? ["selfie", "idCapture"]
-	}), n = {
-		...t,
-		pipelines: t.pipelines ? [...t.pipelines] : void 0
+function warmupWorkflowWasm(wasmConfig) {
+	if (wasmConfig === false) return;
+	const resolved = resolveWasmConfig({
+		...wasmConfig,
+		pipelines: wasmConfig?.pipelines ?? ["selfie", "idCapture"]
+	});
+	const upgradeConfig = {
+		...resolved,
+		pipelines: resolved.pipelines ? [...resolved.pipelines] : void 0
 	};
-	b(t).then(() => y(n)).catch((e) => {
-		console.error("Workflow WASM warmup failed:", e);
+	warmupWasm(resolved).then(() => upgradeToWasmHttpClient(upgradeConfig)).catch((error) => {
+		console.error("Workflow WASM warmup failed:", error);
 	});
 }
 //#endregion
+//#region src/modules/workflow/createWorkflowSession.ts
+async function createWorkflowSession(config, signal) {
+	return bootstrapSession(await resolveApiKey(config), {
+		configurationId: config.configurationId,
+		externalId: config.externalId,
+		externalCustomerId: config.externalCustomerId,
+		language: config.lang,
+		customFields: config.customFields,
+		uuid: config.uuid,
+		urlUuid: config.urlUuid,
+		loginHint: config.loginHint,
+		onUrlUuidRefreshed: config.onUrlUuidRefreshed
+	}, signal);
+}
+//#endregion
+//#region src/modules/workflow/workflowConfig.ts
+function hasWorkflowToken(config) {
+	return typeof config.token === "string";
+}
+function isSelfLoadingWorkflowConfig(config) {
+	const bootstrapConfig = config;
+	return typeof bootstrapConfig.configurationId === "string" && (typeof bootstrapConfig.apiKey === "string" || typeof bootstrapConfig.clientId === "string");
+}
+//#endregion
 //#region src/modules/workflow/useWorkflowInitialization.ts
-function k(e) {
-	let { token: n, lang: i, disableDashboardTheme: o, wasmConfig: c, customModuleCallback: l, interviewId: u, isDesktop: d, urlUuid: f, onError: p, onUrlUuidRefreshed: m } = e, g = r(null), [_, v] = a(() => {
-		let e = D({
-			customModuleCallback: l,
-			interviewId: u,
-			isDesktop: d
-		});
-		return g.current = e, {
-			status: "initializing",
-			workflowManager: e
-		};
-	}), y = r(!1);
-	return t(() => {
-		if (_.status !== "initializing" || y.current) return;
-		y.current = !0;
-		let e = g.current, t = new AbortController(), { signal: r } = t;
-		return (async () => {
+function useWorkflowInitialization(options) {
+	const { onError, onUrlUuidRefreshed } = options;
+	const [state, setState] = d({ status: "initializing" });
+	const managerRef = A(null);
+	y(() => {
+		if (state.status !== "initializing") return;
+		const abortController = new AbortController();
+		const { signal } = abortController;
+		const initialize = async () => {
 			try {
-				await h({
-					token: n,
-					lang: i
-				}), f && await C({
-					urlUuid: f,
-					onboardingId: null,
-					onRefreshed: m
-				}, r);
-				let t = o ? Promise.resolve() : E().then((e) => {
-					e.uiConfig && s(e.uiConfig);
+				let resolvedToken;
+				let resolvedInterviewId;
+				if (hasWorkflowToken(options)) {
+					resolvedToken = options.token;
+					resolvedInterviewId = options.interviewId;
+					if (options.urlUuid) await refreshQrUrlUuid({
+						urlUuid: options.urlUuid,
+						onboardingId: null,
+						onRefreshed: onUrlUuidRefreshed
+					}, signal);
+				} else if (isSelfLoadingWorkflowConfig(options)) {
+					const session = await createWorkflowSession(options, signal);
+					resolvedToken = session.token;
+					resolvedInterviewId = session.interviewId;
+				} else throw new Error("Workflow requires token, or configurationId with apiKey or clientId");
+				if (signal.aborted) return;
+				await setupSDK({
+					token: resolvedToken,
+					lang: options.lang
 				});
-				O(c), e.load(), await t, v({
+				if (signal.aborted) return;
+				const themePromise = options.disableDashboardTheme ? Promise.resolve() : fetchWorkflowTheme().then((result) => {
+					if (result.uiConfig) setUiConfig(result.uiConfig);
+				});
+				warmupWorkflowWasm(options.wasmConfig);
+				if (signal.aborted) return;
+				managerRef.current = createWorkflowUIManager({
+					customModuleCallback: options.customModuleCallback,
+					interviewId: resolvedInterviewId,
+					isDesktop: options.isDesktop
+				});
+				managerRef.current.load();
+				await themePromise;
+				if (signal.aborted) return;
+				setState({
 					status: "ready",
-					workflowManager: e
+					workflowManager: managerRef.current
 				});
-			} catch (t) {
-				if (r.aborted) return;
-				let n = t instanceof Error ? t.message : "Failed to initialize SDK", i = t instanceof S ? t.status : void 0;
-				v({
+			} catch (error) {
+				if (signal.aborted) return;
+				const errorMessage = error instanceof Error ? error.message : "Failed to initialize SDK";
+				const errorCode = extractIncodeStatus(error);
+				setState({
 					status: "error",
-					error: n,
-					errorCode: i,
-					workflowManager: e
-				}), p?.(n, i);
+					error: errorMessage,
+					errorCode
+				});
+				onError?.(errorMessage, errorCode);
 			}
-		})(), () => {
-			t.abort(), e?.stop();
 		};
-	}, [
-		n,
-		i,
-		o,
-		c,
-		f,
-		p,
-		m
-	]), _;
+		initialize();
+		return () => {
+			abortController.abort();
+			managerRef.current?.stop();
+			managerRef.current = null;
+		};
+	}, []);
+	return state;
 }
 //#endregion
 //#region src/modules/workflow/workflow.tsx
-var A = n(() => import("../homeScreen-DnP1jw9A.js").then((e) => ({ default: e.HomeScreen })));
-function j(e) {
-	let { moduleKey: t, config: n, workflowId: r, authHint: i, lang: a, mergeSessionRecordings: o, ageAssurance: s } = e;
-	switch (t) {
+var LazyHomeScreen = z(() => import("../homeScreen-BZnIEDrV.js").then((module) => ({ default: module.HomeScreen })));
+function mapModuleConfig(options) {
+	const { moduleKey, config, workflowId, authHint, lang, mergeSessionRecordings, ageAssurance } = options;
+	switch (moduleKey) {
 		case "AUTHENTICATION": return {
-			...n,
-			authHint: i
+			...config,
+			authHint
 		};
 		case "REDIRECT_TO_MOBILE": return {
-			...n,
-			flowId: r,
-			authHint: i,
-			lang: a
+			...config,
+			flowId: workflowId,
+			authHint,
+			lang
 		};
 		case "ID_CAPTURE":
 		case "TUTORIAL_ID": return {
-			...n,
-			mergeSessionRecordings: n.mergeSessionRecordings ?? o,
-			ageAssurance: n.ageAssurance ?? s,
-			skipProcessId: !0
+			...config,
+			mergeSessionRecordings: config.mergeSessionRecordings ?? mergeSessionRecordings,
+			ageAssurance: config.ageAssurance ?? ageAssurance,
+			skipProcessId: true
 		};
-		case "ID": return n;
+		case "ID": return config;
 		case "SELFIE": return {
-			...n,
-			ageAssurance: n.ageAssurance ?? s
+			...config,
+			ageAssurance: config.ageAssurance ?? ageAssurance
 		};
 		case "ADDRESS": return {
-			...n,
+			...config,
 			processingType: "addressStatement"
 		};
 		case "SECOND_ID": return {
-			...n,
-			isSecondId: !0
+			...config,
+			isSecondId: true
+		};
+		case "MANDATORY_CONSENT": return {
+			...config,
+			type: "MANDATORY"
 		};
-		default: return n;
+		default: return config;
 	}
 }
-var M = ({ config: n, onFinish: a, onError: s }) => {
-	let { i18n: l } = e(), d = k({
-		token: n.token,
-		lang: n.lang,
-		disableDashboardTheme: n.disableDashboardTheme,
-		wasmConfig: n.wasmConfig,
-		customModuleCallback: n.customModuleCallback,
-		interviewId: n.interviewId,
-		isDesktop: n.isDesktop,
-		urlUuid: n.urlUuid,
-		onError: s,
-		onUrlUuidRefreshed: n.onUrlUuidRefreshed
-	}), [p, h] = c(() => d.workflowManager, { autoLoad: !1 }), g = _({
-		moduleKey: p?.status === "ready" ? p.currentNode.moduleKey : void 0,
-		modules: T,
-		headlessModuleKeys: m,
-		onModuleLoading: n.onModuleLoading,
-		onModuleLoaded: n.onModuleLoaded,
-		onError: s
+/**
+* Inner component mounted only after `useWorkflowInitialization` has resolved
+* the session and constructed the manager. Splitting this out keeps the
+* `useManager` factory call out of the init path — token-mode and
+* self-loading mode both arrive here with a fully-constructed manager.
+*/
+var IncodeWorkflowReady = ({ config, workflowManager: initialManager, onFinish, onError }) => {
+	const [workflowState, workflowManager] = useManager(() => initialManager, {
+		autoLoad: false,
+		manageLifecycle: false
 	});
-	t(() => {
-		n.lang && l.language !== n.lang && l.changeLanguage(n.lang);
-	}, [n.lang, l]);
-	let v = r(!1);
-	t(() => {
-		v.current || (p?.status === "finished" ? (v.current = !0, a?.(p.finishStatus)) : p?.status === "asyncResolution" && (v.current = !0, a?.()));
-	}, [
-		p?.status,
-		a,
-		p
-	]), t(() => {
-		p?.status === "error" && s && s(p.error, p.errorCode);
+	const moduleLoaderState = useModuleLoader({
+		moduleKey: workflowState?.status === "ready" ? workflowState.currentNode.moduleKey : void 0,
+		modules: LAZY_WORKFLOW_MODULES,
+		headlessModuleKeys: HEADLESS_WORKFLOW_MODULE_KEYS,
+		onModuleLoading: config.onModuleLoading,
+		onModuleLoaded: config.onModuleLoaded,
+		onError
+	});
+	const terminalFiredRef = A(false);
+	y(() => {
+		if (terminalFiredRef.current) return;
+		if (workflowState?.status === "finished") {
+			terminalFiredRef.current = true;
+			const finishStatus = workflowState.finishStatus;
+			queueMicrotask(() => onFinish?.(finishStatus));
+			return;
+		}
+		if (workflowState?.status === "asyncResolution") {
+			terminalFiredRef.current = true;
+			queueMicrotask(() => onFinish?.());
+			return;
+		}
+		if (workflowState?.status === "error" && onError) {
+			terminalFiredRef.current = true;
+			const { error, errorCode } = workflowState;
+			queueMicrotask(() => onError(error, errorCode));
+		}
 	}, [
-		p?.status,
-		s,
-		p
+		workflowState?.status,
+		onFinish,
+		onError,
+		workflowState
 	]);
-	let y = !(n.spinnerConfig?.title || n.spinnerConfig?.subtitle), b = () => /* @__PURE__ */ o("div", {
+	const hideSpinnerText = !(config.spinnerConfig?.title || config.spinnerConfig?.subtitle);
+	const renderSpinner = () => /* @__PURE__ */ u("div", {
 		class: "IncodeWorkflow",
-		children: /* @__PURE__ */ o(u, {
-			spinnerConfig: n.spinnerConfig,
-			hideText: y
+		children: /* @__PURE__ */ u(TransitionSpinner, {
+			spinnerConfig: config.spinnerConfig,
+			hideText: hideSpinnerText
 		})
-	}), x = (e) => {
-		h.errorModule(e ?? "Module error"), s?.(e ?? "Module error");
+	});
+	const handleModuleError = (error, _errorCode, moduleErrorCode) => {
+		workflowManager.errorModule(error ?? "Module error", moduleErrorCode);
 	};
-	if (d.status === "error") return null;
-	if (d.status === "initializing") return b();
-	if (p && "homeScreen" in p && p.homeScreen.visible) return /* @__PURE__ */ o("div", {
+	if (workflowState && "homeScreen" in workflowState && workflowState.homeScreen.visible) return /* @__PURE__ */ u("div", {
 		class: "IncodeWorkflow",
-		children: /* @__PURE__ */ o(i, {
+		children: /* @__PURE__ */ u(P, {
 			fallback: null,
-			children: /* @__PURE__ */ o(A, {
-				isContinueLoading: p.homeScreen.isContinueLoading,
-				onContinue: () => h.continueFromHome()
+			children: /* @__PURE__ */ u(LazyHomeScreen, {
+				isContinueLoading: workflowState.homeScreen.isContinueLoading,
+				onContinue: () => workflowManager.continueFromHome()
 			})
 		})
 	});
-	if (!p || p.status === "idle" || p.status === "loading") return b();
-	if (p.status === "finished" || p.status === "error" || p.status === "asyncResolution" || p.status === "closed") return null;
-	if (g.status === "unsupported") return /* @__PURE__ */ o("div", {
+	if (!workflowState || workflowState.status === "idle" || workflowState.status === "loading") return renderSpinner();
+	if (workflowState.status === "error") return /* @__PURE__ */ u("div", {
+		class: "IncodeWorkflow",
+		children: /* @__PURE__ */ u(TerminalErrorPage, { message: workflowState.error })
+	});
+	if (workflowState.status === "finished" || workflowState.status === "asyncResolution" || workflowState.status === "closed") return null;
+	if (moduleLoaderState.status === "unsupported") return /* @__PURE__ */ u("div", {
 		class: "IncodeWorkflow",
-		children: /* @__PURE__ */ o(f, {
-			moduleKey: p.currentNode.moduleKey,
-			onNext: () => h.completeModule()
+		children: /* @__PURE__ */ u(UnsupportedModule, {
+			moduleKey: workflowState.currentNode.moduleKey,
+			onNext: () => workflowManager.completeModule()
 		})
 	});
-	if (g.status === "idle" || g.status === "loading" || g.status === "error") return b();
-	let { Component: S } = g;
-	return /* @__PURE__ */ o("div", {
+	if (moduleLoaderState.status === "idle" || moduleLoaderState.status === "loading" || moduleLoaderState.status === "error") return renderSpinner();
+	const { Component } = moduleLoaderState;
+	const moduleConfig = mapModuleConfig({
+		moduleKey: workflowState.currentNode.moduleKey,
+		config: workflowState.config,
+		workflowId: workflowState.workflowConfig.id,
+		authHint: config.authHint,
+		lang: config.lang,
+		mergeSessionRecordings: workflowState.workflowConfig.mergeSessionRecordings,
+		ageAssurance: workflowState.workflowConfig.ageAssurance
+	});
+	let extraProps = {};
+	if (workflowState.currentNode.moduleKey === "REDIRECT_TO_MOBILE") extraProps = { onContinue: () => workflowManager.completeModule() };
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeWorkflow",
+		children: /* @__PURE__ */ u(Component, {
+			config: moduleConfig,
+			onFinish: () => workflowManager.completeModule(),
+			onError: handleModuleError,
+			...extraProps
+		}, workflowState.currentNode.id)
+	});
+};
+var IncodeWorkflowContent = ({ config, onFinish, onError }) => {
+	const { i18n } = useTranslation();
+	const initState = useWorkflowInitialization({
+		...config,
+		onError
+	});
+	y(() => {
+		if (readStoredLanguage()) return;
+		if (config.lang && i18n.language !== config.lang) i18n.changeLanguage(config.lang);
+	}, [config.lang, i18n]);
+	const hideSpinnerText = !(config.spinnerConfig?.title || config.spinnerConfig?.subtitle);
+	if (initState.status === "error") return /* @__PURE__ */ u("div", {
 		class: "IncodeWorkflow",
-		children: /* @__PURE__ */ o(S, {
-			config: j({
-				moduleKey: p.currentNode.moduleKey,
-				config: p.config,
-				workflowId: p.workflowConfig.id,
-				authHint: n.authHint,
-				lang: n.lang,
-				mergeSessionRecordings: p.workflowConfig.mergeSessionRecordings,
-				ageAssurance: p.workflowConfig.ageAssurance
-			}),
-			onFinish: () => h.completeModule(),
-			onError: x,
-			...p.currentNode.moduleKey === "REDIRECT_TO_MOBILE" ? { onContinue: () => h.completeModule() } : {}
-		}, p.currentNode.id)
+		children: /* @__PURE__ */ u(TerminalErrorPage, { message: initState.error })
 	});
-}, N = ({ config: e, onFinish: t, onError: n }) => /* @__PURE__ */ o(l, { children: e ? /* @__PURE__ */ o(M, {
-	config: e,
-	onFinish: t,
-	onError: n
+	if (initState.status === "initializing") return /* @__PURE__ */ u("div", {
+		class: "IncodeWorkflow",
+		children: /* @__PURE__ */ u(TransitionSpinner, {
+			spinnerConfig: config.spinnerConfig,
+			hideText: hideSpinnerText
+		})
+	});
+	return /* @__PURE__ */ u(IncodeWorkflowReady, {
+		config,
+		workflowManager: initState.workflowManager,
+		onFinish,
+		onError
+	});
+};
+var IncodeWorkflow = ({ config, onFinish, onError }) => /* @__PURE__ */ u(IncodeComponent, { children: config ? /* @__PURE__ */ u(IncodeWorkflowContent, {
+	config,
+	onFinish,
+	onError
 }) : null });
-d(N, "incode-workflow");
+registerIncodeModuleElement(IncodeWorkflow, "incode-workflow");
 //#endregion
-export { N as IncodeWorkflow, j as mapModuleConfig };
+export { IncodeWorkflow, mapModuleConfig };

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@incodetech/web",
-  "version": "2.0.1",
+  "version": "2.1.0-rc.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IncodeTechnologies/incode-web-sdk.git"
+  },
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -154,7 +158,7 @@
       "import": "./dist/extensibility.es.js"
     },
     "./redirect-to-mobile": {
-      "source": "./src/modules/redirect-to-mobile/redirectToMobile.tsx",
+      "source": "./src/modules/redirect-to-mobile/redirect-to-mobile.tsx",
       "types": "./dist/types/redirect-to-mobile.d.ts",
       "import": "./dist/redirect-to-mobile/redirect-to-mobile.es.js"
     },
@@ -180,6 +184,15 @@
       "source": "./src/modules/antifraud/styles.css",
       "default": "./dist/antifraud/styles.css"
     },
+    "./field-comparison": {
+      "source": "./src/modules/field-comparison/fieldComparison.tsx",
+      "types": "./dist/types/field-comparison.d.ts",
+      "import": "./dist/field-comparison/field-comparison.es.js"
+    },
+    "./field-comparison/styles.css": {
+      "source": "./src/modules/field-comparison/styles.css",
+      "default": "./dist/field-comparison/styles.css"
+    },
     "./electronic-signature": {
       "source": "./src/modules/electronic-signature/electronic-signature.tsx",
       "types": "./dist/types/electronic-signature.d.ts",
@@ -226,12 +239,15 @@
     "dist"
   ],
   "dependencies": {
+    "@fontsource/dm-sans": "^5.2.8",
+    "@fontsource/rethink-sans": "^5.2.8",
     "@tailwindcss/vite": "^4.2.2",
     "dompurify": "^3.3.3",
     "i18next": "^25.7.1",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
     "libphonenumber-js": "^1.11.0",
+    "lottie-web": "5.13.0",
     "marked": "^17.0.5",
     "pdfjs-dist": "~5.4.624",
     "preact-custom-element": "^4.6.0",
@@ -239,30 +255,34 @@
     "qrcode": "^1.5.4",
     "signature_pad": "^5.1.3",
     "tailwindcss": "^4.1.17",
-    "@incodetech/core": "2.0.1"
+    "@incodetech/core": "2.1.0-rc.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.53.3",
     "@preact/preset-vite": "^2.10.5",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/preact": "^8.6.14",
-    "@storybook/preact-vite": "^8.6.14",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-themes": "^10.4.1",
+    "@storybook/addon-vitest": "^10.4.1",
+    "@storybook/preact": "^10.4.1",
+    "@storybook/preact-vite": "^10.4.1",
+    "@storybook/react-dom-shim": "^10.4.1",
     "@tailwindcss/postcss": "^4.1.17",
     "@testing-library/preact": "^3.2.4",
     "@types/node": "^22.10.5",
     "@types/qrcode": "^1.5.6",
     "@vitejs/plugin-basic-ssl": "^2.3.0",
+    "@vitest/browser": "4.0.13",
+    "@vitest/browser-playwright": "4.0.13",
     "@vitest/coverage-v8": "^4.0.13",
     "happy-dom": "^20.7.0",
+    "playwright": "^1.60.0",
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
     "preact": "^10.27.2",
     "rollup-plugin-visualizer": "^7.0.1",
-    "storybook": "^8.6.14",
+    "storybook": "^10.4.1",
     "stylelint": "^17.5.0",
+    "terser": "^5.48.0",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.4",
@@ -272,9 +292,11 @@
   },
   "scripts": {
     "build": "rm -rf dist && vite build",
+    "build:cdn": "rm -rf dist && NODE_OPTIONS=--experimental-strip-types BUILD_TARGET=cdn vite build",
     "build:dev": "NODE_ENV=development vite build",
     "build:analyze": "rm -rf dist && ANALYZE=1 vite build && echo '\\nBundle report: packages/ui/dist/stats.html\\n'",
     "test": "vitest run",
+    "test:a11y": "VITE_STORYBOOK_A11Y=true vitest run",
     "coverage": "vitest run --coverage",
     "lint": "eslint . && pnpm lint:styles",
     "lint:fix": "eslint . --fix && pnpm lint:styles",