@payez/next-mvp 3.0.0

package/src/utils/api.ts

@@ -0,0 +1,353 @@
+import { ENV_CONFIG, API_ENDPOINTS } from '../config/env';
+import { TwoFactorMethod } from '../types/security';
+import { standardizedApi, isApiSuccess, isApiError, extractApiData } from '../lib/standardized-client-api';
+
+export class ApiError extends Error {
+    type: string;
+    title: string;
+    status: number;
+    detail?: string;
+    traceId?: string;
+    errors?: Record<string, string[]>;
+
+    constructor(message: string, details: any) {
+        super(message);
+        this.name = 'ApiError';
+        this.type = details.type || 'UnknownError';
+        this.title = details.title || message;
+        this.status = details.status || 500;
+        this.detail = details.detail;
+        this.traceId = details.traceId;
+        this.errors = details.errors;
+    }
+}
+
+export interface ApiOptions {
+    method?: string;
+    body?: any;
+    headers?: Record<string, string>;
+}
+
+export interface ApiResponse<T> {
+    success: boolean;
+    data?: T;
+    error?: string;
+    type?: string;
+    title?: string;
+    status?: number;
+    errors?: Record<string, string[]>;
+    traceId?: string;
+    message?: string;
+}
+
+export async function apiFetch<T>(url: string, options: ApiOptions = {}): Promise<ApiResponse<T>> {
+    const { method = 'GET', body, headers = {} } = options;
+  let finalBody = body;
+    const fetchOptions: RequestInit = {
+        method,
+        headers: {
+            'Content-Type': 'application/json',
+            ...headers,
+        },
+        credentials: 'include',
+        ...(finalBody ? { body: JSON.stringify(finalBody) } : {}),
+    };
+
+    let res = await fetch(url, fetchOptions);
+    // If we get a 401, it may be a transient during server-side token refresh. Retry once after a short delay.
+    if (res.status === 401) {
+        await new Promise(resolve => setTimeout(resolve, 250));
+        res = await fetch(url, fetchOptions);
+    }
+    const raw = await res.json().catch(() => ({}));
+
+    if (!res.ok) {
+        throw new ApiError((raw as any)?.message || 'API Error', raw);
+    }
+
+    // --- Universal normalization here ---
+    let normalized: ApiResponse<T>;
+    if (raw && typeof raw === 'object') {
+        if ('data' in raw && typeof raw.data === 'object' && raw.data !== null) {
+            // Already wrapped
+            normalized = { ...raw };
+        } else {
+            // Not wrapped: move all fields except known meta to data
+            const { success, error, errors, message, type, title, status, traceId, ...data } = raw;
+            normalized = {
+                success: typeof success === 'boolean' ? success : true,
+                data: data as T,
+                error,
+                errors,
+                message,
+                type,
+                title,
+                status,
+                traceId,
+            };
+        }
+    } else {
+        normalized = { success: true, data: raw as T };
+    }
+
+    return normalized;
+}
+
+// DELETED: apiFetchAuth - Use clientApi from @/lib/client-api instead for proper token refresh handling
+
+// Account API for masked info and 2FA
+export class AccountApi {
+    /**
+     * Get masked user info (email, phone, authenticator status)
+     * User identification comes from JWT token in Authorization header, not from request body
+     */
+    async getMaskedInfo(accessToken?: string): Promise<{
+        maskedEmail: string;
+        maskedPhoneNumber: string;
+        hasAuthenticator: boolean;
+        method?: TwoFactorMethod;
+    }> {
+        // Require authentication for masked info retrieval; do not infer from session or token locally
+        if (!accessToken) {
+            throw new ApiError('Not authenticated', { status: 401, title: 'Unauthorized' });
+        }
+
+        // Authenticated request - proxy through Next API to IDP
+        // Empty body: user info comes from JWT token
+        const result = await standardizedApi.post<any>('/api/account/masked-info', {}, accessToken);
+
+        console.log('[DEBUG] getMaskedInfo result:', {
+            success: isApiSuccess(result),
+            hasData: isApiSuccess(result) && !!result.data,
+            rawData: isApiSuccess(result) ? result.data : null,
+            dataFields: isApiSuccess(result) && result.data ? Object.keys(result.data) : []
+        });
+
+        console.log('[DEBUG] getMaskedInfo raw data structure:', JSON.stringify(isApiSuccess(result) ? result.data : result, null, 2));
+
+        if (!isApiSuccess(result)) {
+            const errorMessage = isApiError(result) ? result.message : 'Failed to get masked info';
+            console.error('[DEBUG] getMaskedInfo failed:', result);
+            throw new ApiError(errorMessage, result);
+        }
+        // Use only snake_case fields from backend response
+        const d = result.data.data || result.data; // Access the nested data object
+        const maskedInfoResult = {
+            maskedEmail: d.masked_email ?? '',
+            maskedPhoneNumber: d.masked_phone_number ?? '',
+            hasAuthenticator: d.has_authenticator ?? false,
+            method: d.method as TwoFactorMethod
+        };
+
+        console.log('[DEBUG] getMaskedInfo result:', maskedInfoResult);
+        return maskedInfoResult;
+    }
+
+    async initiateRecovery(email: string) {
+        const res = await fetch('/api/account/recovery/initiate', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ email }),
+        });
+        if (!res.ok) throw new Error('Failed to initiate recovery');
+        return res.json();
+    }
+
+    async sendRecoveryCode(recoveryToken: string, method: 'email' | 'sms' | 'authenticator') {
+        const res = await fetch('/api/account/recovery/send-code', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${recoveryToken}`
+            },
+            body: JSON.stringify({ method }),
+        });
+        if (!res.ok) throw new Error('Failed to send recovery code');
+        return res.json();
+    }
+
+    async verifyRecoveryCode(recoveryToken: string, code: string, method: string) {
+        const res = await fetch('/api/account/recovery/verify-code', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${recoveryToken}`
+            },
+            body: JSON.stringify({ code, method }),
+        });
+        if (!res.ok) {
+            const e = await res.json().catch(() => null);
+            throw new Error(e?.error?.message || 'Invalid verification code');
+        }
+        return res.json();
+    }
+
+    async resetPasswordWithToken(
+        email: string,
+        resetToken: string,
+        newPassword: string,
+        confirmPassword: string
+    ) {
+        const res = await fetch('/api/account/reset-password', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                email,
+                password_reset_token: resetToken,
+                new_password: newPassword,
+                confirm_password: confirmPassword,
+            }),
+        });
+        if (!res.ok) throw new Error('Failed to reset password');
+        return res.json();
+    }
+
+    async resetPassword(data: { email: string; token: string; password: string; password_confirmation: string }) {
+        // Proxy to server API which in turn proxies to IDP
+        const res = await fetch('/api/account/reset-password', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                email: data.email,
+                token: data.token,
+                password: data.password,
+                password_confirmation: data.password_confirmation
+            })
+        })
+        const result = await res.json().catch(() => ({}))
+        if (!res.ok || (result && result.success === false)) {
+            const msg = result?.message || 'Failed to reset password'
+            throw new ApiError(msg, result)
+        }
+        return result
+    }
+
+    // Onboarding flow methods
+    async verifyWelcomeEmail(onboardToken: string, clientKey?: string): Promise<{
+        maskedEmail: string;
+        maskedPhoneNumber?: string;
+        hasAuthenticator?: boolean;
+        expiryMinutes: number;
+        clientKey: string;
+    }> {
+        const qs = clientKey ? `?client_id=${encodeURIComponent(clientKey)}` : '';
+        console.log('[accountApi.verifyWelcomeEmail] POST /api/onboarding/verify-welcome-email', { qs, onboardTokenLen: onboardToken?.length });
+        const res = await fetch(`/api/onboarding/verify-welcome-email${qs}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ onboard_token: onboardToken })
+        });
+        const result = await res.json().catch(() => ({}));
+        console.log('[accountApi.verifyWelcomeEmail] Response status:', res.status, 'body keys:', result && typeof result === 'object' ? Object.keys(result) : typeof result);
+        if (!res.ok || (result && result.success === false)) {
+            const msg = result?.message || 'Failed to verify welcome email';
+            throw new ApiError(msg, result);
+        }
+        // Extract from nested data structure
+        const data = result.data?.data || result.data || {} as any;
+        const masked = data.masked_user_info || {};
+        return {
+            maskedEmail: masked.masked_email || '',
+            maskedPhoneNumber: masked.masked_phone_number || '',
+            hasAuthenticator: masked.has_authenticator ?? undefined,
+            expiryMinutes: data.expiry_minutes || 10,
+            clientKey: data.client_key || ''
+        };
+    }
+
+    // Back-compat alias
+    async sendOnboardingCode(onboardToken: string, clientKey?: string) {
+        return this.verifyWelcomeEmail(onboardToken, clientKey);
+    }
+
+    async verifyOnboardingCode(onboardToken: string, code: string, clientKey?: string): Promise<{
+        success: boolean;
+        resetToken: string;
+        email: string;
+        clientKey: string;
+    }> {
+        const qs = clientKey ? `?clientId=${encodeURIComponent(clientKey)}` : '';
+        const res = await fetch(`/api/onboarding/verify-code${qs}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ 
+                onboard_token: onboardToken,
+                code: code
+            })
+        });
+        const result = await res.json().catch(() => ({}));
+        if (!res.ok || (result && result.success === false)) {
+            const msg = result?.message || 'Invalid verification code';
+            throw new ApiError(msg, result);
+        }
+        // Extract from nested data structure
+        const data = result.data?.data || result.data || {};
+        return {
+            success: data.success !== false,
+            resetToken: data.reset_token || '',
+            email: data.email || '',
+            clientKey: data.client_key || ''
+        };
+    }
+
+    async verifyOnboardingSmsCode(onboardToken: string, code: string, clientKey?: string): Promise<{
+        success: boolean;
+        resetToken: string;
+        email: string;
+        clientKey: string;
+    }> {
+        const qs = clientKey ? `?clientId=${encodeURIComponent(clientKey)}` : '';
+        const res = await fetch(`/api/onboarding/verify-sms-code${qs}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ 
+                onboard_token: onboardToken,
+                code: code
+            })
+        });
+        const result = await res.json().catch(() => ({}));
+        if (!res.ok || (result && result.success === false)) {
+            const msg = result?.message || 'Invalid verification code';
+            throw new ApiError(msg, result);
+        }
+        // Extract from nested data structure
+        const data = result.data?.data || result.data || {};
+        return {
+            success: data.success !== false,
+            resetToken: data.reset_token || '',
+            email: data.email || '',
+            clientKey: data.client_key || ''
+        };
+    }
+
+    async setOnboardingPassword(data: {
+        onboardToken: string;
+        email: string;
+        resetToken: string;
+        newPassword: string;
+    }, clientKey?: string): Promise<{ success: boolean; message?: string }> {
+        const qs = clientKey ? `?clientId=${encodeURIComponent(clientKey)}` : '';
+        const res = await fetch(`/api/onboarding/set-password${qs}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                onboard_token: data.onboardToken,
+                email: data.email,
+                reset_token: data.resetToken,
+                new_password: data.newPassword
+            })
+        });
+        const result = await res.json().catch(() => ({}));
+        if (!res.ok || (result && result.success === false)) {
+            const msg = result?.message || 'Failed to set password';
+            throw new ApiError(msg, result);
+        }
+        return {
+            success: result.success !== false,
+            message: result.message || result.data?.message
+        };
+    }
+}
+
+export const accountApi = new AccountApi();
+

package/src/utils/circuitBreaker.ts

@@ -0,0 +1,40 @@
+// Circuit breaker (lifted)
+import { circuitBreakerLogger } from '../config/logger';
+
+const CIRCUIT_BREAKER_KEY = 'idp-circuit-breaker';
+const isDev = process.env.NODE_ENV === 'development';
+const isTest = process.env.NODE_ENV === 'test';
+const DEV_CONFIG = { FAILURE_THRESHOLD: 5, RECOVERY_TIME: 10000, RECOVERY_BACKOFF_MULTIPLIER: 1.5, MAX_RECOVERY_TIME: 120000 };
+const PROD_CONFIG = { FAILURE_THRESHOLD: 3, RECOVERY_TIME: 30000, RECOVERY_BACKOFF_MULTIPLIER: 2, MAX_RECOVERY_TIME: 300000 };
+const TEST_CONFIG = { FAILURE_THRESHOLD: 3, RECOVERY_TIME: 30000, RECOVERY_BACKOFF_MULTIPLIER: 2, MAX_RECOVERY_TIME: 300000 };
+const config = isTest ? TEST_CONFIG : (isDev ? DEV_CONFIG : PROD_CONFIG);
+const FAILURE_THRESHOLD = config.FAILURE_THRESHOLD;
+const RECOVERY_TIME = config.RECOVERY_TIME;
+const RECOVERY_BACKOFF_MULTIPLIER = config.RECOVERY_BACKOFF_MULTIPLIER;
+const MAX_RECOVERY_TIME = config.MAX_RECOVERY_TIME;
+
+export enum CircuitBreakerStateType { CLOSED = 'CLOSED', OPEN = 'OPEN', HALF_OPEN = 'HALF_OPEN' }
+export interface CircuitBreakerState { failures: number; lastFailure: number; isOpen: boolean; state: CircuitBreakerStateType; recoveryTime: number; testRequestInProgress: boolean; recoveryAttempts: number; }
+const circuitBreakerStore = new Map<string, CircuitBreakerState>();
+
+export function getCircuitBreakerState(): CircuitBreakerState {
+  const state = circuitBreakerStore.get(CIRCUIT_BREAKER_KEY);
+  if (!state) { const newState: CircuitBreakerState = { failures: 0, lastFailure: 0, isOpen: false, state: CircuitBreakerStateType.CLOSED, recoveryTime: RECOVERY_TIME, testRequestInProgress: false, recoveryAttempts: 0 }; circuitBreakerStore.set(CIRCUIT_BREAKER_KEY, newState); return newState; }
+  if (state.state === CircuitBreakerStateType.OPEN && Date.now() - state.lastFailure > state.recoveryTime) { state.state = CircuitBreakerStateType.HALF_OPEN; state.isOpen = true; state.testRequestInProgress = false; }
+  return state;
+}
+
+export function canAttemptRefresh() { const state = getCircuitBreakerState(); if (state.state === CircuitBreakerStateType.CLOSED) return true; if (state.state === CircuitBreakerStateType.HALF_OPEN && !state.testRequestInProgress) { state.testRequestInProgress = true; return true; } return false; }
+export function recordFailure(error?: any) { const state = getCircuitBreakerState(); if (state.state === CircuitBreakerStateType.HALF_OPEN) { state.state = CircuitBreakerStateType.OPEN; state.isOpen = true; state.testRequestInProgress = false; state.failures++; state.lastFailure = Date.now(); state.recoveryAttempts++; state.recoveryTime = Math.min(RECOVERY_TIME * Math.pow(RECOVERY_BACKOFF_MULTIPLIER, state.recoveryAttempts), MAX_RECOVERY_TIME); } else { state.failures++; state.lastFailure = Date.now(); if (state.failures >= FAILURE_THRESHOLD) { state.state = CircuitBreakerStateType.OPEN; state.isOpen = true; state.testRequestInProgress = false; state.recoveryAttempts = 0; } } }
+export function recordSuccess() { const state = getCircuitBreakerState(); state.state = CircuitBreakerStateType.CLOSED; state.isOpen = false; state.failures = 0; state.testRequestInProgress = false; state.recoveryTime = RECOVERY_TIME; state.recoveryAttempts = 0; }
+export function isConnectionRefusedError(error: any): boolean { return error?.cause?.code === 'ECONNREFUSED' || error?.code === 'ECONNREFUSED' || error?.message?.includes('ECONNREFUSED'); }
+export function isNetworkError(error: any): boolean { return isConnectionRefusedError(error) || error?.message?.includes('fetch failed') || error?.message?.includes('ENOTFOUND') || error?.message?.includes('ETIMEDOUT') || error?.message?.includes('ECONNRESET') || error?.code === 'ENOTFOUND' || error?.code === 'ETIMEDOUT' || error?.code === 'ECONNRESET'; }
+export function getCircuitBreakerStateName(): string { const state = getCircuitBreakerState(); return state.state; }
+export function isCircuitBreakerOpen(): boolean { const state = getCircuitBreakerState(); return state.state === CircuitBreakerStateType.OPEN; }
+export function isCircuitBreakerHalfOpen(): boolean { const state = getCircuitBreakerState(); return state.state === CircuitBreakerStateType.HALF_OPEN; }
+export function isCircuitBreakerClosed(): boolean { const state = getCircuitBreakerState(); return state.state === CircuitBreakerStateType.CLOSED; }
+export function attemptRecovery(): boolean { const state = getCircuitBreakerState(); if (state.state === CircuitBreakerStateType.OPEN && Date.now() - state.lastFailure > state.recoveryTime) { state.state = CircuitBreakerStateType.HALF_OPEN; state.isOpen = true; state.testRequestInProgress = false; return true; } return false; }
+export function getTimeUntilRecovery(): number { const state = getCircuitBreakerState(); if (state.state !== CircuitBreakerStateType.OPEN) return 0; const timeSinceLastFailure = Date.now() - state.lastFailure; const timeUntilRecovery = state.recoveryTime - timeSinceLastFailure; return Math.max(0, timeUntilRecovery); }
+export function resetCircuitBreaker() { const state = getCircuitBreakerState(); state.state = CircuitBreakerStateType.CLOSED; state.isOpen = false; state.failures = 0; state.testRequestInProgress = false; state.recoveryTime = RECOVERY_TIME; state.lastFailure = 0; state.recoveryAttempts = 0; }
+export function clearCircuitBreakerStore() { circuitBreakerStore.clear(); }
+export const circuitBreaker = { getCircuitBreakerState, recordFailure, recordSuccess, isNetworkError, isConnectionRefusedError, canAttemptRefresh, getCircuitBreakerStateName, isCircuitBreakerOpen, isCircuitBreakerHalfOpen, isCircuitBreakerClosed, resetCircuitBreaker, attemptRecovery, getTimeUntilRecovery };

package/src/utils/error-message.ts

@@ -0,0 +1,108 @@
+// Utility to convert unknown errors or standardized API JSON into a friendly string
+// Keeps UI clean by avoiding raw JSON rendering.
+
+export function toFriendlyErrorMessage(err: unknown): string {
+  try {
+    // If it's already a string, try to parse JSON first
+    if (typeof err === 'string') {
+      const trimmed = err.trim();
+      if (looksLikeJson(trimmed)) {
+        const parsed = JSON.parse(trimmed);
+        return fromStructured(parsed);
+      }
+      return normalizeMessage(trimmed);
+    }
+
+    // If it's an Error
+    if (err instanceof Error) {
+      return normalizeMessage(err.message);
+    }
+
+    // Try to handle plain objects
+    if (err && typeof err === 'object') {
+      return fromStructured(err as Record<string, any>);
+    }
+
+    // Fallback
+    return 'Something went wrong. Please try again.';
+  } catch {
+    return 'Something went wrong. Please try again.';
+  }
+}
+
+function looksLikeJson(input: string) {
+  return (input.startsWith('{') && input.endsWith('}')) || (input.startsWith('[') && input.endsWith(']'));
+}
+
+function fromStructured(obj: Record<string, any>): string {
+  // StandardizedResponse shapes we use across the app
+  const success = get<boolean>(obj, ['success']);
+  const message = get<string>(obj, ['message']) || get<string>(obj, ['error', 'message']);
+  const code = get<string>(obj, ['error', 'code']) || get<string>(obj, ['error_code']);
+  const status = get<number>(obj, ['status']) || get<number>(obj, ['error', 'status']);
+
+  // Prefer the message if present
+  if (message) {
+    return normalizeMessage(message, code, status);
+  }
+
+  // If we have a code or status, map it
+  if (code || status) {
+    return normalizeMessage(undefined, code, status);
+  }
+
+  // As a last resort, do not dump raw JSON — provide generic fallback
+  return 'We could not complete your request. Please try again.';
+}
+
+function normalizeMessage(message?: string, code?: string, status?: number): string {
+  const msg = (message || '').toLowerCase();
+  const c = (code || '').toUpperCase();
+
+  // Map well-known codes first
+  switch (c) {
+    case 'TIMEOUT':
+    case 'REQUEST_TIMEOUT':
+      return 'Request timed out. Please try again.';
+    case 'TOO_MANY_REQUESTS':
+    case 'RATE_LIMIT_EXCEEDED':
+      return 'Too many attempts. Please wait a moment and try again.';
+    case 'SERVICE_UNAVAILABLE':
+      return 'Service temporarily unavailable. Please try again shortly.';
+    case 'UNAUTHORIZED':
+    case 'INVALID_SESSION':
+    case 'TOKEN_EXPIRED':
+      return 'Your session has expired. Please log in again.';
+    case 'VALIDATION_ERROR':
+      return 'Please check the code and try again.';
+  }
+
+  // Map by HTTP-ish status if provided
+  if (status === 408) return 'Request timed out. Please try again.';
+  if (status === 429) return 'Too many attempts. Please wait a moment and try again.';
+  if (status === 401) return 'Your session has expired. Please log in again.';
+  if (status === 503) return 'Service temporarily unavailable. Please try again shortly.';
+
+  // Heuristic by message content
+  if (msg.includes('timeout')) return 'Request timed out. Please try again.';
+  if (msg.includes('too many request') || msg.includes('rate limit'))
+    return 'Too many attempts. Please wait a moment and try again.';
+  if (msg.includes('unauthorized') || msg.includes('authentication failed') || msg.includes('session expired'))
+    return 'Your session has expired. Please log in again.';
+  if (msg.includes('network') || msg.includes('failed to fetch'))
+    return 'Network error. Check your connection and try again.';
+
+  // Default to the original message if we have one
+  if (message && message.trim()) return message;
+
+  return 'We could not complete your request. Please try again.';
+}
+
+function get<T = unknown>(obj: Record<string, any>, path: (string | number)[]): T | undefined {
+  let cur: any = obj;
+  for (const p of path) {
+    if (cur == null || typeof cur !== 'object' || !(p in cur)) return undefined;
+    cur = cur[p as any];
+  }
+  return cur as T;
+}

package/src/utils/layout/reservedSpace.ts

@@ -0,0 +1,124 @@
+/**
+ * Deterministic Reserved Space Utilities
+ * 
+ * PURPOSE: Measure exact computed typography and box metrics to calculate precise
+ * reserved heights for dynamic UI regions, eliminating layout shift.
+ * 
+ * MATHEMATICAL FOUNDATION:
+ * MaxHeight = (LineHeight × MaxLines) + (VerticalPadding × 2) 
+ *           + (MarginBetweenItems × (MaxLines - 1)) + BorderWidths
+ * 
+ * All measurements are DOM-computed px values (zoom-safe, sub-pixel precision).
+ */
+
+export type TypographyMetrics = {
+  fontSizePx: number;
+  lineHeightPx: number; // already in px (computed)
+  fontFamily: string;
+  fontWeight: string;
+  letterSpacingPx: number;
+};
+
+export type BoxMetrics = {
+  paddingTop: number;
+  paddingBottom: number;
+  borderTop: number;
+  borderBottom: number;
+  marginTop: number;
+  marginBottom: number;
+};
+
+/**
+ * Extract precise typography metrics from an element's computed styles
+ */
+export function getTypographyMetrics(el: Element): TypographyMetrics {
+  const cs = getComputedStyle(el);
+  const fontSizePx = parseFloat(cs.fontSize);
+  const lineHeightPx =
+    cs.lineHeight === "normal" ? fontSizePx * 1.2 : parseFloat(cs.lineHeight);
+  const letterSpacingPx = parseFloat(cs.letterSpacing || "0") || 0;
+  return {
+    fontSizePx,
+    lineHeightPx,
+    fontFamily: cs.fontFamily,
+    fontWeight: cs.fontWeight,
+    letterSpacingPx,
+  };
+}
+
+/**
+ * Extract box model metrics from an element's computed styles
+ */
+export function getBoxMetrics(el: Element): BoxMetrics {
+  const cs = getComputedStyle(el);
+  return {
+    paddingTop: parseFloat(cs.paddingTop),
+    paddingBottom: parseFloat(cs.paddingBottom),
+    borderTop: parseFloat(cs.borderTopWidth),
+    borderBottom: parseFloat(cs.borderBottomWidth),
+    marginTop: parseFloat(cs.marginTop),
+    marginBottom: parseFloat(cs.marginBottom),
+  };
+}
+
+/**
+ * Mathematical formula per spec:
+ * MaxHeight = (LineHeight × MaxLines) + (VerticalPadding × 2) 
+ *           + (MarginBetweenItems × (MaxLines - 1)) + BorderWidths
+ */
+export function calcHeightFromLines(args: {
+  lineHeightPx: number;
+  maxLines: number;
+  verticalPaddingPx: number; // paddingTop + paddingBottom
+  marginBetweenItemsPx: number; // applied between lines/items
+  borderWidthsPx: number; // borderTop + borderBottom
+}): number {
+  const { lineHeightPx, maxLines, verticalPaddingPx, marginBetweenItemsPx, borderWidthsPx } = args;
+  const content = lineHeightPx * maxLines;
+  const gaps = Math.max(0, maxLines - 1) * marginBetweenItemsPx;
+  return content + verticalPaddingPx + gaps + borderWidthsPx;
+}
+
+/**
+ * Measure arbitrary DOM subtree height at a constrained width using an offscreen probe.
+ * This leverages the browser layout engine for exact results at any zoom level.
+ * 
+ * CRITICAL: The probe uses contain: layout style size to isolate layout cost.
+ */
+export function measureNodeHeightAtWidth(nodeFactory: () => HTMLElement, widthPx: number): number {
+  const probeHost = document.createElement("div");
+  probeHost.style.position = "absolute";
+  probeHost.style.visibility = "hidden";
+  probeHost.style.pointerEvents = "none";
+  probeHost.style.left = "-100000px";
+  probeHost.style.top = "0";
+  probeHost.style.width = widthPx + "px";
+  probeHost.style.contain = "layout style size";
+  const node = nodeFactory();
+  probeHost.appendChild(node);
+  document.body.appendChild(probeHost);
+  const h = probeHost.getBoundingClientRect().height;
+  document.body.removeChild(probeHost);
+  return h;
+}
+
+/**
+ * Observe size changes and DPR to keep measurements exact across zoom/viewport changes.
+ * Returns cleanup function.
+ */
+export function observeForRecalc(target: Element, cb: () => void): () => void {
+  const ro = new ResizeObserver(() => cb());
+  ro.observe(target as Element);
+  const onResize = () => cb();
+  window.addEventListener("resize", onResize);
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener("resize", onResize);
+  }
+  return () => {
+    ro.disconnect();
+    window.removeEventListener("resize", onResize);
+    if (window.visualViewport) {
+      window.visualViewport.removeEventListener("resize", onResize);
+    }
+  };
+}

package/src/utils/logout.ts

@@ -0,0 +1,30 @@
+/**
+ * Simple Logout Utility for @payez/next-mvp
+ *
+ * Provides a clean logout function that:
+ * - Clears NextAuth session
+ * - Redirects to login page
+ * - No external dependencies
+ */
+
+import { signOut } from 'next-auth/react';
+
+/**
+ * Sign out the current user and redirect to login
+ *
+ * @param redirectUrl - URL to redirect to after logout (default: /account-auth/login)
+ */
+export async function logout(redirectUrl: string = '/account-auth/login'): Promise<void> {
+  try {
+    await signOut({
+      callbackUrl: redirectUrl,
+      redirect: true,
+    });
+  } catch (error) {
+    console.error('Logout error:', error);
+    // Fallback: force redirect to login
+    if (typeof window !== 'undefined') {
+      window.location.href = redirectUrl;
+    }
+  }
+}