@tuturuuu/ui 0.37.0 → 0.37.2

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

@@ -13,23 +13,12 @@ import {
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
+import { useCalendarPreferences } from '@tuturuuu/ui/hooks/use-calendar-preferences';
+import { calendarEventStyle } from '@tuturuuu/utils/calendar-event-colors';
 import { cn } from '@tuturuuu/utils/format';
-import { format } from 'date-fns';
+import { useLocale } from 'next-intl';
 import { useEffect, useRef } from 'react';
-
-function formatEventTime(startAt?: string, endAt?: string) {
-  if (!startAt || !endAt) return '';
-
-  const start = new Date(startAt);
-  const end = new Date(endAt);
-  const sameDay = start.toDateString() === end.toDateString();
-
-  if (sameDay) {
-    return `${format(start, 'EEE, MMM d')} - ${format(start, 'p')} - ${format(end, 'p')}`;
-  }
-
-  return `${format(start, 'MMM d, p')} - ${format(end, 'MMM d, p')}`;
-}
+import { formatEventPreviewTime } from './event-preview-time';
 
 function getSourceLabel(event: {
   provider?: string | null;
@@ -48,6 +37,8 @@ function getSourceLabel(event: {
 }
 
 export function EventPreviewPopover() {
+  const preferences = useCalendarPreferences();
+  const locale = useLocale();
   const {
     previewEvent,
     isPreviewOpen,
@@ -102,7 +93,7 @@ export function EventPreviewPopover() {
       <div className="flex items-start gap-3">
         <div
           className="mt-1 h-3 w-3 shrink-0 rounded-full"
-          style={{ backgroundColor: previewEvent._calendarColor || undefined }}
+          style={calendarEventStyle(previewEvent)}
         />
         <div className="min-w-0 flex-1 space-y-3">
           <div className="flex items-start justify-between gap-3">
@@ -111,7 +102,12 @@ export function EventPreviewPopover() {
                 {previewEvent.title || 'Untitled event'}
               </h3>
               <p className="text-muted-foreground text-sm">
-                {formatEventTime(previewEvent.start_at, previewEvent.end_at)}
+                {formatEventPreviewTime(
+                  previewEvent.start_at,
+                  previewEvent.end_at,
+                  preferences,
+                  locale
+                )}
               </p>
             </div>
             <Button

package/src/components/ui/legacy/calendar/event-preview-time.ts

@@ -0,0 +1,41 @@
+import type { CalendarPreferences } from '../../../../hooks/use-calendar-preferences';
+
+/** Compare and format event instants in the calendar's resolved display zone. */
+export function formatEventPreviewTime(
+  startAt: string | undefined,
+  endAt: string | undefined,
+  preferences: CalendarPreferences,
+  locale: string
+): string {
+  if (!startAt || !endAt) return '';
+  const start = new Date(startAt);
+  const end = new Date(endAt);
+  if (!Number.isFinite(start.getTime()) || !Number.isFinite(end.getTime()))
+    return '';
+
+  const timeZone =
+    preferences.timezone && preferences.timezone !== 'auto'
+      ? preferences.timezone
+      : undefined;
+  const dateKey = new Intl.DateTimeFormat('en-CA', {
+    timeZone,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  });
+  const date = new Intl.DateTimeFormat(locale, {
+    timeZone,
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+  });
+  const time = new Intl.DateTimeFormat(locale, {
+    timeZone,
+    hour: '2-digit',
+    minute: '2-digit',
+    hourCycle: preferences.timeFormat === '24h' ? 'h23' : 'h12',
+  });
+  return dateKey.format(start) === dateKey.format(end)
+    ? `${date.format(start)} - ${time.format(start)} - ${time.format(end)}`
+    : `${date.format(start)}, ${time.format(start)} - ${date.format(end)}, ${time.format(end)}`;
+}

package/src/components/ui/legacy/calendar/location-timeline.tsx

@@ -15,6 +15,7 @@ import {
 } from '@tuturuuu/icons';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import { calendarEventStyle } from '@tuturuuu/utils/calendar-event-colors';
 import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
@@ -29,11 +30,9 @@ dayjs.extend(isBetween);
 dayjs.extend(isSameOrAfter);
 dayjs.extend(isSameOrBefore);
 
-// Module-level utility for timezone-aware dayjs conversion
 const createDayjsDate = (d: Date | string, tz?: string) =>
   tz === 'auto' ? dayjs(d) : dayjs(d).tz(tz);
 
-// Types
 interface EventSpan {
   event: CalendarEvent;
   startIndex: number;
@@ -669,12 +668,10 @@ const LocationPill = ({
   // Get the label showing the span info
   const getSpanLabel = () => {
     if (isSingleDayEvent) {
-      return getDayjsDate(visibleDates[startIndex] ?? new Date()).format(
-        'MMM D'
-      );
+      return dayjs(visibleDates[startIndex] ?? new Date()).format('MMM D');
     }
-    const start = getDayjsDate(visibleDates[startIndex] ?? new Date());
-    const end = getDayjsDate(visibleDates[startIndex + span - 1] ?? new Date());
+    const start = dayjs(visibleDates[startIndex] ?? new Date());
+    const end = dayjs(visibleDates[startIndex + span - 1] ?? new Date());
     return `${start.format('MMM D')} - ${end.format('MMM D')}`;
   };
 
@@ -851,16 +848,14 @@ const LocationPill = ({
         <div
           className={cn(
             'group absolute flex h-4 items-center justify-center gap-1 rounded-full px-2 font-medium text-[10px] shadow-sm transition-all',
-            styles.bg,
-            styles.text,
-            styles.hover,
-            'hover:shadow-md',
+            'hover:shadow-md hover:ring-1 hover:ring-current',
             isDragging ? 'cursor-grabbing' : 'cursor-pointer'
           )}
           style={{
+            ...calendarEventStyle(event),
             left: `calc(${(displayStartIndex * 100) / visibleDates.length}% + 4px)`,
             width: `calc(${(displaySpan * 100) / visibleDates.length}% - 8px)`,
-            opacity: isDragging ? 0.7 : 1,
+            opacity: 1,
           }}
           title={`${event.title}${displaySpan > 1 ? ` (${displaySpan} days)` : ''}`}
         >
@@ -1175,7 +1170,7 @@ const LocationPicker = ({
     }
   };
 
-  const displayDate = getDayjsDate(visibleDates[dateIndex] ?? new Date());
+  const displayDate = dayjs(visibleDates[dateIndex] ?? new Date());
 
   return (
     <Popover
@@ -1353,10 +1348,7 @@ export const LocationTimeline = ({
     >
       {/* Clickable day cells for adding locations */}
       {visibleDates.map((date, dateIndex) => {
-        const dateKey =
-          tz === 'auto'
-            ? dayjs(date).format('YYYY-MM-DD')
-            : dayjs(date).tz(tz).format('YYYY-MM-DD');
+        const dateKey = dayjs(date).format('YYYY-MM-DD');
 
         // Check if this day already has a location event
         const hasLocationEvent = locationSpans.some(

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

@@ -4,8 +4,10 @@ import { ArrowLeft, Ellipsis, Plus } from '@tuturuuu/icons';
 import type { Workspace } from '@tuturuuu/types';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
+import { useCalendarClock } from '@tuturuuu/ui/hooks/use-calendar-clock';
 import { useCalendarPreferences } from '@tuturuuu/ui/hooks/use-calendar-preferences';
 import { useUserBooleanConfig } from '@tuturuuu/ui/hooks/use-user-config';
+import { calendarEventStyle } from '@tuturuuu/utils/calendar-event-colors';
 import { isAllDayEvent } from '@tuturuuu/utils/calendar-utils';
 import { cn } from '@tuturuuu/utils/format';
 import { getTimeFormatPattern } from '@tuturuuu/utils/time-helper';
@@ -15,8 +17,6 @@ import {
   endOfMonth,
   endOfWeek,
   isSameMonth,
-  isToday,
-  startOfDay,
   startOfMonth,
   startOfWeek,
 } from 'date-fns';
@@ -25,10 +25,14 @@ import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
+import {
+  calendarDayBoundary,
+  calendarDayKey,
+  calendarToday,
+} from '../../../../lib/calendar-day';
 import { formatLunarDay, getLunarDate } from '../../../../lib/lunar-calendar';
 import { Button } from '../../button';
 import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
-import { calendarEventTone } from './calendar-event-tone';
 import { calendarDraftDate } from './calendar-period';
 import { useCalendarSettings } from './settings/settings-context';
 
@@ -60,15 +64,15 @@ function MonthEvent({
   const t = useTranslations('calendar');
   const title = event.title || t('views.untitled_event');
   const allDay = isAllDayEvent(event);
-  const continued = new Date(event.start_at) < startOfDay(day);
+  const continued = new Date(event.start_at) < calendarDayBoundary(day, zone);
   return (
     <button
       type="button"
       onClick={() => onOpen(event.id)}
       title={title}
+      style={calendarEventStyle(event)}
       className={cn(
-        'flex w-full min-w-0 items-center gap-1 rounded px-1 py-1 text-left text-[10px] leading-tight transition-colors hover:brightness-110 focus-visible:outline-2 focus-visible:outline-ring sm:px-1.5 sm:text-xs',
-        calendarEventTone(event.color),
+        'flex w-full min-w-0 items-center gap-1 rounded px-1 py-1 text-left text-[10px] leading-tight transition-colors hover:ring-1 hover:ring-current focus-visible:outline-2 focus-visible:outline-ring sm:px-1.5 sm:text-xs',
         allDay && 'font-medium'
       )}
     >
@@ -76,7 +80,7 @@ function MonthEvent({
         <ArrowLeft className="size-2.5 shrink-0" />
       ) : (
         !allDay && (
-          <span className="hidden shrink-0 tabular-nums opacity-70 lg:inline">
+          <span className="hidden shrink-0 tabular-nums lg:inline">
             {(zone && zone !== 'auto'
               ? dayjs(event.start_at).tz(zone)
               : dayjs(event.start_at)
@@ -106,6 +110,10 @@ export function MonthCalendar({
   } = useCalendar();
   const cannotCreate = readOnly || providerReadOnly;
   const { settings } = useCalendarSettings();
+  const now = useCalendarClock();
+  const todayKey = calendarDayKey(
+    calendarToday(settings?.timezone?.timezone, now)
+  );
   const { timeFormat, weekStartsOn } = useCalendarPreferences();
   const { value: showLunar } = useUserBooleanConfig(
     'SHOW_LUNAR_CALENDAR',
@@ -187,18 +195,20 @@ export function MonthCalendar({
               className={cn(
                 'group min-w-0 border-r border-b p-1 sm:p-2',
                 !currentMonth && 'bg-muted/35 text-muted-foreground',
-                isToday(day) && 'bg-primary/5'
+                calendarDayKey(day) === todayKey && 'bg-primary/5'
               )}
             >
               <div className="mb-1 flex min-h-7 items-center justify-between gap-1">
                 <button
                   type="button"
                   aria-label={label}
-                  aria-current={isToday(day) ? 'date' : undefined}
+                  aria-current={
+                    calendarDayKey(day) === todayKey ? 'date' : undefined
+                  }
                   onClick={() => onDayClick?.(day)}
                   className={cn(
                     'flex size-7 shrink-0 items-center justify-center rounded-full font-medium text-xs tabular-nums hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring',
-                    isToday(day) &&
+                    calendarDayKey(day) === todayKey &&
                       'bg-primary text-primary-foreground hover:bg-primary/90'
                   )}
                 >

package/src/components/ui/legacy/calendar/settings/calendar-sync-dashboard.tsx

@@ -1,42 +1,23 @@
 'use client';
 
-import { useQuery } from '@tanstack/react-query';
 import { Calendar, Download, RefreshCw } from '@tuturuuu/icons';
-import type { Workspace } from '@tuturuuu/types';
 import { Button } from '@tuturuuu/ui/button';
 import { AnalyticsCharts } from '@tuturuuu/ui/legacy/calendar/settings/analytics-charts';
 import { SummaryCards } from '@tuturuuu/ui/legacy/calendar/settings/summary-cards';
 import { SyncLogsTable } from '@tuturuuu/ui/legacy/calendar/settings/sync-logs-table';
 import { useMemo, useState } from 'react';
+import { useVisibleWorkspaces } from '../../../../../hooks/use-visible-workspaces';
 import type { SyncLog } from './types';
 
-const getWorkspaces = async () => {
-  const workspaces = await fetch('/api/workspaces');
-  if (!workspaces.ok) {
-    throw new Error(`Failed to fetch workspaces: ${workspaces.status}`);
-  }
-  return workspaces.json();
-};
-
 export function CalendarSyncDashboard({ syncLogs }: { syncLogs: SyncLog[] }) {
   const [filterType, setFilterType] = useState('all');
   const [filterWorkspace, setFilterWorkspace] = useState('all');
   const [searchTerm, setSearchTerm] = useState('');
 
-  // Get workspaces from API
-  const workspacesQuery = useQuery({
-    queryKey: ['workspaces'],
-    queryFn: () => getWorkspaces(),
-    refetchInterval: 1000 * 60 * 5, // 5 minutes
+  const workspacesQuery = useVisibleWorkspaces(true, undefined, {
+    refetchInterval: 300_000,
   });
-
-  // Fallback to mock workspaces if API fails
-  const workspaces: Workspace[] = workspacesQuery.data || [
-    { id: 'ws_1', name: 'Marketing Team' },
-    { id: 'ws_2', name: 'Engineering' },
-    { id: 'ws_3', name: 'Sales Department' },
-    { id: 'ws_4', name: 'Executive Team' },
-  ];
+  const workspaces = workspacesQuery.data ?? [];
 
   const filteredLogs = useMemo(() => {
     return syncLogs.filter((log) => {

package/src/components/ui/legacy/calendar/settings/sync-logs-table.tsx

@@ -44,7 +44,7 @@ import type { SyncLog } from './types';
 
 interface SyncLogsTableProps {
   syncLogs: SyncLog[];
-  workspaces: Workspace[];
+  workspaces: Pick<Workspace, 'id' | 'name'>[];
   filterType: string;
   filterWorkspace: string;
   searchTerm: string;
@@ -221,11 +221,8 @@ export function SyncLogsTable({
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All Workspaces</SelectItem>
-                {workspaces.map((workspace, index) => (
-                  <SelectItem
-                    key={`${workspace.id}-${index}`}
-                    value={workspace.id}
-                  >
+                {workspaces.map((workspace) => (
+                  <SelectItem key={workspace.id} value={workspace.id}>
                     <div className="flex items-center gap-2">
                       <div className="h-2 w-2 rounded-full bg-blue-500" />
                       {workspace.name}

package/src/components/ui/legacy/calendar/time-indicator-line.tsx

@@ -1,6 +1,6 @@
+import { useCalendarClock } from '@tuturuuu/ui/hooks/use-calendar-clock';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
-import { useEffect, useState } from 'react';
 import { HOUR_HEIGHT } from './config';
 import { useCalendarSettings } from './settings/settings-context';
 
@@ -15,25 +15,8 @@ export const TimeIndicatorLine = ({
 }) => {
   const { settings } = useCalendarSettings();
   const tz = settings?.timezone?.timezone;
-  const [now, setNow] = useState(tz === 'auto' ? dayjs() : dayjs().tz(tz));
-
-  // Update the time every minute
-  useEffect(() => {
-    const updateTime = () => {
-      setNow(tz === 'auto' ? dayjs() : dayjs().tz(tz));
-    };
-
-    // Update immediately
-    updateTime();
-
-    // Then update every minute
-    const interval = setInterval(updateTime, 60000);
-
-    return () => clearInterval(interval);
-  }, [tz]);
-
-  // Use selected timezone
-  const nowTz = tz === 'auto' ? now : now.tz(tz);
+  const now = dayjs(useCalendarClock());
+  const nowTz = tz && tz !== 'auto' ? now.tz(tz) : now;
   const hours = nowTz.hour();
   const minutes = nowTz.minute();
   const seconds = nowTz.second();

package/src/components/ui/legacy/calendar/time-indicator.tsx

@@ -1,11 +1,19 @@
-import { isSameDay } from 'date-fns';
+import { useCalendarClock } from '@tuturuuu/ui/hooks/use-calendar-clock';
+import { calendarDayKey, calendarToday } from '../../../../lib/calendar-day';
+import { useCalendarSettings } from './settings/settings-context';
 import { TimeIndicatorLine } from './time-indicator-line';
 
 export const TimeIndicator = ({ dates }: { dates: Date[] }) => {
-  const now = new Date();
+  const { settings } = useCalendarSettings();
+  const now = useCalendarClock();
+  const todayKey = calendarDayKey(
+    calendarToday(settings?.timezone?.timezone, now)
+  );
 
   // Find the index of today's date in the dates array
-  const todayIndex = dates.findIndex((date) => isSameDay(date, now));
+  const todayIndex = dates.findIndex(
+    (date) => calendarDayKey(date) === todayKey
+  );
 
   // Only render if today is in the visible dates
   if (todayIndex === -1) return null;

package/src/components/ui/legacy/calendar/weekday-bar.tsx

@@ -1,15 +1,12 @@
 import { Clock } from '@tuturuuu/icons';
 import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
 import type { CalendarView } from '../../../../hooks/use-view-transition';
 import { AllDayEventBar } from './all-day-event-bar';
 import { MIN_COLUMN_WIDTH } from './config';
 import { DayTitle } from './day-title';
 import { useCalendarSettings } from './settings/settings-context';
 
-dayjs.extend(timezone);
-
 export const WeekdayBar = ({
   locale,
   view,
@@ -21,14 +18,12 @@ export const WeekdayBar = ({
 }) => {
   const { settings } = useCalendarSettings();
   const showWeekends = settings.appearance.showWeekends;
-  const tz = settings?.timezone?.timezone;
 
   // Filter out weekend days if showWeekends is false
   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
       });
 
@@ -50,8 +45,7 @@ export const WeekdayBar = ({
           }}
         >
           {visibleDates.map((weekday) => {
-            const dayjsDate =
-              tz === 'auto' ? dayjs(weekday) : dayjs(weekday).tz(tz);
+            const dayjsDate = dayjs(weekday);
             return (
               <div
                 key={`date-${dayjsDate.format('YYYY-MM-DD')}`}

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

@@ -1,24 +1,22 @@
 'use client';
 
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
+import { useCalendarClock } from '@tuturuuu/ui/hooks/use-calendar-clock';
 import { useUserBooleanConfig } from '@tuturuuu/ui/hooks/use-user-config';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
+import { calendarEventStyle } from '@tuturuuu/utils/calendar-event-colors';
 import { cn } from '@tuturuuu/utils/format';
-import {
-  eachDayOfInterval,
-  endOfMonth,
-  getDay,
-  isToday,
-  startOfMonth,
-} from 'date-fns';
+import { eachDayOfInterval, endOfMonth, getDay, startOfMonth } from 'date-fns';
 import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
+import { calendarDayKey, calendarToday } from '../../../../lib/calendar-day';
 import {
   formatLunarDay,
   getLunarDate,
   getLunarHolidayName,
   isSpecialLunarDate,
 } from '../../../../lib/lunar-calendar';
+import { useCalendarSettings } from './settings/settings-context';
 
 interface YearCalendarProps {
   year: number;
@@ -29,32 +27,6 @@ interface YearCalendarProps {
   onMonthClick?: (date: Date) => void;
 }
 
-const normalizeColor = (color: string): string => {
-  if (!color) return 'primary';
-  const normalized = color.trim().toLowerCase();
-  if (normalized === '#6b7280' || normalized === 'grey') return 'gray';
-  return normalized;
-};
-
-const EVENT_DOT_COLORS: Record<string, string> = {
-  blue: 'bg-dynamic-blue',
-  red: 'bg-dynamic-red',
-  green: 'bg-dynamic-green',
-  purple: 'bg-dynamic-purple',
-  yellow: 'bg-dynamic-yellow',
-  orange: 'bg-dynamic-orange',
-  pink: 'bg-dynamic-pink',
-  cyan: 'bg-dynamic-cyan',
-  indigo: 'bg-dynamic-indigo',
-  gray: 'bg-dynamic-gray',
-  primary: 'bg-primary',
-};
-
-function getEventDotColor(color: string): string {
-  const normalized = normalizeColor(color);
-  return EVENT_DOT_COLORS[normalized] || 'bg-primary';
-}
-
 function getWeekdayLabels(
   firstDayOfWeek: number,
   showWeekends: boolean,
@@ -98,6 +70,9 @@ function MiniMonth({
 }) {
   const t = useTranslations('calendar');
   const { getCurrentEvents } = useCalendar();
+  const { settings } = useCalendarSettings();
+  const now = useCalendarClock();
+  const today = calendarToday(settings?.timezone?.timezone, now);
   const monthStart = startOfMonth(monthDate);
   const monthEnd = endOfMonth(monthDate);
   const days = eachDayOfInterval({ start: monthStart, end: monthEnd });
@@ -136,8 +111,8 @@ function MiniMonth({
   }, [monthStart, days, firstDayOfWeek, showWeekends, numCols]);
 
   const isCurrentMonth =
-    monthDate.getMonth() === new Date().getMonth() &&
-    monthDate.getFullYear() === new Date().getFullYear();
+    monthDate.getMonth() === today.getMonth() &&
+    monthDate.getFullYear() === today.getFullYear();
 
   // Pre-compute event counts for all days in the month to avoid per-cell context calls
   const dayEventData = useMemo(() => {
@@ -148,7 +123,7 @@ function MiniMonth({
         const seenColors = new Set<string>();
         const dots: string[] = [];
         for (const event of events) {
-          const color = getEventDotColor(event.color || 'primary');
+          const color = calendarEventStyle(event).backgroundColor;
           if (!seenColors.has(color) && dots.length < 3) {
             seenColors.add(color);
             dots.push(color);
@@ -229,11 +204,16 @@ function DayCell({
   dayEventData?: { count: number; dots: string[] };
 }) {
   const t = useTranslations('calendar');
+  const { settings } = useCalendarSettings();
+  const now = useCalendarClock();
+  const todayKey = calendarDayKey(
+    calendarToday(settings?.timezone?.timezone, now)
+  );
   if (!day) {
     return <div className={cn('h-9', showLunar && 'h-11')} />;
   }
 
-  const today = isToday(day);
+  const today = calendarDayKey(day) === todayKey;
   const hasEvents = !!dayEventData && dayEventData.count > 0;
   const eventDots = dayEventData?.dots || [];
 
@@ -282,7 +262,11 @@ function DayCell({
       {hasEvents && !showLunar && (
         <div className="absolute -bottom-0.5 flex gap-px">
           {eventDots.map((color, i) => (
-            <div key={i} className={cn('h-1 w-1 rounded-full', color)} />
+            <div
+              key={i}
+              className="h-1 w-1 rounded-full"
+              style={{ backgroundColor: color }}
+            />
           ))}
         </div>
       )}
@@ -290,7 +274,11 @@ function DayCell({
       {hasEvents && showLunar && (
         <div className="absolute top-0 right-0 flex gap-px">
           {eventDots.slice(0, 1).map((color, i) => (
-            <div key={i} className={cn('h-1 w-1 rounded-full', color)} />
+            <div
+              key={i}
+              className="h-1 w-1 rounded-full"
+              style={{ backgroundColor: color }}
+            />
           ))}
         </div>
       )}

package/src/components/ui/resizable.tsx

@@ -8,6 +8,7 @@ import {
   type GroupProps as GroupPropsOriginal,
   Panel,
   Separator,
+  usePanelRef,
 } from 'react-resizable-panels';
 
 interface ResizablePanelGroupProps
@@ -96,4 +97,4 @@ function ResizableHandle({
   );
 }
 
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup, usePanelRef };

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

@@ -154,6 +154,51 @@ describe('CalendarSyncProvider optimistic visible events', () => {
     vi.stubGlobal('fetch', vi.fn());
   });
 
+  it('requests both event APIs at zoned DST boundaries and refetches when the zone changes', async () => {
+    const fetchMock = mockCalendarFetch([]);
+    vi.stubGlobal('fetch', fetchMock);
+    const { result, queryClient } = renderCalendarSync();
+    const requestsFor = (path: string) =>
+      fetchMock.mock.calls
+        .map(([input]) => new URL(String(input), 'http://localhost'))
+        .filter((url) => url.pathname.endsWith(path));
+    act(() => {
+      result.current.setTimezone('America/New_York');
+      result.current.setDates([new Date(2026, 2, 8, 18)]);
+    });
+    await waitFor(() => {
+      for (const path of ['/calendar/events', '/calendar/habit-events']) {
+        const url = requestsFor(path).at(-1);
+        expect(url?.searchParams.get('start_at')).toBe(
+          '2026-03-08T05:00:00.000Z'
+        );
+        expect(url?.searchParams.get('end_at')).toBe(
+          '2026-03-09T04:00:00.000Z'
+        );
+      }
+    });
+    act(() => result.current.setTimezone('Asia/Tokyo'));
+    await waitFor(() => {
+      for (const path of ['/calendar/events', '/calendar/habit-events']) {
+        const url = requestsFor(path).at(-1);
+        expect(url?.searchParams.get('start_at')).toBe(
+          '2026-03-07T15:00:00.000Z'
+        );
+        expect(url?.searchParams.get('end_at')).toBe(
+          '2026-03-08T15:00:00.000Z'
+        );
+      }
+    });
+    const keys = queryClient
+      .getQueryCache()
+      .findAll({ queryKey: ['databaseCalendarEvents'] })
+      .map((query) => query.queryKey[2]);
+    expect(keys).toContain(
+      'workspace-1:America/New_York:2026-03-08-2026-03-08'
+    );
+    expect(keys).toContain('workspace-1:Asia/Tokyo:2026-03-08-2026-03-08');
+  });
+
   it('reports a partial HTTP 200 sync as an error without a success callback', async () => {
     vi.stubGlobal(
       'fetch',