@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/i18n/rtl.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import { i18nInstance } from './instance.js';
+import { isRTL, RTL_LANGUAGES, resolveLanguage, SUPPORTED_LANGUAGES } from './rtl.js';
+
+describe('isRTL', () => {
+    it.each(['ar', 'he', 'fa', 'ur'])('returns true for %s', (lng) => {
+        expect(isRTL(lng)).toBe(true);
+    });
+
+    it('returns true for region-tagged RTL locales', () => {
+        expect(isRTL('ar-EG')).toBe(true);
+        expect(isRTL('ar-SA')).toBe(true);
+        expect(isRTL('AR')).toBe(true); // case-insensitive on base
+    });
+
+    it.each(['en', 'fr', 'de', 'es', 'zh', 'zh-TW', 'ja', 'ko', 'pt-BR'])('returns false for %s', (lng) => {
+        expect(isRTL(lng)).toBe(false);
+    });
+
+    it('returns false for empty / undefined', () => {
+        expect(isRTL(undefined)).toBe(false);
+        expect(isRTL('')).toBe(false);
+    });
+});
+
+describe('resolveLanguage', () => {
+    it('preserves zh-TW as an exact match (not collapsed to zh)', () => {
+        expect(resolveLanguage('zh-TW')).toBe('zh-TW');
+    });
+
+    it('collapses non-supported region tags to the base language', () => {
+        expect(resolveLanguage('zh-HK')).toBe('zh');
+        expect(resolveLanguage('pt-BR')).toBe('pt');
+        expect(resolveLanguage('en-US')).toBe('en');
+        expect(resolveLanguage('ar-EG')).toBe('ar');
+    });
+
+    it('returns en for unknown languages', () => {
+        expect(resolveLanguage('xx')).toBe('en');
+        expect(resolveLanguage('xx-YY')).toBe('en');
+    });
+
+    it('returns en for empty / null / undefined', () => {
+        expect(resolveLanguage(undefined)).toBe('en');
+        expect(resolveLanguage(null)).toBe('en');
+        expect(resolveLanguage('')).toBe('en');
+    });
+
+    it('passes through every supported language unchanged', () => {
+        for (const lng of SUPPORTED_LANGUAGES) {
+            expect(resolveLanguage(lng)).toBe(lng);
+        }
+    });
+});
+
+describe('RTL_LANGUAGES set', () => {
+    it('contains he/fa/ur even though they are not in SUPPORTED_LANGUAGES', () => {
+        expect(RTL_LANGUAGES.has('he')).toBe(true);
+        expect(RTL_LANGUAGES.has('fa')).toBe(true);
+        expect(RTL_LANGUAGES.has('ur')).toBe(true);
+        const supportedSet = new Set<string>(SUPPORTED_LANGUAGES as readonly string[]);
+        expect(supportedSet.has('he')).toBe(false);
+        expect(supportedSet.has('fa')).toBe(false);
+        expect(supportedSet.has('ur')).toBe(false);
+    });
+});
+
+describe('SUPPORTED_LANGUAGES divergence guard', () => {
+    it('matches exactly the locales registered in i18nInstance.options.resources', () => {
+        const registered = Object.keys(i18nInstance.options.resources ?? {}).sort();
+        const supported = [...SUPPORTED_LANGUAGES].sort();
+        expect(registered).toEqual(supported);
+    });
+});

package/src/i18n/rtl.ts

@@ -0,0 +1,55 @@
+/**
+ * RTL detection and language resolution for the @vertesia/ui locale set.
+ *
+ * SUPPORTED_LANGUAGES is the single source of truth for what locales the
+ * switcher offers, and must stay in sync with the resources registered in
+ * `./instance.ts`. A divergence-guard test (`./rtl.test.ts`) fails the build
+ * if the two diverge.
+ *
+ * RTL_LANGUAGES is deliberately broader than SUPPORTED_LANGUAGES so that
+ * dir="rtl" handling is forward-compatible when new RTL locales (he, fa, ur,
+ * ...) are added to instance.ts later.
+ */
+
+export const SUPPORTED_LANGUAGES = [
+    'ar',
+    'de',
+    'en',
+    'es',
+    'fr',
+    'it',
+    'ja',
+    'ko',
+    'pt',
+    'ru',
+    'tr',
+    'zh',
+    'zh-TW',
+] as const;
+
+export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
+
+export const RTL_LANGUAGES: ReadonlySet<string> = new Set(['ar', 'he', 'fa', 'ur']);
+
+export function isRTL(lng?: string): boolean {
+    if (!lng) return false;
+    return RTL_LANGUAGES.has(lng.split('-')[0].toLowerCase());
+}
+
+/**
+ * Resolve any raw language code (BCP-47 or bare) to a SupportedLanguage:
+ *   1. exact match against SUPPORTED_LANGUAGES (preserves `zh-TW` vs `zh`)
+ *   2. base-language fallback (`pt-BR` -> `pt`)
+ *   3. `'en'` fallback
+ *
+ * The inline FOUC script in `index.html` must reimplement this same logic
+ * verbatim (it cannot import ESM before bundle load).
+ */
+export function resolveLanguage(raw: string | undefined | null): SupportedLanguage {
+    if (!raw) return 'en';
+    const list = SUPPORTED_LANGUAGES as readonly string[];
+    if (list.includes(raw)) return raw as SupportedLanguage;
+    const base = raw.split('-')[0];
+    if (list.includes(base)) return base as SupportedLanguage;
+    return 'en';
+}

package/src/i18n/useLocaleFormat.test.tsx

@@ -0,0 +1,176 @@
+/// <reference lib="dom" />
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { LanguageProvider } from './LanguageProvider.js';
+import type { SupportedLanguage } from './rtl.js';
+import { type LocaleFormat, useLocaleFormat } from './useLocaleFormat.js';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement | null = null;
+let root: Root | null = null;
+
+function mount(language: SupportedLanguage): LocaleFormat {
+    // The provider reads localStorage > navigator.language > defaultLanguage,
+    // so to force a language in tests we have to pin it via localStorage.
+    localStorage.setItem('vertesia-ui-language', language);
+    let snap!: LocaleFormat;
+    function Probe() {
+        snap = useLocaleFormat();
+        return null;
+    }
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    void act(() => {
+        root?.render(
+            <LanguageProvider>
+                <Probe />
+            </LanguageProvider>,
+        );
+    });
+    return snap;
+}
+
+describe('useLocaleFormat', () => {
+    beforeEach(() => {
+        localStorage.clear();
+    });
+    afterEach(() => {
+        void act(() => {
+            root?.unmount();
+        });
+        container?.remove();
+        container = null;
+        root = null;
+    });
+
+    it('exposes the active language code', () => {
+        const fr = mount('fr');
+        expect(fr.language).toBe('fr');
+    });
+
+    describe('formatDate / formatDateTime / formatTime', () => {
+        // Use noon UTC so timezone offsets stay on the same calendar day across
+        // every reasonable test environment.
+        const sample = new Date(Date.UTC(2026, 4, 11, 12, 0, 0));
+
+        it('renders dates in the active locale', () => {
+            const en = mount('en');
+            // Default style is `long` so en-US renders e.g. "May 11, 2026".
+            expect(en.formatDate(sample)).toMatch(/May/);
+            expect(en.formatDate(sample)).toMatch(/2026/);
+        });
+
+        it('uses 年月日 markers for Japanese', () => {
+            const ja = mount('ja').formatDate(sample);
+            expect(ja).toContain('年');
+            expect(ja).toContain('月');
+            expect(ja).toContain('日');
+        });
+
+        it('honors numberingSystem option for Arabic-Indic digits', () => {
+            const ar = mount('ar').formatDate(sample, {
+                dateStyle: 'short',
+                numberingSystem: 'arab',
+            });
+            expect(ar).toMatch(/[٠-٩]/);
+        });
+
+        it('produces different output for different locales', () => {
+            const en = mount('en').formatDateTime(sample);
+            const ja = mount('ja').formatDateTime(sample);
+            const ar = mount('ar').formatDateTime(sample);
+            expect(en).not.toBe(ja);
+            expect(en).not.toBe(ar);
+            expect(ja).not.toBe(ar);
+        });
+
+        it('accepts Date / ISO string / epoch ms inputs', () => {
+            const en = mount('en');
+            const asDate = en.formatDate(sample);
+            const asString = en.formatDate(sample.toISOString());
+            const asNumber = en.formatDate(sample.getTime());
+            expect(asDate).toBe(asString);
+            expect(asDate).toBe(asNumber);
+        });
+
+        it('returns the placeholder for null / undefined / invalid', () => {
+            const en = mount('en');
+            expect(en.formatDate(null)).toBe('—');
+            expect(en.formatDate(undefined)).toBe('—');
+            expect(en.formatDate('not-a-date')).toBe('—');
+            expect(en.formatDate(Number.NaN)).toBe('—');
+        });
+
+        it('honors custom DateTimeFormat options', () => {
+            const en = mount('en');
+            const full = en.formatDate(sample, { year: 'numeric', month: 'long', day: 'numeric' });
+            expect(full).toMatch(/May/);
+            expect(full).toMatch(/2026/);
+        });
+    });
+
+    describe('formatNumber', () => {
+        it('uses locale digits and separators', () => {
+            const en = mount('en').formatNumber(1234567.89);
+            const ja = mount('ja').formatNumber(1234567.89);
+            expect(en).toMatch(/1,234,567/);
+            // ja and en may share separators; assert they at least format the
+            // same input as a string without throwing.
+            expect(typeof ja).toBe('string');
+            expect(ja.length).toBeGreaterThan(0);
+        });
+
+        it('honors numberingSystem option for Arabic-Indic digits', () => {
+            const ar = mount('ar').formatNumber(42, { numberingSystem: 'arab' });
+            expect(ar).toMatch(/[٠-٩]/);
+        });
+
+        it('returns the placeholder for null / NaN', () => {
+            const en = mount('en');
+            expect(en.formatNumber(null)).toBe('—');
+            expect(en.formatNumber(Number.NaN)).toBe('—');
+        });
+
+        it('honors NumberFormat options like currency', () => {
+            const en = mount('en').formatNumber(42, { style: 'currency', currency: 'USD' });
+            expect(en).toMatch(/\$/);
+            expect(en).toMatch(/42/);
+        });
+    });
+
+    describe('formatRelativeTime', () => {
+        it('produces a locale-specific relative phrase', () => {
+            const en = mount('en');
+            const future = new Date(Date.now() + 2 * 86400 * 1000); // +2 days
+            const past = new Date(Date.now() - 2 * 86400 * 1000); // -2 days
+            expect(en.formatRelativeTime(future)).toMatch(/2.*days?/);
+            expect(en.formatRelativeTime(past)).toMatch(/2.*days? ago/);
+        });
+
+        it('returns the placeholder for invalid input', () => {
+            const en = mount('en');
+            expect(en.formatRelativeTime(null)).toBe('—');
+            expect(en.formatRelativeTime('not-a-date')).toBe('—');
+        });
+    });
+
+    describe('formatList', () => {
+        it('joins items in locale-appropriate conjunction style', () => {
+            const en = mount('en').formatList(['Alice', 'Bob', 'Carol']);
+            expect(en).toMatch(/Alice/);
+            expect(en).toMatch(/Bob/);
+            expect(en).toMatch(/Carol/);
+        });
+
+        it('handles empty / null-filtered inputs', () => {
+            const en = mount('en');
+            expect(en.formatList([])).toBe('');
+            expect(en.formatList(['', 'x', ''])).toBe('x');
+        });
+    });
+});

package/src/i18n/useLocaleFormat.ts

@@ -0,0 +1,106 @@
+import { useMemo } from 'react';
+import { useLanguage } from './LanguageProvider.js';
+
+type DateInput = Date | string | number | null | undefined;
+
+function toDate(input: DateInput): Date | null {
+    if (input == null) return null;
+    const d = input instanceof Date ? input : new Date(input);
+    return Number.isNaN(d.getTime()) ? null : d;
+}
+
+/**
+ * Locale-aware formatters bound to the active language. Use these instead of
+ * `.toLocaleString()` / `.toLocaleDateString()` so dates and numbers respect
+ * the user's chosen UI language (and switch between Latin/Arabic-Indic
+ * numerals, 12h/24h clocks, day/month ordering, etc.) rather than picking up
+ * whatever the browser default happens to be.
+ *
+ * All formatters return `'—'` for null / undefined / invalid inputs.
+ */
+export interface LocaleFormat {
+    /** Active language code (e.g. `'en'`, `'ar'`, `'zh-TW'`). */
+    language: string;
+    /** Date only, locale-appropriate short form by default. */
+    formatDate: (date: DateInput, options?: Intl.DateTimeFormatOptions) => string;
+    /** Date + time, short forms by default. */
+    formatDateTime: (date: DateInput, options?: Intl.DateTimeFormatOptions) => string;
+    /** Time only, short form by default. */
+    formatTime: (date: DateInput, options?: Intl.DateTimeFormatOptions) => string;
+    /** Number, with locale-appropriate digits, separators, and grouping. */
+    formatNumber: (value: number | null | undefined, options?: Intl.NumberFormatOptions) => string;
+    /** Relative time like "in 2 hours" or "yesterday". */
+    formatRelativeTime: (date: DateInput, options?: Intl.RelativeTimeFormatOptions) => string;
+    /** List of strings, locale-appropriate conjunction ("a, b, and c"). */
+    formatList: (items: string[], options?: Intl.ListFormatOptions) => string;
+}
+
+const PLACEHOLDER = '—';
+
+const RELATIVE_UNITS: { unit: Intl.RelativeTimeFormatUnit; seconds: number }[] = [
+    { unit: 'year', seconds: 31536000 },
+    { unit: 'month', seconds: 2628000 },
+    { unit: 'week', seconds: 604800 },
+    { unit: 'day', seconds: 86400 },
+    { unit: 'hour', seconds: 3600 },
+    { unit: 'minute', seconds: 60 },
+    { unit: 'second', seconds: 1 },
+];
+
+export function useLocaleFormat(): LocaleFormat {
+    const { language } = useLanguage();
+
+    return useMemo<LocaleFormat>(() => {
+        // dateStyle: 'long' so each locale shows its native flavor — Japanese
+        // gets 年月日 markers, English gets "May 11, 2026", Arabic gets month
+        // names, etc. The 'short' style is too aggressively numeric (it
+        // renders Japanese as "2026/05/11", which is correct per CLDR but
+        // doesn't feel localized to users). Call sites that want compact
+        // numeric output can pass `{ dateStyle: 'short' }` explicitly.
+        const dateLong = new Intl.DateTimeFormat(language, { dateStyle: 'long' });
+        const dateTimeLong = new Intl.DateTimeFormat(language, { dateStyle: 'long', timeStyle: 'short' });
+        const timeShort = new Intl.DateTimeFormat(language, { timeStyle: 'short' });
+        const numberDefault = new Intl.NumberFormat(language);
+        const relativeDefault = new Intl.RelativeTimeFormat(language, { numeric: 'auto' });
+        const listDefault = new Intl.ListFormat(language);
+
+        return {
+            language,
+            formatDate: (date, options) => {
+                const d = toDate(date);
+                if (!d) return PLACEHOLDER;
+                return options ? new Intl.DateTimeFormat(language, options).format(d) : dateLong.format(d);
+            },
+            formatDateTime: (date, options) => {
+                const d = toDate(date);
+                if (!d) return PLACEHOLDER;
+                return options ? new Intl.DateTimeFormat(language, options).format(d) : dateTimeLong.format(d);
+            },
+            formatTime: (date, options) => {
+                const d = toDate(date);
+                if (!d) return PLACEHOLDER;
+                return options ? new Intl.DateTimeFormat(language, options).format(d) : timeShort.format(d);
+            },
+            formatNumber: (value, options) => {
+                if (value == null || Number.isNaN(value)) return PLACEHOLDER;
+                return options ? new Intl.NumberFormat(language, options).format(value) : numberDefault.format(value);
+            },
+            formatRelativeTime: (date, options) => {
+                const d = toDate(date);
+                if (!d) return PLACEHOLDER;
+                const diffSeconds = (d.getTime() - Date.now()) / 1000;
+                const abs = Math.abs(diffSeconds);
+                const { unit, seconds } =
+                    RELATIVE_UNITS.find((u) => abs >= u.seconds) ?? RELATIVE_UNITS[RELATIVE_UNITS.length - 1];
+                const value = Math.round(diffSeconds / seconds);
+                const formatter = options ? new Intl.RelativeTimeFormat(language, options) : relativeDefault;
+                return formatter.format(value, unit);
+            },
+            formatList: (items, options) => {
+                const filtered = items.filter((v) => v != null && v !== '');
+                if (filtered.length === 0) return '';
+                return options ? new Intl.ListFormat(language, options).format(filtered) : listDefault.format(filtered);
+            },
+        };
+    }, [language]);
+}

package/src/layout/AppLayout.tsx

@@ -1,104 +1,114 @@
-import clsx from 'clsx'
-import { useEffect, useState } from 'react'
-import { SidePanel } from '@vertesia/ui/core'
+import { SidePanel } from '@vertesia/ui/core';
+import { useLanguage } from '@vertesia/ui/i18n';
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
 // import { FullHeightLayout } from './FullHeightLayout.js'
-import { Navbar } from './Navbar.js'
-import { Sidebar } from './Sidebar.js'
-import { SidebarContext } from './SidebarContext.js'
+import { Navbar } from './Navbar.js';
+import { Sidebar } from './Sidebar.js';
+import { SidebarContext } from './SidebarContext.js';
 
 interface AppLayoutProps {
     title?: string;
-    children: React.ReactNode | React.ReactNode[]
-    logo?: React.ReactNode
-    navbar?: React.ReactNode | React.ReactNode[]
-    sidebar?: React.ReactNode | React.ReactNode[]
-    mainNav?: React.ReactNode
-    className?: string // will be forwarded to the main page element
-    sidebarClassName?: string // will be forwarded to the sidebar element
+    children: React.ReactNode | React.ReactNode[];
+    logo?: React.ReactNode;
+    navbar?: React.ReactNode | React.ReactNode[];
+    sidebar?: React.ReactNode | React.ReactNode[];
+    mainNav?: React.ReactNode;
+    className?: string; // will be forwarded to the main page element
+    sidebarClassName?: string; // will be forwarded to the sidebar element
 }
-export function AppLayout({ sidebarClassName, className, title, children, logo, navbar, sidebar, mainNav }: AppLayoutProps) {
-
+export function AppLayout({
+    sidebarClassName,
+    className,
+    title,
+    children,
+    logo,
+    navbar,
+    sidebar,
+    mainNav,
+}: AppLayoutProps) {
     if (localStorage.getItem('desktopSidebarOpen') === null) {
         localStorage.setItem('desktopSidebarOpen', 'true');
     }
 
-    const [sidebarOpen, setSidebarOpen] = useState(false)
-    const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(localStorage.getItem('desktopSidebarOpen') === 'true')
-    const [isLargeScreen, setIsLargeScreen] = useState(window.innerWidth >= 1024)
+    const { isRTL } = useLanguage();
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+    const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(localStorage.getItem('desktopSidebarOpen') === 'true');
+    const [isLargeScreen, setIsLargeScreen] = useState(window.innerWidth >= 1024);
 
     useEffect(() => {
         const handleResize = () => {
-            setIsLargeScreen(window.innerWidth >= 1024)
-        }
+            setIsLargeScreen(window.innerWidth >= 1024);
+        };
 
-        window.addEventListener('resize', handleResize)
-        return () => window.removeEventListener('resize', handleResize)
-    }, [])
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
 
     const sidebarContextValue = {
         isOpen: isLargeScreen ? desktopSidebarOpen : sidebarOpen,
         toggleDesktop: (value?: boolean) => {
             if (value === undefined) {
-                setDesktopSidebarOpen(!desktopSidebarOpen)
+                setDesktopSidebarOpen(!desktopSidebarOpen);
             } else {
-                setDesktopSidebarOpen(value)
+                setDesktopSidebarOpen(value);
             }
-            localStorage.setItem('desktopSidebarOpen', JSON.stringify(!desktopSidebarOpen))
+            localStorage.setItem('desktopSidebarOpen', JSON.stringify(!desktopSidebarOpen));
         },
         toggleMobile: (value?: boolean) => {
             if (value === undefined) {
-                setSidebarOpen(!sidebarOpen)
+                setSidebarOpen(!sidebarOpen);
             } else {
-                setSidebarOpen(value)
+                setSidebarOpen(value);
             }
         },
-    }
+    };
 
     return (
-        <>
-            <div className='flex flex-col h-screen overflow-y-hidden'>
+        <div className="flex flex-col h-screen overflow-y-hidden">
+            <SidebarContext.Provider value={sidebarContextValue}>
+                <div className="w-full">{mainNav}</div>
 
-                <SidebarContext.Provider value={sidebarContextValue}>
-                    <div className='w-full'>
-                        {mainNav}
+                <div className="flex h-full overflow-y-auto w-full">
+                    {/* Mobile sidebar */}
+                    <div className="lg:hidden">
+                        <SidePanel
+                            className="bg-sidebar"
+                            isOpen={sidebarOpen}
+                            onClose={() => setSidebarOpen(false)}
+                            side={isRTL ? 'right' : 'left'}
+                            panelWidth={288}
+                            resizable={false}
+                            backdrop={true}
+                        >
+                            <Sidebar logo={logo} className={sidebarClassName}>
+                                {sidebar}
+                            </Sidebar>
+                        </SidePanel>
                     </div>
 
-                    <div className='flex h-full overflow-y-auto w-full'>
-
-                        {/* Mobile sidebar */}
-                        <div className="lg:hidden">
-                            <SidePanel
-                                className='bg-sidebar'
-                                isOpen={sidebarOpen}
-                                onClose={() => setSidebarOpen(false)}
-                                side="left"
-                                panelWidth={288}
-                                resizable={false}
-                                backdrop={true}
-                            >
-                                <Sidebar logo={logo} className={sidebarClassName}>{sidebar}</Sidebar>
-                            </SidePanel>
-                        </div>
-
-                        {/* Static sidebar for desktop */}
-                        <div className={`hidden lg:block relative transition-all duration-300 ${desktopSidebarOpen ? 'w-72' : 'w-12'}`}>
-                            {/* Sidebar component, swap this element with another sidebar if you like */}
-                            <Sidebar logo={logo} className={sidebarClassName}>{sidebar}</Sidebar>
-                        </div>
+                    {/* Static sidebar for desktop */}
+                    <div
+                        className={`hidden lg:block relative transition-all duration-300 ${desktopSidebarOpen ? 'w-72' : 'w-12'}`}
+                    >
+                        {/* Sidebar component, swap this element with another sidebar if you like */}
+                        <Sidebar logo={logo} className={sidebarClassName}>
+                            {sidebar}
+                        </Sidebar>
+                    </div>
 
-                        <div className="w-full h-full overflow-y-hidden">
-                            {navbar ? (
-                                <Navbar title={title} logo={logo}>
-                                    {navbar}
-                                </Navbar>
-                            ) : null}
-                            <main className={clsx("flex-1 h-full w-full relative flex flex-col", className)}>
-                                {children}
-                            </main>
-                        </div>
+                    <div className="w-full h-full overflow-y-hidden">
+                        {navbar ? (
+                            <Navbar title={title} logo={logo}>
+                                {navbar}
+                            </Navbar>
+                        ) : null}
+                        <main className={clsx('flex-1 h-full w-full relative flex flex-col', className)}>
+                            {children}
+                        </main>
                     </div>
-                </SidebarContext.Provider>
-            </div>
-        </>
-    )
+                </div>
+            </SidebarContext.Provider>
+        </div>
+    );
 }

package/src/layout/ErrorPage.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@vertesia/ui/core';
+
+type ErrorPageProps = {
+    title?: string;
+    message?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+};
+
+export function ErrorPage({
+    title = 'Something went wrong',
+    message = 'An unexpected error occurred. Please try again.',
+    actionLabel = 'Try again',
+    onAction,
+}: ErrorPageProps) {
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-white px-6 py-12 text-center">
+            <div className="max-w-md space-y-6">
+                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-destructive text-3xl font-semibold text-destructive">
+                    !
+                </div>
+
+                <div className="space-y-2">
+                    <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+                    <p className="text-sm leading-6 text-muted">{message}</p>
+                </div>
+
+                {onAction ? <Button onClick={onAction}>{actionLabel}</Button> : null}
+            </div>
+        </div>
+    );
+}