@flamingo-stack/openframe-frontend-core 0.0.734 → 0.0.735

package/dist/{knowledge-NRLHSCC5.cjs → knowledge-FO3TPLFO.cjs}

@@ -8,23 +8,23 @@ var _chunkII4QMH26cjs = require('./chunk-II4QMH26.cjs');
 var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
-var _chunk4V672TEIcjs = require('./chunk-4V672TEI.cjs');
+var _chunk36CCUJOEcjs = require('./chunk-36CCUJOE.cjs');
 require('./chunk-ZJNYWNCB.cjs');
 require('./chunk-3HPB4H4C.cjs');
 require('./chunk-L4ZNR5V7.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-BP6R5WDW.cjs');
+require('./chunk-VA7OMDZO.cjs');
 require('./chunk-AAFW4STC.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
 require('./chunk-OXJ57643.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-EMBH2EJO.cjs');
+require('./chunk-F7STMHT7.cjs');
 
 
-var _chunkHAWQA5FIcjs = require('./chunk-HAWQA5FI.cjs');
+var _chunkJDXQ6T5Pcjs = require('./chunk-JDXQ6T5P.cjs');
 require('./chunk-ZRYKDN2J.cjs');
 require('./chunk-HZJRERJW.cjs');
 require('./chunk-DUXLZPMJ.cjs');
@@ -1825,8 +1825,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-TLQQP2EL.cjs');
-require('./chunk-DHIISS4W.cjs');
+require('./chunk-SHQZN5LF.cjs');
+require('./chunk-RH3AKULV.cjs');
 require('./chunk-FCGLSWKR.cjs');
 require('./chunk-YADG5Q7C.cjs');
 require('./chunk-MYBTNOS6.cjs');
@@ -1905,10 +1905,10 @@ function KnowledgeScreen(_props) {
   const cast = _chunkII4QMH26cjs.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, 
-    _chunk4V672TEIcjs.KnowledgeBaseArticleView,
+    _chunk36CCUJOEcjs.KnowledgeBaseArticleView,
     {
       ...fixture.article,
-      content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHAWQA5FIcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })
+      content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDXQ6T5Pcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })
     }
   ) });
 }

package/dist/{logs-BR6SLYAF.cjs → logs-Y4WQB2YR.cjs}

@@ -16,13 +16,13 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunk4V672TEIcjs = require('./chunk-4V672TEI.cjs');
+var _chunk36CCUJOEcjs = require('./chunk-36CCUJOE.cjs');
 require('./chunk-ZJNYWNCB.cjs');
 require('./chunk-3HPB4H4C.cjs');
 require('./chunk-L4ZNR5V7.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-BP6R5WDW.cjs');
+require('./chunk-VA7OMDZO.cjs');
 require('./chunk-AAFW4STC.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
@@ -31,8 +31,8 @@ require('./chunk-OXJ57643.cjs');
 require('./chunk-YUMFVQIN.cjs');
 
 
-var _chunkEMBH2EJOcjs = require('./chunk-EMBH2EJO.cjs');
-require('./chunk-HAWQA5FI.cjs');
+var _chunkF7STMHT7cjs = require('./chunk-F7STMHT7.cjs');
+require('./chunk-JDXQ6T5P.cjs');
 require('./chunk-ZRYKDN2J.cjs');
 require('./chunk-HZJRERJW.cjs');
 require('./chunk-DUXLZPMJ.cjs');
@@ -1833,8 +1833,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-TLQQP2EL.cjs');
-require('./chunk-DHIISS4W.cjs');
+require('./chunk-SHQZN5LF.cjs');
+require('./chunk-RH3AKULV.cjs');
 require('./chunk-FCGLSWKR.cjs');
 require('./chunk-YADG5Q7C.cjs');
 require('./chunk-MYBTNOS6.cjs');
@@ -1886,7 +1886,7 @@ function entry(logId, minutesAgo, severity, toolType, device2, summary) {
     id: logId,
     logId,
     timestamp: displayTime(_chunkKHXZFLINcjs.demoMinutesAgo.call(void 0, minutesAgo)),
-    status: { label: severity, variant: _chunk4V672TEIcjs.logSeverityVariant.call(void 0, severity) },
+    status: { label: severity, variant: _chunk36CCUJOEcjs.logSeverityVariant.call(void 0, severity) },
     source: { name: toolType, toolType },
     device: device2,
     description: { title: summary }
@@ -1958,13 +1958,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, _chunk4V672TEIcjs.LogCopyIconButton, {});
+var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk36CCUJOEcjs.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, 
-      _chunk4V672TEIcjs.LogsPageView,
+      _chunk36CCUJOEcjs.LogsPageView,
       {
         showHeader: false,
         className: "p-[var(--spacing-system-l)]",
@@ -1972,7 +1972,7 @@ function LogsScreen({ compact = false }) {
         onSearchChange: noop,
         onOpenFilters: noop,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk4V672TEIcjs.LogsTableView,
+          _chunk36CCUJOEcjs.LogsTableView,
           {
             logs: LOGS_FIXTURE_ENTRIES,
             facets: LOGS_FIXTURE_FACETS,
@@ -1986,8 +1986,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, _chunk4V672TEIcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk4V672TEIcjs.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, _chunk36CCUJOEcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunk36CCUJOEcjs.LogDrawer,
       {
         docked: true,
         isOpen: true,
@@ -1999,12 +1999,12 @@ function LogsScreen({ compact = false }) {
           { label: "Log ID", value: selected.logId },
           {
             label: "Source",
-            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4V672TEIcjs.ToolBadge, { toolType: _chunkEMBH2EJOcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
+            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk36CCUJOEcjs.ToolBadge, { toolType: _chunkF7STMHT7cjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
           },
-          { label: "Device", value: _chunk4V672TEIcjs.logSourceLabels.call(void 0, selected.device).deviceName }
+          { label: "Device", value: _chunk36CCUJOEcjs.logSourceLabels.call(void 0, selected.device).deviceName }
         ],
         deviceCard: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk4V672TEIcjs.DeviceCard,
+          _chunk36CCUJOEcjs.DeviceCard,
           {
             ...LOGS_FIXTURE_DEVICE,
             actions: {

package/dist/{policies-MQRXBYG2.cjs → policies-D6VY2ODF.cjs}

@@ -10,21 +10,21 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunk4V672TEIcjs = require('./chunk-4V672TEI.cjs');
+var _chunk36CCUJOEcjs = require('./chunk-36CCUJOE.cjs');
 require('./chunk-ZJNYWNCB.cjs');
 require('./chunk-3HPB4H4C.cjs');
 require('./chunk-L4ZNR5V7.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-BP6R5WDW.cjs');
+require('./chunk-VA7OMDZO.cjs');
 require('./chunk-AAFW4STC.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
 require('./chunk-OXJ57643.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-EMBH2EJO.cjs');
-require('./chunk-HAWQA5FI.cjs');
+require('./chunk-F7STMHT7.cjs');
+require('./chunk-JDXQ6T5P.cjs');
 require('./chunk-ZRYKDN2J.cjs');
 require('./chunk-HZJRERJW.cjs');
 require('./chunk-DUXLZPMJ.cjs');
@@ -1825,8 +1825,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-TLQQP2EL.cjs');
-require('./chunk-DHIISS4W.cjs');
+require('./chunk-SHQZN5LF.cjs');
+require('./chunk-RH3AKULV.cjs');
 require('./chunk-FCGLSWKR.cjs');
 require('./chunk-YADG5Q7C.cjs');
 require('./chunk-MYBTNOS6.cjs');
@@ -1891,14 +1891,14 @@ var POLICIES = [
   policy("policy-local-admins", "No local admins", "No everyday account is a local administrator.", false, 0)
 ];
 var POLICIES_FIXTURE = {
-  summary: _chunk4V672TEIcjs.computePolicySummary.call(void 0, POLICIES),
+  summary: _chunk36CCUJOEcjs.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: _chunk4V672TEIcjs.getPolicyTableStatus.call(void 0, item),
+    status: _chunk36CCUJOEcjs.getPolicyTableStatus.call(void 0, item),
     actions: [
       { label: "Policy Details", onClick: noop },
       { label: "Delete Policy", onClick: noop }
@@ -1912,16 +1912,16 @@ var POLICIES_FIXTURE = {
 var _jsxruntime = require('react/jsx-runtime');
 function PoliciesScreen({ compact = false }) {
   const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk4V672TEIcjs.PoliciesTable,
+    _chunk36CCUJOEcjs.PoliciesTable,
     {
       rows: POLICIES_FIXTURE.rows,
       rowAsLink: true,
-      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4V672TEIcjs.DataTable.RowCount, {}),
+      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk36CCUJOEcjs.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, _chunk4V672TEIcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk36CCUJOEcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
     table
   ] });
 }

package/dist/{software-update-RUGIQP7N.cjs → software-update-7XN6U7HC.cjs}

@@ -15,7 +15,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunk4V672TEIcjs = require('./chunk-4V672TEI.cjs');
+var _chunk36CCUJOEcjs = require('./chunk-36CCUJOE.cjs');
 require('./chunk-ZJNYWNCB.cjs');
 require('./chunk-3HPB4H4C.cjs');
 
@@ -23,15 +23,15 @@ require('./chunk-3HPB4H4C.cjs');
 var _chunkL4ZNR5V7cjs = require('./chunk-L4ZNR5V7.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-BP6R5WDW.cjs');
+require('./chunk-VA7OMDZO.cjs');
 require('./chunk-AAFW4STC.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
 require('./chunk-OXJ57643.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-EMBH2EJO.cjs');
-require('./chunk-HAWQA5FI.cjs');
+require('./chunk-F7STMHT7.cjs');
+require('./chunk-JDXQ6T5P.cjs');
 require('./chunk-ZRYKDN2J.cjs');
 require('./chunk-HZJRERJW.cjs');
 require('./chunk-DUXLZPMJ.cjs');
@@ -1832,8 +1832,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-TLQQP2EL.cjs');
-require('./chunk-DHIISS4W.cjs');
+require('./chunk-SHQZN5LF.cjs');
+require('./chunk-RH3AKULV.cjs');
 require('./chunk-FCGLSWKR.cjs');
 require('./chunk-YADG5Q7C.cjs');
 require('./chunk-MYBTNOS6.cjs');
@@ -1926,12 +1926,12 @@ function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkL4ZNR5V7cjs.Autocomplete,
     {
-      label: _chunk4V672TEIcjs.PACKAGE_SEARCH_LABEL,
+      label: _chunk36CCUJOEcjs.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: _chunk4V672TEIcjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunk36CCUJOEcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -1945,7 +1945,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, 
-    _chunk4V672TEIcjs.SoftwareActionForm,
+    _chunk36CCUJOEcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -1957,7 +1957,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk4V672TEIcjs.DeviceSelector,
+        _chunk36CCUJOEcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/package.json

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

package/src/components/chat/entity-cards/program-card.tsx

@@ -83,8 +83,8 @@ const EDITORIAL_META_ROW =
 const EDITORIAL_PERSON_ROW = 'flex h-8 min-w-0 items-center gap-[var(--spacing-system-s)]';
 
 // The default card's boxes, shared by the card and its skeleton: a large SQUARE cover
-// (the picture fills it), a display title, the date and meta row (stacked on a phone,
-// one line from md), a three-line description, a tag row, the gallery and the action,
+// (the picture fills it), a two-line display title, the date and meta row (stacked up to
+// lg, where the text column is wide enough for one line), a three-line description, a tag row, the gallery and the action,
 // so a card is one height whatever its copy and cover.
 const DEFAULT_BODY =
   'flex flex-col gap-[var(--spacing-system-lf)] p-[var(--spacing-system-lf)] md:p-[var(--spacing-system-xlf)]';
@@ -92,9 +92,9 @@ const DEFAULT_HEADER = 'flex flex-col gap-[var(--spacing-system-lf)] md:flex-row
 const DEFAULT_COVER_FRAME =
   'relative aspect-square w-full flex-shrink-0 overflow-hidden rounded-lg md:w-[240px] lg:w-[320px] xl:w-[400px]';
 const DEFAULT_TEXT = 'flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-mf)]';
-const DEFAULT_TITLE = 'line-clamp-2 text-ods-text-primary text-h1';
+const DEFAULT_TITLE = 'line-clamp-2 min-h-[2lh] text-ods-text-primary text-h1';
 const DEFAULT_META_ROW =
-  'flex min-h-[calc(2lh+0.5rem)] flex-col gap-2 text-h4 md:min-h-[1lh] md:flex-row md:items-center md:gap-4';
+  'flex min-h-[calc(2lh+0.5rem)] flex-col gap-2 text-h4 lg:min-h-[1lh] lg:flex-row lg:items-center lg:gap-4';
 const DEFAULT_DESCRIPTION = 'line-clamp-3 min-h-[3lh] text-ods-text-secondary text-h4';
 const DEFAULT_TAG_ROW = 'flex flex-wrap gap-[var(--spacing-system-xsf)]';
 const DEFAULT_GALLERY_ROW = 'flex gap-[var(--spacing-system-mf)]';
@@ -177,7 +177,7 @@ export function ProgramCardSkeleton({
         <div className={`${DEFAULT_COVER_FRAME} bg-ods-border`} />
         <div className={DEFAULT_TEXT}>
           <div className={DEFAULT_TITLE}>
-            <span className="block h-[1lh] w-3/4 rounded bg-ods-border" />
+            <span className="block h-[2lh] w-3/4 rounded bg-ods-border" />
           </div>
           <div className={DEFAULT_META_ROW}>
             <span className="block h-[1lh] w-32 rounded bg-ods-border" />
@@ -202,7 +202,8 @@ export function ProgramCardSkeleton({
         </div>
       )}
       <div className={DEFAULT_FOOTER}>
-        <div className="h-10 w-40 rounded bg-ods-border" />
+        {/* The action button's own height (44px, 48px from md). */}
+        <div className="h-11 w-40 rounded bg-ods-border md:h-12" />
       </div>
     </div>
   );
@@ -632,13 +633,13 @@ export function ProgramCard<T extends BaseProgramItem>({
           <span style={{ color: accentColor }}>{dateLabel}</span>
           {renderMeta ? (
             <>
-              <span className="hidden text-ods-text-secondary md:inline">•</span>
+              <span className="hidden text-ods-text-secondary lg:inline">•</span>
               {renderMeta(item)}
             </>
           ) : (
             defaultRenderMeta() && (
               <>
-                <span className="hidden text-ods-text-secondary md:inline">•</span>
+                <span className="hidden text-ods-text-secondary lg:inline">•</span>
                 <div className="flex items-center gap-2">{defaultRenderMeta()}</div>
               </>
             )

package/src/components/features/cards-strip.tsx

@@ -259,8 +259,17 @@ function ManagedCell({
   const cloneRef = useSuppressCloneFocus(ctx.isClone);
   return (
     <div
-      className="shrink-0 self-stretch"
-      style={{ width: ctx.isMobile ? cardWidthMobile : desktopWidth, maxWidth: STRIP_CELL_MAX_WIDTH }}
+      // The width is CSS's (the engine's own 767px line), never a script's: the
+      // first paint is the cell's final width, so a phone's strip never resizes
+      // when the page hydrates.
+      className="w-[var(--strip-cell-mobile)] shrink-0 self-stretch min-[768px]:w-[var(--strip-cell-desktop)]"
+      style={
+        {
+          '--strip-cell-mobile': `${cardWidthMobile}px`,
+          '--strip-cell-desktop': `${desktopWidth}px`,
+          maxWidth: STRIP_CELL_MAX_WIDTH,
+        } as React.CSSProperties
+      }
       data-strip-card-key={ctx.cardKey}
       onPointerEnter={ctx.isTouch ? undefined : () => ctx.onActivate(ctx.cardKey)}
       onPointerLeave={ctx.isTouch ? undefined : () => ctx.onDeactivate(ctx.cardKey)}

package/src/components/features/video-bites-strip.tsx

@@ -147,7 +147,8 @@ export function VideoBitesStrip({
           cardKey={ctx.cardKey}
           isClone={ctx.isClone}
           isTouch={ctx.isTouch}
-          height={ctx.isMobile ? cardHeightMobile : cardHeightDesktop}
+          height={cardHeightDesktop}
+          heightMobile={cardHeightMobile}
           active={ctx.active}
           onActivate={ctx.onActivate}
           onDeactivate={ctx.onDeactivate}
@@ -178,6 +179,11 @@ export interface VideoBiteCardProps {
   /** Fixed card height (strip). Omit → width-driven: card fills its grid
    *  cell and the aspect-ratio derives the height (editor grids). */
   height?: number;
+  /** With `height`: the height under the strip's 768px line. The switch is CSS's,
+   *  so the first paint is the card's final size on a phone too. OPTIONAL and
+   *  additive: omitted, `height` applies at every width, exactly as before this
+   *  prop existed (a caller that resolves the height itself keeps working). */
+  heightMobile?: number;
   /** Controlled hover-activation (strip). Omit → the card manages its own
    *  hover/focus state. */
   active?: boolean;
@@ -211,6 +217,7 @@ export function VideoBiteCard({
   sectionHref,
   onBiteNavigate,
   height,
+  heightMobile,
   active,
   onActivate,
   onDeactivate,
@@ -356,10 +363,22 @@ export function VideoBiteCard({
 
   const media = (
     <div
-      className="relative w-full"
+      className={cn(
+        'relative w-full',
+        height !== undefined && 'h-[var(--bite-height-mobile)] min-[768px]:h-[var(--bite-height)]',
+      )}
       // Strip mode: fixed height + aspect drive the width (capped at 90vw,
       // same as the old single-box layout). Editor mode: width-driven.
-      style={{ aspectRatio: cssAspect, ...(height !== undefined ? { height, maxWidth: STRIP_CELL_MAX_WIDTH } : {}) }}
+      style={{
+        aspectRatio: cssAspect,
+        ...(height !== undefined
+          ? {
+              '--bite-height': `${height}px`,
+              '--bite-height-mobile': `${heightMobile ?? height}px`,
+              maxWidth: STRIP_CELL_MAX_WIDTH,
+            }
+          : {}),
+      }}
     >
       {/* THE shared hover-preview media zone (poster → facade → badge →
           controlled hover playback + near-viewport mount gate). The bite strip

package/src/components/ui/fade-preview.tsx

@@ -56,7 +56,9 @@ export interface FadePreviewProps {
    * MEASURED to the bottom of item N (at every width). Implies `fixedHeight`, so
    * the block keeps that height loading or loaded, and "Show N more" counts the
    * items past N unless `hiddenCount` says otherwise. Until the list holds N
-   * items, `collapsedHeight` (or the height last measured) is kept.
+   * items, `collapsedHeight` (or the height last measured) is kept. The first
+   * paint (before any measure) is held for N up to 12; add rows to
+   * `UNMEASURED_ITEMS_CLASSES` for a longer preview.
    */
   visibleItems?: number;
   /**
@@ -80,6 +82,32 @@ const FILL_CLASSES: Record<string, string> = {
   lg: 'lg:absolute lg:inset-0',
 };
 
+/**
+ * Item mode before the first measure (the server's markup, and the page until it
+ * hydrates): the items past the first N are hidden by CSS, so the block is its
+ * collapsed height in the very first paint. Without it the whole list showed and
+ * the measure then cut it, which moved everything under it. Spelled out per N
+ * (Tailwind only emits classes it can read, and a `<style>` element is not
+ * allowed here: each rewrite relayouts the document), so it covers N up to
+ * `FADE_PREVIEW_MAX_UNMEASURED_ITEMS`; a larger N is clipped at the measure, as before.
+ */
+const UNMEASURED_ITEMS_CLASSES: Record<number, string> = {
+  1: '[&>*>*:nth-child(n+2)]:hidden',
+  2: '[&>*>*:nth-child(n+3)]:hidden',
+  3: '[&>*>*:nth-child(n+4)]:hidden',
+  4: '[&>*>*:nth-child(n+5)]:hidden',
+  5: '[&>*>*:nth-child(n+6)]:hidden',
+  6: '[&>*>*:nth-child(n+7)]:hidden',
+  7: '[&>*>*:nth-child(n+8)]:hidden',
+  8: '[&>*>*:nth-child(n+9)]:hidden',
+  9: '[&>*>*:nth-child(n+10)]:hidden',
+  10: '[&>*>*:nth-child(n+11)]:hidden',
+  11: '[&>*>*:nth-child(n+12)]:hidden',
+  12: '[&>*>*:nth-child(n+13)]:hidden',
+};
+/** The largest `visibleItems` the first paint is held for (the table above). */
+export const FADE_PREVIEW_MAX_UNMEASURED_ITEMS = 12;
+
 const cssLength = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);
 
 export function FadePreview({
@@ -198,6 +226,7 @@ export function FadePreview({
         className={cn(
           'overflow-hidden transition-[max-height,height] duration-500',
           fill && FILL_CLASSES[String(fill)],
+          itemMode && itemsHeight == null && !expanded && UNMEASURED_ITEMS_CLASSES[visible],
         )}
         style={{
           transitionTimingFunction: 'cubic-bezier(0.33, 1, 0.68, 1)',

package/src/components/ui/index.ts

@@ -64,6 +64,7 @@ export * from './alert';
 export * from './badge';
 export * from './ai-generated-badge';
 export * from './fade-preview';
+export * from './layout-hold';
 export * from './progress';
 export * from './release-changelog-section';
 export * from './stacked-rows-panel';

package/src/components/ui/layout-hold.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+
+/**
+ * Holding a layout while its content is read, the two ways that are right at
+ * EVERY width. A placeholder of a guessed size (a `w-40` bar, a `h-[120px]`
+ * box) is only right at the widths it was tuned at: text wraps where the words
+ * make it wrap, so the placeholder has to be made of the words, or of the real
+ * layout, to wrap where the content will.
+ *
+ * - `TextHold`: an inline stand-in exactly as wide as the words it is given
+ *   (same font, same letter spacing, because it IS those words, not shown).
+ *   `bar` draws it as a pulsing grey bar; `blank` only keeps its space.
+ * - `LayoutHold`: a block as tall as the real layout rendered inside it, kept
+ *   invisible and inert: the layout's own height, at any width.
+ *
+ * Neither is shown or read out; both are removed for assistive technology.
+ */
+export interface TextHoldProps {
+  /** The words whose width is held (the content's own, or a stand-in of its length). */
+  children: ReactNode;
+  /** `bar`: a pulsing grey bar of that width. `blank`: the width only. */
+  variant?: 'bar' | 'blank';
+  className?: string;
+}
+
+export function TextHold({ children, variant = 'bar', className }: TextHoldProps) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        variant === 'bar' ? 'animate-pulse rounded bg-ods-border text-transparent' : 'invisible',
+        // A hold is never selectable or clickable, whatever it wraps.
+        'pointer-events-none select-none',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export interface LayoutHoldProps {
+  /** The real layout, rendered with the data at hand. */
+  children: ReactNode;
+  className?: string;
+}
+
+export function LayoutHold({ children, className }: LayoutHoldProps) {
+  return (
+    <div aria-hidden inert className={cn('invisible', className)}>
+      {children}
+    </div>
+  );
+}

package/src/components/ui/snap-carousel.tsx

@@ -3,6 +3,7 @@
 import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useAutoplay } from '../../hooks/ui/use-autoplay';
 import { useInView } from '../../hooks/ui/use-in-view';
+import { useResumableTimeout } from '../../hooks/ui/use-resumable-timeout';
 import { cn } from '../../utils/cn';
 import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-icon';
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
@@ -39,20 +40,31 @@ export interface SnapCarouselProps<T> {
 const GAP_PX = 12;
 
 /**
- * The active dot filling up while the carousel waits to advance. A transition,
- * not a keyframe animation: it mounts empty and is told to be full one frame
- * later, taking the whole interval to get there.
+ * The active dot's fill: how much of the slide's wait has been run. It starts
+ * from where the wait stands (`ranMs`, nothing for a new slide) and runs to
+ * full over what is LEFT of it. While the carousel is not advancing it stands
+ * still at that point; it never empties because the carousel left the screen.
  */
-function DotFill({ durationMs }: { durationMs: number }) {
-  const [full, setFull] = useState(false);
+function DotFill({ durationMs, ranMs, running }: { durationMs: number; ranMs: number; running: boolean }) {
+  // One frame at the starting point, so the browser has it to run from.
+  const [going, setGoing] = useState(false);
   useEffect(() => {
-    const frame = requestAnimationFrame(() => setFull(true));
-    return () => cancelAnimationFrame(frame);
-  }, []);
+    if (!running) return undefined;
+    const frame = requestAnimationFrame(() => setGoing(true));
+    return () => {
+      cancelAnimationFrame(frame);
+      setGoing(false);
+    };
+  }, [running]);
+  const moving = running && going;
   return (
     <span
-      className="absolute inset-0 origin-left bg-ods-text-primary transition-transform ease-linear"
-      style={{ transform: full ? 'scaleX(1)' : 'scaleX(0)', transitionDuration: `${durationMs}ms` }}
+      className="absolute inset-0 origin-left bg-ods-text-primary ease-linear"
+      style={{
+        transform: `scaleX(${moving ? 1 : durationMs > 0 ? ranMs / durationMs : 0})`,
+        transitionProperty: moving ? 'transform' : 'none',
+        transitionDuration: `${Math.max(0, durationMs - ranMs)}ms`,
+      }}
     />
   );
 }
@@ -122,12 +134,15 @@ export function SnapCarousel<T>({
   const canAutoAdvance = autoAdvanceMs > 0 && count > 1;
   const playing = auto.playing && canAutoAdvance;
 
-  // Restarts on every slide change, so a swipe or an arrow is followed by a full interval.
-  useEffect(() => {
-    if (!playing) return undefined;
-    const timer = setTimeout(() => goTo(index >= count - 1 ? 0 : index + 1), autoAdvanceMs);
-    return () => clearTimeout(timer);
-  }, [playing, index, count, autoAdvanceMs, goTo]);
+  // A new slide starts a whole interval (a swipe or an arrow is followed by a
+  // full one); an interruption (off screen, a hold, another tab) only pauses it.
+  const ranMs = useResumableTimeout({
+    running: playing,
+    durationMs: autoAdvanceMs,
+    resetKey: index,
+    onElapsed: () => goTo(index >= count - 1 ? 0 : index + 1),
+  });
+  const showsWait = canAutoAdvance && !auto.reducedMotion;
 
   const setRefs = useCallback(
     (node: HTMLDivElement | null) => {
@@ -172,12 +187,13 @@ export function SnapCarousel<T>({
               className={cn(
                 'relative h-1.5 overflow-hidden rounded-full transition-[width] duration-200 motion-reduce:transition-none',
                 dotIndex === index ? 'w-6' : 'w-1.5',
-                dotIndex === index && !playing ? 'bg-ods-text-primary' : 'bg-ods-border',
+                // A carousel that never advances by itself marks its slide with a whole dot.
+                dotIndex === index && !showsWait ? 'bg-ods-text-primary' : 'bg-ods-border',
               )}
             >
-              {dotIndex === index && playing && (
-                // Re-keyed per slide so the fill restarts from empty.
-                <DotFill key={index} durationMs={autoAdvanceMs} />
+              {dotIndex === index && showsWait && (
+                // Re-keyed per slide so a NEW slide starts from empty; a pause keeps its place.
+                <DotFill key={index} durationMs={autoAdvanceMs} ranMs={ranMs} running={playing} />
               )}
             </span>
           ))}