@flamingo-stack/openframe-frontend-core 0.0.738 → 0.0.739

package/src/components/features/walkthrough-video.tsx

@@ -106,6 +106,13 @@ export interface WalkthroughVideoData {
   position?: 'left' | 'right' | null;
 }
 
+/**
+ * What ends Largest Contentful Paint: the browser reports no new candidate after
+ * the visitor's first scroll, tap or key press. The floating card renders only
+ * after one of these.
+ */
+const FIRST_INTERACTION_EVENTS = ['scroll', 'pointerdown', 'keydown'] as const;
+
 /** Everything the two placements share — the widget's actual contract. */
 interface WalkthroughVideoBaseProps {
   video: WalkthroughVideoData | null | undefined;
@@ -148,6 +155,9 @@ interface WalkthroughVideoBaseProps {
  * not in the base.
  */
 export interface FloatingWalkthroughVideoProps extends WalkthroughVideoBaseProps {
+  /** The card appears no sooner than this after load, and only once the visitor
+   *  has scrolled, tapped or pressed a key (so it can never be the page's
+   *  Largest Contentful Paint). Default 3000. */
   appearDelayMs?: number;
   /** Cookie-based dismissal (id-match, mirrors the announcement bar). `false`
    *  disables the X entirely. `storageKey` is the per-platform cookie name. */
@@ -208,9 +218,10 @@ function WalkthroughVideo({
   autoPlayCard = false,
   label = 'Play Demo Video',
   placement,
-  // Keeps the FLOATING card off the critical path. The inline preset passes 0:
-  // an in-page block is part of a page the visitor is already looking at, so
-  // staggering it in would only jump the layout.
+  // The FLOATING card never appears sooner than this (and never before the
+  // visitor's first interaction: see the mount gate). The inline preset passes
+  // 0: an in-page block is part of a page the visitor is already looking at,
+  // so staggering it in would only jump the layout.
   appearDelayMs = 3000,
   dismissal = {},
   hideNearSelector = 'footer',
@@ -224,7 +235,16 @@ function WalkthroughVideo({
   // (embedder) → a stable presence marker so dismissal still works.
   const dismissalId = video?.id != null ? String(video.id) : 'dismissed';
 
-  // --- mount gate (never LCP; cookie read happens post-delay, no hydration mismatch) ---
+  // --- mount gate (cookie read happens post-delay, no hydration mismatch) ---
+  // The FLOATING card waits for two things: the appear delay AND the visitor's
+  // first scroll, tap or key press. The delay alone never kept it out of Largest
+  // Contentful Paint: the metric takes candidates until the first interaction,
+  // so a late card that was the largest thing in a short window became the
+  // page's LCP (blog post, 1440x215: the heading at 3.2 s, then the card's
+  // poster at 7.1 s). No attribute opts an element out, and a timer does not
+  // either; rendering only after the first interaction is the documented way,
+  // because the metric is final by then. The inline block is part of the page's
+  // own content and waits for neither.
   const [mounted, setMounted] = useState(false);
   const [dismissed, setDismissed] = useState(false);
   const hasVideo = video != null;
@@ -235,31 +255,52 @@ function WalkthroughVideo({
     // dismissal id was 'dismissed' on the first pass and a dismissed card
     // flashed for the length of a second appear-delay before hiding.
     if (!hasVideo) return undefined; // wait for data — see the id-based dep below
-    const timer = setTimeout(() => {
-      const reveal = () => {
-        if (dismissEnabled && isWalkthroughDismissed(storageKey, dismissalId)) {
-          setDismissed(true);
-          return;
-        }
-        // Cleared on the way through: a client-only embedder can swap to a NEW
-        // video id in-session (the cookie is id-matched, so the new one isn't
-        // dismissed), and a sticky `dismissed` kept the card hidden until a
-        // full reload — contradicting the id-match behaviour documented above.
-        setDismissed(false);
-        setMounted(true);
-      };
+    let delayElapsed = false;
+    let interacted = inline;
+    const reveal = () => {
+      if (dismissEnabled && isWalkthroughDismissed(storageKey, dismissalId)) {
+        setDismissed(true);
+        return;
+      }
+      // Cleared on the way through: a client-only embedder can swap to a NEW
+      // video id in-session (the cookie is id-matched, so the new one isn't
+      // dismissed), and a sticky `dismissed` kept the card hidden until a
+      // full reload — contradicting the id-match behaviour documented above.
+      setDismissed(false);
+      setMounted(true);
+    };
+    const revealWhenReady = () => {
+      if (!delayElapsed || !interacted) return;
       const ric = (window as unknown as { requestIdleCallback?: (cb: () => void) => number }).requestIdleCallback;
       if (typeof ric === 'function') idleHandle = ric(reveal);
       else reveal();
+    };
+    const stopListening = () => {
+      for (const type of FIRST_INTERACTION_EVENTS) window.removeEventListener(type, onInteraction, true);
+    };
+    function onInteraction() {
+      interacted = true;
+      stopListening();
+      revealWhenReady();
+    }
+    if (!interacted) {
+      for (const type of FIRST_INTERACTION_EVENTS) {
+        window.addEventListener(type, onInteraction, { capture: true, passive: true });
+      }
+    }
+    const timer = setTimeout(() => {
+      delayElapsed = true;
+      revealWhenReady();
     }, appearDelayMs);
     return () => {
       clearTimeout(timer);
+      stopListening();
       const cic = (window as unknown as { cancelIdleCallback?: (h: number) => void }).cancelIdleCallback;
       if (idleHandle !== null && typeof cic === 'function') cic(idleHandle);
     };
     // `videoId`, not the object: a new identity (embedder refetch, re-seeded
     // RSC payload) would otherwise restart the appear delay.
-  }, [appearDelayMs, dismissEnabled, storageKey, dismissalId, hasVideo, videoId]);
+  }, [appearDelayMs, dismissEnabled, storageKey, dismissalId, hasVideo, videoId, inline]);
 
   // --- environment preferences (read after hydration; no SSR access) ---
   // Derived, not stored: both inputs are plain reads of the environment, and

package/src/components/ui/dropdown-button.tsx

@@ -144,7 +144,7 @@ export function DropdownButton({
           href={action.href}
           download={action.download}
           openInNewTab={action.openInNewTab}
-          onClick={action.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}
+          onClick={action.onClick}
           disabled={disabled}
           loading={loading}
           leftIcon={icon}

package/src/embed-shims/next-image.tsx

@@ -22,6 +22,8 @@
 'use client';
 import { forwardRef, type ComponentType, type ImgHTMLAttributes, type Ref } from 'react';
 
+import { fetchPriorityProp } from '../utils/fetch-priority';
+
 type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'placeholder'> & {
   src?: string | { src: string };
   alt?: string;
@@ -91,12 +93,18 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({
     optimizedWidth && resizer && typeof given.src === 'string'
       ? { ...given, src: resizer(given.src, optimizedWidth), unoptimized: true }
       : given;
-  // Real impl path — registered by the host. Hand off untouched so
-  // every Next-specific prop (priority, placeholder, sizes, loader…)
-  // reaches the real component intact.
+  // `priority` means "this is the picture the page is waiting for", so its
+  // request is ranked high on EVERY host. Stated here, once: since Next 16
+  // `priority` only preloads and no longer ranks the request, and the plain
+  // <img> below dropped the prop altogether, so an embedder's hero went out at
+  // the default priority. A caller that names its own `fetchPriority` keeps it.
+  const fetchPriority = props.fetchPriority ?? (props.priority ? 'high' : undefined);
+
+  // Real impl path — registered by the host. Every Next-specific prop
+  // (priority, placeholder, sizes, loader…) reaches the real component intact.
   if (impl) {
     const Real = impl;
-    return <Real ref={ref} {...props} />;
+    return <Real ref={ref} {...props} fetchPriority={fetchPriority} />;
   }
 
   // Fallback path — plain <img>. Drops Next-only props and reduces
@@ -115,6 +123,7 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({
     unoptimized: _unoptimized,
     onLoadingComplete,
     loader: _loader,
+    fetchPriority: _fetchPriority,
     style,
     ...rest
   } = props;
@@ -147,6 +156,8 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({
       style={finalStyle}
       onLoad={onLoadingComplete ? e => onLoadingComplete(e.currentTarget) : undefined}
       {...rest}
+      // The attribute's spelling depends on the host's React major (`fetchPriorityProp`).
+      {...(fetchPriority ? fetchPriorityProp(fetchPriority) : {})}
     />
   );
 });

package/dist/chunk-UR4K2NSL.cjs

@@ -1,69 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
-
-// src/embed-shims/next-image.tsx
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
-var impl = null;
-function registerImage(component) {
-  impl = component;
-}
-var resizer = null;
-function registerImageResizer(fn) {
-  resizer = fn;
-}
-function resizedImageUrl(src, widthPx) {
-  return resizer ? resizer(src, widthPx) : src;
-}
-var Image = _react.forwardRef.call(void 0, function NextImageShim({ optimizedWidth, ...given }, ref) {
-  const props = optimizedWidth && resizer && typeof given.src === "string" ? { ...given, src: resizer(given.src, optimizedWidth), unoptimized: true } : given;
-  if (impl) {
-    const Real = impl;
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Real, { ref, ...props });
-  }
-  const {
-    src,
-    alt,
-    width,
-    height,
-    fill,
-    sizes: _sizes,
-    quality: _quality,
-    priority: _priority,
-    placeholder: _placeholder,
-    blurDataURL: _blurDataURL,
-    unoptimized: _unoptimized,
-    onLoadingComplete,
-    loader: _loader,
-    style,
-    ...rest
-  } = props;
-  const srcStr = typeof src === "string" ? src : _optionalChain([src, 'optionalAccess', _ => _.src]);
-  const finalStyle = fill ? {
-    position: "absolute",
-    inset: 0,
-    width: "100%",
-    height: "100%",
-    ...style
-  } : style;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "img",
-    {
-      ref,
-      src: srcStr,
-      alt: _nullishCoalesce(alt, () => ( "")),
-      width: fill ? void 0 : width,
-      height: fill ? void 0 : height,
-      style: finalStyle,
-      onLoad: onLoadingComplete ? (e) => onLoadingComplete(e.currentTarget) : void 0,
-      ...rest
-    }
-  );
-});
-var next_image_default = Image;
-
-
-
-
-
-
-exports.registerImage = registerImage; exports.registerImageResizer = registerImageResizer; exports.resizedImageUrl = resizedImageUrl; exports.next_image_default = next_image_default;