@tuturuuu/ui 0.37.0 → 0.37.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.37.1](https://github.com/tutur3u/platform/compare/ui-v0.37.0...ui-v0.37.1) (2026-10-01)
+
+
+### Bug Fixes
+
+* **calendar:** align calendar-day navigation and zoned query ranges ([e81a8be](https://github.com/tutur3u/platform/commit/e81a8be8edf2e46b2653bfcf30bc118d12984e88))
+* **calendar:** align date navigation and zoned query ranges ([#5654](https://github.com/tutur3u/platform/issues/5654)) ([f40288c](https://github.com/tutur3u/platform/commit/f40288c7cc817f71ca30f6ee5331efbf726c4ada))
+* **calendar:** format clock options without browser dates ([757709e](https://github.com/tutur3u/platform/commit/757709ecbf1070cfa3248ece54f9b9c66cd000c7))
+* **calendar:** honor resolved timezone in event picker ([eae3a25](https://github.com/tutur3u/platform/commit/eae3a25ec443fbb1fe51acf1c642a6b44e6c80f8)) ([#5648](https://github.com/tutur3u/platform/issues/5648)) ([7ccc4b3](https://github.com/tutur3u/platform/commit/7ccc4b356411744f5b90e55c35c1e6f759981d42))
+* **calendar:** preserve explicit time bounds and guard DST rollover ([56d746b](https://github.com/tutur3u/platform/commit/56d746b91e8c4d48c6c97ad88a32cab74f8457cc))
+* **calendar:** respect timezone in picker bounds and previews ([47720c7](https://github.com/tutur3u/platform/commit/47720c72d09545cd86d3d3814d4fb83f53848890))
+* **calendar:** type-check picker regression import ([60aef11](https://github.com/tutur3u/platform/commit/60aef114c7ad9b3b327befaee37798db1a98b9b6))
+* **calendar:** use calendar timezone for picker bounds and previews ([#5653](https://github.com/tutur3u/platform/issues/5653)) ([ea912c0](https://github.com/tutur3u/platform/commit/ea912c0fd89bf54ca073ae9c8b219a3696db4d19))
+
 ## [0.37.0](https://github.com/tutur3u/platform/compare/ui-v0.36.1...ui-v0.37.0) (2026-09-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.37.0",
+  "version": "0.37.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -91,9 +91,9 @@
     "@tuturuuu/apis": "0.13.0",
     "@tuturuuu/hooks": "0.1.2",
     "@tuturuuu/icons": "0.1.1",
-    "@tuturuuu/internal-api": "0.47.0",
+    "@tuturuuu/internal-api": "0.48.0",
     "@tuturuuu/supabase": "0.5.2",
-    "@tuturuuu/utils": "0.33.0",
+    "@tuturuuu/utils": "0.33.2",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -154,7 +154,7 @@
     "@tanstack/react-table": "^9.2.4",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
-    "@tuturuuu/types": "0.33.0",
+    "@tuturuuu/types": "0.33.1",
     "@tuturuuu/typescript-config": "0.1.2",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.25",
@@ -226,6 +226,8 @@
     "./hooks/*": "./src/hooks/*.ts",
     "./hooks/time-blocking-provider": "./src/hooks/time-blocking-provider.tsx",
     "./hooks/use-at-bottom": "./src/hooks/use-at-bottom.tsx",
+    "./hooks/use-calendar-day-zone": "./src/hooks/use-calendar-day-zone.tsx",
+    "./lib/calendar-day": "./src/lib/calendar-day.ts",
     "./hooks/use-calendar-preferences": "./src/hooks/use-calendar-preferences.tsx",
     "./hooks/use-calendar-sync": "./src/hooks/use-calendar-sync.tsx",
     "./hooks/use-calendar": "./src/hooks/use-calendar.tsx",

package/src/components/ui/date-time-picker-timezone.test.tsx

@@ -0,0 +1,258 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { DateTimePicker } from './date-time-picker';
+import {
+  createPickerTimeOptions,
+  filterPickerTimeOptions,
+  pickerCalendarBounds,
+  pickerCalendarDate,
+  pickerTimeValue,
+  pickerTimeWithMinimum,
+  pickerWallTime,
+} from './date-time-picker-values';
+import { eventEndPickerBounds } from './legacy/calendar/event-picker-bounds';
+
+const zone = 'Asia/Ho_Chi_Minh';
+const start = new Date('2026-10-01T03:00:00Z');
+const end = new Date('2026-10-01T04:00:00Z');
+
+function EndPicker() {
+  const [date, setDate] = useState<Date | undefined>(end);
+  return (
+    <>
+      <DateTimePicker
+        date={date}
+        setDate={setDate}
+        inline
+        {...eventEndPickerBounds(start.toISOString(), zone, false)}
+        preferences={{ timezone: zone, timeFormat: '24h' }}
+      />
+      <output aria-label="Stored end">{date?.toISOString()}</output>
+    </>
+  );
+}
+
+describe('calendar picker bounds with a different browser day', () => {
+  it('formats clock-only options independently of the current browser DST day', () => {
+    vi.useFakeTimers();
+    try {
+      vi.setSystemTime(new Date('2026-03-08T10:00:00Z'));
+      expect(
+        createPickerTimeOptions('24h').find((x) => x.value === '02:30')?.display
+      ).toBe('02:30');
+      const twelveHour = createPickerTimeOptions('12h');
+      expect(twelveHour.find((x) => x.value === '02:30')?.display).toBe(
+        '2:30 AM'
+      );
+      expect(twelveHour[0]?.display).toBe('12:00 AM');
+      expect(twelveHour.find((x) => x.value === '12:00')?.display).toBe(
+        '12:00 PM'
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('rejects nonexistent DST wall times and retains an unchanged later overlap instant', () => {
+    const gap = new Date('2026-03-08T06:30:00Z');
+    const ny = 'America/New_York';
+    expect(pickerWallTime(gap, 2, 30, ny)).toBeUndefined();
+    const options = filterPickerTimeOptions({
+      date: gap,
+      zone: ny,
+      pattern: 'HH:mm',
+      timeFormat: '24h',
+      options: createPickerTimeOptions('24h'),
+    });
+    expect(options.some((x) => x.value.startsWith('02:'))).toBe(false);
+    const overlap = new Date('2026-11-01T06:30:00Z');
+    expect(pickerWallTime(overlap, 1, 30, ny)?.toISOString()).toBe(
+      overlap.toISOString()
+    );
+  });
+
+  it('keeps a nonexistent manual time invalid without changing the stored instant', () => {
+    let saved = new Date('2026-03-08T06:30:00Z');
+    render(
+      <DateTimePicker
+        date={saved}
+        setDate={(next) => {
+          if (next) saved = next;
+        }}
+        inline
+        preferences={{ timezone: 'America/New_York' }}
+      />
+    );
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Switch to manual time entry' })
+    );
+    const input = screen.getByRole('textbox', {
+      name: 'Enter time manually in HH:MM',
+    });
+    fireEvent.change(input, { target: { value: '02:30' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    expect(saved.toISOString()).toBe('2026-03-08T06:30:00.000Z');
+  });
+  it('preserves a later overlap instant when its calendar day is reselected', () => {
+    let saved = new Date('2026-11-01T06:30:00Z');
+    render(
+      <DateTimePicker
+        date={saved}
+        setDate={(next) => {
+          if (next) saved = next;
+        }}
+        inline
+        preferences={{ timezone: 'America/New_York' }}
+      />
+    );
+    fireEvent.click(screen.getByRole('button', { name: /November 1st, 2026/ }));
+    expect(saved.toISOString()).toBe('2026-11-01T06:30:00.000Z');
+  });
+
+  it('does not normalize a selected date into a nonexistent DST wall time', () => {
+    let saved = new Date('2026-03-07T07:30:00Z');
+    render(
+      <DateTimePicker
+        date={saved}
+        setDate={(next) => {
+          if (next) saved = next;
+        }}
+        inline
+        preferences={{ timezone: 'America/New_York' }}
+      />
+    );
+    fireEvent.click(screen.getByRole('button', { name: /March 8th, 2026/ }));
+    expect(saved.toISOString()).toBe('2026-03-07T07:30:00.000Z');
+  });
+
+  it('shows October and accepts 11:30 as 04:30Z in the actual end picker', () => {
+    render(<EndPicker />);
+    expect(screen.getByText('October')).toBeTruthy();
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Switch to manual time entry' })
+    );
+    const input = screen.getByRole('textbox', {
+      name: 'Enter time manually in HH:MM',
+    });
+    fireEvent.change(input, { target: { value: '11:30' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(screen.getByLabelText('Stored end').textContent).toBe(
+      '2026-10-01T04:30:00.000Z'
+    );
+  });
+
+  it('offers 10:15 onward rather than browser-local 20:15 onward', () => {
+    const options = filterPickerTimeOptions({
+      date: end,
+      minDate: start,
+      minTime: pickerTimeValue(start, zone),
+      zone,
+      pattern: 'HH:mm',
+      timeFormat: '24h',
+      options: createPickerTimeOptions('24h'),
+    });
+    expect(options[0]?.value).toBe('10:15');
+    expect(options.some((x) => x.value === '11:30')).toBe(true);
+    expect(options.some((x) => x.value === '09:45')).toBe(false);
+    expect(pickerCalendarDate(start, zone).getDate()).toBe(1);
+    expect(pickerCalendarBounds(start, undefined, zone)?.[0]).toEqual({
+      before: new Date(2026, 9, 1),
+    });
+  });
+
+  it('offers a full next calendar day across browser midnight', () => {
+    const options = filterPickerTimeOptions({
+      date: new Date('2026-10-01T17:30:00Z'),
+      minDate: start,
+      minTime: '10:00',
+      zone,
+      pattern: 'HH:mm',
+      timeFormat: '24h',
+      options: createPickerTimeOptions('24h'),
+    });
+    expect(options[0]?.value).toBe('00:00');
+    expect(options).toHaveLength(96);
+  });
+
+  it('validates a minimum rollover on its destination day across DST and month boundaries', () => {
+    const ny = 'America/New_York';
+    const beforeGap = new Date('2026-03-07T06:30:00Z');
+    const minimum = new Date('2026-03-07T17:00:00Z');
+    expect(
+      pickerTimeWithMinimum(beforeGap, 2, 30, ny, minimum)
+    ).toBeUndefined();
+    expect(
+      pickerTimeWithMinimum(beforeGap, 3, 30, ny, minimum)?.toISOString()
+    ).toBe('2026-03-08T07:30:00.000Z');
+    expect(
+      pickerTimeWithMinimum(
+        new Date('2026-10-31T05:30:00Z'),
+        1,
+        30,
+        ny,
+        new Date('2026-10-31T16:00:00Z')
+      )?.toISOString()
+    ).toBe('2026-11-01T05:30:00.000Z');
+    expect(
+      pickerTimeWithMinimum(
+        new Date('2026-12-31T05:30:00Z'),
+        1,
+        30,
+        ny,
+        new Date('2026-12-31T17:00:00Z')
+      )?.toISOString()
+    ).toBe('2027-01-01T06:30:00.000Z');
+  });
+  it('rejects a DST-gap option reached through the actual minimum rollover control', () => {
+    let saved = new Date('2026-03-07T06:30:00Z');
+    render(
+      <DateTimePicker
+        date={saved}
+        setDate={(next) => {
+          if (next) saved = next;
+        }}
+        minDate={new Date('2026-03-07T17:00:00Z')}
+        inline
+        preferences={{ timezone: 'America/New_York', timeFormat: '24h' }}
+      />
+    );
+    fireEvent.keyDown(
+      screen
+        .getAllByRole('combobox')
+        .find((element) => element.textContent?.includes('01:30'))!,
+      { key: 'Enter' }
+    );
+    fireEvent.click(screen.getByRole('option', { name: '02:30' }));
+    expect(saved.toISOString()).toBe('2026-03-07T06:30:00.000Z');
+  });
+  it('retains an explicit minTime that differs from minDate in a configured zone', () => {
+    const options = filterPickerTimeOptions({
+      date: end,
+      minDate: new Date('2026-09-30T17:00:00Z'),
+      minTime: '09:00',
+      zone,
+      pattern: 'HH:mm',
+      timeFormat: '24h',
+      options: createPickerTimeOptions('24h'),
+    });
+    expect(options[0]?.value).toBe('09:15');
+    expect(options.some((option) => option.value === '08:45')).toBe(false);
+  });
+  it('uses maxDate time and calendar boundary in the configured zone', () => {
+    const maxDate = new Date('2026-10-01T05:00:00Z');
+    const options = filterPickerTimeOptions({
+      date: end,
+      maxDate,
+      zone,
+      pattern: 'HH:mm',
+      timeFormat: '24h',
+      options: createPickerTimeOptions('24h'),
+    });
+    expect(options.at(-1)?.value).toBe('11:45');
+    expect(pickerCalendarBounds(undefined, maxDate, zone)?.[0]).toEqual({
+      after: new Date(2026, 9, 1),
+    });
+  });
+});

package/src/components/ui/date-time-picker-values.ts

@@ -0,0 +1,205 @@
+import {
+  buildDateInTimezone,
+  formatInTimezone,
+  getDatePartsInTimezone,
+} from '@tuturuuu/utils/task-date-timezone';
+import { format } from 'date-fns';
+
+/** A date-only carrier for the browser-local calendar widget, never an instant. */
+export function pickerCalendarDate(date: Date, zone: string | null): Date {
+  const parts = zone
+    ? getDatePartsInTimezone(date, zone)
+    : {
+        year: date.getFullYear(),
+        month: date.getMonth() + 1,
+        day: date.getDate(),
+      };
+  return new Date(parts.year, parts.month - 1, parts.day);
+}
+
+export function pickerTimeValue(date: Date, zone: string | null): string {
+  return zone ? formatInTimezone(date, zone, 'HH:mm') : format(date, 'HH:mm');
+}
+
+/** Construct a requested calendar wall time without silently normalizing a DST gap. */
+export function pickerWallTimeOnDay(
+  day: Date,
+  hour: number,
+  minute: number,
+  zone: string | null
+): Date | undefined {
+  const year = day.getFullYear();
+  const month = day.getMonth() + 1;
+  const date = day.getDate();
+  const next = zone
+    ? buildDateInTimezone(year, month, date, hour, minute, zone)
+    : new Date(year, month - 1, date, hour, minute);
+  const parts = zone
+    ? getDatePartsInTimezone(next, zone)
+    : {
+        year: next.getFullYear(),
+        month: next.getMonth() + 1,
+        day: next.getDate(),
+        hour: next.getHours(),
+        minute: next.getMinutes(),
+      };
+  return parts.year === year &&
+    parts.month === month &&
+    parts.day === date &&
+    parts.hour === hour &&
+    parts.minute === minute
+    ? next
+    : undefined;
+}
+
+/** Reject nonexistent wall times and preserve an unchanged ambiguous instant. */
+export function pickerWallTime(
+  base: Date,
+  hour: number,
+  minute: number,
+  zone: string | null
+): Date | undefined {
+  if (!zone) {
+    if (base.getHours() === hour && base.getMinutes() === minute)
+      return new Date(base);
+    const next = new Date(base);
+    next.setHours(hour, minute, 0, 0);
+    return next.getHours() === hour && next.getMinutes() === minute
+      ? next
+      : undefined;
+  }
+  const parts = getDatePartsInTimezone(base, zone);
+  if (parts.hour === hour && parts.minute === minute) return new Date(base);
+  const next = buildDateInTimezone(
+    parts.year,
+    parts.month,
+    parts.day,
+    hour,
+    minute,
+    zone
+  );
+  const roundTrip = getDatePartsInTimezone(next, zone);
+  return roundTrip.year === parts.year &&
+    roundTrip.month === parts.month &&
+    roundTrip.day === parts.day &&
+    roundTrip.hour === hour &&
+    roundTrip.minute === minute
+    ? next
+    : undefined;
+}
+
+/** Retain the existing next-day minimum rule, validating its destination wall time. */
+export function pickerTimeWithMinimum(
+  base: Date,
+  hour: number,
+  minute: number,
+  zone: string | null,
+  minDate?: Date
+): Date | undefined {
+  const next = pickerWallTime(base, hour, minute, zone);
+  if (!next || !minDate) return next;
+  if (zone) {
+    if (next.getTime() > minDate.getTime()) return next;
+    const minimum = getDatePartsInTimezone(minDate, zone);
+    return pickerWallTimeOnDay(
+      new Date(minimum.year, minimum.month - 1, minimum.day + 1),
+      hour,
+      minute,
+      zone
+    );
+  }
+  const sameDay =
+    pickerCalendarDate(next, null).getTime() ===
+    pickerCalendarDate(minDate, null).getTime();
+  if (
+    !sameDay ||
+    hour * 60 + minute > minDate.getHours() * 60 + minDate.getMinutes()
+  )
+    return next;
+  return pickerWallTimeOnDay(
+    new Date(next.getFullYear(), next.getMonth(), next.getDate() + 1),
+    hour,
+    minute,
+    null
+  );
+}
+
+export function createPickerTimeOptions(timeFormat: '12h' | '24h') {
+  return Array.from({ length: 96 }, (_, index) => {
+    const value = `${Math.floor(index / 4)
+      .toString()
+      .padStart(2, '0')}:${((index % 4) * 15).toString().padStart(2, '0')}`;
+    return {
+      value,
+      // Clock labels have no date or zone; constructing a browser-local Date
+      // would normalize 02:xx on a DST-gap day even for another calendar zone.
+      display:
+        timeFormat === '24h'
+          ? value
+          : `${Math.floor(index / 4) % 12 || 12}:${value.slice(3)} ${index < 48 ? 'AM' : 'PM'}`,
+    };
+  });
+}
+
+export function filterPickerTimeOptions(args: {
+  date?: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  minTime?: string;
+  zone: string | null;
+  pattern: string;
+  timeFormat: '12h' | '24h';
+  options: { value: string; display: string }[];
+}) {
+  const { date, minDate, maxDate, minTime, zone, pattern, timeFormat } = args;
+  let options = args.options;
+  if (date) {
+    options = options.filter(({ value }) => {
+      const [hour, minute] = value.split(':').map(Number);
+      return pickerWallTime(date, hour!, minute!, zone) !== undefined;
+    });
+  }
+  const sameDay = (other: Date) =>
+    date &&
+    pickerCalendarDate(date, zone).getTime() ===
+      pickerCalendarDate(other, zone).getTime();
+  if (minTime && minDate && sameDay(minDate)) {
+    options = options.filter((time) => time.value > minTime);
+  }
+  if (maxDate && sameDay(maxDate)) {
+    options = options.filter(
+      (time) => time.value < pickerTimeValue(maxDate, zone)
+    );
+  }
+  // Keep a pre-existing custom value visible; never change the stored instant
+  // merely because the value is outside the available fifteen-minute options.
+  if (date) {
+    const value = pickerTimeValue(date, zone);
+    if (!options.some((time) => time.value === value)) {
+      const display = zone
+        ? formatInTimezone(
+            date,
+            zone,
+            timeFormat === '24h' ? 'HH:mm' : 'h:mm A'
+          )
+        : format(date, pattern);
+      options = [...options, { value, display }].sort((a, b) =>
+        a.value.localeCompare(b.value)
+      );
+    }
+  }
+  return options;
+}
+
+export function pickerCalendarBounds(
+  minDate: Date | undefined,
+  maxDate: Date | undefined,
+  zone: string | null
+) {
+  return minDate || maxDate
+    ? [
+        ...(minDate ? [{ before: pickerCalendarDate(minDate, zone) }] : []),
+        ...(maxDate ? [{ after: pickerCalendarDate(maxDate, zone) }] : []),
+      ]
+    : undefined;
+}