upgrade to tamagui v2 and guest pwa overhaul

resources/js/guest-v2/__tests__/brandingTheme.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it, beforeEach, afterEach } from 'vitest';
+import { resolveGuestThemeName } from '../lib/brandingTheme';
+import type { EventBranding } from '@/guest/types/event-branding';
+
+const baseBranding: EventBranding = {
+  primaryColor: '#FF5A5F',
+  secondaryColor: '#F43F5E',
+  backgroundColor: '#ffffff',
+  fontFamily: 'Inter',
+  logoUrl: null,
+  palette: {
+    primary: '#FF5A5F',
+    secondary: '#F43F5E',
+    background: '#ffffff',
+    surface: '#ffffff',
+  },
+  typography: {
+    heading: 'Inter',
+    body: 'Inter',
+    sizePreset: 'm',
+  },
+  mode: 'auto',
+};
+
+const originalMatchMedia = window.matchMedia;
+
+function mockMatchMedia(matches: boolean) {
+  window.matchMedia = ((query: string) => ({
+    matches,
+    media: query,
+    onchange: null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  })) as typeof window.matchMedia;
+}
+
+describe('resolveGuestThemeName', () => {
+  beforeEach(() => {
+    mockMatchMedia(false);
+  });
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia;
+  });
+
+  it('uses branding mode overrides', () => {
+    expect(resolveGuestThemeName({ ...baseBranding, mode: 'dark' }, 'light')).toBe('guestNight');
+    expect(resolveGuestThemeName({ ...baseBranding, mode: 'light' }, 'dark')).toBe('guestLight');
+  });
+
+  it('respects explicit appearance when mode is auto', () => {
+    expect(resolveGuestThemeName({ ...baseBranding, mode: 'auto' }, 'dark')).toBe('guestNight');
+    expect(resolveGuestThemeName({ ...baseBranding, mode: 'auto' }, 'light')).toBe('guestLight');
+  });
+
+  it('falls back to background luminance when appearance is system', () => {
+    const darkBackground = { ...baseBranding, backgroundColor: '#0a0f1f' };
+    expect(resolveGuestThemeName(darkBackground, 'system')).toBe('guestNight');
+
+    const lightBackground = { ...baseBranding, backgroundColor: '#fdf9f4' };
+    expect(resolveGuestThemeName(lightBackground, 'system')).toBe('guestLight');
+  });
+
+  it('uses system preference when background is neutral', () => {
+    const neutralBackground = { ...baseBranding, backgroundColor: '#b0b0b0' };
+    mockMatchMedia(true);
+    expect(resolveGuestThemeName(neutralBackground, 'system')).toBe('guestNight');
+    mockMatchMedia(false);
+    expect(resolveGuestThemeName(neutralBackground, 'system')).toBe('guestLight');
+  });
+});