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

package/dist/{knowledge-DPUMWQED.cjs → knowledge-SAK3ZGCO.cjs}

@@ -8,7 +8,7 @@ var _chunkSTEJZPIOcjs = require('./chunk-STEJZPIO.cjs');
 var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
-var _chunk4JZC624Scjs = require('./chunk-4JZC624S.cjs');
+var _chunkXN6LXMH5cjs = require('./chunk-XN6LXMH5.cjs');
 require('./chunk-LJT2KRE2.cjs');
 require('./chunk-RB7VLVMD.cjs');
 require('./chunk-V3W56L2D.cjs');
@@ -19,12 +19,12 @@ require('./chunk-2JRSYWFP.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-TOPGBOCN.cjs');
+require('./chunk-LNCBN4BL.cjs');
 require('./chunk-C42WIUH6.cjs');
-require('./chunk-BTVO676B.cjs');
+require('./chunk-NWZSYG4S.cjs');
 
 
-var _chunkKWZ62LPZcjs = require('./chunk-KWZ62LPZ.cjs');
+var _chunkKM2TVQCHcjs = require('./chunk-KM2TVQCH.cjs');
 require('./chunk-EHJE3UWZ.cjs');
 require('./chunk-KKAY6GPU.cjs');
 require('./chunk-5QP3K2CE.cjs');
@@ -1825,8 +1825,8 @@ 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-OJLZ7PGO.cjs');
+require('./chunk-MYHS4W2H.cjs');
 require('./chunk-R3JX4MXD.cjs');
 require('./chunk-SETFUCZA.cjs');
 require('./chunk-VFUMM6JC.cjs');
@@ -1903,10 +1903,10 @@ function KnowledgeScreen(_props) {
   const cast = _chunkSTEJZPIOcjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => buildKnowledgeFixture(cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk4JZC624Scjs.KnowledgeBaseArticleView,
+    _chunkXN6LXMH5cjs.KnowledgeBaseArticleView,
     {
       ...fixture.article,
-      content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKWZ62LPZcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })
+      content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKM2TVQCHcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })
     }
   ) });
 }

package/dist/{logs-EE25MWYM.cjs → logs-CYBGMFA5.cjs}

@@ -16,7 +16,7 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunk4JZC624Scjs = require('./chunk-4JZC624S.cjs');
+var _chunkXN6LXMH5cjs = require('./chunk-XN6LXMH5.cjs');
 require('./chunk-LJT2KRE2.cjs');
 require('./chunk-RB7VLVMD.cjs');
 require('./chunk-V3W56L2D.cjs');
@@ -27,12 +27,12 @@ require('./chunk-2JRSYWFP.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-TOPGBOCN.cjs');
+require('./chunk-LNCBN4BL.cjs');
 require('./chunk-C42WIUH6.cjs');
 
 
-var _chunkBTVO676Bcjs = require('./chunk-BTVO676B.cjs');
-require('./chunk-KWZ62LPZ.cjs');
+var _chunkNWZSYG4Scjs = require('./chunk-NWZSYG4S.cjs');
+require('./chunk-KM2TVQCH.cjs');
 require('./chunk-EHJE3UWZ.cjs');
 require('./chunk-KKAY6GPU.cjs');
 require('./chunk-5QP3K2CE.cjs');
@@ -1833,8 +1833,8 @@ 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-OJLZ7PGO.cjs');
+require('./chunk-MYHS4W2H.cjs');
 require('./chunk-R3JX4MXD.cjs');
 require('./chunk-SETFUCZA.cjs');
 require('./chunk-VFUMM6JC.cjs');
@@ -1884,7 +1884,7 @@ function entry(logId, minutesAgo, severity, toolType, device2, summary) {
     id: logId,
     logId,
     timestamp: displayTime(_chunkDKOLQPE7cjs.demoMinutesAgo.call(void 0, minutesAgo)),
-    status: { label: severity, variant: _chunk4JZC624Scjs.logSeverityVariant.call(void 0, severity) },
+    status: { label: severity, variant: _chunkXN6LXMH5cjs.logSeverityVariant.call(void 0, severity) },
     source: { name: toolType, toolType },
     device: device2,
     description: { title: summary }
@@ -1956,13 +1956,13 @@ var NO_FILTERS = {};
 var ACTION_COLUMNS = ["copy", "quickView", "open"];
 var BESIDE_DRAWER_HIDDEN = [...ACTION_COLUMNS, "tool", "source"];
 var logHref = () => "#";
-var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4JZC624Scjs.LogCopyIconButton, {});
+var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXN6LXMH5cjs.LogCopyIconButton, {});
 function LogsScreen({ compact = false }) {
   const [dock, setDock] = _react.useState.call(void 0, null);
   const selected = LOGS_FIXTURE_SELECTED;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk4JZC624Scjs.LogsPageView,
+      _chunkXN6LXMH5cjs.LogsPageView,
       {
         showHeader: false,
         className: "p-[var(--spacing-system-l)]",
@@ -1970,7 +1970,7 @@ function LogsScreen({ compact = false }) {
         onSearchChange: noop,
         onOpenFilters: noop,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk4JZC624Scjs.LogsTableView,
+          _chunkXN6LXMH5cjs.LogsTableView,
           {
             logs: LOGS_FIXTURE_ENTRIES,
             facets: LOGS_FIXTURE_FACETS,
@@ -1984,8 +1984,8 @@ function LogsScreen({ compact = false }) {
         )
       }
     ) }),
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4JZC624Scjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk4JZC624Scjs.LogDrawer,
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXN6LXMH5cjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkXN6LXMH5cjs.LogDrawer,
       {
         docked: true,
         isOpen: true,
@@ -1997,12 +1997,12 @@ function LogsScreen({ compact = false }) {
           { label: "Log ID", value: selected.logId },
           {
             label: "Source",
-            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4JZC624Scjs.ToolBadge, { toolType: _chunkBTVO676Bcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
+            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXN6LXMH5cjs.ToolBadge, { toolType: _chunkNWZSYG4Scjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
           },
-          { label: "Device", value: _chunk4JZC624Scjs.logSourceLabels.call(void 0, selected.device).deviceName }
+          { label: "Device", value: _chunkXN6LXMH5cjs.logSourceLabels.call(void 0, selected.device).deviceName }
         ],
         deviceCard: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk4JZC624Scjs.DeviceCard,
+          _chunkXN6LXMH5cjs.DeviceCard,
           {
             ...LOGS_FIXTURE_DEVICE,
             actions: {

package/dist/{policies-H5LPZWEM.cjs → policies-XXDOICWF.cjs}

@@ -10,7 +10,7 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunk4JZC624Scjs = require('./chunk-4JZC624S.cjs');
+var _chunkXN6LXMH5cjs = require('./chunk-XN6LXMH5.cjs');
 require('./chunk-LJT2KRE2.cjs');
 require('./chunk-RB7VLVMD.cjs');
 require('./chunk-V3W56L2D.cjs');
@@ -21,10 +21,10 @@ require('./chunk-2JRSYWFP.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-TOPGBOCN.cjs');
+require('./chunk-LNCBN4BL.cjs');
 require('./chunk-C42WIUH6.cjs');
-require('./chunk-BTVO676B.cjs');
-require('./chunk-KWZ62LPZ.cjs');
+require('./chunk-NWZSYG4S.cjs');
+require('./chunk-KM2TVQCH.cjs');
 require('./chunk-EHJE3UWZ.cjs');
 require('./chunk-KKAY6GPU.cjs');
 require('./chunk-5QP3K2CE.cjs');
@@ -1825,8 +1825,8 @@ 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-OJLZ7PGO.cjs');
+require('./chunk-MYHS4W2H.cjs');
 require('./chunk-R3JX4MXD.cjs');
 require('./chunk-SETFUCZA.cjs');
 require('./chunk-VFUMM6JC.cjs');
@@ -1889,14 +1889,14 @@ var POLICIES = [
   policy("policy-local-admins", "No local admins", "No everyday account is a local administrator.", false, 0)
 ];
 var POLICIES_FIXTURE = {
-  summary: _chunk4JZC624Scjs.computePolicySummary.call(void 0, POLICIES),
+  summary: _chunkXN6LXMH5cjs.computePolicySummary.call(void 0, POLICIES),
   rows: POLICIES.map((item) => ({
     id: item.id,
     name: item.name,
     description: item.description,
     critical: item.critical,
     severityLabel: item.critical ? "Critical" : "Low",
-    status: _chunk4JZC624Scjs.getPolicyTableStatus.call(void 0, item),
+    status: _chunkXN6LXMH5cjs.getPolicyTableStatus.call(void 0, item),
     actions: [
       { label: "Policy Details", onClick: noop },
       { label: "Delete Policy", onClick: noop }
@@ -1910,16 +1910,16 @@ var POLICIES_FIXTURE = {
 var _jsxruntime = require('react/jsx-runtime');
 function PoliciesScreen({ compact = false }) {
   const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk4JZC624Scjs.PoliciesTable,
+    _chunkXN6LXMH5cjs.PoliciesTable,
     {
       rows: POLICIES_FIXTURE.rows,
       rowAsLink: true,
-      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4JZC624Scjs.DataTable.RowCount, {}),
+      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXN6LXMH5cjs.DataTable.RowCount, {}),
       emptyMessage: "No policies found."
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]", children: [
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4JZC624Scjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXN6LXMH5cjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
     table
   ] });
 }

package/dist/{scripts-YGO4LOES.cjs → scripts-C5T2AQPA.cjs}

@@ -13,7 +13,7 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunk4JZC624Scjs = require('./chunk-4JZC624S.cjs');
+var _chunkXN6LXMH5cjs = require('./chunk-XN6LXMH5.cjs');
 require('./chunk-LJT2KRE2.cjs');
 require('./chunk-RB7VLVMD.cjs');
 
@@ -26,10 +26,10 @@ require('./chunk-2JRSYWFP.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-TOPGBOCN.cjs');
+require('./chunk-LNCBN4BL.cjs');
 require('./chunk-C42WIUH6.cjs');
-require('./chunk-BTVO676B.cjs');
-require('./chunk-KWZ62LPZ.cjs');
+require('./chunk-NWZSYG4S.cjs');
+require('./chunk-KM2TVQCH.cjs');
 require('./chunk-EHJE3UWZ.cjs');
 require('./chunk-KKAY6GPU.cjs');
 require('./chunk-5QP3K2CE.cjs');
@@ -1832,8 +1832,8 @@ 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-OJLZ7PGO.cjs');
+require('./chunk-MYHS4W2H.cjs');
 require('./chunk-R3JX4MXD.cjs');
 require('./chunk-SETFUCZA.cjs');
 require('./chunk-VFUMM6JC.cjs');
@@ -1993,8 +1993,8 @@ function buildScriptsFixture(cast) {
 var _jsxruntime = require('react/jsx-runtime');
 var WIDE_HIDDEN_COLUMNS = ["result", "open"];
 var COMPACT_COLUMNS = [
-  { ..._chunk4JZC624Scjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
-  _chunk4JZC624Scjs.EXECUTION_COLUMNS.status
+  { ..._chunkXN6LXMH5cjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
+  _chunkXN6LXMH5cjs.EXECUTION_COLUMNS.status
 ];
 var COMPACT_ROWS = 4;
 var TOKEN_CLASS = {
@@ -2053,7 +2053,7 @@ function ScriptCodePicture({ script }) {
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center justify-between gap-[var(--spacing-system-m)]", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkV3W56L2Dcjs.TruncateText, { variant: "h6", tone: "secondary", children: `Written by ${provenance.author} \xB7 approved by ${provenance.approver}` }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunk4JZC624Scjs.ScriptShellBadge,
+              _chunkXN6LXMH5cjs.ScriptShellBadge,
               {
                 value: script.shellType,
                 className: "shrink-0 text-ods-text-secondary text-h6",
@@ -2077,7 +2077,7 @@ function ScriptsScreen({ compact = false }) {
     return (
       // Four runs of the card's row height fill the frame; the padding is what is left round them.
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full overflow-hidden bg-ods-bg p-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk4JZC624Scjs.ScriptExecutionsTable,
+        _chunkXN6LXMH5cjs.ScriptExecutionsTable,
         {
           rows: fixture.executions.slice(0, COMPACT_ROWS),
           columns: COMPACT_COLUMNS,
@@ -2087,13 +2087,13 @@ function ScriptsScreen({ compact = false }) {
       ) })
     );
   }
-  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4JZC624Scjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
+  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXN6LXMH5cjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
   return (
     // The frame's tighter padding and no header row: the output opened under a run needs the height.
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full gap-[var(--spacing-system-m)] overflow-hidden bg-ods-bg p-[var(--spacing-system-m)]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-[39%] shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScriptCodePicture, { script: fixture.script }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk4JZC624Scjs.ScriptExecutionsTable,
+        _chunkXN6LXMH5cjs.ScriptExecutionsTable,
         {
           rows: fixture.executions,
           hideColumns: WIDE_HIDDEN_COLUMNS,

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

@@ -15,7 +15,7 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunk4JZC624Scjs = require('./chunk-4JZC624S.cjs');
+var _chunkXN6LXMH5cjs = require('./chunk-XN6LXMH5.cjs');
 require('./chunk-LJT2KRE2.cjs');
 require('./chunk-RB7VLVMD.cjs');
 
@@ -28,10 +28,10 @@ require('./chunk-2JRSYWFP.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-TOPGBOCN.cjs');
+require('./chunk-LNCBN4BL.cjs');
 require('./chunk-C42WIUH6.cjs');
-require('./chunk-BTVO676B.cjs');
-require('./chunk-KWZ62LPZ.cjs');
+require('./chunk-NWZSYG4S.cjs');
+require('./chunk-KM2TVQCH.cjs');
 require('./chunk-EHJE3UWZ.cjs');
 require('./chunk-KKAY6GPU.cjs');
 require('./chunk-5QP3K2CE.cjs');
@@ -1832,8 +1832,8 @@ 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-OJLZ7PGO.cjs');
+require('./chunk-MYHS4W2H.cjs');
 require('./chunk-R3JX4MXD.cjs');
 require('./chunk-SETFUCZA.cjs');
 require('./chunk-VFUMM6JC.cjs');
@@ -1920,12 +1920,12 @@ function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkV3W56L2Dcjs.Autocomplete,
     {
-      label: _chunk4JZC624Scjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkXN6LXMH5cjs.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: _chunk4JZC624Scjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkXN6LXMH5cjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -1939,7 +1939,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, 
-    _chunk4JZC624Scjs.SoftwareActionForm,
+    _chunkXN6LXMH5cjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -1951,7 +1951,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk4JZC624Scjs.DeviceSelector,
+        _chunkXN6LXMH5cjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

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

@@ -101,6 +101,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 +118,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 +249,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(() => {

package/package.json

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

package/src/components/authors/author-detail-view.tsx

@@ -25,7 +25,7 @@
 
 import type React from 'react';
 import Image from '../../embed-shims/next-image';
-import { AVATAR_SIZE } from '../../styles/component-sizes';
+import { AVATAR_SIZE, AVATAR_SIZE_PX } from '../../styles/component-sizes';
 import type { AuthorProfile } from '../../types/entity-author';
 import { cn } from '../../utils/cn';
 import { formatBioText } from '../../utils/format';
@@ -77,7 +77,15 @@ export function AuthorDetailView({ author, proxyImageUrl, children, className }:
           ) : (
             <div className="relative h-full w-full overflow-hidden rounded-full border border-ods-border bg-ods-bg-surface">
               {proxiedAvatar ? (
-                <Image src={proxiedAvatar} alt={author.fullName} fill className="object-cover" unoptimized />
+                <Image
+                  src={proxiedAvatar}
+                  alt={author.fullName}
+                  fill
+                  // The frame's size, so a host that resizes serves a 96 px picture, not the 2500 px original.
+                  sizes={`${AVATAR_SIZE_PX.profile}px`}
+                  className="object-cover"
+                  unoptimized
+                />
               ) : (
                 <div className="flex h-full w-full items-center justify-center text-ods-text-secondary text-h2">
                   {author.fullName.charAt(0).toUpperCase()}

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/related-content/card-registry.tsx

@@ -580,6 +580,11 @@ export interface RelatedCardContext {
   anchorAttrs: Pick<CardLinkAnchorProps, 'target' | 'rel'>;
   /** Branded OG fallback for cards whose row has no featured image. */
   placeholderUrl?: string;
+  /**
+   * The rail's first card: its image is likely the page's largest paint (an author page opens on it), so a card that
+   * can rank its image fetches it at once instead of lazily.
+   */
+  priority?: boolean;
   extras?: ChatCardDispatchExtras;
 }
 
@@ -645,6 +650,7 @@ function programEntry(configKey: 'podcast' | 'webinar' | 'event'): RelatedCardRe
           href={ctx.href}
           targetPlatform={ctx.targetPlatform}
           placeholderUrl={ctx.placeholderUrl}
+          priority={ctx.priority}
           {...ctx.anchorAttrs}
         />
       );
@@ -684,6 +690,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
         href={ctx.href}
         targetPlatform={ctx.targetPlatform}
         placeholderUrl={ctx.placeholderUrl}
+        priority={ctx.priority}
         {...ctx.anchorAttrs}
       />
     ),

package/src/components/related-content/related-content-section.tsx

@@ -200,8 +200,11 @@ function CardForType({
   linkProps,
   extras,
   adminCampaignCard,
+  priority,
 }: {
   type: string;
+  /** The rail's first card: its image is fetched at once (see `RelatedCardContext.priority`). */
+  priority?: boolean;
   /** One fetched row, still unvalidated. Its shape is decided at RUNTIME by
    *  `type` (each group fetches from its own per-type list API), so it stays
    *  `unknown` right up to the registry entry for that type — which owns the
@@ -247,6 +250,7 @@ function CardForType({
     // a numeric title reached `buildOgPlaceholderUrl` as a number. `rowString`
     // makes the claim true.
     placeholderUrl: extras?.buildOgPlaceholderUrl?.(rowString(item, 'title') ?? '') ?? undefined,
+    priority,
     extras,
   });
 }
@@ -361,11 +365,14 @@ function ContentGroup({
   heading,
   onLoadingChange,
   seedRows,
+  leadsRail = false,
 }: {
   type: string;
   refs: ContentRef[];
   /** The rows of this group's FIRST page, read by the server (`initialRows`). */
   seedRows?: ReadonlyArray<unknown>;
+  /** The rail's first group: its first card's image is fetched at once. */
+  leadsRail?: boolean;
   columns: 2 | 3;
   buildUrl: (type: string, ids: string[]) => string | null;
   resolveHref: (ref: ContentRef) => { href: string | null; targetPlatform: string | null };
@@ -448,7 +455,7 @@ function ContentGroup({
   const itemById = new Map(items.map(it => [rowKey(it), it]));
 
   const cards = pageRefs
-    .map(contentRef => {
+    .map((contentRef, index) => {
       const itemId = String(contentRef.id);
       const item = itemById.get(itemId);
       if (!item) return null;
@@ -471,6 +478,8 @@ function ContentGroup({
                 linkProps={linkProps}
                 extras={extras}
                 adminCampaignCard={adminCampaignCard}
+                // The rail's first card, on its first page: the top of the rail, often the page's largest paint.
+                priority={leadsRail && page === 1 && index === 0}
               />
             )}
           </LinkProvider>
@@ -787,7 +796,7 @@ export function RelatedContentSection({
   return (
     <LoadingRegion as="section" label="Loading related content" announce={loadingTypes.size > 0} className={RAIL_CLASS}>
       <h2 className={RAIL_TITLE_CLASS}>{accentSentenceMarks(title)}</h2>
-      {orderedTypes.map(type => (
+      {orderedTypes.map((type, groupIndex) => (
         <ContentGroup
           key={type}
           type={type}
@@ -801,6 +810,7 @@ export function RelatedContentSection({
           heading={<GroupHeading type={type} />}
           onLoadingChange={onGroupLoadingChange}
           seedRows={initialRows?.[type]}
+          leadsRail={groupIndex === 0}
         />
       ))}
     </LoadingRegion>