@tuturuuu/ui 0.36.1 → 0.37.1

package/src/components/ui/legacy/calendar/all-day-event-bar.tsx

@@ -2,6 +2,7 @@ import { Calendar, ChevronDown, ChevronUp } from '@tuturuuu/icons';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
 import { useCalendarSync } from '@tuturuuu/ui/hooks/use-calendar-sync';
+import { calendarEventStyle } from '@tuturuuu/utils/calendar-event-colors';
 import { getEventStyles } from '@tuturuuu/utils/color-helper';
 import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
@@ -10,6 +11,10 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import timezone from 'dayjs/plugin/timezone';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  calendarDayBoundary,
+  calendarDayKey,
+} from '../../../../lib/calendar-day';
 import { MIN_COLUMN_WIDTH } from './config';
 import { CalendarEventProviderIcon } from './event-provider-display';
 import { LocationTimeline } from './location-timeline';
@@ -21,6 +26,11 @@ dayjs.extend(isSameOrAfter);
 dayjs.extend(isSameOrBefore);
 dayjs.extend(timezone);
 
+function getZonedDay(date: Date, zone?: string) {
+  const boundary = dayjs(calendarDayBoundary(date, zone));
+  return zone && zone !== 'auto' ? boundary.tz(zone) : boundary;
+}
+
 const MAX_EVENTS_DISPLAY = 2;
 
 interface EventSpan {
@@ -28,13 +38,11 @@ interface EventSpan {
   startIndex: number;
   endIndex: number;
   span: number;
-  // Add indicators for cut-off events
   isCutOffStart: boolean; // Event starts before visible range
   isCutOffEnd: boolean; // Event ends after visible range
   actualStartDate: dayjs.Dayjs; // Actual start date of the event
   actualEndDate: dayjs.Dayjs; // Actual end date of the event
   row: number; // Add row property for proper stacking
-  // For merged events
   isMerged?: boolean;
   mergedEventIds?: string[];
 }
@@ -122,8 +130,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
   const visibleDates = showWeekends
     ? dates
     : dates.filter((date) => {
-        const day =
-          tz === 'auto' ? dayjs(date).day() : dayjs(date).tz(tz).day();
+        const day = date.getDay();
         return day !== 0 && day !== 6; // 0 = Sunday, 6 = Saturday
       });
 
@@ -310,7 +317,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
     const tempSpans: Omit<EventSpan, 'row'>[] = [];
 
     // Process each all-day event
-    allDayEvents.forEach((event) => {
+    (visibleDates.length ? allDayEvents : []).forEach((event) => {
       const eventStart =
         tz === 'auto' ? dayjs(event.start_at) : dayjs(event.start_at).tz(tz);
       const eventEnd =
@@ -321,12 +328,11 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
       let endIndex = -1;
 
       // First pass: find any overlap with visible dates
-      const firstVisibleDate =
-        tz === 'auto' ? dayjs(visibleDates[0]) : dayjs(visibleDates[0]).tz(tz);
-      const lastVisibleDate =
-        tz === 'auto'
-          ? dayjs(visibleDates[visibleDates.length - 1])
-          : dayjs(visibleDates[visibleDates.length - 1]).tz(tz);
+      const firstVisibleDate = getZonedDay(visibleDates[0]!, tz);
+      const lastVisibleDate = getZonedDay(
+        visibleDates[visibleDates.length - 1]!,
+        tz
+      );
 
       // Check if event overlaps with our visible date range at all
       // Event overlaps if: event_start < visible_end AND event_end > visible_start
@@ -346,10 +352,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
       } else {
         // Find the first visible date that matches the event start
         for (let i = 0; i < visibleDates.length; i++) {
-          const currentDate =
-            tz === 'auto'
-              ? dayjs(visibleDates[i])
-              : dayjs(visibleDates[i]).tz(tz);
+          const currentDate = getZonedDay(visibleDates[i]!, tz);
           if (
             currentDate.isSameOrAfter(eventStart, 'day') &&
             currentDate.isBefore(eventEnd, 'day')
@@ -367,10 +370,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
       } else {
         // Find the last visible date that the event covers
         for (let i = visibleDates.length - 1; i >= 0; i--) {
-          const currentDate =
-            tz === 'auto'
-              ? dayjs(visibleDates[i])
-              : dayjs(visibleDates[i]).tz(tz);
+          const currentDate = getZonedDay(visibleDates[i]!, tz);
           if (
             currentDate.isBefore(eventEnd, 'day') &&
             currentDate.isSameOrAfter(eventStart, 'day')
@@ -567,10 +567,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
     // Calculate max visible events per day for layout purposes
     let maxVisibleEventsPerDay = 0;
     eventsByDay.forEach((dayEvents, dayIndex) => {
-      const dateKey =
-        tz === 'auto'
-          ? dayjs(visibleDates[dayIndex]).format('YYYY-MM-DD')
-          : dayjs(visibleDates[dayIndex]).tz(tz).format('YYYY-MM-DD');
+      const dateKey = calendarDayKey(visibleDates[dayIndex]!);
 
       const shouldShowAll = dayEvents.length === MAX_EVENTS_DISPLAY + 1;
       const isExpanded = expandedDates.includes(dateKey) || shouldShowAll;
@@ -775,10 +772,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
           }}
         >
           {visibleDates.map((date, dateIndex) => {
-            const dateKey =
-              tz === 'auto'
-                ? dayjs(date).format('YYYY-MM-DD')
-                : dayjs(date).tz(tz).format('YYYY-MM-DD');
+            const dateKey = calendarDayKey(date);
 
             const dateEvents = getUniqueEventsForDate(dateIndex);
             const shouldShowAll = dateEvents.length === MAX_EVENTS_DISPLAY + 1;
@@ -886,9 +880,8 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
         {regularSpans.map((eventSpan) => {
           const { event, startIndex, span, row, isCutOffStart, isCutOffEnd } =
             eventSpan;
-          const { bg, border, text } = getEventStyles(event.color || 'BLUE');
 
-          // Use the assigned row directly instead of calculating it
+          const eventStyle = calendarEventStyle(event);
           const eventRow = row;
 
           // Check if this event should be visible based on expansion state
@@ -896,10 +889,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
             if (dateIndex < startIndex || dateIndex > startIndex + span - 1)
               return false;
 
-            const dateKey =
-              tz === 'auto'
-                ? dayjs(date).format('YYYY-MM-DD')
-                : dayjs(date).tz(tz).format('YYYY-MM-DD');
+            const dateKey = calendarDayKey(date);
 
             const dateEvents = getUniqueEventsForDate(dateIndex);
             const shouldShowAll = dateEvents.length === MAX_EVENTS_DISPLAY + 1;
@@ -941,17 +931,15 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
                   ? 'cursor-grabbing'
                   : 'cursor-grab hover:cursor-grab',
                 // Visual feedback for dragging
-                isDraggedEvent && 'scale-95 opacity-30',
-                // Normal styling
-                bg,
-                border,
-                text,
+                isDraggedEvent && 'scale-95 outline outline-dashed',
                 isPendingMutation &&
-                  'opacity-60 outline outline-dashed outline-1 outline-primary/50',
+                  'outline outline-dashed outline-1 outline-primary',
                 // Special styling for cut-off events
                 (isCutOffStart || isCutOffEnd) && 'border-dashed'
               )}
               style={{
+                ...eventStyle,
+                borderColor: eventStyle.color,
                 left: `calc(${(startIndex * 100) / visibleDates.length}% + ${EVENT_LEFT_OFFSET}px)`,
                 width: `calc(${(span * 100) / visibleDates.length}% - ${EVENT_LEFT_OFFSET * 2}px)`,
                 top: `${eventRow * 1.6 + 0.25 + topOffset}rem`,
@@ -1001,10 +989,10 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
             'transform backdrop-blur-sm transition-none',
             getEventStyles(dragState.draggedEvent.color || 'BLUE').bg,
             getEventStyles(dragState.draggedEvent.color || 'BLUE').border,
-            getEventStyles(dragState.draggedEvent.color || 'BLUE').text,
-            'opacity-90'
+            getEventStyles(dragState.draggedEvent.color || 'BLUE').text
           )}
           style={{
+            ...calendarEventStyle(dragState.draggedEvent),
             left: `${dragState.currentX + 15}px`,
             top: `${dragState.currentY - 20}px`,
             height: '1.35rem',

package/src/components/ui/legacy/calendar/calendar-cell-color.test.tsx

@@ -0,0 +1,70 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import { expect, it, vi } from 'vitest';
+
+dayjs.extend(utc);
+vi.mock('@tuturuuu/ui/hooks/use-calendar', () => ({
+  useCalendar: () => ({
+    addEmptyEvent: vi.fn(),
+    addEmptyEventWithDuration: vi.fn(),
+    isDragging: true,
+    setIsDragging: vi.fn(),
+    scheduleTaskAsEvent: vi.fn(),
+    readOnly: false,
+  }),
+}));
+vi.mock('./settings/settings-context', () => ({
+  useCalendarSettings: () => ({
+    settings: {
+      appearance: { timeFormat: '24h' },
+      timezone: { timezone: 'UTC' },
+    },
+  }),
+}));
+
+import { CalendarCell } from './calendar-cell';
+
+it('gives the duration badge the same opaque contrast colors as its drag card', () => {
+  const { container } = render(
+    <div data-testid="scroll">
+      <CalendarCell date="2026-09-07" hour={9} />
+    </div>
+  );
+  const parent = screen.getByTestId('scroll');
+  Object.defineProperties(parent, {
+    scrollHeight: { value: 1000 },
+    clientHeight: { value: 200 },
+  });
+  parent.getBoundingClientRect = () => ({
+    top: 0,
+    bottom: 200,
+    left: 0,
+    right: 200,
+    width: 200,
+    height: 200,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  });
+  const cell = container.querySelector('.calendar-cell')!;
+  cell.getBoundingClientRect = () => ({
+    top: 0,
+    bottom: 80,
+    left: 0,
+    right: 200,
+    width: 200,
+    height: 80,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  });
+  fireEvent.mouseDown(cell, { button: 0, clientY: 20 });
+  fireEvent.mouseMove(document, { clientY: 80 });
+  const badge = screen.getByText(/^(?:\d+h(?: \d+m)?|\d+m)$/);
+  expect(badge).toHaveStyle({ backgroundColor: '#2196f3', color: '#000000' });
+  expect(badge.closest('.border-l-2')).toHaveStyle({
+    backgroundColor: '#2196f3',
+    color: '#000000',
+  });
+});

package/src/components/ui/legacy/calendar/calendar-cell.tsx

@@ -1,4 +1,5 @@
 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 { format } from 'date-fns';
@@ -30,11 +31,9 @@ const DragPreview = ({
   timeFormat = '12h',
 }: DragPreviewProps) => {
   const timePattern = timeFormat === '24h' ? 'HH:mm' : 'h:mm a';
-  // Calculate duration in minutes
   const durationMs = endDate.getTime() - startDate.getTime();
   const durationMinutes = Math.round(durationMs / (1000 * 60));
 
-  // Get color styles for the preview
   const { bg, border, text } = getEventStyles(color);
 
   return (
@@ -48,6 +47,7 @@ const DragPreview = ({
         bg
       )}
       style={{
+        ...calendarEventStyle({ color }),
         top: `${top}px`,
         height: `${Math.max(height, 20)}px`,
         transition: 'none', // No transition during interaction
@@ -76,11 +76,10 @@ const DragPreview = ({
           // More compact styling for short durations
           height < 60
             ? 'top-1/2 right-1 -translate-y-1/2 px-1 py-0.5 text-[10px]'
-            : 'top-2 right-2 px-1.5 py-0.5',
-          text,
-          bg
+            : 'top-2 right-2 px-1.5 py-0.5'
         )}
         style={{
+          ...calendarEventStyle({ color }),
           maxWidth: 'calc(100% - 8px)', // Tighter max width
           minWidth: 24, // Smaller min width for short durations
           textAlign: 'right',

package/src/components/ui/legacy/calendar/calendar-content.test.tsx

@@ -1,13 +1,16 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { useState } from 'react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { CalendarView } from '../../../../hooks/use-view-transition';
 
 const mocks = vi.hoisted(() => ({
   setDates: vi.fn(),
   transition: (_view: string, action: () => void) => action(),
   dates: [new Date(2026, 8, 7)],
-  settings: { appearance: { firstDayOfWeek: 'monday' } },
+  settings: {
+    appearance: { firstDayOfWeek: 'monday', timeFormat: '24h' },
+    timezone: { timezone: 'Asia/Ho_Chi_Minh' },
+  },
 }));
 vi.mock('@tuturuuu/ui/hooks/use-calendar-sync', () => ({
   useCalendarSync: () => ({
@@ -42,7 +45,40 @@ vi.mock('./calendar-loading-skeleton', () => ({
 vi.mock('./calendar-view-with-trail', () => ({
   CalendarViewWithTrail: () => null,
 }));
-vi.mock('./event-modal', () => ({ EventModal: () => null }));
+vi.mock('./event-modal', async () => {
+  const { EventDateTimePicker } = await import('./event-form-components.js');
+  const { createAllDayEvent } = await import('@tuturuuu/utils/calendar-utils');
+  return {
+    EventModal: () => {
+      const [date, setDate] = useState(new Date('2026-09-30T11:00:00Z'));
+      const [allDay, setAllDay] = useState(false);
+      return (
+        <>
+          <EventDateTimePicker
+            label="Start"
+            value={date}
+            onChange={(next) => next && setDate(next)}
+            showTimeSelect={!allDay}
+          />
+          <button
+            type="button"
+            onClick={() => {
+              const range = createAllDayEvent(
+                new Date('2026-10-05T07:15:00Z'),
+                'Asia/Ho_Chi_Minh'
+              );
+              setDate(new Date(range.start_at));
+              setAllDay(true);
+            }}
+          >
+            Select October 5 all day
+          </button>
+          <output aria-label="Stored instant">{date.toISOString()}</output>
+        </>
+      );
+    },
+  };
+});
 vi.mock('./event-preview-popover', () => ({ EventPreviewPopover: () => null }));
 vi.mock('./weekday-bar', () => ({ WeekdayBar: () => null }));
 vi.mock('./month-calendar', () => ({
@@ -86,8 +122,51 @@ function ControlledCalendar({
 beforeEach(() => {
   localStorage.clear();
   mocks.setDates.mockClear();
+  const resolvedOptions = Intl.DateTimeFormat.prototype.resolvedOptions;
+  vi.spyOn(Intl.DateTimeFormat.prototype, 'resolvedOptions').mockImplementation(
+    function (this: Intl.DateTimeFormat) {
+      return { ...resolvedOptions.call(this), timeZone: 'America/Los_Angeles' };
+    }
+  );
 });
+afterEach(() => vi.restoreAllMocks());
 describe('satellite controlled calendar views', () => {
+  it('uses the calendar timezone for event display and serializes edits as UTC', async () => {
+    render(
+      <CalendarContent
+        t={translate}
+        locale="en"
+        workspace={{ id: 'workspace-1' } as never}
+      />
+    );
+    fireEvent.click(screen.getByText('18:00'));
+    expect(await screen.findByText('Asia/Ho Chi Minh')).toBeVisible();
+    fireEvent.click(screen.getByTitle('Enter time manually'));
+    const input = screen.getByRole('textbox', {
+      name: 'Enter time manually in HH:MM',
+    });
+    fireEvent.change(input, { target: { value: '14:30' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(screen.getByLabelText('Stored instant')).toHaveTextContent(
+      '2026-09-30T07:30:00.000Z'
+    );
+  });
+  it('displays the configured all-day date rather than the browser previous day', () => {
+    render(
+      <CalendarContent
+        t={translate}
+        locale="en"
+        workspace={{ id: 'workspace-1' } as never}
+      />
+    );
+    fireEvent.click(screen.getByText('Select October 5 all day'));
+    expect(
+      screen.getByRole('button', { name: 'Selected Oct 5, 2026 00:00' })
+    ).toBeVisible();
+    expect(screen.getByLabelText('Stored instant')).toHaveTextContent(
+      '2026-10-04T17:00:00.000Z'
+    );
+  });
   it('M updates the parent state, persists the month, and supports day drill-down', () => {
     render(<ControlledCalendar />);
     fireEvent.keyDown(window, { key: 'm' });

package/src/components/ui/legacy/calendar/calendar-content.tsx

@@ -2,11 +2,14 @@ import type {
   Workspace,
   WorkspaceCalendarGoogleTokenClient,
 } from '@tuturuuu/types';
+import { useCalendarDayZone } from '@tuturuuu/ui/hooks/use-calendar-day-zone';
+import { CalendarPreferencesProvider } from '@tuturuuu/ui/hooks/use-calendar-preferences';
 import { useCalendarSync } from '@tuturuuu/ui/hooks/use-calendar-sync';
 import type { CalendarView } from '@tuturuuu/ui/hooks/use-view-transition';
 import { useViewTransition } from '@tuturuuu/ui/hooks/use-view-transition';
 import { cn } from '@tuturuuu/utils/format';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { calendarDay, calendarToday } from '../../../../lib/calendar-day';
 import { AgendaView } from './agenda-view';
 import { CalendarHeader } from './calendar-header';
 import { CalendarLoadingSkeleton } from './calendar-loading-skeleton';
@@ -126,7 +129,11 @@ export const CalendarContent = ({
 }) => {
   const { transition } = useViewTransition();
   const { settings } = useCalendarSettings();
-  const { dates, isLoading, setDates } = useCalendarSync();
+  const { dates, isLoading, setDates, setTimezone } = useCalendarSync();
+  const dayZone = useCalendarDayZone();
+  const timezone = settings?.timezone?.timezone;
+  const hasExternalDate = !!externalState?.date;
+  const followsToday = useRef(!hasExternalDate);
 
   // Use ref to always have the latest settings without causing dependency cascades
   const settingsRef = useRef(settings);
@@ -135,7 +142,11 @@ export const CalendarContent = ({
   }, [settings]);
 
   const [initialized, setInitialized] = useState(false);
-  const [date, setDate] = useState(externalState?.date || new Date());
+  const [date, setDate] = useState(() =>
+    externalState?.date
+      ? calendarDay(externalState.date)
+      : calendarToday(timezone)
+  );
   const [view, setView] = useState<CalendarView>(externalState?.view || 'week');
   const [availableViews, setAvailableViews] = useState<
     { value: string; label: string; disabled?: boolean }[]
@@ -147,11 +158,13 @@ export const CalendarContent = ({
   // Use the external state handlers when provided
   const handleSetDate = useCallback(
     (newDate: Date | ((prevDate: Date) => Date)) => {
-      if (externalState?.setDate) {
-        externalState.setDate(newDate);
-      } else {
-        setDate(newDate);
-      }
+      followsToday.current = false;
+      const update = (previous: Date) =>
+        calendarDay(
+          typeof newDate === 'function' ? newDate(previous) : newDate
+        );
+      if (externalState?.setDate) externalState.setDate(update);
+      else setDate(update);
     },
     [externalState]
   );
@@ -394,32 +407,13 @@ export const CalendarContent = ({
     }
   }, [externalState?.view, view]);
 
-  // Update the date's hour and minute, every minute
+  // Settings bridge supplies the same resolved zone to the outer navigation and queries.
   useEffect(() => {
-    const secondsToNextMinute = 60 - new Date().getSeconds();
-
-    const timeout = setTimeout(() => {
-      handleSetDate((date) => {
-        const newDate = new Date(date);
-        newDate.setHours(new Date().getHours());
-        newDate.setMinutes(new Date().getMinutes());
-        return newDate;
-      });
-
-      const interval = setInterval(() => {
-        handleSetDate((date) => {
-          const newDate = new Date(date);
-          newDate.setHours(new Date().getHours());
-          newDate.setMinutes(new Date().getMinutes());
-          return newDate;
-        });
-      }, 60000);
-
-      return () => clearInterval(interval);
-    }, secondsToNextMinute * 1000);
-
-    return () => clearTimeout(timeout);
-  }, [handleSetDate]);
+    setTimezone?.(timezone);
+    if (timezone) dayZone?.setTimezone(timezone);
+    if (!hasExternalDate && followsToday.current)
+      setDate(calendarToday(timezone));
+  }, [timezone, setTimezone, dayZone?.setTimezone, hasExternalDate]);
 
   // Update the dates array when date changes while maintaining the same view
   useEffect(() => {
@@ -636,10 +630,19 @@ export const CalendarContent = ({
       {disabled || disableBuiltInEventUi
         ? null
         : workspace && (
-            <>
+            <CalendarPreferencesProvider
+              value={{
+                timezone: settings?.timezone?.timezone ?? 'auto',
+                timeFormat: settings?.appearance?.timeFormat ?? '12h',
+                weekStartsOn: getFirstDayOfWeekNumber(
+                  settings?.appearance?.firstDayOfWeek,
+                  locale
+                ) as 0 | 1 | 6,
+              }}
+            >
               <EventPreviewPopover />
               <EventModal />
-            </>
+            </CalendarPreferencesProvider>
           )}
     </div>
   );

package/src/components/ui/legacy/calendar/calendar-day-bridge.test.tsx

@@ -0,0 +1,94 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, expect, it, vi } from 'vitest';
+import { CalendarDayZoneBridgeProvider } from '../../../../hooks/use-calendar-day-zone';
+import { calendarDayKey } from '../../../../lib/calendar-day';
+
+const state = vi.hoisted(() => ({
+  zone: 'Asia/Tokyo',
+  setTimezone: vi.fn(),
+  setDates: vi.fn(),
+  outerZone: vi.fn(),
+}));
+vi.mock('@tuturuuu/ui/hooks/use-calendar-sync', () => ({
+  useCalendarSync: () => ({
+    dates: [new Date(2026, 0, 1)],
+    isLoading: false,
+    setDates: state.setDates,
+    setTimezone: state.setTimezone,
+  }),
+}));
+vi.mock('@tuturuuu/ui/hooks/use-view-transition', () => ({
+  useViewTransition: () => ({
+    transition: (_: string, action: () => void) => action(),
+  }),
+}));
+vi.mock('./settings/settings-context', () => ({
+  useCalendarSettings: () => ({
+    settings: {
+      timezone: { timezone: state.zone },
+      appearance: { firstDayOfWeek: 'monday' },
+    },
+  }),
+}));
+vi.mock('./calendar-header', () => ({
+  CalendarHeader: ({ date }: { date: Date }) => (
+    <output data-testid="day">
+      {calendarDayKey(date)}:{date.getHours()}
+    </output>
+  ),
+}));
+vi.mock('./agenda-view', () => ({ AgendaView: () => null }));
+vi.mock('./calendar-loading-skeleton', () => ({
+  CalendarLoadingSkeleton: () => null,
+}));
+vi.mock('./calendar-view-with-trail', () => ({
+  CalendarViewWithTrail: () => null,
+}));
+vi.mock('./event-modal', () => ({ EventModal: () => null }));
+vi.mock('./event-preview-popover', () => ({ EventPreviewPopover: () => null }));
+vi.mock('./weekday-bar', () => ({ WeekdayBar: () => null }));
+vi.mock('./month-calendar', () => ({ MonthCalendar: () => null }));
+vi.mock('./year-calendar', () => ({ YearCalendar: () => null }));
+
+import { CalendarContent } from './calendar-content';
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.clearAllMocks();
+  localStorage.clear();
+});
+it('shared content projects default Today, bridges the settings zone and keeps selection through midnight', () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date('2025-12-31T16:00:00Z'));
+  state.zone = 'Asia/Tokyo';
+  const { rerender } = render(
+    <CalendarContent t={(key: string) => key} locale="en" />
+  );
+  expect(screen.getByTestId('day')).toHaveTextContent('2026-01-01:0');
+  expect(state.setTimezone).toHaveBeenLastCalledWith('Asia/Tokyo');
+  act(() => vi.advanceTimersByTime(24 * 60 * 60_000));
+  expect(screen.getByTestId('day')).toHaveTextContent('2026-01-01:0');
+  state.zone = 'America/New_York';
+  rerender(<CalendarContent t={(key: string) => key} locale="en" />);
+  expect(state.setTimezone).toHaveBeenLastCalledWith('America/New_York');
+});
+it('content forwards the zone to outer host navigation without reprojecting an explicit date', () => {
+  state.zone = 'Asia/Tokyo';
+  render(
+    <CalendarDayZoneBridgeProvider value={{ setTimezone: state.outerZone }}>
+      <CalendarContent
+        t={(key: string) => key}
+        locale="en"
+        externalState={{
+          date: new Date(2026, 0, 10),
+          setDate: vi.fn(),
+          view: 'day',
+          setView: vi.fn(),
+          availableViews: [],
+        }}
+      />
+    </CalendarDayZoneBridgeProvider>
+  );
+  expect(state.outerZone).toHaveBeenCalledWith('Asia/Tokyo');
+  expect(screen.getByTestId('day')).toHaveTextContent('2026-01-10');
+});