@tuturuuu/ui 0.37.0 → 0.37.1

package/src/components/ui/legacy/calendar/event-card.test.tsx

@@ -1,12 +1,12 @@
 // @vitest-environment jsdom
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { EventCard } from './event-card';
 
 dayjs.extend(utc);
@@ -19,6 +19,9 @@ class ResizeObserverMock {
 }
 
 const calendarMocks = vi.hoisted(() => ({
+  hoveredBaseEventId: null as string | null,
+  hoveredEventColumn: null as number | null,
+  preservePastEventOpacity: true,
   deleteEvent: vi.fn(),
   hideModal: vi.fn(),
   isEventReadOnly: vi.fn(() => true),
@@ -34,11 +37,11 @@ vi.mock('@tuturuuu/ui/hooks/use-calendar', () => ({
     deleteEvent: calendarMocks.deleteEvent,
     disableBuiltInEventUi: true,
     hideModal: calendarMocks.hideModal,
-    hoveredBaseEventId: null,
-    hoveredEventColumn: null,
+    hoveredBaseEventId: calendarMocks.hoveredBaseEventId,
+    hoveredEventColumn: calendarMocks.hoveredEventColumn,
     isEventReadOnly: calendarMocks.isEventReadOnly,
     openModal: calendarMocks.openModal,
-    preservePastEventOpacity: true,
+    preservePastEventOpacity: calendarMocks.preservePastEventOpacity,
     readOnly: false,
     renderEventContextMenu: undefined,
     setHoveredBaseEventId: calendarMocks.setHoveredBaseEventId,
@@ -77,9 +80,15 @@ function renderEventCard(event: CalendarEvent) {
   );
 }
 
+afterEach(() => vi.useRealTimers());
 describe('EventCard read-only adapter events', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    vi.useFakeTimers({ toFake: ['Date'] });
+    vi.setSystemTime(new Date('2026-06-28T00:00:00Z'));
+    calendarMocks.hoveredBaseEventId = null;
+    calendarMocks.hoveredEventColumn = null;
+    calendarMocks.preservePastEventOpacity = true;
     vi.stubGlobal('ResizeObserver', ResizeObserverMock);
     vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
       callback(0);
@@ -87,6 +96,197 @@ describe('EventCard read-only adapter events', () => {
     });
   });
 
+  it('renders opaque RGB and contrast text on a timed event', () => {
+    renderEventCard({
+      id: 'rgb',
+      title: 'RGB event',
+      color: 'BLUE',
+      start_at: '2026-06-26T08:30:00.000Z',
+      end_at: '2026-06-26T09:30:00.000Z',
+      scheduling_metadata: {
+        google_color: { version: 1, inherited: false, background: '#00ff88' },
+      },
+    });
+    const card = screen.getByTestId('calendar-event-rgb');
+    expect(card.style.backgroundColor).toBe('rgb(0, 255, 136)');
+    expect(card.style.color).toBe('rgb(0, 0, 0)');
+    expect(card.style.opacity).toBe('1');
+  });
+
+  it('updates the same mounted card when only provider metadata changes', () => {
+    const event: CalendarEvent = {
+      id: 'metadata-rerender',
+      title: 'Provider event',
+      color: 'BLUE',
+      start_at: '2026-06-26T08:30:00.000Z',
+      end_at: '2026-06-26T09:30:00.000Z',
+      scheduling_metadata: {
+        google_color: { version: 1, inherited: false, background: '#00ff88' },
+      },
+    };
+    const client = new QueryClient();
+    const dates = [new Date('2026-06-26T00:00:00.000Z')];
+    const card = (value: CalendarEvent) => (
+      <QueryClientProvider client={client}>
+        <EventCard dates={dates} event={value} wsId="workspace-1" />
+      </QueryClientProvider>
+    );
+    const view = render(card(event));
+    const element = screen.getByTestId('calendar-event-metadata-rerender');
+    expect(element.style.backgroundColor).toBe('rgb(0, 255, 136)');
+    view.rerender(
+      card({
+        ...event,
+        scheduling_metadata: {
+          google_color: { version: 1, inherited: false, background: '#000044' },
+        },
+      })
+    );
+    expect(screen.getByTestId('calendar-event-metadata-rerender')).toBe(
+      element
+    );
+    expect(element.style.backgroundColor).toBe('rgb(0, 0, 68)');
+    expect(element.style.color).toBe('rgb(255, 255, 255)');
+    expect(element.style.opacity).toBe('1');
+    view.rerender(card({ ...event, scheduling_metadata: null }));
+    expect(element.style.backgroundColor).toBe('rgb(33, 150, 243)');
+  });
+
+  it('keeps pending and past fills opaque, and reveals lower stacks by hiding upper cards', () => {
+    calendarMocks.preservePastEventOpacity = false;
+    calendarMocks.hoveredBaseEventId = 'base';
+    calendarMocks.hoveredEventColumn = 0;
+    const base = {
+      id: 'stack',
+      title: 'Stack',
+      color: 'BLUE' as const,
+      start_at: '2026-06-26T08:30:00.000Z',
+      end_at: '2026-06-26T09:30:00.000Z',
+      _column: 1,
+      _overlapCount: 2,
+      _overlapGroup: ['base', 'stack'],
+      _optimisticStatus: 'updating',
+      scheduling_metadata: {
+        google_color: { version: 1, inherited: false, background: '#00ff88' },
+      },
+    };
+    const rendered = renderEventCard(base);
+    const card = screen.getByTestId('calendar-event-stack');
+    expect(card.style.opacity).toBe('1');
+    expect(card.style.visibility).toBe('hidden');
+    expect(card.style.backgroundColor).toBe('rgb(0, 255, 136)');
+    expect(card.className).not.toMatch(/opacity-(?:30|50|60|80)/);
+    expect(card).toHaveClass('line-through');
+    rendered.unmount();
+    calendarMocks.hoveredBaseEventId = null;
+    calendarMocks.hoveredEventColumn = null;
+    renderEventCard(base);
+    expect(screen.getByTestId('calendar-event-stack').style.visibility).toBe(
+      'visible'
+    );
+    expect(screen.getByTestId('calendar-event-stack').style.opacity).toBe('1');
+  });
+
+  it.each(['drag', 'resize'] as const)(
+    'keeps provider fill and text opaque during %s pickup',
+    (interaction) => {
+      calendarMocks.isEventReadOnly.mockReturnValueOnce(false);
+      const { container } = renderEventCard({
+        id: 'interaction',
+        title: 'Interactive RGB',
+        color: 'BLUE',
+        start_at: '2026-06-26T08:30:00.000Z',
+        end_at: '2026-06-26T09:30:00.000Z',
+        scheduling_metadata: {
+          google_color: { version: 1, inherited: false, background: '#00ff88' },
+        },
+      });
+      const card = screen.getByTestId('calendar-event-interaction');
+      const handle =
+        interaction === 'resize'
+          ? container.querySelector('.cursor-s-resize')!
+          : screen.getByText('Interactive RGB');
+      fireEvent.mouseDown(handle, { button: 0, clientX: 20, clientY: 20 });
+      expect(card).toHaveClass('shadow-md');
+      expect(card.style.backgroundColor).toBe('rgb(0, 255, 136)');
+      expect(card.style.color).toBe('rgb(0, 0, 0)');
+      expect(card.style.opacity).toBe('1');
+      expect(card.className).not.toMatch(/opacity-(?:30|50|60|80)/);
+      fireEvent.mouseUp(window, { clientX: 20, clientY: 20 });
+      expect(calendarMocks.updateEvent).not.toHaveBeenCalled();
+    }
+  );
+
+  it('uses an opaque readable error fill after a failed resize', async () => {
+    calendarMocks.isEventReadOnly.mockReturnValueOnce(false);
+    calendarMocks.updateEvent.mockRejectedValueOnce(
+      new Error('Synthetic update failure')
+    );
+    const { container } = renderEventCard({
+      id: 'failed',
+      title: 'Failed resize',
+      color: 'BLUE',
+      start_at: '2026-06-26T08:30:00Z',
+      end_at: '2026-06-26T09:30:00Z',
+      scheduling_metadata: {
+        google_color: { version: 1, inherited: false, background: '#00ff88' },
+      },
+    });
+    fireEvent.mouseDown(container.querySelector('.cursor-s-resize')!, {
+      button: 0,
+      clientY: 20,
+    });
+    fireEvent.mouseMove(document, { clientY: 80 });
+    fireEvent.mouseUp(document, { clientY: 80 });
+    await waitFor(() =>
+      expect(screen.getByTestId('calendar-event-failed')).toHaveStyle({
+        backgroundColor: '#f44336',
+        color: '#000000',
+        opacity: '1',
+      })
+    );
+  });
+
+  it.each([
+    {
+      position: 'start',
+      icon: 'arrow-right',
+      background: '#a6bff2',
+      foreground: '#000000',
+    },
+    {
+      position: 'end',
+      icon: 'arrow-left',
+      background: '#3670e2',
+      foreground: '#ffffff',
+    },
+  ] as const)(
+    'continuation arrows inherit resolved contrast for custom RGB at $position',
+    ({ position, icon, background, foreground }) => {
+      const { container } = renderEventCard({
+        id: 'continuation',
+        title: 'Custom Google continuation',
+        color: 'BLUE',
+        start_at: '2026-06-26T08:30:00.000Z',
+        end_at: '2026-06-27T09:30:00.000Z',
+        _isMultiDay: true,
+        _dayPosition: position,
+        scheduling_metadata: {
+          google_color: { version: 1, inherited: false, background },
+        },
+      });
+      const card = screen.getByTestId('calendar-event-continuation');
+      const arrow = container.querySelector(`.lucide-${icon}`);
+      expect(arrow).not.toBeNull();
+      expect(card).toHaveStyle({
+        backgroundColor: background,
+        color: foreground,
+      });
+      expect(arrow).toHaveClass('text-inherit');
+      expect(arrow).not.toHaveClass('text-dynamic-light-blue');
+    }
+  );
+
   it('opens read-only events but hides resize controls', () => {
     const { container } = renderEventCard({
       id: 'event-1',
@@ -170,8 +370,7 @@ describe('EventCard read-only adapter events', () => {
     } as CalendarEvent & { _optimisticStatus: 'updating' });
 
     expect(screen.getByTestId('calendar-event-event-updating')).toHaveClass(
-      'outline-dashed',
-      'opacity-60'
+      'outline-dashed'
     );
   });
 });

package/src/components/ui/legacy/calendar/event-card.tsx

@@ -17,8 +17,10 @@ import {
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
+import { calendarEventStyle } from '@tuturuuu/utils/calendar-event-colors';
 import { getEventStyles } from '@tuturuuu/utils/color-helper';
 import { cn } from '@tuturuuu/utils/format';
+import { opaqueGoogleColor } from '@tuturuuu/utils/google-calendar-colors';
 import { containsHtml, sanitizeHtml } from '@tuturuuu/utils/html-sanitizer';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
@@ -346,7 +348,7 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
     });
 
     if (dateIdx === -1) {
-      cardEl.style.opacity = '0';
+      cardEl.style.visibility = 'hidden';
       cardEl.style.pointerEvents = 'none';
       return;
     }
@@ -438,9 +440,6 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
 
     observer.observe(cellEl);
 
-    // Check if the event is in the past
-    const isPastEvent = endDate.isBefore(dayjs());
-
     // Check if this event should be transparent due to hover state
     // An event is transparent if:
     // 1. There are overlaps
@@ -454,17 +453,9 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
       columnIndex > hoveredEventColumn &&
       overlapGroup.includes(hoveredBaseEventId);
 
-    // Set opacity based on transparency state, then past event state
-    if (shouldBeTransparent) {
-      cardEl.style.opacity = '0.05';
-      cardEl.style.pointerEvents = 'none';
-    } else if (isPastEvent && !preservePastEventOpacity) {
-      cardEl.style.opacity = '0.5';
-      cardEl.style.pointerEvents = 'all';
-    } else {
-      cardEl.style.opacity = '1';
-      cardEl.style.pointerEvents = 'all';
-    }
+    cardEl.style.opacity = '1';
+    cardEl.style.visibility = shouldBeTransparent ? 'hidden' : 'visible';
+    cardEl.style.pointerEvents = shouldBeTransparent ? 'none' : 'all';
 
     return () => observer.disconnect();
   }, [
@@ -481,8 +472,6 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
     overlapGroup,
     hoveredBaseEventId,
     hoveredEventColumn,
-    endDate,
-    preservePastEventOpacity,
   ]);
 
   // Event resizing - only enable for non-multi-day events or the start/end segments
@@ -936,19 +925,11 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
     isReadOnlyEvent,
   ]);
 
-  // Color styles based on event color
-
-  const { bg, border, text, dragBg, syncingBg, successBg, errorBg } =
-    getEventStyles(color);
-
-  // Get the appropriate background based on event state
-  const getBackgroundStyle = () => {
-    if (updateStatus === 'syncing') return syncingBg;
-    if (updateStatus === 'success') return successBg;
-    if (updateStatus === 'error') return errorBg;
-    if (visualState.isDragging) return dragBg;
-    return bg;
-  };
+  const { border } = getEventStyles(color);
+  // Error feedback stays opaque and uses contrast computed for its red fill.
+  const eventStyle = calendarEventStyle(
+    updateStatus === 'error' ? { color: 'RED' } : event
+  );
 
   // Use the visual state for UI rendering
   const { isDragging, isResizing } = visualState;
@@ -1070,28 +1051,24 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
               'transform shadow-md': isDragging || isResizing, // Subtle transform during interaction
               'shadow-sm': hasOverlaps && !isDragging && !isResizing, // Subtle shadow for stacked events
               'hover:shadow-md': hasOverlaps, // Enhanced shadow on hover for stacked events
-              'opacity-50':
+              'line-through':
                 isPastEvent &&
                 !isAffectedByPreview &&
-                !preservePastEventOpacity, // Lower opacity for past events
-              'opacity-30 grayscale transition-all duration-500':
-                isAffectedByPreview, // Dim affected events during preview
+                !preservePastEventOpacity, // Mark past events in the text
               'rounded-l-none border-l-4': showStartIndicator, // Special styling for continuation from previous day
               'rounded-r-none border-r-4': showEndIndicator, // Special styling for continuation to next day
               'border-l-[3px]': hasCalendarInfo, // Thicker border for calendar events
               // Habit-specific styling (icon only, no dashed border)
-              'opacity-60': _isHabit && _habitCompleted, // Dimmed for completed habits
+              'line-through decoration-double': _isHabit && _habitCompleted, // Mark completed habits
               // Preview-specific styling - dashed border only for NEW/MOVED events (not reused)
               'border-2 border-dashed': _isPreview && !_isReused,
-              'opacity-60 outline outline-dashed outline-1 outline-primary/50':
-                isOptimisticallyMutating,
-              'opacity-80 ring-1 ring-primary/30':
+              'outline outline-dashed outline-1 outline-primary':
+                isOptimisticallyMutating || isAffectedByPreview,
+              'ring-1 ring-primary':
                 isOptimisticallyPending && !isOptimisticallyMutating,
             },
             level ? 'border border-l-2' : 'border-l-2',
-            border,
-            text,
-            getBackgroundStyle() // Use dynamic background based on status
+            border
           )}
           style={{
             transition:
@@ -1102,13 +1079,14 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
             willChange:
               isDragging || isResizing ? 'transform, top, left' : 'auto', // GPU acceleration
             transform: isDragging || isResizing ? 'translateZ(0)' : 'none', // Force GPU acceleration during interaction
-            // Add calendar color accent if available
-            borderLeftColor: _calendarColor || undefined,
+            ...eventStyle,
+            borderLeftColor: opaqueGoogleColor(_calendarColor) ?? undefined,
             // Enhanced border for shorter events (likely on top)
             borderLeftWidth:
               hasOverlaps && isLikelyTopEvent ? '3px' : undefined,
-            // Significantly lowered opacity for stacked events when base is hovered
-            opacity: shouldBeTransparent ? 0.05 : 1,
+            // Hide upper cards to reveal the hovered lower card without blending fills
+            opacity: 1,
+            visibility: shouldBeTransparent ? 'hidden' : 'visible',
             // Maintain pointer events even when transparent
             pointerEvents: shouldBeTransparent ? 'none' : undefined,
           }}
@@ -1150,13 +1128,13 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
           {/* Continuation indicators for multi-day events */}
           {showStartIndicator && (
             <div className="absolute top-1/2 left-2 -translate-x-1 -translate-y-1/2">
-              <ArrowLeft className={`h-3 w-3 ${text}`} />
+              <ArrowLeft className="h-3 w-3 text-inherit" />
             </div>
           )}
 
           {showEndIndicator && (
             <div className="absolute top-1/2 right-2 translate-x-1 -translate-y-1/2">
-              <ArrowRight className={`h-3 w-3 ${text}`} />
+              <ArrowRight className="h-3 w-3 text-inherit" />
             </div>
           )}
 
@@ -1302,7 +1280,7 @@ function EventCardComponent({ dates, event, level = 0 }: EventCardProps) {
               {((!_isMultiDay && duration > 0.5) ||
                 (_isMultiDay &&
                   (_dayPosition === 'start' || _dayPosition === 'end'))) && (
-                <div className="mt-1 flex items-center text-xs opacity-80">
+                <div className="mt-1 flex items-center text-xs">
                   {_isMultiDay ? (
                     _dayPosition === 'start' ? (
                       <span>Starts {formatEventTime(startDate)}</span>
@@ -1479,7 +1457,6 @@ function eventCardPropsEqual(previous: EventCardProps, next: EventCardProps) {
   }
 
   if (!datesEqual(previous.dates, next.dates)) return false;
-
   const left = previous.event as CalendarEvent & {
     _optimisticStatus?: string;
     _warning?: string;
@@ -1496,6 +1473,7 @@ function eventCardPropsEqual(previous: EventCardProps, next: EventCardProps) {
     left.start_at === right.start_at &&
     left.end_at === right.end_at &&
     left.color === right.color &&
+    left.scheduling_metadata === right.scheduling_metadata &&
     left.locked === right.locked &&
     left.provider === right.provider &&
     left.external_event_id === right.external_event_id &&

package/src/components/ui/legacy/calendar/event-modal.tsx

@@ -91,6 +91,7 @@ import {
   OverlapWarning,
 } from './event-form-components';
 import { EventModalHeader } from './event-modal-header';
+import { eventEndPickerBounds } from './event-picker-bounds';
 import { saveCalendarEventDrafts } from './save-calendar-event-drafts';
 import { useCalendarSettings } from './settings/settings-context';
 import { useEventDraftSession } from './use-event-draft-session';
@@ -1056,32 +1057,11 @@ export function EventModal() {
                           })()}
                           onChange={handleEndDateChange}
                           showTimeSelect={!isAllDay}
-                          minDate={(() => {
-                            // Allow selecting the same day as the start date
-                            const start = new Date(
-                              event.start_at || new Date()
-                            );
-                            return new Date(
-                              start.getFullYear(),
-                              start.getMonth(),
-                              start.getDate()
-                            );
-                          })()}
-                          minTime={(() => {
-                            const start = new Date(
-                              event.start_at || new Date()
-                            );
-                            const end = new Date(event.end_at || new Date());
-                            // Only apply minTime if start and end are on the same day
-                            if (
-                              start.getFullYear() === end.getFullYear() &&
-                              start.getMonth() === end.getMonth() &&
-                              start.getDate() === end.getDate()
-                            ) {
-                              return `${start.getHours().toString().padStart(2, '0')}:${start.getMinutes().toString().padStart(2, '0')}`;
-                            }
-                            return undefined;
-                          })()}
+                          {...eventEndPickerBounds(
+                            event.start_at || new Date().toISOString(),
+                            tz,
+                            isAllDay
+                          )}
                           scrollIntoViewOnOpen={true}
                           pickerButtonRef={endPickerRef}
                         />

package/src/components/ui/legacy/calendar/event-picker-bounds.ts

@@ -0,0 +1,16 @@
+import { pickerTimeValue } from '../../date-time-picker-values';
+
+/** Bounds stay instants; their clock labels use the calendar's resolved zone. */
+export function eventEndPickerBounds(
+  startAt: string,
+  zone: string | undefined,
+  allDay: boolean
+) {
+  const start = new Date(startAt);
+  return {
+    minDate: start,
+    minTime: allDay
+      ? undefined
+      : pickerTimeValue(start, zone && zone !== 'auto' ? zone : null),
+  };
+}

package/src/components/ui/legacy/calendar/event-preview-popover.test.tsx

@@ -0,0 +1,139 @@
+import { render, screen } from '@testing-library/react';
+import { CalendarPreferencesProvider } from '@tuturuuu/ui/hooks/use-calendar-preferences';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { EventPreviewPopover } from './event-preview-popover';
+import { formatEventPreviewTime } from './event-preview-time';
+
+const colorState = vi.hoisted(() => ({
+  metadata: undefined as unknown,
+  source: undefined as string | undefined,
+}));
+vi.mock('@tuturuuu/ui/hooks/use-calendar', () => ({
+  useCalendar: () => ({
+    previewEvent: {
+      id: 'synthetic-event',
+      title: 'Synthetic timezone regression',
+      color: 'BLUE',
+      scheduling_metadata: colorState.metadata,
+      _calendarColor: colorState.source,
+      start_at: '2026-09-30T11:00:00Z',
+      end_at: '2026-09-30T13:00:00Z',
+    },
+    isPreviewOpen: true,
+    closePreview: vi.fn(),
+    openEventEditor: vi.fn(),
+    deleteEvent: vi.fn(),
+    readOnly: true,
+  }),
+}));
+vi.mock('next-intl', () => ({ useLocale: () => 'en-US' }));
+
+beforeEach(() => {
+  colorState.metadata = undefined;
+  colorState.source = undefined;
+});
+it.each([false, true])(
+  'preview dot selects provider/inherited intent: %s',
+  (inherited) => {
+    colorState.source = '#ff80ab';
+    colorState.metadata = {
+      google_color: { version: 1, inherited, background: '#00ff88' },
+    };
+    const { container } = render(
+      <CalendarPreferencesProvider
+        value={{ timezone: 'UTC', timeFormat: '24h' }}
+      >
+        <EventPreviewPopover />
+      </CalendarPreferencesProvider>
+    );
+    expect(container.querySelector('.rounded-full')).toHaveStyle({
+      backgroundColor: inherited ? '#ff80ab' : '#00ff88',
+    });
+  }
+);
+
+describe('calendar quick preview timezone', () => {
+  it('renders the actual preview in the calendar zone and 24-hour preference', () => {
+    render(
+      <CalendarPreferencesProvider
+        value={{ timezone: 'Asia/Ho_Chi_Minh', timeFormat: '24h' }}
+      >
+        <EventPreviewPopover />
+      </CalendarPreferencesProvider>
+    );
+    expect(screen.getByText('Wed, Sep 30 - 18:00 - 20:00')).toBeTruthy();
+  });
+
+  it('compares calendar dates in the selected zone across midnight', () => {
+    expect(
+      formatEventPreviewTime(
+        '2026-09-30T16:30:00Z',
+        '2026-09-30T18:30:00Z',
+        { timezone: 'Asia/Ho_Chi_Minh', timeFormat: '24h' },
+        'en-US'
+      )
+    ).toBe('Wed, Sep 30, 23:30 - Thu, Oct 1, 01:30');
+  });
+
+  it('projects each instant independently across a DST gap', () => {
+    expect(
+      formatEventPreviewTime(
+        '2026-03-08T06:30:00Z',
+        '2026-03-08T07:30:00Z',
+        { timezone: 'America/New_York', timeFormat: '24h' },
+        'en-US'
+      )
+    ).toBe('Sun, Mar 8 - 01:30 - 03:30');
+  });
+
+  it('accepts Unicode whitespace in Intl twelve-hour labels', () => {
+    const original:
+      | TypedPropertyDescriptor<Intl.DateTimeFormat['format']>
+      | undefined = Object.getOwnPropertyDescriptor(
+      Intl.DateTimeFormat.prototype,
+      'format'
+    );
+    if (!original?.get) throw new Error('Intl formatter getter unavailable');
+    const getFormat = original.get;
+    Object.defineProperty(Intl.DateTimeFormat.prototype, 'format', {
+      ...original,
+      get(this: Intl.DateTimeFormat): Intl.DateTimeFormat['format'] {
+        const formatter = getFormat.call(this);
+        const unicodeFormat: Intl.DateTimeFormat['format'] = (date) =>
+          formatter(date).replace(/\s(?=[AP]M)/gu, '\u202f');
+        return unicodeFormat;
+      },
+    });
+    try {
+      const value = formatEventPreviewTime(
+        '2026-09-30T11:00:00Z',
+        '2026-09-30T13:00:00Z',
+        { timezone: 'Asia/Ho_Chi_Minh', timeFormat: '12h' },
+        'en-US'
+      );
+      expect(value).toContain('06:00\u202fPM');
+      expect(value).toMatch(/06:00\s+PM/u);
+      expect(value).toMatch(/08:00\s+PM/u);
+    } finally {
+      Object.defineProperty(Intl.DateTimeFormat.prototype, 'format', original);
+    }
+  });
+  it('uses the supported locale and twelve-hour clock', () => {
+    const value = formatEventPreviewTime(
+      '2026-09-30T11:00:00Z',
+      '2026-09-30T13:00:00Z',
+      { timezone: 'Asia/Ho_Chi_Minh', timeFormat: '12h' },
+      'en-US'
+    );
+    expect(value).toMatch(/06:00\s+PM/u);
+    expect(value).toMatch(/08:00\s+PM/u);
+    expect(
+      formatEventPreviewTime(
+        '2026-09-30T11:00:00Z',
+        '2026-09-30T13:00:00Z',
+        { timezone: 'Asia/Ho_Chi_Minh', timeFormat: '24h' },
+        'vi'
+      )
+    ).toContain('18:00');
+  });
+});