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

package/dist/components/features/video-bites-strip.js

@@ -4,6 +4,8 @@ import { useMemo, useRef, useState } from "react";
 import { useIsomorphicLayoutEffect } from "../../hooks/ui/use-isomorphic-layout-effect.js";
 import { cn } from "../../utils/cn.js";
 import { Chevron02RightIcon } from "../icons-v2-generated/arrows/chevron-02-right-icon.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { UserDisplay } from "../user-display.js";
 import { CardHitLayer } from "./card-hit-layer.js";
 import { CardsStrip, STRIP_CELL_MAX_WIDTH } from "./cards-strip.js";
@@ -11,6 +13,12 @@ import { useVideoWarmup } from "./use-video-warmup.js";
 import { DEFAULT_VIDEO_BITES_TITLE, sortBitesByCreatedAtDesc } from "./video-bites-shared.js";
 import { VideoHoverPreviewSurface } from "./video-hover-preview.js";
 import { detectAspectRatio, RATIO_TO_CSS_ASPECT, ratioToCategory } from "./video-ratio-tabs.js";
+const VIDEO_BITES_CARD_HEIGHT_DESKTOP_PX = 416;
+const VIDEO_BITES_CARD_HEIGHT_MOBILE_PX = 300;
+const STRIP_LINE_MAX_PX = 2560;
+const VIDEO_BITES_SKELETON_COUNT = Math.ceil(
+  STRIP_LINE_MAX_PX / (VIDEO_BITES_CARD_HEIGHT_DESKTOP_PX * 9 / 16)
+);
 function VideoBitesStrip({
   bites,
   title = DEFAULT_VIDEO_BITES_TITLE,
@@ -22,18 +30,34 @@ function VideoBitesStrip({
   autoScroll = true,
   autoScrollSpeed = 60,
   pauseOnHover = true,
-  cardHeightDesktop = 416,
-  cardHeightMobile = 300,
+  cardHeightDesktop = VIDEO_BITES_CARD_HEIGHT_DESKTOP_PX,
+  cardHeightMobile = VIDEO_BITES_CARD_HEIGHT_MOBILE_PX,
   showChevrons = true,
   onBiteNavigate,
   sortComparator = sortBitesByCreatedAtDesc,
+  skeletonCount,
   className
 }) {
+  const inScope = useLoadingScope();
   const items = useMemo(() => {
     const filtered = filterPublished ? bites.filter((b) => b.published) : [...bites];
     return filtered.sort(sortComparator);
   }, [bites, filterPublished, sortComparator]);
-  const warmup = useVideoWarmup({ videoUrl: items[0]?.url || null });
+  const warmup = useVideoWarmup({ videoUrl: inScope ? null : items[0]?.url || null });
+  if (inScope) {
+    return /* @__PURE__ */ jsx(
+      VideoBitesStripSkeleton,
+      {
+        count: skeletonCount ?? VIDEO_BITES_SKELETON_COUNT,
+        title,
+        showTitle,
+        headerSlot,
+        cardHeightDesktop,
+        cardHeightMobile,
+        className
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     CardsStrip,
     {
@@ -73,6 +97,69 @@ function VideoBitesStrip({
     }
   );
 }
+const BITE_CARD_FRAME_CLASS = "relative overflow-hidden rounded-md border border-ods-border bg-ods-card";
+const BITE_MEDIA_CLASS = "relative w-full";
+const BITE_MEDIA_FIXED_HEIGHT_CLASS = "h-[var(--bite-height-mobile)] min-[768px]:h-[var(--bite-height)]";
+function biteMediaStyle(cssAspect, height, heightMobile) {
+  return {
+    aspectRatio: cssAspect,
+    ...height !== void 0 ? {
+      "--bite-height": `${height}px`,
+      "--bite-height-mobile": `${heightMobile ?? height}px`,
+      maxWidth: STRIP_CELL_MAX_WIDTH
+    } : {}
+  };
+}
+function VideoBiteCardSkeleton({
+  aspect = "9:16",
+  height,
+  heightMobile,
+  className
+}) {
+  const cssAspect = RATIO_TO_CSS_ASPECT[ratioToCategory(detectAspectRatio(aspect))];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(BITE_CARD_FRAME_CLASS, height !== void 0 ? "shrink-0" : "w-full", className),
+      style: height !== void 0 ? { maxWidth: STRIP_CELL_MAX_WIDTH } : void 0,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(BITE_MEDIA_CLASS, height !== void 0 && BITE_MEDIA_FIXED_HEIGHT_CLASS),
+          style: biteMediaStyle(cssAspect, height, heightMobile),
+          children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "absolute inset-0 h-full rounded-none" })
+        }
+      )
+    }
+  );
+}
+function VideoBitesStripSkeleton({
+  count = VIDEO_BITES_SKELETON_COUNT,
+  aspect = "9:16",
+  title = DEFAULT_VIDEO_BITES_TITLE,
+  showTitle = true,
+  headerSlot,
+  cardHeightDesktop = VIDEO_BITES_CARD_HEIGHT_DESKTOP_PX,
+  cardHeightMobile = VIDEO_BITES_CARD_HEIGHT_MOBILE_PX,
+  className
+}) {
+  const cells = useMemo(() => Array.from({ length: count }, (_, i) => i), [count]);
+  return /* @__PURE__ */ jsx(
+    CardsStrip,
+    {
+      items: cells,
+      itemKey: (i) => `bite-skeleton-${i}`,
+      title,
+      showTitle,
+      headerSlot,
+      autoScroll: false,
+      showChevrons: false,
+      className,
+      renderCard: () => /* @__PURE__ */ jsx(VideoBiteCardSkeleton, { aspect, height: cardHeightDesktop, heightMobile: cardHeightMobile })
+    }
+  );
+}
 function VideoBiteCard({
   bite,
   index,
@@ -178,18 +265,8 @@ function VideoBiteCard({
   const media = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(
-        "relative w-full",
-        height !== void 0 && "h-[var(--bite-height-mobile)] min-[768px]:h-[var(--bite-height)]"
-      ),
-      style: {
-        aspectRatio: cssAspect,
-        ...height !== void 0 ? {
-          "--bite-height": `${height}px`,
-          "--bite-height-mobile": `${heightMobile ?? height}px`,
-          maxWidth: STRIP_CELL_MAX_WIDTH
-        } : {}
-      },
+      className: cn(BITE_MEDIA_CLASS, height !== void 0 && BITE_MEDIA_FIXED_HEIGHT_CLASS),
+      style: biteMediaStyle(cssAspect, height, heightMobile),
       children: [
         /* @__PURE__ */ jsx(
           VideoHoverPreviewSurface,
@@ -230,11 +307,7 @@ function VideoBiteCard({
       ref: (node) => rootRef?.(node),
       "aria-hidden": isClone || void 0,
       "data-strip-card-key": key,
-      className: cn(
-        "group/card relative overflow-hidden rounded-md border border-ods-border bg-ods-card",
-        height !== void 0 ? "shrink-0" : "w-full",
-        className
-      ),
+      className: cn("group/card", BITE_CARD_FRAME_CLASS, height !== void 0 ? "shrink-0" : "w-full", className),
       style: height !== void 0 ? { maxWidth: STRIP_CELL_MAX_WIDTH } : void 0,
       onPointerEnter: handlePointerEnter,
       onPointerLeave: handlePointerLeave,
@@ -252,6 +325,12 @@ function VideoBiteCard({
   );
 }
 export {
+  STRIP_LINE_MAX_PX,
+  VIDEO_BITES_CARD_HEIGHT_DESKTOP_PX,
+  VIDEO_BITES_CARD_HEIGHT_MOBILE_PX,
+  VIDEO_BITES_SKELETON_COUNT,
   VideoBiteCard,
-  VideoBitesStrip
+  VideoBiteCardSkeleton,
+  VideoBitesStrip,
+  VideoBitesStripSkeleton
 };

package/dist/components/features/video-hover-preview.d.ts

@@ -18,7 +18,7 @@
  *     editor cards). Exactly one path is ever active.
  */
 import type React from 'react';
-import { type VideoPlayerHandle, type VideoMutedFallbackState } from './video';
+import type { VideoPlayerHandle, VideoMutedFallbackState } from './video-shared';
 export interface VideoHoverPreviewSurfaceProps {
     /** Source URL (Mux HLS / Supabase mp4). Rendition-capped internally. */
     url: string;

package/dist/components/features/video-hover-preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video-hover-preview.d.ts","sourceRoot":"","sources":["../../../src/components/features/video-hover-preview.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAS,KAAK,iBAAiB,EAAE,KAAK,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAGtF,MAAM,WAAW,6BAA6B;IAC5C,wEAAwE;IACxE,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;wEACoE;IACpE,MAAM,EAAE,OAAO,CAAC;IAChB;0CACsC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uCAAuC;IACvC,GAAG,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC1B,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;gFAC4E;IAC5E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;gFAE4E;IAC5E,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IACvC,gFAAgF;IAChF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACjE,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChD;4EACwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;gFAE4E;IAC5E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;gEAE4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,GAAG,EACH,SAAgB,EAChB,MAAM,EACN,aAAa,EACb,OAAe,EACf,KAAc,EACd,GAAG,EACH,WAAqB,EACrB,YAAoB,EACpB,OAAO,EACP,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,WAAmB,EACnB,YAAoB,EACpB,SAAS,EACT,QAAgB,EAChB,UAAkB,EAClB,OAAO,EACP,SAAS,GACV,EAAE,6BAA6B,GAAG,KAAK,CAAC,YAAY,CAqGpD"}
+{"version":3,"file":"video-hover-preview.d.ts","sourceRoot":"","sources":["../../../src/components/features/video-hover-preview.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAEjF,MAAM,WAAW,6BAA6B;IAC5C,wEAAwE;IACxE,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;wEACoE;IACpE,MAAM,EAAE,OAAO,CAAC;IAChB;0CACsC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uCAAuC;IACvC,GAAG,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC1B,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;gFAC4E;IAC5E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;gFAE4E;IAC5E,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IACvC,gFAAgF;IAChF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACjE,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChD;4EACwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;gFAE4E;IAC5E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;gEAE4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,GAAG,EACH,SAAgB,EAChB,MAAM,EACN,aAAa,EACb,OAAe,EACf,KAAc,EACd,GAAG,EACH,WAAqB,EACrB,YAAoB,EACpB,OAAO,EACP,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,WAAmB,EACnB,YAAoB,EACpB,SAAS,EACT,QAAgB,EAChB,UAAkB,EAClB,OAAO,EACP,SAAS,GACV,EAAE,6BAA6B,GAAG,KAAK,CAAC,YAAY,CAqGpD"}

package/dist/components/features/video.d.ts

@@ -28,8 +28,7 @@
  *   layout="native"   → intrinsic aspect ratio. Bites grid, blog cards.
  */
 import type React from 'react';
-import { type VideoProps } from './video-shared';
-export { VIDEO_PLAYBACK_FAILED_EVENT, type VideoFailureKind, type VideoFailureReason, type VideoLayout, type VideoMutedFallbackState, type VideoPlaybackFailureDetail, type VideoPlayerHandle, type VideoProps, } from './video-shared';
+import { type VideoLayout, type VideoProps } from './video-shared';
 /**
  * Extract the YouTube video id from any common URL shape OR from a
  * bare 11-char id (carousels and some admin shapes pass that form
@@ -46,4 +45,12 @@ export { VIDEO_PLAYBACK_FAILED_EVENT, type VideoFailureKind, type VideoFailureRe
  */
 export declare function extractYouTubeId(url: string): string | null;
 export declare function Video(props: VideoProps): React.ReactElement | null;
+/**
+ * A video while it is read: the player's box in the player's own layout wrapper (so its size and frame are the
+ * player's), drawn as the skeleton's surface. `Video` draws it in a loading scope.
+ */
+export declare function VideoSkeleton({ layout, className }: {
+    layout?: VideoLayout;
+    className?: string;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 //# sourceMappingURL=video.d.ts.map

package/dist/components/features/video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/components/features/video.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAML,KAAK,UAAU,EAEhB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,2BAA2B,EAC3B,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,WAAW,EAChB,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,iBAAiB,EACtB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAC;AA6FxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CA0B3D;AAMD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAuDlE"}
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/components/features/video.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,UAAU,EAEhB,MAAM,gBAAgB,CAAC;AA6FxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CA0B3D;AAMD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA2DlE;AAyBD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAiB,EAAE,SAAS,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,WAAW,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,0EAE3G"}

package/dist/components/features/video.js

@@ -10,7 +10,10 @@ import {
   useSyncExternalStore
 } from "react";
 import { useNearViewport } from "../../hooks/use-near-viewport.js";
+import { cn } from "../../utils/cn.js";
 import { fetchPriorityProp } from "../../utils/fetch-priority.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { VideoPlayBadge } from "./video-center-badge.js";
 import {
   pickFilePlayback,
@@ -18,9 +21,6 @@ import {
   reportPlaybackFailure,
   VideoErrorOverlay
 } from "./video-shared.js";
-import {
-  VIDEO_PLAYBACK_FAILED_EVENT
-} from "./video-shared.js";
 let filePlayer = null;
 let filePlayerLoad = null;
 const filePlayerListeners = /* @__PURE__ */ new Set();
@@ -98,10 +98,12 @@ function extractYouTubeId(url) {
 }
 function Video(props) {
   const { ref: nearRef, isNear } = useNearViewport();
+  const loading = useLoadingScope();
   const url = props.url;
+  const layout = props.layout ?? "native";
+  if (loading && !url) return /* @__PURE__ */ jsx(VideoSkeleton, { layout, className: props.className });
   if (!url) return null;
   const effectiveKind = resolveKind(props, url);
-  const layout = props.layout ?? "native";
   if (props.lazy && !isNear) {
     return wrapWithLayout(
       /* @__PURE__ */ jsx(
@@ -155,6 +157,9 @@ function resolveKind(props, url) {
   if (BARE_YT_ID_RE.test(url)) return "youtube";
   return isYouTubeUrl(url) ? "youtube" : "file";
 }
+function VideoSkeleton({ layout = "native", className }) {
+  return wrapWithLayout(/* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "rectangular", className: cn("h-full w-full", className) }), layout);
+}
 function wrapWithLayout(inner, layout) {
   switch (layout) {
     case "centered":
@@ -395,7 +400,7 @@ function YouTubeFacadeInner({
   ) });
 }
 export {
-  VIDEO_PLAYBACK_FAILED_EVENT,
   Video,
+  VideoSkeleton,
   extractYouTubeId
 };

package/dist/components/features/walkthrough-video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"walkthrough-video.d.ts","sourceRoot":"","sources":["../../../src/components/features/walkthrough-video.tsx"],"names":[],"mappings":"AAkEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B;;6EAE6E;AAC7E,MAAM,WAAW,oBAAoB;IACnC;qDACiD;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC;4EACwE;IACxE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;CACpC;AASD,0EAA0E;AAC1E,UAAU,yBAAyB;IACjC,KAAK,EAAE,oBAAoB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;4DAKwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;;;;uEAQmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;mDAI+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,6BAA8B,SAAQ,yBAAyB;IAC9E;;mDAE+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;iFAC6E;IAC7E,SAAS,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IAC5C,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;8CAC0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,kFAAkF;AAClF,MAAM,MAAM,2BAA2B,GAAG,yBAAyB,CAAC;AAsmCpE;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,GAAG,KAAK,CAAC,YAAY,CAEjG;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,KAAK,CAAC,YAAY,CAE7F;AAED;;;GAGG;AACH,wBAAgB,8BAA8B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAExG"}
+{"version":3,"file":"walkthrough-video.d.ts","sourceRoot":"","sources":["../../../src/components/features/walkthrough-video.tsx"],"names":[],"mappings":"AAkEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B;;6EAE6E;AAC7E,MAAM,WAAW,oBAAoB;IACnC;qDACiD;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC;4EACwE;IACxE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;CACpC;AASD,0EAA0E;AAC1E,UAAU,yBAAyB;IACjC,KAAK,EAAE,oBAAoB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;4DAKwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;;;;uEAQmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;mDAI+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,6BAA8B,SAAQ,yBAAyB;IAC9E;;mDAE+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;iFAC6E;IAC7E,SAAS,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IAC5C,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;8CAC0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,kFAAkF;AAClF,MAAM,MAAM,2BAA2B,GAAG,yBAAyB,CAAC;AA0mCpE;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,GAAG,KAAK,CAAC,YAAY,CAEjG;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,KAAK,CAAC,YAAY,CAE7F;AAED;;;GAGG;AACH,wBAAgB,8BAA8B,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAExG"}

package/dist/components/features/walkthrough-video.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useIsHydrated } from "../../hooks/ui/use-is-hydrated.js";
+import { MEDIA_ASPECT } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
 import {
   WALKTHROUGH_VIDEO_DISMISS_KEY,
@@ -18,12 +19,13 @@ import { XmarkIcon } from "../icons-v2-generated/signs-and-symbols/xmark-icon.js
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/button/index.js";
 import { DialogPortal, DialogOverlay } from "../ui/dialog.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { SquareAvatar } from "../ui/square-avatar.js";
 import { CardHitLayer } from "./card-hit-layer.js";
 import { Video } from "./video.js";
 import { VideoPlayBadge, VideoUnmuteGlyph } from "./video-center-badge.js";
 import { VideoHoverPreviewSurface } from "./video-hover-preview.js";
-const INLINE_CARD_BOX_CLASS = "aspect-video w-full rounded-md border border-ods-border";
+const INLINE_CARD_BOX_CLASS = `${MEDIA_ASPECT.video} w-full rounded-md border border-ods-border`;
 const FIRST_INTERACTION_EVENTS = ["scroll", "pointerdown", "keydown"];
 const isAtEnd = (duration, time) => duration > 0 && duration - time < 1;
 function theaterSeedFromLive(live, fallbackTime, fallbackMuted) {
@@ -60,6 +62,7 @@ function WalkthroughVideo({
   className
 }) {
   const inline = placement === "inline";
+  const inScope = useLoadingScope();
   const dismissEnabled = dismissal !== false;
   const storageKey = dismissEnabled && dismissal.storageKey || WALKTHROUGH_VIDEO_DISMISS_KEY;
   const dismissalId = video?.id != null ? String(video.id) : "dismissed";
@@ -438,6 +441,7 @@ function WalkthroughVideo({
   useEffect(() => {
     cardModeRef.current = cardMode;
   });
+  if (inScope) return inline ? /* @__PURE__ */ jsx(InlineWalkthroughVideoSkeleton, { className }) : null;
   if (!video || !video.mainVideoUrl && !video.youtubeUrl) return null;
   const showCard = mounted && !dismissed;
   const resumeHandoff = resumeMode ? handoff : null;

package/dist/components/help-center-pages/download-apps-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"download-apps-page.d.ts","sourceRoot":"","sources":["../../../src/components/help-center-pages/download-apps-page.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,EASL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EAErB,MAAM,uBAAuB,CAAC;AAI/B,OAAO,EAA4B,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAchF,MAAM,WAAW,qBAAqB;IACpC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B;gFAC4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACvD,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wGAAwG;IACxG,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACxD,0GAA0G;IAC1G,GAAG,CAAC,EAAE,qBAAqB,CAAC;IAC5B;;;;OAIG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,kGAAkG;AAClG,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,MAAM,EAAE,SAAS,CAAC;CACnB;AAgLD,wBAAgB,gBAAgB,CAAC,EAC/B,QAA6B,EAC7B,WAAW,EACX,KAAY,EACZ,UAAkB,EAClB,KAAK,EACL,QAAQ,EACR,WAAkB,EAClB,kBAAyB,EACzB,gBAAgB,EAChB,GAAG,EACH,GAAG,GACJ,EAAE,qBAAqB,+BAoFvB"}
+{"version":3,"file":"download-apps-page.d.ts","sourceRoot":"","sources":["../../../src/components/help-center-pages/download-apps-page.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,OAAO,EASL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EAErB,MAAM,uBAAuB,CAAC;AAI/B,OAAO,EAA4B,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAehF,MAAM,WAAW,qBAAqB;IACpC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B;gFAC4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACvD,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wGAAwG;IACxG,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACxD,0GAA0G;IAC1G,GAAG,CAAC,EAAE,qBAAqB,CAAC;IAC5B;;;;OAIG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,kGAAkG;AAClG,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,MAAM,EAAE,SAAS,CAAC;CACnB;AAkOD,wBAAgB,gBAAgB,CAAC,EAC/B,QAA6B,EAC7B,WAAW,EACX,KAAY,EACZ,UAAkB,EAClB,KAAK,EACL,QAAQ,EACR,WAAkB,EAClB,kBAAyB,EACzB,gBAAgB,EAChB,GAAG,EACH,GAAG,GACJ,EAAE,qBAAqB,+BAsFvB"}

package/dist/components/help-center-pages/download-apps-page.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRouter } from "../../embed-shims/next-navigation.js";
 import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard.js";
 import { useDownloads } from "../../hooks/use-downloads.js";
+import { TILE_SIZE } from "../../styles/component-sizes.js";
 import {
   DESKTOP_OS_LABELS,
   DOWNLOAD_ARCHITECTURE_LABELS,
@@ -16,18 +17,19 @@ import { cn } from "../../utils/cn.js";
 import { formatUrlForDisplay } from "../../utils/format.js";
 import { DESKTOP_OSES } from "../../utils/visitor-os.js";
 import { FaqSection, pageFaqProps } from "../faq/faq-section.js";
-import { CommandBox } from "../features/command-box.js";
+import { CommandBox, CommandBoxSkeleton } from "../features/command-box.js";
 import { AppleLogoIcon } from "../icons-v2-generated/brand-logos/apple-logo-icon.js";
 import { WindowsLogoGreyIcon } from "../icons-v2-generated/brand-logos/windows-logo-grey-icon.js";
 import { Download01Icon } from "../icons-v2-generated/interface/download-01-icon.js";
 import { PageShell } from "../layout/article-detail-layout.js";
 import { PageLayout } from "../layout/page-layout.js";
 import { LoadingRegion } from "../loading/loading-region.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/button/button.js";
 import { LoadError } from "../ui/error-state.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { MobileAppQr } from "../ui/mobile-app-qr.js";
-import { StoreBadgeLinks } from "../ui/store-badges.js";
+import { AppStoreBadge, GooglePlayBadge, StoreBadgeLinks } from "../ui/store-badges.js";
 const SECTIONS_CLASS = "flex flex-col gap-[var(--spacing-system-xlf)]";
 const SECTION_CLASS = "flex flex-col gap-[var(--spacing-system-lf)]";
 const CARDS_GRID_CLASS = "grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:grid-cols-2";
@@ -36,6 +38,12 @@ const CARD_CLASS = "flex flex-col gap-[var(--spacing-system-lf)] rounded-md bord
 const CARD_HEADER_CLASS = "flex items-center gap-[var(--spacing-system-sf)]";
 const BUTTONS_CLASS = "flex flex-wrap gap-[var(--spacing-system-sf)]";
 const COMMANDS_CLASS = "flex flex-col gap-[var(--spacing-system-mf)]";
+const SCAN_CARD_CLASS = "content-md:flex-row content-md:items-center content-md:justify-between";
+const QR_CLASS = `${TILE_SIZE.qr} shrink-0`;
+const STORE_BADGES_CLASS = "flex flex-wrap items-center gap-[var(--spacing-system-lf)]";
+const STORE_BADGE_CLASS = "h-12 w-auto";
+const MOBILE_STORE_CARD_LINE = "Get alerts and respond to tickets on the go.";
+const MOBILE_SCAN_TITLE = "Scan with your phone";
 const OS_ICONS = {
   mac: AppleLogoIcon,
   windows: WindowsLogoGreyIcon
@@ -130,12 +138,38 @@ function WebCard({ web }) {
     }
   );
 }
-function CardsSkeleton({ label }) {
-  return /* @__PURE__ */ jsx(LoadingRegion, { label, className: CARDS_GRID_CLASS, children: [0, 1].map((card) => /* @__PURE__ */ jsxs("div", { className: CARD_CLASS, children: [
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-32 rounded" }),
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-56 rounded-md" }),
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-14 w-full rounded-md" })
-  ] }, card)) });
+function SystemCardsSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: cardsGridClass(DESKTOP_OSES.length), children: DESKTOP_OSES.map((os) => {
+    const Icon = OS_ICONS[os];
+    return /* @__PURE__ */ jsxs("div", { className: CARD_CLASS, children: [
+      /* @__PURE__ */ jsxs("div", { className: CARD_HEADER_CLASS, children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
+        /* @__PURE__ */ jsx("h3", { className: "m-0 text-ods-text-primary text-h3", children: DESKTOP_OS_LABELS[os] }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "ml-auto w-32" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: BUTTONS_CLASS, children: /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "default", className: "w-56" }) }),
+      /* @__PURE__ */ jsx("div", { className: COMMANDS_CLASS, children: /* @__PURE__ */ jsx(CommandBoxSkeleton, { lines: 1, showCopy: true }) })
+    ] }, os);
+  }) });
+}
+function MobileCardsSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: cardsGridClass(2), children: [
+    /* @__PURE__ */ jsxs("div", { className: CARD_CLASS, children: [
+      /* @__PURE__ */ jsx("div", { className: CARD_HEADER_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-48" }) }),
+      /* @__PURE__ */ jsx("p", { className: "m-0 text-ods-text-secondary text-h4", children: MOBILE_STORE_CARD_LINE }),
+      /* @__PURE__ */ jsxs("div", { className: STORE_BADGES_CLASS, inert: true, "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx(AppStoreBadge, { className: STORE_BADGE_CLASS }),
+        /* @__PURE__ */ jsx(GooglePlayBadge, { className: STORE_BADGE_CLASS })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn(CARD_CLASS, SCAN_CARD_CLASS), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-sf)]", children: [
+        /* @__PURE__ */ jsx(CardHeader, { title: MOBILE_SCAN_TITLE }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 2, className: "w-full" })
+      ] }),
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: QR_CLASS })
+    ] })
+  ] });
 }
 function Section({ id, title, children }) {
   return /* @__PURE__ */ jsxs("section", { "aria-labelledby": id, className: SECTION_CLASS, children: [
@@ -161,25 +195,29 @@ function DownloadAppsPage({
   faq
 }) {
   const { data, isLoading, error, reload } = useDownloads({ endpoint, initialData });
+  const scoped = useLoadingScope();
   const systems = showDesktop && data ? rowsBySystem(data.desktop) : [];
   const mobile = data?.mobile ?? null;
   const hasMobile = !!mobile && (!!mobile.appStoreUrl || !!mobile.googlePlayUrl);
   const offersDesktop = showDesktop && (!data || systems.length > 0);
   let body;
-  if (error && !data) {
+  if (error && !data && !scoped) {
     body = /* @__PURE__ */ jsx(LoadError, { message: "Could not load the downloads", onRetry: reload });
-  } else if (!data) {
-    body = isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      showDesktop && /* @__PURE__ */ jsx(Section, { id: "download-desktop", title: "Desktop app", children: /* @__PURE__ */ jsx(CardsSkeleton, { label: "Loading the installers" }) }),
-      /* @__PURE__ */ jsx(Section, { id: "download-mobile", title: "Mobile app", children: /* @__PURE__ */ jsx(CardsSkeleton, { label: "Loading the mobile app" }) })
-    ] }) : null;
+  } else if (!data || scoped) {
+    body = isLoading || scoped ? (
+      // ONE region announces the page's loading; the sections inside it are silent.
+      /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading the downloads", className: SECTIONS_CLASS, children: [
+        showDesktop && /* @__PURE__ */ jsx(Section, { id: "download-desktop", title: "Desktop app", children: /* @__PURE__ */ jsx(SystemCardsSkeleton, {}) }),
+        /* @__PURE__ */ jsx(Section, { id: "download-mobile", title: "Mobile app", children: /* @__PURE__ */ jsx(MobileCardsSkeleton, {}) })
+      ] })
+    ) : null;
   } else {
     body = /* @__PURE__ */ jsxs(Fragment, { children: [
       systems.length > 0 && /* @__PURE__ */ jsx(Section, { id: "download-desktop", title: "Desktop app", children: /* @__PURE__ */ jsx("div", { className: cardsGridClass(systems.length), children: systems.map((system) => /* @__PURE__ */ jsx(SystemCard, { system, onDownloadAction }, system.os)) }) }),
       mobile && hasMobile && /* @__PURE__ */ jsx(Section, { id: "download-mobile", title: "Mobile app", children: /* @__PURE__ */ jsxs("div", { className: cardsGridClass(mobile.install ? 2 : 1), children: [
         /* @__PURE__ */ jsxs("div", { className: CARD_CLASS, children: [
           /* @__PURE__ */ jsx(CardHeader, { title: storeCardTitle(mobile) }),
-          /* @__PURE__ */ jsx("p", { className: "m-0 text-ods-text-secondary text-h4", children: "Get alerts and respond to tickets on the go." }),
+          /* @__PURE__ */ jsx("p", { className: "m-0 text-ods-text-secondary text-h4", children: MOBILE_STORE_CARD_LINE }),
           /* @__PURE__ */ jsx(
             StoreBadgeLinks,
             {
@@ -189,23 +227,17 @@ function DownloadAppsPage({
             }
           )
         ] }),
-        mobile.install && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(CARD_CLASS, "content-md:flex-row content-md:items-center content-md:justify-between"),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-sf)]", children: [
-                /* @__PURE__ */ jsx(CardHeader, { title: "Scan with your phone" }),
-                /* @__PURE__ */ jsxs("p", { className: "m-0 text-ods-text-secondary text-h4", children: [
-                  "Point your camera at the code, or open ",
-                  formatUrlForDisplay(mobile.install.url),
-                  " on your phone."
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(MobileAppQr, { install: mobile.install, className: "h-[144px] w-[144px] shrink-0" })
-            ]
-          }
-        )
+        mobile.install && /* @__PURE__ */ jsxs("div", { className: cn(CARD_CLASS, SCAN_CARD_CLASS), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-sf)]", children: [
+            /* @__PURE__ */ jsx(CardHeader, { title: MOBILE_SCAN_TITLE }),
+            /* @__PURE__ */ jsxs("p", { className: "m-0 text-ods-text-secondary text-h4", children: [
+              "Point your camera at the code, or open ",
+              formatUrlForDisplay(mobile.install.url),
+              " on your phone."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(MobileAppQr, { install: mobile.install, className: QR_CLASS })
+        ] })
       ] }) })
     ] });
   }