@flamingo-stack/openframe-frontend-core 0.0.776 → 0.0.780

package/dist/{software-update-XU5AI4TP.cjs → software-update-GJLDO5X5.cjs}

@@ -15,26 +15,26 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkXN6LXMH5cjs = require('./chunk-XN6LXMH5.cjs');
-require('./chunk-LJT2KRE2.cjs');
-require('./chunk-RB7VLVMD.cjs');
+var _chunkUPAE4IV5cjs = require('./chunk-UPAE4IV5.cjs');
+require('./chunk-KLTUTZBO.cjs');
+require('./chunk-R6BKQKIF.cjs');
 
 
-var _chunkV3W56L2Dcjs = require('./chunk-V3W56L2D.cjs');
+var _chunkSIDDZZKLcjs = require('./chunk-SIDDZZKL.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-E64HPPRH.cjs');
-require('./chunk-2JRSYWFP.cjs');
+require('./chunk-5PK22JP7.cjs');
+require('./chunk-VXAKQRV7.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-LNCBN4BL.cjs');
+require('./chunk-MLX6Z7TU.cjs');
 require('./chunk-C42WIUH6.cjs');
-require('./chunk-NWZSYG4S.cjs');
-require('./chunk-KM2TVQCH.cjs');
-require('./chunk-EHJE3UWZ.cjs');
+require('./chunk-YWQ3VXPL.cjs');
+require('./chunk-OWQVDWTK.cjs');
+require('./chunk-LBGAHB6X.cjs');
 require('./chunk-KKAY6GPU.cjs');
-require('./chunk-5QP3K2CE.cjs');
+require('./chunk-XEYL6AFZ.cjs');
 require('./chunk-LELS4XMX.cjs');
 require('./chunk-ZOZR3QI2.cjs');
 require('./chunk-OMV5S5PI.cjs');
@@ -1824,20 +1824,21 @@ require('./chunk-LMBYZITR.cjs');
 require('./chunk-TMVC7S2R.cjs');
 require('./chunk-IYHH5EIO.cjs');
 require('./chunk-XIBCMGBW.cjs');
-require('./chunk-CZIMISAR.cjs');
-require('./chunk-XXJL5GY3.cjs');
-require('./chunk-57B5RUYD.cjs');
+require('./chunk-JB2SEF6Q.cjs');
+require('./chunk-OJZBZH56.cjs');
+require('./chunk-64KBI5MI.cjs');
 require('./chunk-JKX2C3I2.cjs');
 require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-OJLZ7PGO.cjs');
-require('./chunk-MYHS4W2H.cjs');
-require('./chunk-R3JX4MXD.cjs');
+require('./chunk-QEFDGI3Z.cjs');
+require('./chunk-YG72MEHY.cjs');
+require('./chunk-OH5LAH3X.cjs');
+require('./chunk-3ZLPYEL5.cjs');
 require('./chunk-SETFUCZA.cjs');
-require('./chunk-VFUMM6JC.cjs');
-require('./chunk-HY6BCZH7.cjs');
+require('./chunk-BEMGJDXI.cjs');
+require('./chunk-BNUZKBNV.cjs');
 require('./chunk-S5C3OZCO.cjs');
 require('./chunk-32ASZMTV.cjs');
 require('./chunk-OOYBIS7D.cjs');
@@ -1847,11 +1848,13 @@ require('./chunk-ORO54HDF.cjs');
 require('./chunk-RUHKTWGB.cjs');
 require('./chunk-BLH2SFOO.cjs');
 require('./chunk-3LW5TD54.cjs');
-require('./chunk-ASMNNSUQ.cjs');
+require('./chunk-7PNRXJX2.cjs');
 require('./chunk-NTPX5GXI.cjs');
-require('./chunk-VFZFCRAL.cjs');
-require('./chunk-5P4TDV7V.cjs');
-require('./chunk-DGFDBPO7.cjs');
+require('./chunk-AQXKXZWB.cjs');
+require('./chunk-V4FXUIMH.cjs');
+require('./chunk-SZHDXXMK.cjs');
+require('./chunk-TUAATMUE.cjs');
+require('./chunk-5GJM7VRR.cjs');
 require('./chunk-E76ONBKF.cjs');
 require('./chunk-UJ7AXHRZ.cjs');
 require('./chunk-YXDHVHB2.cjs');
@@ -1918,14 +1921,14 @@ var noop = () => {
 var HIDDEN_WHEN_COMPACT = ["organization"];
 function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkV3W56L2Dcjs.Autocomplete,
+    _chunkSIDDZZKLcjs.Autocomplete,
     {
-      label: _chunkXN6LXMH5cjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkUPAE4IV5cjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunkXN6LXMH5cjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkUPAE4IV5cjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -1939,7 +1942,7 @@ function SoftwareUpdateScreen({ compact = false }) {
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkXN6LXMH5cjs.SoftwareActionForm,
+    _chunkUPAE4IV5cjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -1951,7 +1954,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkXN6LXMH5cjs.DeviceSelector,
+        _chunkUPAE4IV5cjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/dist/{tickets-board-YT25IX3O.cjs → tickets-board-FB5AGLJD.cjs}

@@ -10,9 +10,9 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkLJT2KRE2cjs = require('./chunk-LJT2KRE2.cjs');
-require('./chunk-2JRSYWFP.cjs');
-require('./chunk-EHJE3UWZ.cjs');
+var _chunkKLTUTZBOcjs = require('./chunk-KLTUTZBO.cjs');
+require('./chunk-VXAKQRV7.cjs');
+require('./chunk-LBGAHB6X.cjs');
 require('./chunk-LELS4XMX.cjs');
 require('./chunk-ZOZR3QI2.cjs');
 require('./chunk-OMV5S5PI.cjs');
@@ -1802,11 +1802,11 @@ require('./chunk-LMBYZITR.cjs');
 require('./chunk-TMVC7S2R.cjs');
 require('./chunk-IYHH5EIO.cjs');
 require('./chunk-XIBCMGBW.cjs');
-require('./chunk-57B5RUYD.cjs');
+require('./chunk-64KBI5MI.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
-require('./chunk-R3JX4MXD.cjs');
-require('./chunk-HY6BCZH7.cjs');
+require('./chunk-3ZLPYEL5.cjs');
+require('./chunk-BNUZKBNV.cjs');
 require('./chunk-S5C3OZCO.cjs');
 require('./chunk-32ASZMTV.cjs');
 require('./chunk-OOYBIS7D.cjs');
@@ -1814,9 +1814,11 @@ require('./chunk-4IYNDV3G.cjs');
 require('./chunk-6VOOPMP5.cjs');
 require('./chunk-ORO54HDF.cjs');
 require('./chunk-RUHKTWGB.cjs');
-require('./chunk-ASMNNSUQ.cjs');
-require('./chunk-5P4TDV7V.cjs');
-require('./chunk-DGFDBPO7.cjs');
+require('./chunk-7PNRXJX2.cjs');
+require('./chunk-V4FXUIMH.cjs');
+require('./chunk-SZHDXXMK.cjs');
+require('./chunk-TUAATMUE.cjs');
+require('./chunk-5GJM7VRR.cjs');
 require('./chunk-E76ONBKF.cjs');
 require('./chunk-XIFEZ2JT.cjs');
 require('./chunk-Z74QE57T.cjs');
@@ -1838,7 +1840,7 @@ function buildTicketsBoardFixture(cast) {
   const dana = assignee(cast.person("dana"));
   const alex = assignee(cast.person("alex"));
   return [
-    _chunkLJT2KRE2cjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
+    _chunkKLTUTZBOcjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
       ticket("tk-1051", "Printer offline at the front desk", "ACTIVE", {
         ticketNumber: "1051",
         agent: "fae",
@@ -1856,7 +1858,7 @@ function buildTicketsBoardFixture(cast) {
         tags: ["onboarding"]
       })
     ]),
-    _chunkLJT2KRE2cjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
+    _chunkKLTUTZBOcjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
       ticket("tk-1049", "Acrobat Pro for Maya", "TECH_REQUIRED", {
         ticketNumber: "1049",
         agent: "fae",
@@ -1880,7 +1882,7 @@ function buildTicketsBoardFixture(cast) {
         escalatedByUser: true
       })
     ]),
-    _chunkLJT2KRE2cjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
+    _chunkKLTUTZBOcjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
       ticket("tk-1046", "Replace the conference room display", "ON_HOLD", {
         ticketNumber: "1046",
         organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.acme.name,
@@ -1889,7 +1891,7 @@ function buildTicketsBoardFixture(cast) {
         activity: { kind: "waiting-external" }
       })
     ]),
-    _chunkLJT2KRE2cjs.columnFromTicketStatus.call(void 0, 
+    _chunkKLTUTZBOcjs.columnFromTicketStatus.call(void 0, 
       "RESOLVED",
       [
         ticket("tk-1048", "Slow laptop", "RESOLVED", {
@@ -1925,7 +1927,7 @@ function TicketsBoardScreen({ compact = false }) {
   const cast = _chunkSTEJZPIOcjs.useProductDemoCast.call(void 0, );
   const board = _react.useMemo.call(void 0, () => buildTicketsBoardFixture(cast), [cast]);
   const columns = compact ? board.filter((column) => column.id !== "ON_HOLD") : board;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLJT2KRE2cjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKLTUTZBOcjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
 }
 
 

package/dist/{video-file-player-6ZFOZFER.cjs → video-file-player-SIJW5UWU.cjs}

@@ -19,7 +19,8 @@ require('./chunk-4IYNDV3G.cjs');
 require('./chunk-NTPX5GXI.cjs');
 
 
-var _chunkDGFDBPO7cjs = require('./chunk-DGFDBPO7.cjs');
+var _chunkSZHDXXMKcjs = require('./chunk-SZHDXXMK.cjs');
+require('./chunk-5GJM7VRR.cjs');
 require('./chunk-UJ7AXHRZ.cjs');
 
 
@@ -415,7 +416,7 @@ function FilePlayer({
   const hover = useHoverPlayback(mediaRef, sound, { playOnHover, playWhenHovered, mutedIntent });
   const health = usePlaybackHealth(mediaRef, url, !chromeless);
   useIosNativeVideoFullscreen(mediaRef);
-  const captions = _chunkDGFDBPO7cjs.useAuthedAssetSrc.call(void 0, captionsUrl, "text/vtt, */*");
+  const captions = _chunkSZHDXXMKcjs.useAuthedAssetSrc.call(void 0, captionsUrl, "text/vtt, */*");
   const player = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _muxplayerreact2.default,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.776",
+  "version": "0.0.780",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/chat/chat-message-enhanced.tsx

@@ -103,6 +103,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
       appearance: appearanceProp,
       authorType: authorTypeProp,
       selfAuthorType,
+      nameEveryTurn = false,
       assistantIcon,
       contextItems,
       resolveContextIcon,
@@ -535,9 +536,15 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
     // system line and another person answering (a technician in the end
     // user's thread). Mingo sends the admin's own turns as `admin` too; those
     // are the user's words and draw as such. Every face carries its name for
-    // assistive tech and on hover.
-    const showName = isSystem || isOtherPerson || (authorType === 'admin' && !isUser);
+    // assistive tech and on hover. A thread of several parties names every
+    // turn (`nameEveryTurn`: a ticket, where an end user, the agent and any
+    // number of technicians write): the agent's turn as an incoming one, the
+    // viewer's own bubble with the name beside the face, on the bubble's side.
+    const showName =
+      isSystem || isOtherPerson || (authorType === 'admin' && !isUser) || (nameEveryTurn && role === 'assistant');
+    const showSelfName = nameEveryTurn && isUser && !isSystem;
     const displayName = name || (isHuman ? 'User' : assistantType === 'mingo' ? 'Mingo' : 'Fae');
+    const nameLabel = <span className="min-w-0 truncate text-ods-open-yellow text-h6">{displayName}</span>;
     const faceBox = 'h-5 w-5 flex-shrink-0';
     const face: ReactNode =
       !showAvatar || isSystem ? null : !isHuman && !avatar && assistantIcon ? (
@@ -603,10 +610,11 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
             vs ~9ms as grid (Chrome: ~2ms either way). Same gap and stretch,
             no margin collapsing — visually identical. */}
           <div className="grid min-w-0 grid-cols-1 gap-[var(--spacing-system-xxs)]">
-            {(face || showName) && (
+            {(face || showName || showSelfName) && (
               <div className={cn('flex items-center gap-[var(--spacing-system-xs)]', isUser && 'justify-end')}>
+                {showSelfName && nameLabel}
                 {face}
-                {showName && <span className="min-w-0 truncate text-ods-open-yellow text-h6">{displayName}</span>}
+                {showName && nameLabel}
                 {showName && timestamp && (
                   <span className="ml-auto shrink-0 whitespace-nowrap text-ods-text-secondary text-h6">
                     {formatMessageTimestamp(timestamp)}
@@ -765,6 +773,7 @@ const MemoizedChatMessageEnhanced = memo(ChatMessageEnhanced, (prevProps, nextPr
     prevProps.appearance === nextProps.appearance &&
     prevProps.authorType === nextProps.authorType &&
     prevProps.selfAuthorType === nextProps.selfAuthorType &&
+    prevProps.nameEveryTurn === nextProps.nameEveryTurn &&
     prevProps.assistantIcon === nextProps.assistantIcon &&
     prevProps.className === nextProps.className &&
     // Reference equality — the host re-uses the same array instance per

package/src/components/chat/chat-message-list.tsx

@@ -141,6 +141,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
       assistantType,
       approvalVariant,
       selfAuthorType,
+      nameEveryTurn,
       appearance = CHAT_APPEARANCE.CLASSIC,
       assistantIcon,
       pendingApprovals,
@@ -1049,6 +1050,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
                         approvalVariant={approvalVariant}
                         authorType={message.authorType}
                         selfAuthorType={selfAuthorType}
+                        nameEveryTurn={nameEveryTurn}
                         assistantIcon={message.role !== 'user' ? assistantIcon : undefined}
                         contextItems={message.contextItems}
                         resolveContextIcon={resolveContextIcon}

package/src/components/chat/types/component.types.ts

@@ -142,6 +142,9 @@ export interface ChatMessageEnhancedProps extends Omit<HTMLAttributes<HTMLDivEle
    *  write (`ChatMessageList.selfAuthorType`). Omit and every `user` turn is
    *  the viewer's own. */
   selfAuthorType?: AuthorType;
+  /** Write the speaker's name on the agent's turn and the viewer's own bubble
+   *  too (`ChatMessageList.nameEveryTurn`). Default false. */
+  nameEveryTurn?: boolean;
   /** Viewer variant for approval blocks in this message's segments.
    *  `'admin'` (default) = full command block; `'client'` = end-client
    *  (Fae desktop app) title-only card. Forwarded to
@@ -305,6 +308,12 @@ export interface ChatMessageListProps extends HTMLAttributes<HTMLDivElement> {
    *  is the viewer's (Mingo: the admin's own turns arrive as `admin`); the Fae
    *  client passes `'user'`, so a technician (`admin`) answers from the left. */
   selfAuthorType?: AuthorType;
+  /** Write the speaker's name on every turn: the agent's and the viewer's own
+   *  bubbles too, not only another person's. For a thread of several parties
+   *  — a ticket, where the end user, the agent and any number of technicians
+   *  (all `admin`) write — so who said what is information. Default false: a
+   *  two-party thread (Mingo, the Fae client) is told apart by its faces. */
+  nameEveryTurn?: boolean;
   /** Visual generation of the whole thread, blocks included. Default
    *  `classic`; the Fae client passes `v2`. See `ChatAppearance`. */
   appearance?: ChatAppearance;

package/src/components/features/video-hover-preview.tsx

@@ -125,13 +125,6 @@ export function VideoHoverPreviewSurface({
   }, [gateControlled]);
   // Continuation forces the media + player on regardless of hover/viewport gate.
   const showMedia = continuation || (gateControlled ? playerMounted : isNear);
-  // The hover player (and its script, the Mux player and hls.js: the largest a page can load) mounts on the first
-  // hover, never before: a card that is near the screen but never hovered shows its poster and costs nothing more.
-  // A widget pinned to the screen is always "near", so mounting on proximity loaded that script on every page view
-  // (CU-17tkuw5xp4q). Once mounted it stays, so the next hover plays at once.
-  const [engaged, setEngaged] = useState(false);
-  if ((active || continuation) && !engaged) setEngaged(true);
-  const showPlayer = continuation || engaged;
 
   // Poster resolution — the shared entity-card cover fallback chain: the real
   // thumbnail, dropped on load error. Null → first-frame facade (unless the
@@ -166,45 +159,43 @@ export function VideoHoverPreviewSurface({
 
           {badge === 'play' && !active && !continuation && <VideoPlayBadge className="absolute inset-0 z-10 m-auto" />}
 
-          {showPlayer ? (
-            <div
-              className="absolute inset-0"
-              style={{ '--media-background-color': 'transparent' } as React.CSSProperties}
-            >
-              <Video
-                // Remount between modes: `startTime` + autoplay are LOAD-TIME
-                // props (playback-core binds them to one-shot durationchange /
-                // loadstart handlers), so re-propping an already-loaded element
-                // silently drops the seek. Only a Mux preview rewrite changed
-                // `src` before, which is why HLS resumed and plain MP4 did not.
-                key={continuation ? 'continuation' : 'preview'}
-                kind="file"
-                // Rendition-capped in BOTH modes: the cap was only skipped
-                // because changing `src` used to be the sole trigger for the
-                // seek; the explicit key handles that now, and a 320px mini
-                // player should never pull the uncapped manifest.
-                url={previewUrl}
-                poster={posterUrl}
-                {...(continuation
-                  ? {
-                      startTime,
-                      autoPlay: autoPlay && startMuted,
-                      startMuted,
-                      autoPlayUnmuted: autoPlay && !startMuted,
-                    }
-                  : { playWhenHovered: active })}
-                chromeless
-                layout="fill"
-                fit={fit}
-                preload={preload}
-                mutedIntent={mutedIntent}
-                hideMutedBadge={hideMutedBadge}
-                onMutedFallbackChange={onMutedFallbackChange}
-                onEnded={onEnded}
-                playerHandleRef={previewHandleRef}
-              />
-            </div>
-          ) : null}
+          <div
+            className="absolute inset-0"
+            style={{ '--media-background-color': 'transparent' } as React.CSSProperties}
+          >
+            <Video
+              // Remount between modes: `startTime` + autoplay are LOAD-TIME
+              // props (playback-core binds them to one-shot durationchange /
+              // loadstart handlers), so re-propping an already-loaded element
+              // silently drops the seek. Only a Mux preview rewrite changed
+              // `src` before, which is why HLS resumed and plain MP4 did not.
+              key={continuation ? 'continuation' : 'preview'}
+              kind="file"
+              // Rendition-capped in BOTH modes: the cap was only skipped
+              // because changing `src` used to be the sole trigger for the
+              // seek; the explicit key handles that now, and a 320px mini
+              // player should never pull the uncapped manifest.
+              url={previewUrl}
+              poster={posterUrl}
+              {...(continuation
+                ? {
+                    startTime,
+                    autoPlay: autoPlay && startMuted,
+                    startMuted,
+                    autoPlayUnmuted: autoPlay && !startMuted,
+                  }
+                : { playWhenHovered: active })}
+              chromeless
+              layout="fill"
+              fit={fit}
+              preload={preload}
+              mutedIntent={mutedIntent}
+              hideMutedBadge={hideMutedBadge}
+              onMutedFallbackChange={onMutedFallbackChange}
+              onEnded={onEnded}
+              playerHandleRef={previewHandleRef}
+            />
+          </div>
         </>
       ) : (
         <div className="absolute inset-0 bg-ods-card" />

package/src/components/features/video.tsx

@@ -46,7 +46,6 @@ import { useNearViewport } from '../../hooks/use-near-viewport';
 import { cn } from '../../utils/cn';
 import { fetchPriorityProp } from '../../utils/fetch-priority';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
-import { Button } from '../ui/button/button';
 import { useLoadingScope } from '../ui/loading-scope';
 import { VideoPlayBadge } from './video-center-badge';
 import type { FilePlayerProps } from './video-file-player';
@@ -136,65 +135,7 @@ function FilePlayerFallback({
   return <PosterBox poster={poster} className={className} priority={priority} fill />;
 }
 
-/**
- * A video nobody has asked to play yet starts as its poster and a play button, the way a YouTube video does
- * (`YouTubeFacade`): the player and hls.js are the largest script a page can load, and on a page whose video waits for
- * a click (a session, an episode, a release) loading them up front cost every visitor a long main-thread task before
- * anyone pressed play (CU-17tkuw5xp4q). A pointer, focus or touch on the button starts the download, so the player is
- * usually there by the click, and the click plays it with sound. A video that plays by itself (autoplay, hover
- * playback, a resumed position, chrome-less) or whose host drives it through a handle mounts its player as before.
- */
-function waitsForPlay(props: FilePlayerProps): boolean {
-  return (
-    !props.autoPlay &&
-    !props.autoPlayUnmuted &&
-    !props.playOnHover &&
-    props.playWhenHovered === undefined &&
-    props.startTime === undefined &&
-    !props.playerHandleRef &&
-    !props.chromeless
-  );
-}
-
-function FilePlayer({
-  title,
-  priority,
-  ...props
-}: FilePlayerProps & { title?: string; priority?: boolean }): React.ReactElement {
-  // Decided once: a video that started as a facade stays the player once pressed, whatever its props do later.
-  const [facade] = useState(() => waitsForPlay(props));
-  const [pressed, setPressed] = useState(false);
-  if (facade && !pressed) {
-    return (
-      <div className={cn('relative', props.className)} style={{ width: '100%', height: '100%' }}>
-        <FilePlayerFallback poster={props.poster} className="absolute inset-0" priority={priority} />
-        <Button
-          type="button"
-          variant="glyph"
-          size="wrap"
-          aria-label={title ? `Play: ${title}` : 'Play video'}
-          onPointerEnter={loadFilePlayer}
-          onFocus={loadFilePlayer}
-          onTouchStart={loadFilePlayer}
-          onClick={() => {
-            loadFilePlayer();
-            setPressed(true);
-          }}
-          className="group absolute inset-0 rounded-none"
-        >
-          <VideoPlayBadge
-            size="lg"
-            className="transition-transform duration-200 group-hover:scale-110 group-hover:text-ods-accent"
-          />
-        </Button>
-      </div>
-    );
-  }
-  // Pressed: the click is the visitor's gesture, so the player starts with sound (muted if the browser refuses).
-  return <LoadedFilePlayer {...props} priority={priority} {...(facade ? { autoPlayUnmuted: true } : {})} />;
-}
-
-function LoadedFilePlayer({ priority, ...props }: FilePlayerProps & { priority?: boolean }): React.ReactElement {
+function FilePlayer({ priority, ...props }: FilePlayerProps & { priority?: boolean }): React.ReactElement {
   // The player's component when its module has arrived (a loaded module, drawn through `createElement`).
   const arrived = useSyncExternalStore(subscribeToFilePlayer, loadedFilePlayer, noFilePlayer);
   if (arrived) return createElement(arrived, props);
@@ -327,7 +268,6 @@ export function Video(props: VideoProps): React.ReactElement | null {
       <FilePlayer
         url={url}
         poster={props.poster}
-        title={props.title}
         priority={props.priority}
         muted={props.muted}
         {...pickFilePlayback(props)}

package/src/components/navigation/nav-panel.tsx

@@ -1,13 +1,84 @@
 'use client';
 
 import type React from 'react';
-import { forwardRef, type HTMLAttributes } from 'react';
+import { forwardRef, useEffect, useSyncExternalStore, type HTMLAttributes } from 'react';
 import type { NavGroup, NavMenu } from '../../types/navigation';
+import { afterPageLoad } from '../../utils/after-page-load';
 import { cn } from '../../utils/cn';
-import { CaseStudyCard } from '../chat/entity-cards/case-study-card';
+import type { CaseStudyCard as CaseStudyCardComponent } from '../chat/entity-cards/case-study-card';
 import { NavItemRow } from './nav-item-row';
 import { defaultRenderSiteNavLink, type SiteNavLinkRenderer } from './site-nav-link';
 
+/**
+ * The featured cards' component (a case study card, with its video hover preview), fetched once the page has loaded,
+ * or at once when a menu opens first. The panel is on every page, closed, so a static import put the card and its video
+ * code in every page's first-load script, ahead of the page's largest paint (CU-17tkuw5xp4q). The server and the first
+ * draw show the closed panel without the cards; they are there before a visitor can open it.
+ */
+type FeatureCardComponent = typeof CaseStudyCardComponent;
+let featureCard: FeatureCardComponent | null = null;
+let featureCardLoad: Promise<void> | null = null;
+const featureCardListeners = new Set<() => void>();
+
+function loadFeatureCard(): void {
+  if (featureCard || featureCardLoad) return;
+  featureCardLoad = import('../chat/entity-cards/case-study-card')
+    .then(module => {
+      featureCard = module.CaseStudyCard;
+      for (const listener of featureCardListeners) listener();
+    })
+    // A failed load is forgotten, so the next open asks again.
+    .catch(() => undefined)
+    .finally(() => {
+      featureCardLoad = null;
+    });
+}
+
+function subscribeToFeatureCard(listener: () => void): () => void {
+  featureCardListeners.add(listener);
+  const cancel = afterPageLoad(loadFeatureCard);
+  return () => {
+    featureCardListeners.delete(listener);
+    cancel();
+  };
+}
+
+const loadedFeatureCard = () => featureCard;
+const noFeatureCard = () => null;
+
+/** A menu's featured cards, drawn once their component has arrived. */
+function FeatureCards({
+  features,
+  open,
+  onNavigate,
+}: {
+  features: NonNullable<NavMenu['features']>;
+  open: boolean;
+  onNavigate?: () => void;
+}) {
+  const Card = useSyncExternalStore(subscribeToFeatureCard, loadedFeatureCard, noFeatureCard);
+  useEffect(() => {
+    if (open) loadFeatureCard();
+  }, [open]);
+  if (!Card) return null;
+  return (
+    <>
+      {features.map(feature => (
+        <div key={feature.id} className="min-h-0 min-w-0 overflow-hidden">
+          <Card
+            size="menu"
+            study={feature.study}
+            href={feature.href}
+            mediaMounted={open}
+            onNavigate={onNavigate}
+            className="h-full"
+          />
+        </div>
+      ))}
+    </>
+  );
+}
+
 /** A column with more links than this lays them out in two columns. */
 const TWO_COLUMN_OVER = 4;
 
@@ -143,18 +214,7 @@ export const NavPanel = forwardRef<HTMLDivElement, NavPanelProps>(function NavPa
               // One row of cards, as many as the bar's width holds: a card that
               // would wrap lands on a zero-height row, where its cell clips it.
               <div className="grid min-w-0 flex-[3] auto-rows-[0px] grid-cols-[repeat(auto-fit,minmax(240px,1fr))] grid-rows-[minmax(0,1fr)] gap-x-[var(--spacing-system-mf)]">
-                {menu.features.map(feature => (
-                  <div key={feature.id} className="min-h-0 min-w-0 overflow-hidden">
-                    <CaseStudyCard
-                      size="menu"
-                      study={feature.study}
-                      href={feature.href}
-                      mediaMounted={open}
-                      onNavigate={onNavigate}
-                      className="h-full"
-                    />
-                  </div>
-                ))}
+                <FeatureCards features={menu.features} open={open} onNavigate={onNavigate} />
               </div>
             )}
             {!!menu.sideLinks?.length && (