@flamingo-stack/openframe-frontend-core 0.0.766 → 0.0.768

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

@@ -260,11 +260,7 @@ function FeatureCardGridView({
                             </span>
                           )}
                           <h3 className={`text-ods-text-primary text-h2 ${titleClassName}`}>
-                            {loading ? (
-                              <TextLineSkeleton type="inherit" as="span" className="w-1/2" />
-                            ) : (
-                              item.title
-                            )}
+                            {loading ? <TextLineSkeleton type="inherit" as="span" className="w-1/2" /> : item.title}
                           </h3>
                           {item.subtitle && (
                             <p className={`text-h4 ${accentClassName} ${subtitleClassName}`}>
@@ -294,11 +290,7 @@ function FeatureCardGridView({
                         </h3>
                         {item.subtitle && (
                           <p className={`text-h4 ${accentClassName} ${subtitleClassName}`}>
-                            {loading ? (
-                              <TextLineSkeleton type="inherit" as="span" className="w-3/4" />
-                            ) : (
-                              item.subtitle
-                            )}
+                            {loading ? <TextLineSkeleton type="inherit" as="span" className="w-3/4" /> : item.subtitle}
                           </p>
                         )}
                       </div>

package/src/components/ui/feature-list.tsx

@@ -116,14 +116,8 @@ export function FeatureList({
   return (
     <div className={`${BOXED_LIST_CLASS} ${className}`}>
       {items.map((item, index) => (
-        <div
-          key={index}
-          className={`${BOXED_ROW_CLASS} ${index < items.length - 1 ? BOXED_ROW_DIVIDER_CLASS : ''}`}
-        >
-          <div
-            className={ICON_BOX_CLASS}
-            style={{ width: iconBoxSize, height: iconBoxSize }}
-          >
+        <div key={index} className={`${BOXED_ROW_CLASS} ${index < items.length - 1 ? BOXED_ROW_DIVIDER_CLASS : ''}`}>
+          <div className={ICON_BOX_CLASS} style={{ width: iconBoxSize, height: iconBoxSize }}>
             {item.icon}
           </div>
           <div className={BOXED_TEXT_CLASS}>

package/src/components/ui/incident-feed.tsx

@@ -69,11 +69,7 @@ const SOURCE_TAG_CLASS =
   'inline-flex shrink-0 rounded-md border border-ods-border px-2 py-1 text-ods-text-secondary text-h5';
 
 function SourceTag({ children }: { children: ReactNode }) {
-  return (
-    <span className={SOURCE_TAG_CLASS}>
-      {children}
-    </span>
-  );
+  return <span className={SOURCE_TAG_CLASS}>{children}</span>;
 }
 
 /** The row above an item's title: where it was found and when. Nothing to show: no row. */
@@ -93,13 +89,7 @@ function ItemMeta({ item }: { item: IncidentFeedItem }) {
  * to a single row each. An item that is waiting on a person stays open even
  * after newer ones arrive, because it is still the thing to look at.
  */
-export function IncidentFeed({
-  items,
-  statusLabels,
-  emptyLabel,
-  anchor = 'top',
-  className,
-}: IncidentFeedProps) {
+export function IncidentFeed({ items, statusLabels, emptyLabel, anchor = 'top', className }: IncidentFeedProps) {
   const lastIndex = items.length - 1;
   return (
     <div className={cn(FEED_CLASS, anchor === 'bottom' && FEED_BOTTOM_CLASS, className)}>
@@ -146,4 +136,3 @@ export function IncidentFeed({
     </div>
   );
 }
-

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/markdown/rich/embed-overrides.tsx

@@ -18,7 +18,7 @@ import { MarkdownImage } from '../../../embeds/markdown-image';
 import { OGLinkPreview, OGLinkErrorBoundary } from '../../../embeds/og-link-preview';
 import { RedditEmbedClient } from '../../../embeds/reddit-embed-client';
 import { TwitterEmbedClient } from '../../../embeds/twitter-embed-client';
-import { Video } from '../../../features/video';
+import { extractYouTubeId, Video } from '../../../features/video';
 import { buildStandardLeafRenderers, hasRenderableSrc, type MdRenderProps } from '../base-components';
 import type { TextSizeElement } from '../text-size';
 
@@ -224,6 +224,16 @@ export function buildRichEmbedOverrides({
       return <MarkdownImage src={src.trim()} alt={alt} />;
     },
 
+    // Raw <iframe> tags in stored content (a pasted YouTube embed). A YouTube one becomes the same click-to-play
+    // facade as the `youtube-embed` fence: the raw iframe loaded YouTube's whole player (about 470 KB of script) with
+    // the page, on every post that carried one (CU-17tkuw5xp4q). Any other iframe loads when it nears the screen.
+    iframe: ({ node: _node, src, ...rest }: MdRenderProps<'iframe'>) => {
+      if (!hasRenderableSrc(src)) return null;
+      const url = src.trim();
+      if (extractYouTubeId(url)) return <Video kind="youtube" url={url} />;
+      return <iframe {...rest} src={url} loading="lazy" />;
+    },
+
     // Raw <video> tags in stored content (blog publisher injection) route
     // to the <Video> SSOT (MuxPlayer) so HLS manifests play everywhere.
     video: ({ src, poster, className }: MdRenderProps<'video'>) => {

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/after-page-load.ts

@@ -0,0 +1,30 @@
+/**
+ * Run `run` once the page has loaded and the browser is idle: the moment for work no visitor waits on (a widget
+ * that starts closed, a tracker). Whatever runs before then competes with the page's first paint and hydration, which
+ * is what slows a phone's Largest Contentful Paint. `maxWaitMs` bounds the idle wait, so a page that is never idle
+ * still gets it. Returns a cancel.
+ */
+export function afterPageLoad(run: () => void, maxWaitMs = 2000): () => void {
+  if (typeof window === 'undefined') return () => {};
+  type IdleWindow = Window & {
+    requestIdleCallback?: (cb: () => void, opts?: { timeout: number }) => number;
+    cancelIdleCallback?: (handle: number) => void;
+  };
+  const w = window as IdleWindow;
+  let idleHandle: number | null = null;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let cancelled = false;
+  const whenIdle = () => {
+    if (cancelled) return;
+    if (typeof w.requestIdleCallback === 'function') idleHandle = w.requestIdleCallback(run, { timeout: maxWaitMs });
+    else timer = setTimeout(run, 0);
+  };
+  if (document.readyState === 'complete') whenIdle();
+  else window.addEventListener('load', whenIdle, { once: true });
+  return () => {
+    cancelled = true;
+    window.removeEventListener('load', whenIdle);
+    if (idleHandle !== null) w.cancelIdleCallback?.(idleHandle);
+    if (timer !== null) clearTimeout(timer);
+  };
+}

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

@@ -138,6 +138,7 @@ export * from './announcement-storage';
 export * from './announcement-surface';
 // cookie id-match dismissal store (walkthrough video widget)
 export * from './dismiss-cookie';
+export * from './after-page-load';
 export * from './dismissal-storage';
 // walkthrough deep-link query param (widget default + host URL minters)
 export * from './walkthrough-deep-link';
@@ -170,6 +171,7 @@ export {
   formatDateWithTimezone,
   formatDateTimeYmd,
   VIEWER_TIMEZONE,
+  viewerLocale,
   formatWebinarTimeMeta,
   formatProgramDate,
   formatProgramDateRange,