@flamingo-stack/openframe-frontend-core 0.0.767 → 0.0.769

package/src/components/ui/leader-row.tsx

@@ -45,7 +45,6 @@ export function LeaderRow({ label, value, status, as: Row = 'div', className }:
   );
 }
 
-
 /**
  * A row while it is read: the label (drawn as it is when the page states it, else a bar), the hairline drawn for
  * real, a bar for the value, a status box. Every bar is one line of the ROW's type step, so a row sized with

package/src/components/ui/product-screen-frame.tsx

@@ -117,12 +117,7 @@ export function ProductScreenFrame({
     >
       <PortalContainerContext.Provider value={portalHost}>
         <CollisionBoundaryContext.Provider value={frame}>
-          <div
-            inert
-            aria-hidden
-            className="ods-content-area"
-            style={screenStyle}
-          >
+          <div inert aria-hidden className="ods-content-area" style={screenStyle}>
             <div className="ods-content-scope">
               {/* Until measured (the server's HTML, a page without scripts) the screen is its own loading state: every
                   component in it draws its skeleton, so the window shows the screen's shape instead of nothing, and

package/src/components/ui/status-badge.tsx

@@ -103,7 +103,11 @@ function StatusBadgeSkeleton({ variant, className }: { variant?: 'card' | 'butto
   return (
     <UnifiedSkeleton
       as="span"
-      className={cn(statusBadgeVariants({ variant, colorScheme: null }), 'box-content h-[1lh] w-12 border-transparent', className)}
+      className={cn(
+        statusBadgeVariants({ variant, colorScheme: null }),
+        'box-content h-[1lh] w-12 border-transparent',
+        className,
+      )}
     />
   );
 }

package/src/components/ui/status-line.tsx

@@ -41,10 +41,7 @@ export function StatusLine({ tone, label, className }: StatusLineProps) {
       )}
     >
       {tone === 'working' && (
-        <span
-          className={cn('h-2 w-2 shrink-0 rounded-full bg-ods-flamingo-cyan', LIVE_PULSE_CLASS)}
-          aria-hidden
-        />
+        <span className={cn('h-2 w-2 shrink-0 rounded-full bg-ods-flamingo-cyan', LIVE_PULSE_CLASS)} aria-hidden />
       )}
       {tone === 'success' && <CheckCircleIcon size={16} className="shrink-0 text-ods-success" aria-hidden />}
       {tone === 'error' && <XmarkCircleIcon size={16} className="shrink-0 text-ods-error" aria-hidden />}

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

@@ -76,9 +76,7 @@ export function StripCard({
           {caption && <span className="text-ods-text-secondary text-h6">{caption}</span>}
         </div>
       </div>
-      <div className={cn(bodyClass(roomy), bodyClassName)}>
-        {children}
-      </div>
+      <div className={cn(bodyClass(roomy), bodyClassName)}>{children}</div>
     </div>
   );
 }

package/src/components/ui/tag.tsx

@@ -198,5 +198,7 @@ export function TagSkeleton({
   size?: keyof typeof TAG_SIZE_CLASS;
   className?: string;
 }) {
-  return <UnifiedSkeleton as="span" className={cn(TAG_FRAME_CLASS, TAG_SIZE_CLASS[size], 'w-16 shrink-0', className)} />;
+  return (
+    <UnifiedSkeleton as="span" className={cn(TAG_FRAME_CLASS, TAG_SIZE_CLASS[size], 'w-16 shrink-0', className)} />
+  );
 }

package/src/utils/format.ts

@@ -407,13 +407,25 @@ function toValidDate(date: DateInput): Date | null {
   return Number.isNaN(d.getTime()) ? null : d;
 }
 
+/**
+ * The viewer's locale: the language the user put first in the browser's own
+ * Languages setting (`navigator.language`), not `Intl`'s default. The two
+ * differ on macOS, where Chrome's default locale is the OS language — a user
+ * with an English (US) Mac who chose English (Australia) in Chrome reads
+ * `en-AU` here and `en-US` from a bare `Intl.DateTimeFormat()`. Undefined off
+ * the client (SSR, a test without a navigator): the runtime's own default.
+ */
+export const viewerLocale = (): string | undefined =>
+  typeof navigator === 'undefined' ? undefined : navigator.language || undefined;
+
 /**
  * Render a date (and, for a date-time style, its time) in an explicit zone.
  * Returns `''` for a missing or unparseable value.
  *
- * `options.viewerLocale` renders in the runtime's own LOCALE instead of the
- * fixed `en-US` — for client-only UI that should read the way its user writes
- * dates. The locale is never implied, for the same hydration reason as the zone.
+ * `options.viewerLocale` renders in the viewer's LOCALE (`viewerLocale()`)
+ * instead of the fixed `en-US` — for client-only UI that should read the way
+ * its user writes dates. The locale is never implied, for the same hydration
+ * reason as the zone.
  */
 export function formatDateWithTimezone(
   date: DateInput,
@@ -424,7 +436,7 @@ export function formatDateWithTimezone(
   const dateObj = toValidDate(date);
   if (!dateObj) return '';
   const { timeZone: _ignored, ...fields } = typeof style === 'string' ? ZONED_DATE_STYLES[style] : style;
-  return formatterFor(timezone, fields, options?.viewerLocale ? undefined : 'en-US').format(dateObj);
+  return formatterFor(timezone, fields, options?.viewerLocale ? viewerLocale() : 'en-US').format(dateObj);
 }
 
 /**

package/src/utils/index.ts

@@ -171,6 +171,7 @@ export {
   formatDateWithTimezone,
   formatDateTimeYmd,
   VIEWER_TIMEZONE,
+  viewerLocale,
   formatWebinarTimeMeta,
   formatProgramDate,
   formatProgramDateRange,