@tuturuuu/ui 0.36.1 → 0.37.1

package/src/hooks/calendar-sync-range.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it, vi } from 'vitest';
+import { calendarQueryRange } from '../lib/calendar-day';
+import {
+  calendarEventInQueryRange,
+  calendarRangeCacheKey,
+  calendarRangeIncludesToday,
+} from './calendar-sync-range';
+
+describe('calendar query date carriers', () => {
+  it('uses the effective device zone for auto cache identity', () => {
+    const dates = [new Date(2026, 0, 1)];
+    vi.stubEnv('TZ', 'Asia/Tokyo');
+    try {
+      expect(calendarRangeCacheKey(dates, 'auto')).toBe(
+        calendarRangeCacheKey(dates, 'Asia/Tokyo')
+      );
+      vi.stubEnv('TZ', 'America/Los_Angeles');
+      expect(calendarRangeCacheKey(dates, 'auto')).toBe(
+        calendarRangeCacheKey(dates, 'America/Los_Angeles')
+      );
+      expect(calendarRangeCacheKey(dates, 'auto')).not.toBe(
+        calendarRangeCacheKey(dates, 'Asia/Tokyo')
+      );
+    } finally {
+      vi.unstubAllEnvs();
+    }
+  });
+  it.each([
+    [2026, 2, 8, '2026-03-08T05:00:00.000Z', '2026-03-09T04:00:00.000Z', 23],
+    [2026, 10, 1, '2026-11-01T04:00:00.000Z', '2026-11-02T05:00:00.000Z', 25],
+  ] as const)(
+    'resolves independent New York midnights for %i/%i/%i',
+    (year, month, day, start, end, hours) => {
+      vi.stubEnv('TZ', 'Asia/Tokyo');
+      try {
+        const range = calendarQueryRange(
+          [new Date(year, month, day, 18)],
+          'America/New_York'
+        );
+        expect(range.start.toISOString()).toBe(start);
+        expect(range.end.toISOString()).toBe(end);
+        expect(range.end.getTime() - range.start.getTime()).toBe(
+          hours * 60 * 60_000
+        );
+      } finally {
+        vi.unstubAllEnvs();
+      }
+    }
+  );
+
+  it('partitions equal selected days by calendar timezone and ignores carrier clock fields', () => {
+    const dates = [new Date(2026, 0, 1)];
+    expect(calendarRangeCacheKey(dates, 'Asia/Tokyo')).not.toBe(
+      calendarRangeCacheKey(dates, 'America/Los_Angeles')
+    );
+    expect(calendarRangeCacheKey(dates, 'Asia/Tokyo')).toBe(
+      calendarRangeCacheKey([new Date(2026, 0, 1, 19)], 'Asia/Tokyo')
+    );
+    expect(calendarRangeCacheKey([], 'Asia/Tokyo')).toBe('');
+  });
+
+  it('detects today in the calendar zone across a year boundary', () => {
+    const now = new Date('2025-12-31T16:00:00Z');
+    const dates = [new Date(2026, 0, 1)];
+    expect(calendarRangeIncludesToday(dates, 'Asia/Tokyo', now)).toBe(true);
+    expect(calendarRangeIncludesToday(dates, 'America/Los_Angeles', now)).toBe(
+      false
+    );
+  });
+
+  it('filters optimistic events against the same zoned half-open query range', () => {
+    const dates = [new Date(2026, 0, 1)];
+    const zone = 'Asia/Tokyo';
+    expect(
+      calendarEventInQueryRange(
+        { start_at: '2025-12-31T15:00:00Z', end_at: '2025-12-31T16:00:00Z' },
+        dates,
+        zone
+      )
+    ).toBe(true);
+    expect(
+      calendarEventInQueryRange(
+        { start_at: '2026-01-01T15:00:00Z', end_at: '2026-01-01T16:00:00Z' },
+        dates,
+        zone
+      )
+    ).toBe(false);
+    expect(
+      calendarEventInQueryRange({ start_at: 'invalid' }, dates, zone)
+    ).toBe(true);
+  });
+});

package/src/hooks/calendar-sync-range.ts

@@ -0,0 +1,40 @@
+import { resolveTaskTimezone } from '@tuturuuu/utils/task-date-timezone';
+import {
+  calendarDayKey,
+  calendarQueryRange,
+  calendarToday,
+} from '../lib/calendar-day';
+
+/** Range identity uses date-only carriers and the zone that resolves boundaries. */
+export function calendarRangeCacheKey(dates: Date[], timezone?: string) {
+  const first = dates[0];
+  const last = dates[dates.length - 1];
+  return first && last
+    ? `${resolveTaskTimezone(timezone ?? 'auto')}:${calendarDayKey(first)}-${calendarDayKey(last)}`
+    : '';
+}
+
+export function calendarRangeIncludesToday(
+  dates: Date[],
+  timezone?: string,
+  now?: Date
+) {
+  const first = dates[0];
+  const last = dates[dates.length - 1];
+  if (!first || !last) return false;
+  const today = calendarDayKey(calendarToday(timezone, now));
+  return calendarDayKey(first) <= today && calendarDayKey(last) >= today;
+}
+
+export function calendarEventInQueryRange(
+  event: { start_at?: string; end_at?: string },
+  dates: Date[],
+  timezone?: string
+) {
+  if (!dates.length || (!event.start_at && !event.end_at)) return true;
+  const { start, end } = calendarQueryRange(dates, timezone);
+  const startAt = event.start_at ? new Date(event.start_at).getTime() : NaN;
+  const endAt = event.end_at ? new Date(event.end_at).getTime() : startAt;
+  if (Number.isNaN(startAt) || Number.isNaN(endAt)) return true;
+  return startAt < end.getTime() && endAt >= start.getTime();
+}

package/src/hooks/use-calendar-clock.ts

@@ -0,0 +1,49 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+
+const MINUTE_MS = 60_000;
+const listeners = new Set<() => void>();
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+function getSnapshot() {
+  return Math.floor(Date.now() / MINUTE_MS);
+}
+
+function getServerSnapshot() {
+  // Server and hydration must share a deterministic snapshot; React then reads now.
+  return 0;
+}
+
+function scheduleTick() {
+  timer = setTimeout(
+    () => {
+      timer = undefined;
+      for (const listener of listeners) listener();
+      if (listeners.size) scheduleTick();
+    },
+    MINUTE_MS - (Date.now() % MINUTE_MS)
+  );
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  if (timer === undefined) scheduleTick();
+  return () => {
+    listeners.delete(listener);
+    if (!listeners.size && timer !== undefined) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  };
+}
+
+/** One minute clock shared by every calendar view; selected days stay immutable. */
+export function useCalendarClock(): Date {
+  const minute = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  );
+  return new Date(minute * MINUTE_MS);
+}

package/src/hooks/use-calendar-day-zone.tsx

@@ -0,0 +1,12 @@
+'use client';
+import { createContext, useContext } from 'react';
+export type CalendarDayZone = {
+  timezone?: string;
+  setTimezone: (zone: string) => void;
+  goToToday?: () => void;
+};
+const CalendarDayZoneContext = createContext<CalendarDayZone | null>(null);
+export const CalendarDayZoneBridgeProvider = CalendarDayZoneContext.Provider;
+export function useCalendarDayZone() {
+  return useContext(CalendarDayZoneContext);
+}

package/src/hooks/use-calendar-sync.tsx

@@ -9,7 +9,6 @@ import type {
 } from '@tuturuuu/types';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import { isAllDayEvent } from '@tuturuuu/utils/calendar-utils';
-import dayjs from 'dayjs';
 import {
   createContext,
   type SetStateAction,
@@ -21,12 +20,18 @@ import {
   useState,
 } from 'react';
 import { toast } from '../components/ui/sonner';
+import { calendarQueryRange } from '../lib/calendar-day';
 import { runCalendarProviderSync } from './calendar-provider-sync';
 import {
   type CacheUpdate,
   type CalendarCache,
   updateCalendarRangeCache,
 } from './calendar-range-cache';
+import {
+  calendarEventInQueryRange,
+  calendarRangeCacheKey,
+  calendarRangeIncludesToday,
+} from './calendar-sync-range';
 
 // Type for calendar connection
 type CalendarConnection = {
@@ -91,6 +96,8 @@ const CalendarSyncContext = createContext<{
   googleData: WorkspaceCalendarEvent[] | null;
   error: Error | null;
   dates: Date[];
+  timezone: string | undefined;
+  setTimezone: (timezone: string | undefined) => void;
 
   setDates: (dates: Date[]) => void;
   currentView: 'day' | '4-day' | 'week' | 'month';
@@ -141,6 +148,8 @@ const CalendarSyncContext = createContext<{
   googleData: null,
   error: null,
   dates: [],
+  timezone: undefined,
+  setTimezone: () => {},
   setDates: () => {},
   currentView: 'day',
   setCurrentView: () => {},
@@ -196,6 +205,7 @@ export const CalendarSyncProvider = ({
 
   const [error, setError] = useState<Error | null>(null);
   const [dates, setDates] = useState<Date[]>([]);
+  const [timezone, setTimezone] = useState<string>();
   const [currentView, setCurrentView] = useState<
     'day' | '4-day' | 'week' | 'month'
   >('day');
@@ -257,53 +267,18 @@ export const CalendarSyncProvider = ({
 
   const setCalendarConnections = setCalendarConnectionsState;
 
-  // Helper to generate cache key from dates
-  const getCacheKey = useCallback((dateRange: Date[]) => {
-    if (!dateRange || dateRange.length === 0) {
-      return '';
-    }
-    return `${dateRange[0]!.toISOString()}-${dateRange[dateRange.length - 1]!.toISOString()}`;
-  }, []);
-
   const activeCacheKey = useMemo(
-    () => (dates.length ? `${wsId}:${getCacheKey(dates)}` : ''),
-    [dates, getCacheKey, wsId]
+    () =>
+      dates.length ? `${wsId}:${calendarRangeCacheKey(dates, timezone)}` : '',
+    [dates, timezone, wsId]
   );
   const activeCachedDatabaseEvents = activeCacheKey
     ? calendarCache[activeCacheKey]?.dbEvents
     : undefined;
 
-  // Helper to check if a date range includes today (current week issue)
-  const includesCurrentWeek = useCallback((dateRange: Date[]) => {
-    if (!dateRange || dateRange.length === 0) return false;
-    const today = new Date();
-    const startOfToday = new Date(
-      today.getFullYear(),
-      today.getMonth(),
-      today.getDate()
-    );
-    const endOfToday = new Date(
-      today.getFullYear(),
-      today.getMonth(),
-      today.getDate(),
-      23,
-      59,
-      59
-    );
-
-    const firstDate = dateRange[0];
-    const lastDate = dateRange[dateRange.length - 1];
-    if (!firstDate || !lastDate) return false;
-
-    const rangeStart = new Date(firstDate);
-    const rangeEnd = new Date(lastDate);
-
-    return rangeStart <= endOfToday && rangeEnd >= startOfToday;
-  }, []);
-
   // Enhanced cache staleness check - shorter staleness for current week
   const isCacheStaleEnhanced = (lastUpdated: number, dateRange: Date[]) => {
-    const isCurrentWeek = includesCurrentWeek(dateRange);
+    const isCurrentWeek = calendarRangeIncludesToday(dateRange, timezone);
     // 30 seconds for current week, 5 minutes for other weeks
     const staleTime = isCurrentWeek ? 30 * 1000 : 5 * 60 * 1000; // 30 seconds
     return Date.now() - lastUpdated >= staleTime;
@@ -316,27 +291,9 @@ export const CalendarSyncProvider = ({
   }, []);
 
   const isVisibleInCurrentRange = useCallback(
-    (event: { start_at?: string; end_at?: string }) => {
-      if (dates.length === 0) return true;
-
-      const firstDate = dates[0];
-      const lastDate = dates[dates.length - 1];
-      if (!firstDate || !lastDate) return true;
-
-      if (!event.start_at && !event.end_at) return true;
-
-      const rangeStart = dayjs(firstDate).startOf('day').valueOf();
-      const rangeEnd = dayjs(lastDate).endOf('day').valueOf();
-      const startAt = event.start_at ? dayjs(event.start_at).valueOf() : NaN;
-      const endAt = event.end_at ? dayjs(event.end_at).valueOf() : startAt;
-
-      if (Number.isNaN(startAt) || Number.isNaN(endAt)) {
-        return true;
-      }
-
-      return startAt <= rangeEnd && endAt >= rangeStart;
-    },
-    [dates]
+    (event: { start_at?: string; end_at?: string }) =>
+      calendarEventInQueryRange(event, dates, timezone),
+    [dates, timezone]
   );
 
   const patchVisibleEvents = useCallback(
@@ -417,10 +374,10 @@ export const CalendarSyncProvider = ({
       }
 
       // Otherwise fetch fresh data via API (which handles E2EE decryption)
-      const startDate = dayjs(dates[0]).startOf('day');
-      const endDate = dayjs(dates[dates.length - 1])
-        .add(1, 'day')
-        .startOf('day');
+      const { start: startDate, end: endDate } = calendarQueryRange(
+        dates,
+        timezone
+      );
 
       try {
         const response = await fetch(
@@ -494,10 +451,10 @@ export const CalendarSyncProvider = ({
     staleTime: 2 * 60_000,
     gcTime: 30 * 60_000,
     queryFn: async () => {
-      const startDate = dayjs(dates[0]).startOf('day');
-      const endDate = dayjs(dates[dates.length - 1])
-        .add(1, 'day')
-        .startOf('day');
+      const { start: startDate, end: endDate } = calendarQueryRange(
+        dates,
+        timezone
+      );
 
       try {
         const response = await fetch(
@@ -534,15 +491,18 @@ export const CalendarSyncProvider = ({
   });
 
   // Helper to check if dates have actually changed
-  const areDatesEqual = useCallback((newDates: Date[]) => {
-    const newDatesStr = JSON.stringify(newDates.map((d) => d.toISOString()));
-    const prevDatesStr = prevDatesRef.current;
-    const areEqual = newDatesStr === prevDatesStr;
-    if (!areEqual) {
-      prevDatesRef.current = newDatesStr;
-    }
-    return areEqual;
-  }, []);
+  const areDatesEqual = useCallback(
+    (newDates: Date[]) => {
+      const newDatesStr = calendarRangeCacheKey(newDates, timezone);
+      const prevDatesStr = prevDatesRef.current;
+      const areEqual = newDatesStr === prevDatesStr;
+      if (!areEqual) {
+        prevDatesRef.current = newDatesStr;
+      }
+      return areEqual;
+    },
+    [timezone]
+  );
 
   // Invalidate and refetch events
   const refresh = useCallback(() => {
@@ -654,7 +614,7 @@ export const CalendarSyncProvider = ({
     const cacheData = calendarCache[activeCacheKey];
 
     // For current week, force a fresh database fetch
-    const isCurrentWeek = includesCurrentWeek(dates);
+    const isCurrentWeek = calendarRangeIncludesToday(dates, timezone);
 
     if (cacheData && isCurrentWeek) {
       isForcedRef.current = true;
@@ -666,7 +626,7 @@ export const CalendarSyncProvider = ({
   }, [
     dates,
     calendarCache,
-    includesCurrentWeek,
+    timezone,
     areDatesEqual,
     activeCacheKey,
     updateCache,
@@ -841,6 +801,8 @@ export const CalendarSyncProvider = ({
     error,
     dates,
     setDates,
+    timezone,
+    setTimezone,
     currentView,
     setCurrentView,
     syncToTuturuuu,

package/src/hooks/use-calendar.tsx

@@ -437,7 +437,7 @@ export const CalendarProvider = ({
   const updateQueueRef = useRef<PendingEventUpdate[]>([]);
   const isProcessingQueueRef = useRef<boolean>(false);
 
-  const { events, refresh, patchVisibleEvents } = useCalendarSync();
+  const { events, refresh, patchVisibleEvents, timezone } = useCalendarSync();
 
   const [activeEventId, setActiveEventId] = useState<string | null>(null);
   const [previewEventId, setPreviewEventId] = useState<string | null>(null);
@@ -503,8 +503,8 @@ export const CalendarProvider = ({
   );
 
   const getCurrentEvents = useMemo(
-    () => createCalendarEventLookup(events),
-    [events]
+    () => createCalendarEventLookup(events, timezone),
+    [events, timezone]
   );
 
   const getUpcomingEvent = useCallback(() => {

package/src/lib/calendar-day.ts

@@ -0,0 +1,67 @@
+import {
+  buildDateInTimezone,
+  getDatePartsInTimezone,
+  resolveTaskTimezone,
+} from '@tuturuuu/utils/task-date-timezone';
+
+/** Local fields carry a calendar day; this Date is never an event instant. */
+export function calendarDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+export function calendarDayKey(date: Date): string {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+export function calendarInstantDay(instant: Date, zone?: string): Date {
+  const parts = getDatePartsInTimezone(
+    instant,
+    resolveTaskTimezone(zone ?? 'auto')
+  );
+  return new Date(parts.year, parts.month - 1, parts.day);
+}
+export function calendarToday(zone?: string, now = new Date()): Date {
+  return calendarInstantDay(now, zone);
+}
+/** Construct each midnight independently so DST days can span 23 or 25 hours. */
+export function calendarDayBoundary(day: Date, zone?: string): Date {
+  return buildDateInTimezone(
+    day.getFullYear(),
+    day.getMonth() + 1,
+    day.getDate(),
+    0,
+    0,
+    resolveTaskTimezone(zone ?? 'auto')
+  );
+}
+export function calendarQueryRange(dates: Date[], zone?: string) {
+  const first = dates[0];
+  const last = dates.at(-1);
+  if (!first || !last) throw new Error('Calendar range needs at least one day');
+  const afterLast = new Date(
+    last.getFullYear(),
+    last.getMonth(),
+    last.getDate() + 1
+  );
+  return {
+    start: calendarDayBoundary(first, zone),
+    end: calendarDayBoundary(afterLast, zone),
+  };
+}
+/** Date-only navigation preserves its YMD; timestamp navigation projects an instant. */
+export function calendarNavigationDate(
+  value: string,
+  zone?: string
+): Date | null {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (match) {
+    const date = new Date(
+      Number(match[1]),
+      Number(match[2]) - 1,
+      Number(match[3])
+    );
+    return calendarDayKey(date) === value ? date : null;
+  }
+  const instant = new Date(value);
+  return Number.isFinite(instant.getTime())
+    ? calendarInstantDay(instant, zone)
+    : null;
+}