Calendar day versus instant

// apps/docs/examples/format/calendar-day-vs-instant.tsx'use client';
import {  calendarDayOf,  composePresentationContext,  formatDateOnly,  formatDateTime,  toIanaTimeZone,} from '@workspace/active-format';import {  Table,  TableBody,  TableCell,  TableHead,  TableHeader,  TableRow,} from '@workspace/active-ui/components/primitives/table';
// One moment, late in the evening in UTC.const INSTANT = '2026-03-09T23:30:00Z';// One calendar day: a birthday, a due date. It has no zone.const CALENDAR_DAY = '2026-03-09';const ZONES = ['UTC', 'Europe/Amsterdam', 'America/New_York', 'Asia/Tokyo'];
/** * An instant reads differently per zone; a calendar day never moves. */export default function CalendarDayVsInstant() {  return (    <Table>      <TableHeader>        <TableRow>          <TableHead>Zone</TableHead>          <TableHead>The instant</TableHead>          <TableHead>Its day there</TableHead>          <TableHead>The calendar day</TableHead>        </TableRow>      </TableHeader>      <TableBody>        {ZONES.map((zone) => {          const timeZone = toIanaTimeZone(zone);          const presentation = composePresentationContext('en', null, timeZone);          return (            <TableRow key={zone}>              <TableCell className="font-mono text-xs">{zone}</TableCell>              <TableCell suppressHydrationWarning>                {formatDateTime(INSTANT, 'datetime', presentation)}              </TableCell>              <TableCell className="font-mono text-xs">                {calendarDayOf(INSTANT, timeZone)}              </TableCell>              <TableCell suppressHydrationWarning>                {formatDateOnly(CALENDAR_DAY, 'long', presentation)}              </TableCell>            </TableRow>          );        })}      </TableBody>    </Table>  );}