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

package/dist/{software-update-XU5AI4TP.cjs → software-update-CCCKS4ZE.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 _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-LNCBN4BL.cjs');
+require('./chunk-WCSWWVPF.cjs');
 require('./chunk-C42WIUH6.cjs');
-require('./chunk-NWZSYG4S.cjs');
-require('./chunk-KM2TVQCH.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-OJLZ7PGO.cjs');
-require('./chunk-MYHS4W2H.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: _chunkXN6LXMH5cjs.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: _chunkXN6LXMH5cjs.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, 
-    _chunkXN6LXMH5cjs.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, 
-        _chunkXN6LXMH5cjs.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-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.777",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

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