@flamingo-stack/openframe-frontend-core 0.0.775 → 0.0.777

package/dist/{software-update-7NYZ7L76.cjs → software-update-CCCKS4ZE.cjs}

@@ -15,26 +15,26 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunk42JGOJCBcjs = require('./chunk-42JGOJCB.cjs');
-require('./chunk-LJT2KRE2.cjs');
-require('./chunk-RB7VLVMD.cjs');
+var _chunkHXLOCZMGcjs = require('./chunk-HXLOCZMG.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-TOPGBOCN.cjs');
+require('./chunk-WCSWWVPF.cjs');
 require('./chunk-C42WIUH6.cjs');
-require('./chunk-BTVO676B.cjs');
-require('./chunk-KWZ62LPZ.cjs');
-require('./chunk-EHJE3UWZ.cjs');
+require('./chunk-S3YDUX2I.cjs');
+require('./chunk-TZP7PSPG.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-TUXPFF4P.cjs');
-require('./chunk-Y3EBUFX4.cjs');
-require('./chunk-R3JX4MXD.cjs');
+require('./chunk-LGNJTSKB.cjs');
+require('./chunk-CGQ7CL62.cjs');
+require('./chunk-MQPTOJMF.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: _chunk42JGOJCBcjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkHXLOCZMGcjs.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: _chunk42JGOJCBcjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkHXLOCZMGcjs.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, 
-    _chunk42JGOJCBcjs.SoftwareActionForm,
+    _chunkHXLOCZMGcjs.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, 
-        _chunk42JGOJCBcjs.DeviceSelector,
+        _chunkHXLOCZMGcjs.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-4TXA7BZF.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');
 
 
@@ -101,6 +102,7 @@ function useMediaEvent(mediaRef, type, handler) {
     return () => onLiveElement(() => _optionalChain([element, 'access', _6 => _6.removeEventListener, 'optionalCall', _7 => _7(type, listener)]));
   }, [mediaRef, type, handlerRef]);
 }
+var INTERRUPTED_PLAY_RETRIES = 2;
 async function play(element) {
   try {
     await _optionalChain([element, 'access', _8 => _8.play, 'optionalCall', _9 => _9()]);
@@ -117,12 +119,16 @@ function usePlaybackSound(mediaRef, { autoPlay, autoPlayUnmuted, startMuted, onM
     const started = play(element);
     setBlocked(false);
     setMutedFallback(true);
-    if (await started !== "playing" && wanted()) setBlocked(true);
+    const outcome = await started;
+    if (outcome !== "playing" && wanted()) setBlocked(true);
+    return outcome;
   }, []);
   const playWithSound = _react.useCallback.call(void 0, 
     async (element, muted, wanted = always) => {
       onLiveElement(() => Object.assign(element, { muted }));
-      if (await play(element) === "refused" && wanted()) await playMuted(element, wanted);
+      const outcome = await play(element);
+      if (outcome === "refused" && wanted()) return playMuted(element, wanted);
+      return outcome;
     },
     [playMuted]
   );
@@ -244,11 +250,15 @@ function useHoverPlayback(mediaRef, sound, { playOnHover, playWhenHovered, muted
     onLiveElement(() => {
       element.volume = SOUND_VOLUME;
     });
-    if (_chunkSETFUCZAcjs.hasUserInteracted.call(void 0, )) {
-      void playWithSound(element, hostMutedRef.current, wanted);
-      return;
-    }
-    void playMuted(element, wanted);
+    const attempt = (retriesLeft) => {
+      const played = _chunkSETFUCZAcjs.hasUserInteracted.call(void 0, ) ? playWithSound(element, hostMutedRef.current, wanted) : playMuted(element, wanted);
+      void played.then((outcome) => {
+        if (outcome === "interrupted" && hovered && element.paused !== false && retriesLeft > 0)
+          attempt(retriesLeft - 1);
+      });
+    };
+    attempt(INTERRUPTED_PLAY_RETRIES);
+    if (_chunkSETFUCZAcjs.hasUserInteracted.call(void 0, )) return;
     const onFirstGesture = () => {
       if (!hovered) return;
       onLiveElement(() => {
@@ -406,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.775",
+  "version": "0.0.777",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/features/use-file-playback.ts

@@ -77,7 +77,10 @@ function useMediaEvent(mediaRef: MediaRef, type: string, handler: () => void): v
 }
 
 /** How a `play()` ended: it plays, the autoplay policy refused it, or something else stopped it (a pause, a teardown). */
-type PlayOutcome = 'playing' | 'refused' | 'interrupted';
+/** How many times a hover asks again after its `play()` was aborted (each attempt waits for the element). */
+const INTERRUPTED_PLAY_RETRIES = 2;
+
+export type PlayOutcome = 'playing' | 'refused' | 'interrupted';
 
 async function play(element: MediaElement): Promise<PlayOutcome> {
   try {
@@ -100,10 +103,11 @@ type SoundOptions = Pick<
 export interface PlaybackSound {
   /** Playback runs muted because the browser refused sound: the unmute control shows. */
   mutedFallback: boolean;
-  /** Play with sound (or `muted`, a host's standing choice); refused, play muted. `wanted` says the play is still asked for. */
-  playWithSound: (element: MediaElement, muted: boolean, wanted?: () => boolean) => Promise<void>;
-  /** Play muted, and say so. `wanted` says the play is still asked for. */
-  playMuted: (element: MediaElement, wanted?: () => boolean) => Promise<void>;
+  /** Play with sound (or `muted`, a host's standing choice); refused, play muted. `wanted` says the play is still
+   *  asked for. Resolves with how the last `play()` ended. */
+  playWithSound: (element: MediaElement, muted: boolean, wanted?: () => boolean) => Promise<PlayOutcome>;
+  /** Play muted, and say so. `wanted` says the play is still asked for. Resolves with how the `play()` ended. */
+  playMuted: (element: MediaElement, wanted?: () => boolean) => Promise<PlayOutcome>;
   /** The muted fallback is over (sound is on, or playback stopped). */
   endMutedFallback: () => void;
   /** The unmute control's click: it is the gesture the autoplay policy wants, so sound always starts. */
@@ -125,7 +129,9 @@ export function usePlaybackSound(
     const started = play(element);
     setBlocked(false);
     setMutedFallback(true);
-    if ((await started) !== 'playing' && wanted()) setBlocked(true);
+    const outcome = await started;
+    if (outcome !== 'playing' && wanted()) setBlocked(true);
+    return outcome;
   }, []);
 
   const playWithSound = useCallback(
@@ -133,7 +139,9 @@ export function usePlaybackSound(
       onLiveElement(() => Object.assign(element, { muted }));
       // Only a refusal falls back to muted. A pause that interrupts the play (a
       // fast hover-out) must not start playback again behind the pointer.
-      if ((await play(element)) === 'refused' && wanted()) await playMuted(element, wanted);
+      const outcome = await play(element);
+      if (outcome === 'refused' && wanted()) return playMuted(element, wanted);
+      return outcome;
     },
     [playMuted],
   );
@@ -300,13 +308,24 @@ export function useHoverPlayback(
     onLiveElement(() => {
       element.volume = SOUND_VOLUME;
     });
-    if (hasUserInteracted()) {
-      void playWithSound(element, hostMutedRef.current, wanted);
-      return;
-    }
-    // No gesture on the page yet, so sound would be refused: start muted with no
-    // refusal to wait for, and turn the sound on the moment the first gesture lands.
-    void playMuted(element, wanted);
+    // A `play()` can be aborted by the element itself: a player drawn BY this hover (a bite card mounts its player
+    // on the first hover) is asked to play while its stream is still attaching, and attaching it aborts the play
+    // (AbortError, "interrupted by a new load request"). The first hover on every card did nothing. The play()
+    // promise is how the browser and Mux say a play did not happen; while the hover lasts, ask again: a `play()`
+    // on a loading element waits until it can play. A hover-out's own pause ends the hover, so it is never retried.
+    const attempt = (retriesLeft: number) => {
+      const played = hasUserInteracted()
+        ? playWithSound(element, hostMutedRef.current, wanted)
+        : playMuted(element, wanted);
+      void played.then(outcome => {
+        if (outcome === 'interrupted' && hovered && element.paused !== false && retriesLeft > 0)
+          attempt(retriesLeft - 1);
+      });
+    };
+    attempt(INTERRUPTED_PLAY_RETRIES);
+    if (hasUserInteracted()) return;
+    // No gesture on the page yet, so sound would be refused: it started muted with no
+    // refusal to wait for, and the sound turns on the moment the first gesture lands.
     const onFirstGesture = () => {
       if (!hovered) return;
       onLiveElement(() => {

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 && (