@flamingo-stack/openframe-frontend-core 0.0.310 → 0.0.311

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.310",
+  "version": "0.0.311",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/entity-cards/blog-card.tsx

@@ -129,7 +129,7 @@ export function BlogCard({
 
   if (size === 'sm') {
     const dateStr = post.published_at
-      ? new Date(post.published_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+      ? new Date(post.published_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' })
       : ''
     const firstCategory = post.categories?.find((c) => c && c.name)?.name
     return (
@@ -179,7 +179,7 @@ export function BlogCard({
 
   // Default: full vertical card.
   const dateStr = post.published_at
-    ? new Date(post.published_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+    ? new Date(post.published_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' })
     : ''
   return (
     <article

package/src/components/chat/entity-cards/dispatch.tsx

@@ -893,7 +893,7 @@ function ProgramChatCard({
   ) {
     typeMeta = item.location_name
   } else if (configKey === 'webinar' && item?.start_at) {
-    const time = formatTimeWithTimezone(item.start_at, null)
+    const time = formatTimeWithTimezone(item.start_at, item.timezone ?? null)
     const dur = formatDurationFromRange(item.start_at, item.end_at)
     typeMeta = dur ? `${time} · ${dur}` : time
   }

package/src/components/chat/entity-cards/program-card.tsx

@@ -45,6 +45,19 @@ import { useEntityCardPlaceholder } from './use-entity-card-placeholder'
 
 type CardSize = 'default' | 'sm'
 
+/**
+ * Format a Date with date-fns pinned to UTC. `date-fns` `format()` reads the
+ * runtime's LOCAL wall-clock, so the same instant renders differently on the
+ * server (Vercel = UTC) and the client (visitor tz) → React #418 hydration
+ * mismatch. Shifting by the local offset before formatting emits the UTC
+ * wall-clock on every machine, so server and client agree. Mirrors the helper
+ * in the hub's `program-header.tsx` (kept local — the lib has no date-fns-tz
+ * dep) and the repo-wide "pin program dates to UTC" convention.
+ */
+function formatUtc(date: Date, fmt: string): string {
+  return format(new Date(date.getTime() + date.getTimezoneOffset() * 60_000), fmt)
+}
+
 export function ProgramCardSkeleton({ size = 'default' }: { size?: CardSize }) {
   if (size === 'sm') {
     return (
@@ -226,7 +239,7 @@ export function ProgramCard<T extends BaseProgramItem>({
 
   if (size === 'sm') {
     const itemDate = (() => {
-      try { return format(new Date(item.date), 'MMM d, yyyy') } catch { return '' }
+      try { return formatUtc(new Date(item.date), 'MMM d, yyyy') } catch { return '' }
     })()
     const compactCover = coverImage || placeholderUrl || null
     let typeMeta: string | null = null
@@ -238,7 +251,7 @@ export function ProgramCard<T extends BaseProgramItem>({
       if (typeof loc === 'string' && loc.trim().length > 0) typeMeta = loc
     } else if (config.type === 'webinar' && 'start_at' in item) {
       const w = item as any
-      const time = formatTimeWithTimezone(w.start_at, null)
+      const time = formatTimeWithTimezone(w.start_at, w.timezone ?? null)
       const dur = formatDurationFromRange(w.start_at, w.end_at)
       typeMeta = dur ? `${time} · ${dur}` : time
     }
@@ -293,7 +306,7 @@ export function ProgramCard<T extends BaseProgramItem>({
   }
 
   const itemDate = new Date(item.date)
-  const dateFormat = format(itemDate, 'EEEE d MMMM')
+  const dateFormat = formatUtc(itemDate, 'EEEE d MMMM')
 
   const defaultRenderMeta = () => {
     if (config.type === 'podcast' && 'duration_seconds' in item && !isScheduled) {
@@ -320,7 +333,7 @@ export function ProgramCard<T extends BaseProgramItem>({
         <>
           <Video className="w-4 h-4 text-ods-text-secondary" />
           <span className="font-['DM_Sans'] text-ods-text-secondary">
-            {formatTimeWithTimezone(webinarItem.start_at, null)}
+            {formatTimeWithTimezone(webinarItem.start_at, webinarItem.timezone ?? null)}
             {duration && ` · ${duration}`}
           </span>
           {webinarItem.timezone && (

package/src/components/chat/types/entities/investor-update.ts

@@ -93,6 +93,8 @@ export function formatInvestorUpdatePeriod(
     new Date(d).toLocaleDateString('en-US', {
       month: options?.monthFormat || 'short',
       year: 'numeric',
+      // Pin to UTC so SSR (Vercel = UTC) and the client agree (React #418).
+      timeZone: 'UTC',
     });
   const s = start ? fmt(start) : '?';
   const e = end ? fmt(end) : '?';

package/src/components/logs-list.tsx

@@ -7,12 +7,14 @@ import { ToolIcon } from './tool-icon'
 const formatTimestamp = (timestamp: string | Date): string => {
   const date = timestamp instanceof Date ? timestamp : new Date(timestamp)
   
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  const hours = String(date.getHours()).padStart(2, '0')
-  const minutes = String(date.getMinutes()).padStart(2, '0')
-  
+  // UTC getters so the timestamp is identical on server (UTC) and client
+  // (local) — otherwise React #418 hydration mismatch.
+  const year = date.getUTCFullYear()
+  const month = String(date.getUTCMonth() + 1).padStart(2, '0')
+  const day = String(date.getUTCDate()).padStart(2, '0')
+  const hours = String(date.getUTCHours()).padStart(2, '0')
+  const minutes = String(date.getUTCMinutes()).padStart(2, '0')
+
   return `${year}/${month}/${day},${hours}:${minutes}`
 }
 

package/src/components/ui/device-card.tsx

@@ -66,12 +66,14 @@ export function DeviceCard({
     if (!lastSeen) return null
     
     const date = typeof lastSeen === 'string' ? new Date(lastSeen) : lastSeen
-    const year = date.getFullYear()
-    const month = String(date.getMonth() + 1).padStart(2, '0')
-    const day = String(date.getDate()).padStart(2, '0')
-    const hours = String(date.getHours()).padStart(2, '0')
-    const minutes = String(date.getMinutes()).padStart(2, '0')
-    
+    // UTC getters so "last seen" is identical on server (UTC) and client
+    // (local) — otherwise React #418 hydration mismatch.
+    const year = date.getUTCFullYear()
+    const month = String(date.getUTCMonth() + 1).padStart(2, '0')
+    const day = String(date.getUTCDate()).padStart(2, '0')
+    const hours = String(date.getUTCHours()).padStart(2, '0')
+    const minutes = String(date.getUTCMinutes()).padStart(2, '0')
+
     return `${year}/${month}/${day}, ${hours}:${minutes}`
   }
 

package/src/utils/date-utils.ts

@@ -17,9 +17,11 @@ export function formatTicketRelativeTime(iso: string): string {
   if (diffMin < 60) return `${diffMin} min ago`
   const diffHours = Math.floor(diffMin / 60)
   if (diffHours < 24) return diffHours === 1 ? '1 hour ago' : `${diffHours} hours ago`
-  const mm = String(date.getMonth() + 1).padStart(2, '0')
-  const dd = String(date.getDate()).padStart(2, '0')
-  const yyyy = date.getFullYear()
+  // UTC getters so the MM/DD/YYYY tail is identical on server (UTC) and client
+  // (local) — otherwise React #418 hydration mismatch.
+  const mm = String(date.getUTCMonth() + 1).padStart(2, '0')
+  const dd = String(date.getUTCDate()).padStart(2, '0')
+  const yyyy = date.getUTCFullYear()
   return `${mm}/${dd}/${yyyy}`
 }
 
@@ -29,11 +31,13 @@ export function formatTicketRelativeTime(iso: string): string {
 export function formatTicketFullTimestamp(iso: string): string {
   const date = new Date(iso)
   if (Number.isNaN(date.getTime())) return ''
-  const mm = String(date.getMonth() + 1).padStart(2, '0')
-  const dd = String(date.getDate()).padStart(2, '0')
-  const yyyy = date.getFullYear()
-  let hours = date.getHours()
-  const minutes = String(date.getMinutes()).padStart(2, '0')
+  // UTC getters so the tooltip timestamp is identical on server (UTC) and
+  // client (local) — otherwise React #418 hydration mismatch.
+  const mm = String(date.getUTCMonth() + 1).padStart(2, '0')
+  const dd = String(date.getUTCDate()).padStart(2, '0')
+  const yyyy = date.getUTCFullYear()
+  let hours = date.getUTCHours()
+  const minutes = String(date.getUTCMinutes()).padStart(2, '0')
   const ampm = hours >= 12 ? 'PM' : 'AM'
   hours = hours % 12 || 12
   return `${mm}/${dd}/${yyyy}, ${hours}:${minutes} ${ampm}`
@@ -88,11 +92,14 @@ export function formatRelativeTime(timestamp: string | Date): string {
     return `${weeks}w ago`;
   }
   
-  // Older than 30 days - show formatted date
-  return targetTime.toLocaleDateString('en-US', { 
-    month: 'short', 
+  // Older than 30 days - show formatted date, pinned to UTC so SSR (UTC) and
+  // the client agree (React #418). Year comparison also uses UTC for the same
+  // reason (avoids a server/client split right at a year boundary).
+  return targetTime.toLocaleDateString('en-US', {
+    month: 'short',
     day: 'numeric',
-    year: targetTime.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
+    year: targetTime.getUTCFullYear() !== now.getUTCFullYear() ? 'numeric' : undefined,
+    timeZone: 'UTC',
   });
 }
 
@@ -118,9 +125,12 @@ export function formatAbsoluteDate(
     year: 'numeric',
     month: 'short',
     day: 'numeric',
+    // Pin to UTC so SSR (Vercel = UTC) and the client agree (React #418).
+    // Caller can override via `options`.
+    timeZone: 'UTC',
     ...options
   };
-  
+
   return targetTime.toLocaleDateString('en-US', defaultOptions);
 }
 
@@ -148,9 +158,12 @@ export function formatDateTime(
     day: 'numeric',
     hour: 'numeric',
     minute: '2-digit',
+    // Pin to UTC so SSR (Vercel = UTC) and the client agree (React #418).
+    // Caller can override via `options`.
+    timeZone: 'UTC',
     ...options
   };
-  
+
   return targetTime.toLocaleDateString('en-US', defaultOptions);
 }
 

package/src/utils/format.ts

@@ -24,7 +24,10 @@ export function formatDate(
     return "Invalid Date"
   }
   
-  return dateObj.toLocaleDateString("en-US", options)
+  // Pin to UTC by default so SSR (Vercel = UTC) and the client agree (React
+  // #418 hydration mismatch). A caller can still override by passing its own
+  // `timeZone` in `options`.
+  return dateObj.toLocaleDateString("en-US", { timeZone: "UTC", ...options })
 }
 
 /**
@@ -223,9 +226,18 @@ export function formatDurationCompact(seconds: number | null | undefined): strin
 }
 
 /**
- * Format time with optional timezone
- * Used for webinar and event times
- * Returns: "10:30 AM EST" or "10:30 AM"
+ * Format a webinar/event start time as the wall-clock in its OWN timezone.
+ *
+ * `date` is an instant (UTC timestamp / ISO string). `timezone` is the event's
+ * IANA zone (e.g. `'America/New_York'`). Rendering in that explicit zone makes
+ * the server (Vercel = UTC) and the visitor's browser emit the SAME text —
+ * fixing the React #418 hydration mismatch — AND shows the true event time
+ * (4:00 PM EDT, not the 8:00 PM UTC a plain UTC pin would show, nor the
+ * viewer-local time the old unpinned call produced). Falls back to UTC when no
+ * zone is given, and tolerates a non-IANA label (legacy data) without throwing.
+ * The zone LABEL is rendered separately by callers, so it is never appended here.
+ *
+ * Returns: "4:00 PM"
  */
 export function formatTimeWithTimezone(
   date: Date | string | null | undefined,
@@ -234,13 +246,20 @@ export function formatTimeWithTimezone(
   if (!date) return '';
 
   const dateObj = typeof date === 'string' ? new Date(date) : date;
-  const timeStr = dateObj.toLocaleTimeString('en-US', {
+  const opts: Intl.DateTimeFormatOptions = {
     hour: 'numeric',
     minute: '2-digit',
     hour12: true,
-  });
-
-  return timezone ? `${timeStr} ${timezone}` : timeStr;
+    timeZone: timezone || 'UTC',
+  };
+  try {
+    return dateObj.toLocaleTimeString('en-US', opts);
+  } catch {
+    // Non-IANA `timezone` (e.g. a bare "EST" label) makes Intl throw a
+    // RangeError. Fall back to a UTC-pinned render so we stay deterministic
+    // (still no #418) instead of crashing.
+    return dateObj.toLocaleTimeString('en-US', { ...opts, timeZone: 'UTC' });
+  }
 }
 
 /**