@wetransform/core 0.1.0

package/README.md

@@ -0,0 +1,93 @@
+# @wetransform/core
+
+Headless browser SDK to open WeTransform in your app (modal or inline), authenticate, and interact through a typed event API.
+
+## Installation
+
+```bash
+npm install @wetransform/core
+```
+
+## Usage
+
+```ts
+import { createWeTransform } from '@wetransform/core'
+
+const sdk = createWeTransform({
+  organizationHandle: 'acme',
+  locale: 'en',
+  displayAsModal: true,
+  initialLocation: 'transformations',
+  authentication: {
+    customerId: 'ext-123',
+    signature: 'signed-payload',
+    templateHandle: 'demo-template',
+    sourceId: 'newsletter',
+  },
+})
+
+// Subscribing to the successSubmit event
+sdk.on('successSubmit', (payload) => console.log('File successfully submitted', payload))
+
+// Opening WeTransform
+await sdk.open()
+// Close WeTransform
+await sdk.close()
+// Destroy WeTransform session
+await sdk.destroy()
+```
+
+## API
+
+### `createWeTransform(config)`
+
+Returns a `WeTransformInstance` with:
+
+- `open(): Promise<void>` - initializes auth and mounts WeTransform
+- `close(): Promise<void>` - closes SDK UI and unmounts WeTransform
+- `destroy(): Promise<void>` - closes and tears down SDK resources
+- `on(event, handler): () => void` - subscribes to SDK events, returns unsubscribe function
+
+### `WeTransformConfig`
+
+- `organizationHandle: string`
+- `locale?: 'en' | 'fr'`
+- `authentication: WeTransformAuthenticationConfig`
+- `initialLocation?: 'transformations' | 'uploader' | 'mapper' | 'finalize' | 'sourcePreview' | 'sourceUpdate' | 'scheduler'`
+- `displayAsModal?: boolean` (default: `true`)
+- `mountElement?: string | HTMLElement` (default id: `weTransform_iframeContainer`, used when `displayAsModal` is `false`)
+
+Some `initialLocation` values require additional auth fields:
+
+- `uploader`: requires `authentication.templateHandle`
+- `mapper`, `finalize`, `sourcePreview`, `sourceUpdate`, `scheduler`: require both `authentication.templateHandle` and `authentication.sourceId`
+
+### `WeTransformAuthenticationConfig`
+
+- `customerId: string`
+- `signature: string`
+- `templateHandle?: string`
+- `sourceId?: string`
+
+## Events
+
+Supported `sdk.on(...)` events:
+
+- `open`
+- `close`
+- `destroy`
+- `onReady`
+- `successSubmit` with payload
+
+```ts
+{
+  customerId: string
+  templateHandle: string
+  fileUrl: string
+  signature: string
+  // Deprecated
+  redirectUrl: string
+}
+```
+
+- `error` with payload `{ code: string; message: string }`

package/dist/index.d.mts

@@ -0,0 +1,64 @@
+//#region src/types.d.ts
+type WeTransformSdkConfigBase = {
+  organizationHandle: string;
+  locale?: SupportedLocales;
+  displayAsModal?: boolean;
+  mountElement?: string | HTMLElement;
+};
+type WeTransformSdkConfigWithoutInitialLocation = WeTransformSdkConfigBase & {
+  initialLocation?: undefined;
+  authentication: WeTransformAuthenticationConfig;
+};
+type WeTransformConfig = WeTransformSdkConfigWithoutInitialLocation | { [L in WeTransformInitialLocations]: {
+  organizationHandle: WeTransformSdkConfigBase['organizationHandle'];
+  initialLocation: L;
+  authentication: AuthenticationConfigForLocation<L>;
+} & WeTransformSdkConfigBase }[WeTransformInitialLocations];
+type WeTransformAuthenticationConfig = {
+  customerId: string;
+  signature: string;
+  templateHandle?: string;
+  sourceId?: string;
+};
+type AuthenticationConfigRequiringTemplateHandle = WeTransformAuthenticationConfig & {
+  templateHandle: string;
+};
+type AuthenticationConfigRequiringTemplateAndSource = AuthenticationConfigRequiringTemplateHandle & {
+  sourceId: string;
+};
+type WeTransformInitialLocations = 'transformations' | 'uploader' | 'mapper' | 'finalize' | 'sourcePreview' | 'sourceUpdate' | 'scheduler';
+type LocationsRequiringTemplateHandle = 'uploader';
+type LocationsRequiringTemplateAndSource = 'mapper' | 'finalize' | 'sourcePreview' | 'sourceUpdate' | 'scheduler';
+type AuthenticationConfigForLocation<L extends WeTransformInitialLocations> = L extends LocationsRequiringTemplateAndSource ? AuthenticationConfigRequiringTemplateAndSource : L extends LocationsRequiringTemplateHandle ? AuthenticationConfigRequiringTemplateHandle : WeTransformAuthenticationConfig;
+type WeTransformEventMap = {
+  open: () => void;
+  close: () => void;
+  destroy: () => void;
+  onReady: () => void;
+  successSubmit: (payload: {
+    customerId: string;
+    templateHandle: string;
+    fileUrl: string;
+    signature: string;
+    /**
+     * Deprecated. Prefer handling the resulting navigation flow in the host app.
+     */
+    redirectUrl: string;
+  }) => void;
+  error: (payload: {
+    code: string;
+    message: string;
+  }) => void;
+};
+type WeTransformInstance = {
+  open: () => Promise<void>;
+  close: () => Promise<void>;
+  destroy: () => Promise<void>;
+  on: <K extends keyof WeTransformEventMap>(event: K, handler: WeTransformEventMap[K]) => () => void;
+};
+type SupportedLocales = 'en' | 'fr';
+//#endregion
+//#region src/index.d.ts
+declare function createWeTransform(config: WeTransformConfig): WeTransformInstance;
+//#endregion
+export { type WeTransformAuthenticationConfig, type WeTransformConfig, type WeTransformEventMap, type WeTransformInstance, createWeTransform };

package/dist/index.mjs

@@ -0,0 +1,850 @@
+import { WindowMessenger, connect } from "penpal";
+import { createFocusTrap } from "focus-trap";
+//#region src/events/EventEmitter.ts
+var EventEmitter = class {
+	listeners = {};
+	on(event, handler) {
+		const existing = this.listeners[event] ?? /* @__PURE__ */ new Set();
+		existing.add(handler);
+		this.listeners[event] = existing;
+		return () => this.off(event, handler);
+	}
+	off(event, handler) {
+		const existing = this.listeners[event];
+		if (!existing) return;
+		existing.delete(handler);
+		if (existing.size === 0) delete this.listeners[event];
+	}
+	emit(event, ...args) {
+		const existing = this.listeners[event];
+		if (!existing) return;
+		for (const handler of existing) handler(...args);
+	}
+	clear() {
+		this.listeners = {};
+	}
+};
+//#endregion
+//#region src/utils/abort.ts
+function createAbortError() {
+	return new DOMException("The operation was aborted.", "AbortError");
+}
+function isAbortError(error) {
+	return error instanceof DOMException && error.name === "AbortError";
+}
+function throwIfAborted(signal) {
+	if (signal.aborted) throw createAbortError();
+}
+//#endregion
+//#region src/auth/AuthBridge.ts
+var AuthBridge = class {
+	accessToken = null;
+	refreshToken = null;
+	initPromise = null;
+	refreshPromise = null;
+	revokePromise = null;
+	constructor(apiUrl, authentication, emitError) {
+		this.apiUrl = apiUrl;
+		this.authentication = authentication;
+		this.emitError = emitError;
+	}
+	async getAccessToken(signal) {
+		if (this.accessToken) return this.accessToken;
+		return this.initAuth(signal);
+	}
+	async refreshAccessToken(signal) {
+		if (this.refreshPromise) return this.refreshPromise;
+		if (!this.refreshToken) {
+			this.emitError({
+				code: "auth_refresh_missing",
+				message: "No refresh token available for refresh."
+			});
+			return null;
+		}
+		this.refreshPromise = this.post("/connect/refresh", { refresh_token: this.refreshToken }, void 0, signal).then((response) => {
+			if (response.success) {
+				this.setTokens(response.payload);
+				return this.accessToken;
+			} else {
+				this.emitError({
+					code: "auth_refresh_failed",
+					message: "Auth refresh failed."
+				});
+				return null;
+			}
+		}).catch((error) => {
+			if (isAbortError(error)) return null;
+			this.emitError({
+				code: "auth_refresh_failed",
+				message: error instanceof Error ? error.message : "Refresh failed."
+			});
+			return null;
+		}).finally(() => {
+			this.refreshPromise = null;
+		});
+		return this.refreshPromise;
+	}
+	clear() {
+		this.accessToken = null;
+		this.refreshToken = null;
+		this.initPromise = null;
+		this.refreshPromise = null;
+		this.revokePromise = null;
+	}
+	revokeSession(options, signal) {
+		if (this.revokePromise) return this.revokePromise;
+		const refreshToken = this.refreshToken;
+		this.accessToken = null;
+		this.refreshToken = null;
+		if (!refreshToken) return Promise.resolve();
+		this.revokePromise = this.post("/connect/revoke", { refresh_token: refreshToken }, { keepalive: options?.bestEffort === true }, signal).then(() => void 0).catch((error) => {
+			if (isAbortError(error)) return;
+			this.emitError({
+				code: "auth_revoke_failed",
+				message: error instanceof Error ? error.message : "Session revoke failed."
+			});
+		}).finally(() => {
+			this.revokePromise = null;
+		});
+		return this.revokePromise;
+	}
+	async initAuth(signal) {
+		if (this.initPromise) return this.initPromise;
+		this.initPromise = this.post("/connect/embed", {
+			external_id: this.authentication.customerId,
+			signature: this.authentication.signature,
+			template_handle: this.authentication.templateHandle,
+			source_id: this.authentication.sourceId
+		}, void 0, signal).then((response) => {
+			if (response.success) {
+				this.setTokens(response.payload);
+				return this.accessToken;
+			} else {
+				this.emitError({
+					code: "auth_init_failed",
+					message: "Auth init failed."
+				});
+				return null;
+			}
+		}).catch((error) => {
+			if (isAbortError(error)) return null;
+			this.emitError({
+				code: "auth_init_failed",
+				message: error instanceof Error ? error.message : "Auth init failed."
+			});
+			return null;
+		}).finally(() => {
+			this.initPromise = null;
+		});
+		return this.initPromise;
+	}
+	setTokens(tokens) {
+		this.accessToken = tokens.access_token;
+		this.refreshToken = tokens.refresh_token;
+	}
+	async post(path, body, options, signal) {
+		const url = this.apiUrl + path;
+		const response = await fetch(url, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(body),
+			keepalive: !!options?.keepalive,
+			signal
+		});
+		if (!response.ok) throw new Error(`Request failed with status ${response.status}.`);
+		return await response.json();
+	}
+};
+//#endregion
+//#region src/iframe/urlHelper.ts
+const getInitialLocationPath = (location, templateHandle, sourceId) => {
+	if (location) switch (location) {
+		case "transformations": return "/app/workflows";
+		case "uploader": return templateHandle ? `/${templateHandle}` : "/app/workflows";
+		case "mapper": return templateHandle && sourceId ? `/${templateHandle}/${sourceId}/map/columns/match` : "/app/workflows";
+		case "finalize": return templateHandle && sourceId ? `/${templateHandle}/${sourceId}/review` : "/app/workflows";
+		case "sourcePreview": return templateHandle && sourceId ? `/${templateHandle}/source/preview/${sourceId}` : "/app/workflows";
+		case "sourceUpdate": return templateHandle && sourceId ? `/${templateHandle}/source/update-config/${sourceId}` : "/app/workflows";
+		case "scheduler": return templateHandle && sourceId ? `/${templateHandle}/${sourceId}/embedded-schedules/edit` : "/app/workflows";
+		default: return "/app/workflows";
+	}
+	if (templateHandle && sourceId) return `/${templateHandle}/${sourceId}/map/columns/match`;
+	if (templateHandle) return `/${templateHandle}`;
+	return "/app/workflows";
+};
+//#endregion
+//#region src/iframe/IframeManager.ts
+const EMBED_ROUTE_STORAGE_KEY = "wetransform-sdk-embed-route";
+const EMBED_ROUTE_PENDING_STORAGE_KEY = "wetransform-sdk-embed-route-pending";
+var IframeManager = class {
+	iframe = null;
+	connection = null;
+	childApi = null;
+	activeSignal = null;
+	origin;
+	onPopState = (e) => {
+		this.syncChildToHostUrl(e);
+	};
+	constructor(baseUrl, events, authBridge, locationInfo) {
+		this.baseUrl = baseUrl;
+		this.events = events;
+		this.authBridge = authBridge;
+		this.locationInfo = locationInfo;
+		this.origin = new URL(baseUrl).origin;
+	}
+	mount(container, bootstrapToken, signal) {
+		this.unmount();
+		this.activeSignal = signal ?? null;
+		const initialPath = this.resolveInitialPath();
+		const iframe = document.createElement("iframe");
+		iframe.src = this.buildIframeUrl(initialPath, bootstrapToken);
+		iframe.title = "WeTransform";
+		iframe.setAttribute("allow", "clipboard-read; clipboard-write");
+		iframe.setAttribute("tabindex", "0");
+		iframe.style.width = "100%";
+		iframe.style.height = "100%";
+		iframe.style.border = "0";
+		iframe.style.display = "block";
+		container.appendChild(iframe);
+		this.iframe = iframe;
+		window.addEventListener("popstate", this.onPopState);
+		this.connect(signal);
+	}
+	unmount() {
+		window.removeEventListener("popstate", this.onPopState);
+		this.activeSignal = null;
+		if (this.connection) {
+			this.connection.destroy();
+			this.connection = null;
+			this.childApi = null;
+		}
+		if (this.iframe?.parentElement) this.iframe.parentElement.removeChild(this.iframe);
+		this.iframe = null;
+	}
+	async requestLogout(signal) {
+		await this.notifyLogout(signal ?? this.activeSignal ?? void 0);
+	}
+	clearPersistedRoute() {
+		sessionStorage.removeItem(EMBED_ROUTE_STORAGE_KEY);
+		sessionStorage.removeItem(EMBED_ROUTE_PENDING_STORAGE_KEY);
+	}
+	persistRouteForPageLeave(event) {
+		if (event.persisted) return;
+		const currentRoute = this.getPersistedRoute();
+		if (!currentRoute) return;
+		sessionStorage.setItem(EMBED_ROUTE_PENDING_STORAGE_KEY, currentRoute);
+		sessionStorage.removeItem(EMBED_ROUTE_STORAGE_KEY);
+	}
+	connect(signal) {
+		if (!this.iframe) return;
+		if (!this.iframe.contentWindow) {
+			this.events.emit("error", {
+				code: "iframe_unavailable",
+				message: "Iframe contentWindow is not available."
+			});
+			return;
+		}
+		this.connection = connect({
+			messenger: new WindowMessenger({
+				remoteWindow: this.iframe.contentWindow,
+				allowedOrigins: [this.origin]
+			}),
+			methods: this.createParentMethods()
+		});
+		this.childApi = this.withAbort(this.connection.promise, signal).catch((error) => {
+			if (isAbortError(error)) return null;
+			throw error;
+		});
+	}
+	createParentMethods() {
+		return {
+			onReady: async () => {
+				this.events.emit("onReady");
+				try {
+					await this.sendAuthToChild(void 0, this.activeSignal ?? void 0);
+				} catch (error) {
+					if (!isAbortError(error)) throw error;
+				}
+			},
+			needRefresh: async () => {
+				const accessToken = await this.authBridge.refreshAccessToken(this.activeSignal ?? void 0);
+				if (!accessToken) return false;
+				await this.sendAuthToChild(accessToken, this.activeSignal ?? void 0);
+				return true;
+			},
+			currentUrl: (payload) => {
+				window.history.pushState({ path: payload.url }, "", "");
+				this.setPersistedRoute(payload.url);
+			},
+			successSubmit: (payload) => {
+				this.clearPersistedRoute();
+				this.events.emit("successSubmit", payload);
+			},
+			error: (payload) => {
+				this.events.emit("error", payload);
+			}
+		};
+	}
+	async sendAuthToChild(overrideToken, signal) {
+		const child = this.childApi ? await this.withAbort(this.childApi, signal) : null;
+		if (!child) return;
+		const accessToken = overrideToken ?? await this.authBridge.getAccessToken(signal ?? this.activeSignal ?? void 0);
+		if (!accessToken) return;
+		await this.withAbort(child.setAuth({ access_token: accessToken }), signal);
+	}
+	async notifyLogout(signal) {
+		const logout = (this.childApi ? await this.withAbort(this.childApi, signal) : null)?.logout;
+		if (!logout) return;
+		try {
+			await this.withAbort(logout(), signal);
+		} catch {}
+	}
+	async syncChildToHostUrl(e) {
+		const signal = this.activeSignal ?? void 0;
+		let child = null;
+		try {
+			child = this.childApi ? await this.withAbort(this.childApi, signal) : null;
+		} catch (error) {
+			if (isAbortError(error)) return;
+			throw error;
+		}
+		const navigate = child?.navigate;
+		if (!navigate) return;
+		const url = e.state?.path;
+		if (typeof url !== "string") return;
+		try {
+			await this.withAbort(navigate({ route: url }), signal);
+		} catch {}
+	}
+	withAbort(promise, signal) {
+		if (!signal) return promise;
+		if (signal.aborted) return Promise.reject(createAbortError());
+		return new Promise((resolve, reject) => {
+			const onAbort = () => {
+				signal.removeEventListener("abort", onAbort);
+				reject(createAbortError());
+			};
+			signal.addEventListener("abort", onAbort, { once: true });
+			promise.then((value) => {
+				signal.removeEventListener("abort", onAbort);
+				resolve(value);
+			}).catch((error) => {
+				signal.removeEventListener("abort", onAbort);
+				reject(error);
+			});
+		});
+	}
+	buildIframeUrl(path, bootstrapToken) {
+		const url = new URL(path, this.baseUrl);
+		url.searchParams.set("sdk", "true");
+		if (bootstrapToken) url.searchParams.set("token", bootstrapToken);
+		return url.toString();
+	}
+	resolveInitialPath() {
+		const persistedRoute = this.getPersistedRoute();
+		if (persistedRoute) return persistedRoute;
+		const pendingRoute = sessionStorage.getItem(EMBED_ROUTE_PENDING_STORAGE_KEY);
+		if (!pendingRoute) return getInitialLocationPath(this.locationInfo.initialLocation, this.locationInfo.templateHandle, this.locationInfo.sourceId);
+		if (this.isReloadNavigation()) {
+			this.setPersistedRoute(pendingRoute);
+			sessionStorage.removeItem(EMBED_ROUTE_PENDING_STORAGE_KEY);
+			return pendingRoute;
+		}
+		sessionStorage.removeItem(EMBED_ROUTE_PENDING_STORAGE_KEY);
+		return getInitialLocationPath(this.locationInfo.initialLocation, this.locationInfo.templateHandle, this.locationInfo.sourceId);
+	}
+	getPersistedRoute() {
+		return sessionStorage.getItem(EMBED_ROUTE_STORAGE_KEY);
+	}
+	setPersistedRoute(route) {
+		sessionStorage.setItem(EMBED_ROUTE_STORAGE_KEY, route);
+		sessionStorage.removeItem(EMBED_ROUTE_PENDING_STORAGE_KEY);
+	}
+	isReloadNavigation() {
+		const [entry] = performance.getEntriesByType("navigation");
+		return entry instanceof PerformanceNavigationTiming ? entry.type === "reload" : false;
+	}
+};
+//#endregion
+//#region src/ui/ModalHost.ts
+var ModalHost = class {
+	host = null;
+	shadowRoot = null;
+	iframeContainer = null;
+	focusTrap = null;
+	inertSnapshot = [];
+	previousOverflow = null;
+	constructor(onCloseRequest) {
+		this.onCloseRequest = onCloseRequest;
+	}
+	open() {
+		if (this.host && this.iframeContainer) return this.iframeContainer;
+		this.host = document.createElement("div");
+		this.host.setAttribute("data-WeTransform-sdk", "");
+		this.shadowRoot = this.host.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = this.getStyles();
+		const backdrop = document.createElement("div");
+		backdrop.className = "sdk-backdrop";
+		const shell = document.createElement("div");
+		shell.className = "sdk-shell";
+		const dialog = document.createElement("div");
+		dialog.className = "sdk-dialog";
+		dialog.setAttribute("role", "dialog");
+		dialog.setAttribute("aria-modal", "true");
+		dialog.setAttribute("aria-label", "WeTransform");
+		dialog.tabIndex = -1;
+		const closeBtn = document.createElement("button");
+		closeBtn.className = "sdk-close-btn";
+		closeBtn.setAttribute("aria-label", "Close");
+		closeBtn.type = "button";
+		closeBtn.innerHTML = "×";
+		closeBtn.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.onCloseRequest();
+		});
+		const frameContainer = document.createElement("div");
+		frameContainer.className = "sdk-frame-container";
+		dialog.appendChild(frameContainer);
+		shell.appendChild(dialog);
+		shell.appendChild(closeBtn);
+		backdrop.appendChild(shell);
+		this.shadowRoot.appendChild(style);
+		this.shadowRoot.appendChild(backdrop);
+		document.body.appendChild(this.host);
+		this.iframeContainer = frameContainer;
+		this.lockPage();
+		this.focusTrap = createFocusTrap(shell, {
+			escapeDeactivates: false,
+			allowOutsideClick: true,
+			fallbackFocus: dialog
+		});
+		this.focusTrap.activate();
+		dialog.focus();
+		return frameContainer;
+	}
+	close() {
+		this.focusTrap?.deactivate();
+		this.focusTrap = null;
+		this.unlockPage();
+		if (this.host?.parentElement) this.host.parentElement.removeChild(this.host);
+		this.host = null;
+		this.shadowRoot = null;
+		this.iframeContainer = null;
+	}
+	lockPage() {
+		const bodyChildren = Array.from(document.body.children);
+		this.inertSnapshot = [];
+		for (const child of bodyChildren) {
+			if (child === this.host) continue;
+			const element = child;
+			const inertElement = this.getInertCapableElement(element);
+			this.inertSnapshot.push({
+				element,
+				ariaHidden: element.getAttribute("aria-hidden"),
+				inert: inertElement ? Boolean(inertElement.inert) : false
+			});
+			element.setAttribute("aria-hidden", "true");
+			if (inertElement) inertElement.inert = true;
+		}
+		this.previousOverflow = document.documentElement.style.overflow || null;
+		document.documentElement.style.overflow = "hidden";
+	}
+	unlockPage() {
+		for (const snapshot of this.inertSnapshot) {
+			if (snapshot.ariaHidden === null) snapshot.element.removeAttribute("aria-hidden");
+			else snapshot.element.setAttribute("aria-hidden", snapshot.ariaHidden);
+			const inertElement = this.getInertCapableElement(snapshot.element);
+			if (inertElement) inertElement.inert = snapshot.inert;
+		}
+		this.inertSnapshot = [];
+		if (this.previousOverflow === null) document.documentElement.style.removeProperty("overflow");
+		else document.documentElement.style.overflow = this.previousOverflow;
+		this.previousOverflow = null;
+	}
+	getInertCapableElement(element) {
+		return "inert" in element ? element : null;
+	}
+	getStyles() {
+		return `
+      :host {
+        all: initial;
+      }
+      .sdk-backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2147483647;
+      }
+      .sdk-dialog {
+        width: 98vw;
+        height: 98vh;
+        overflow: hidden;
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+        display: flex;
+        flex-direction: column;
+      }
+      .sdk-shell {
+        position: relative;
+      }
+      .sdk-close-btn {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        border: none;
+        background: rgb(0,0,0);
+        border-radius: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        line-height: 1;
+        cursor: pointer;
+        color: #fff;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+      }
+      .sdk-close-btn:hover {
+        background: rgba(0,0,0,0.6);
+      }
+      .sdk-frame-container {
+        flex: 1;
+        min-height: 0;
+      }
+    `;
+	}
+};
+//#endregion
+//#region src/ui/UiHost.ts
+const DEFAULT_IFRAME_CONTAINER_STYLE_ID = "wetransform-sdk-inline-container-defaults";
+const OPENING_LOADER_ATTRIBUTE = "data-sender-sdk-loader";
+const OPENING_LOADER_FADE_OUT_DURATION_MS = 400;
+const OPENING_LOADER_SVG = "<svg class=\"wetransform-iframeLoader\" width=\"46px\" height=\"46px\" viewBox=\"25 25 50 50\" style=\"animation: wetransform-spin-animation 2s linear infinite; transform-origin: center center;\" ><circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-miterlimit=\"10\" style=\"stroke-dasharray: 1,200; stroke-dashoffset: 0; animation: wetransform-spin-dash 1.5s ease-in-out infinite;\" ></circle></svg>";
+function ensureDefaultInlineContainerStyles() {
+	if (document.getElementById(DEFAULT_IFRAME_CONTAINER_STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = DEFAULT_IFRAME_CONTAINER_STYLE_ID;
+	style.textContent = `
+  :where(#weTransform_iframeContainer) {
+    width: 1080px;
+    height: 720px;
+    border: 0;
+    position: relative;
+  }
+
+  :where(.wetransform-iframeLoader) {
+    color: var(--wetransform-primary-color, #008df7);
+  }
+
+  @keyframes wetransform-spin-animation {
+    0% {
+      transform:rotate3d(0,0,1,0);
+    }
+    25% {
+      transform:rotate3d(0,0,1,90deg);
+    }
+    50% {
+      transform:rotate3d(0,0,1,180deg);
+    }
+    75% {
+      transform:rotate3d(0,0,1,270deg);
+    }
+    to {
+      transform:rotate3d(0,0,1,359deg);
+    }
+  }
+
+  @keyframes wetransform-spin-dash {
+    0% {
+      stroke-dasharray:1,200;
+      stroke-dashoffset:0
+    }
+    50% {
+      stroke-dasharray:89,200;
+      stroke-dashoffset:-35px
+    }
+    to {
+      stroke-dasharray:89,200;
+      stroke-dashoffset:-124px
+    }
+}`;
+	document.head.prepend(style);
+}
+var UiHost = class {
+	modalHost = null;
+	inlineContainer = null;
+	ownsInlineContainer = false;
+	openingContainer = null;
+	clearOpeningLoader = null;
+	constructor(config) {
+		this.config = config;
+	}
+	open(onCloseRequest) {
+		if (this.config.displayAsModal) {
+			this.modalHost ??= new ModalHost(onCloseRequest);
+			return this.modalHost.open();
+		}
+		return this.ensureInlineContainer();
+	}
+	startOpening(onCloseRequest) {
+		const container = this.open(onCloseRequest);
+		this.openingContainer = container;
+		this.clearOpeningLoader = this.showOpeningLoader(container);
+		return container;
+	}
+	finishOpening() {
+		this.clearOpeningLoader?.();
+		this.clearOpeningLoader = null;
+		this.openingContainer = null;
+	}
+	hasOpeningUi() {
+		return this.openingContainer !== null;
+	}
+	cancelOpening() {
+		if (!this.openingContainer) return;
+		this.finishOpening();
+		this.close();
+	}
+	close() {
+		this.finishOpening();
+		if (this.config.displayAsModal) {
+			this.modalHost?.close();
+			return;
+		}
+		this.clearInlineContainer();
+	}
+	dispose() {
+		this.finishOpening();
+		this.modalHost = null;
+		this.inlineContainer = null;
+		this.ownsInlineContainer = false;
+		this.openingContainer = null;
+		this.clearOpeningLoader = null;
+	}
+	showOpeningLoader(container) {
+		const existingLoader = container.querySelector(`[${OPENING_LOADER_ATTRIBUTE}]`);
+		if (existingLoader?.parentElement) existingLoader.parentElement.removeChild(existingLoader);
+		const loader = document.createElement("div");
+		loader.setAttribute(OPENING_LOADER_ATTRIBUTE, "");
+		loader.setAttribute("role", "status");
+		loader.setAttribute("aria-live", "polite");
+		loader.setAttribute("aria-label", "Loading");
+		loader.innerHTML = OPENING_LOADER_SVG;
+		loader.style.display = "flex";
+		loader.style.alignItems = "center";
+		loader.style.justifyContent = "center";
+		loader.style.width = "100%";
+		loader.style.height = "100%";
+		loader.style.minHeight = "120px";
+		loader.style.color = "#1f2937";
+		loader.style.fontFamily = "system-ui, -apple-system, Segoe UI, sans-serif";
+		loader.style.fontSize = "14px";
+		loader.style.backgroundColor = "#fff";
+		loader.style.position = "absolute";
+		loader.style.top = "0";
+		loader.style.left = "0";
+		loader.style.opacity = "1";
+		loader.style.transition = `opacity ${OPENING_LOADER_FADE_OUT_DURATION_MS}ms`;
+		container.appendChild(loader);
+		let isCleared = false;
+		let fallbackTimer = null;
+		return () => {
+			if (isCleared) return;
+			isCleared = true;
+			const removeLoader = () => {
+				loader.removeEventListener("transitionend", removeLoader);
+				if (fallbackTimer !== null) {
+					window.clearTimeout(fallbackTimer);
+					fallbackTimer = null;
+				}
+				if (loader.parentElement) loader.parentElement.removeChild(loader);
+			};
+			loader.addEventListener("transitionend", removeLoader);
+			fallbackTimer = window.setTimeout(removeLoader, OPENING_LOADER_FADE_OUT_DURATION_MS + 50);
+			loader.style.opacity = "0";
+		};
+	}
+	ensureInlineContainer() {
+		if (this.inlineContainer) return this.inlineContainer;
+		if (this.config.mountElement instanceof HTMLElement) {
+			this.inlineContainer = this.config.mountElement;
+			this.ownsInlineContainer = false;
+			return this.config.mountElement;
+		}
+		const existingMountElement = document.getElementById(this.config.mountElement);
+		if (existingMountElement) {
+			this.inlineContainer = existingMountElement;
+			this.ownsInlineContainer = false;
+			return existingMountElement;
+		}
+		const container = document.createElement("div");
+		container.id = this.config.mountElement;
+		document.body.appendChild(container);
+		this.inlineContainer = container;
+		this.ownsInlineContainer = true;
+		return container;
+	}
+	clearInlineContainer() {
+		if (this.ownsInlineContainer && this.inlineContainer?.parentElement) this.inlineContainer.parentElement.removeChild(this.inlineContainer);
+		this.inlineContainer = null;
+		this.ownsInlineContainer = false;
+	}
+};
+//#endregion
+//#region src/index.ts
+function resolveBaseUrl(organizationHandle) {
+	const envBaseUrl = import.meta.env.VITE_SENDER_BASE_URL;
+	if (envBaseUrl) return envBaseUrl.replace("{organizationHandle}", organizationHandle);
+	return window.location.origin;
+}
+function resolveApiUrl(organizationHandle, locale) {
+	const envApiUrl = import.meta.env.VITE_SENDER_API_URL;
+	if (!envApiUrl) throw new Error("SENDER_API_URL environment variable is not defined.");
+	return `${envApiUrl}/${locale ?? "en"}/send/${organizationHandle}`;
+}
+function createWeTransform(config) {
+	if (typeof window === "undefined") throw new Error("WeTransform SDK must run in a browser context.");
+	ensureDefaultInlineContainerStyles();
+	const baseUrl = resolveBaseUrl(config.organizationHandle);
+	const apiUrl = resolveApiUrl(config.organizationHandle, config.locale);
+	const events = new EventEmitter();
+	const uiHost = new UiHost({
+		displayAsModal: config.displayAsModal ?? true,
+		mountElement: config.mountElement ?? "weTransform_iframeContainer"
+	});
+	const authBridge = new AuthBridge(apiUrl, config.authentication, (payload) => {
+		events.emit("error", payload);
+	});
+	const iframeManager = new IframeManager(baseUrl, events, authBridge, {
+		initialLocation: config.initialLocation,
+		templateHandle: config.authentication.templateHandle,
+		sourceId: config.authentication.sourceId
+	});
+	const revokeOnPageUnload = () => {
+		authBridge.revokeSession({ bestEffort: true });
+	};
+	const onPageHide = (event) => {
+		iframeManager.persistRouteForPageLeave(event);
+		revokeOnPageUnload();
+	};
+	window.addEventListener("pagehide", onPageHide);
+	window.addEventListener("beforeunload", revokeOnPageUnload);
+	let status = "idle";
+	let openingPromise = null;
+	let currentOpenAbortController = null;
+	let stopWaitingForReady = null;
+	const open = async () => {
+		if (status !== "idle") return;
+		status = "opening";
+		const container = uiHost.startOpening(close);
+		events.emit("open");
+		const openAbortController = new AbortController();
+		currentOpenAbortController = openAbortController;
+		const onReadyPromise = new Promise((resolve) => {
+			const unsubscribeOnReady = events.on("onReady", () => {
+				unsubscribeOnReady();
+				stopWaitingForReady = null;
+				resolve();
+			});
+			const onAbort = () => {
+				unsubscribeOnReady();
+				stopWaitingForReady = null;
+				resolve();
+			};
+			stopWaitingForReady = () => {
+				openAbortController.signal.removeEventListener("abort", onAbort);
+				onAbort();
+			};
+			openAbortController.signal.addEventListener("abort", onAbort, { once: true });
+		});
+		openingPromise = (async () => {
+			try {
+				const accessToken = await authBridge.getAccessToken(openAbortController.signal);
+				if (!accessToken) return;
+				throwIfAborted(openAbortController.signal);
+				iframeManager.mount(container, accessToken, openAbortController.signal);
+				await onReadyPromise;
+				throwIfAborted(openAbortController.signal);
+				if (status !== "opening") return;
+				uiHost.finishOpening();
+				status = "open";
+			} catch (error) {
+				stopWaitingForReady?.();
+				if (isAbortError(error)) return;
+				events.emit("error", {
+					code: "open_failed",
+					message: error instanceof Error ? error.message : "Failed to open WeTransform SDK."
+				});
+			}
+		})();
+		try {
+			await openingPromise;
+		} finally {
+			const shouldAutoClose = status === "opening" && uiHost.hasOpeningUi();
+			if (currentOpenAbortController === openAbortController) currentOpenAbortController = null;
+			if (shouldAutoClose) {
+				status = "idle";
+				uiHost.cancelOpening();
+				events.emit("close");
+			}
+			openingPromise = null;
+		}
+	};
+	const close = async () => {
+		if (status === "destroyed" || status === "idle" || status === "closing") return;
+		const wasOpen = status === "open";
+		const wasOpening = status === "opening";
+		status = "closing";
+		currentOpenAbortController?.abort();
+		if (wasOpening) {
+			stopWaitingForReady?.();
+			await iframeManager.requestLogout();
+			iframeManager.unmount();
+			iframeManager.clearPersistedRoute();
+			uiHost.cancelOpening();
+			status = "idle";
+			events.emit("close");
+			return;
+		}
+		if (wasOpen) {
+			await iframeManager.requestLogout();
+			iframeManager.unmount();
+			uiHost.close();
+			iframeManager.clearPersistedRoute();
+			status = "idle";
+			events.emit("close");
+		}
+	};
+	const destroy = async () => {
+		if (status === "destroyed") return;
+		currentOpenAbortController?.abort();
+		await close();
+		uiHost.dispose();
+		authBridge.revokeSession().finally(() => {
+			authBridge.clear();
+		});
+		window.removeEventListener("pagehide", onPageHide);
+		window.removeEventListener("beforeunload", revokeOnPageUnload);
+		events.emit("destroy");
+		events.clear();
+		status = "destroyed";
+	};
+	const on = (event, handler) => {
+		return events.on(event, handler);
+	};
+	return {
+		open,
+		close,
+		destroy,
+		on
+	};
+}
+//#endregion
+export { createWeTransform };

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@wetransform/core",
+  "version": "0.1.0",
+  "license": "ISC",
+  "files": [
+    "dist/**"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "lint": "vp lint --type-aware --type-check .",
+    "test": "vp test run"
+  },
+  "dependencies": {
+    "focus-trap": "^8.0.1",
+    "penpal": "^7.0.6"
+  },
+  "devDependencies": {
+    "jsdom": "^29.0.1",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-css-injected-by-js": "^4.0.1",
+    "vite-plus": "catalog:",
+    "vitest": "catalog:"
+  }
+}