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

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

@@ -2,7 +2,7 @@
 "use client";
 
 
-var _chunkKKAY6GPUcjs = require('./chunk-KKAY6GPU.cjs');
+var _chunkQD7SKYCQcjs = require('./chunk-QD7SKYCQ.cjs');
 
 
 var _chunkJKX2C3I2cjs = require('./chunk-JKX2C3I2.cjs');
@@ -13,7 +13,7 @@ var _chunkJKX2C3I2cjs = require('./chunk-JKX2C3I2.cjs');
 
 
 
-var _chunkSETFUCZAcjs = require('./chunk-SETFUCZA.cjs');
+var _chunkHTSRCFXPcjs = require('./chunk-HTSRCFXP.cjs');
 require('./chunk-S5C3OZCO.cjs');
 require('./chunk-4IYNDV3G.cjs');
 require('./chunk-NTPX5GXI.cjs');
@@ -24,9 +24,9 @@ require('./chunk-5GJM7VRR.cjs');
 require('./chunk-UJ7AXHRZ.cjs');
 
 
-var _chunkTF5D5MNOcjs = require('./chunk-TF5D5MNO.cjs');
+var _chunkCDBFQVPAcjs = require('./chunk-CDBFQVPA.cjs');
+require('./chunk-N6YCOBLK.cjs');
 require('./chunk-V45KLJQP.cjs');
-require('./chunk-65VVJSQZ.cjs');
 
 // src/components/features/video-file-player.tsx
 var _muxplayerreact = require('@mux/mux-player-react'); var _muxplayerreact2 = _interopRequireDefault(_muxplayerreact);
@@ -251,14 +251,14 @@ function useHoverPlayback(mediaRef, sound, { playOnHover, playWhenHovered, muted
       element.volume = SOUND_VOLUME;
     });
     const attempt = (retriesLeft) => {
-      const played = _chunkSETFUCZAcjs.hasUserInteracted.call(void 0, ) ? playWithSound(element, hostMutedRef.current, wanted) : playMuted(element, wanted);
+      const played = _chunkHTSRCFXPcjs.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;
+    if (_chunkHTSRCFXPcjs.hasUserInteracted.call(void 0, )) return;
     const onFirstGesture = () => {
       if (!hovered) return;
       onLiveElement(() => {
@@ -267,8 +267,8 @@ function useHoverPlayback(mediaRef, sound, { playOnHover, playWhenHovered, muted
       });
       endMutedFallback();
     };
-    _chunkSETFUCZAcjs.activationWaiters.add(onFirstGesture);
-    cleanups.push(() => _chunkSETFUCZAcjs.activationWaiters.delete(onFirstGesture));
+    _chunkHTSRCFXPcjs.activationWaiters.add(onFirstGesture);
+    cleanups.push(() => _chunkHTSRCFXPcjs.activationWaiters.delete(onFirstGesture));
   }, [mediaRef, hostMutedRef, playWithSound, playMuted, endMutedFallback]);
   _react.useEffect.call(void 0, () => () => _optionalChain([endHoverRef, 'access', _41 => _41.current, 'optionalCall', _42 => _42()]), []);
   const controlled = typeof playWhenHovered === "boolean";
@@ -294,7 +294,7 @@ function usePlaybackHealth(mediaRef, url, monitored) {
       if (!monitored) return;
       clearStallTimer();
       setFailed(true);
-      _chunkSETFUCZAcjs.reportPlaybackFailure.call(void 0, { kind: "file", src: url, reason });
+      _chunkHTSRCFXPcjs.reportPlaybackFailure.call(void 0, { kind: "file", src: url, reason });
     },
     [monitored, clearStallTimer, url]
   );
@@ -304,7 +304,7 @@ function usePlaybackHealth(mediaRef, url, monitored) {
     stallTimerRef.current = setTimeout(() => {
       stallTimerRef.current = null;
       fail("stall");
-    }, _chunkSETFUCZAcjs.VIDEO_STALL_TIMEOUT_MS);
+    }, _chunkHTSRCFXPcjs.VIDEO_STALL_TIMEOUT_MS);
   }, [mediaRef, monitored, fail]);
   const alive = _react.useCallback.call(void 0, () => {
     clearStallTimer();
@@ -425,7 +425,7 @@ function FilePlayer({
       src: url,
       poster: poster || void 0,
       streamType: "on-demand",
-      preload: _nullishCoalesce(preload, () => ( (_chunkKKAY6GPUcjs.saveDataEnabled.call(void 0, ) ? "none" : "metadata"))),
+      preload: _nullishCoalesce(preload, () => ( (_chunkQD7SKYCQcjs.saveDataEnabled.call(void 0, ) ? "none" : "metadata"))),
       playsInline: true,
       muted,
       preferCmcd: "header",
@@ -443,7 +443,7 @@ function FilePlayer({
   const unmute = sound.mutedFallback && !hideMutedBadge ? (
     // The common Button's bare media glyph: white at rest, the accent while hovered.
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkTF5D5MNOcjs.Button,
+      _chunkCDBFQVPAcjs.Button,
       {
         type: "button",
         variant: "glyph",
@@ -452,11 +452,11 @@ function FilePlayer({
         title: "Unmute",
         onClick: sound.unmute,
         className: "absolute inset-0 z-10 m-auto",
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSETFUCZAcjs.VideoUnmuteGlyph, {})
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHTSRCFXPcjs.VideoUnmuteGlyph, {})
       }
     )
   ) : null;
-  const failure = health.failed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSETFUCZAcjs.VideoErrorOverlay, { onRetry: health.retry }) : null;
+  const failure = health.failed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHTSRCFXPcjs.VideoErrorOverlay, { onRetry: health.retry }) : null;
   const boxed = Boolean(playOnHover) || hover.controlled || Boolean(autoPlayUnmuted) || Boolean(startMuted) || !chromeless;
   if (!boxed) return player;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative h-full w-full", ...hover.pointerHandlers, children: [

package/package.json

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

package/src/components/agent-mark.tsx

@@ -7,6 +7,7 @@ import { cn } from '../utils/cn';
 import { AGENT_GLYPH_COLOR, AGENT_PICTURE_CLASS, useAgentIdentityIcon } from './agent-identity';
 import { resolveIcon } from './chat/utils/icon-library';
 import { UnifiedSkeleton } from './loading/unified-skeleton';
+import { useLoadingScope } from './ui/loading-scope';
 
 /** The agents the product ships. A mark is drawn for any agent slug the server has an identity for. */
 export type AgentName = 'fae' | 'mingo';
@@ -65,6 +66,9 @@ export interface AgentAvatarProps {
   /** The avatar's width and height, in pixels. */
   size: number;
   className?: string;
+  /** The record that names the agent is still read: the avatar draws its skeleton (its own round frame). In a loading
+   *  scope it does the same: its picture is the agent's identity icon, read from the server. */
+  loading?: boolean;
 }
 
 /**
@@ -77,7 +81,10 @@ export interface AgentAvatarProps {
 /** The avatar's round frame, read by the avatar and by its skeleton, so the two are one box. */
 const AGENT_AVATAR_FRAME_CLASS = 'inline-flex shrink-0 overflow-hidden rounded-full';
 
-export function AgentAvatar({ agent, size, className }: AgentAvatarProps) {
+export function AgentAvatar({ agent, size, className, loading = false }: AgentAvatarProps) {
+  // ONE switch: in a page's loading state, or while the record that names the agent is read, the avatar is its
+  // skeleton, in its box.
+  if (useLoadingScope() || loading) return <AgentAvatarSkeleton size={size} className={className} />;
   return (
     <span className={cn(AGENT_AVATAR_FRAME_CLASS, className)} style={{ width: size, height: size }}>
       <AgentMark agent={agent} className="h-full w-full" />
@@ -89,6 +96,6 @@ export function AgentAvatar({ agent, size, className }: AgentAvatarProps) {
  * An agent's avatar while the agent is not known yet (the record that names it is read): the avatar's own round
  * frame at the same `size`, so the picture takes its place without moving anything.
  */
-export function AgentAvatarSkeleton({ size, className }: Pick<AgentAvatarProps, 'size' | 'className'>) {
+function AgentAvatarSkeleton({ size, className }: Pick<AgentAvatarProps, 'size' | 'className'>) {
   return <UnifiedSkeleton as="span" className={cn(AGENT_AVATAR_FRAME_CLASS, className)} width={size} height={size} />;
 }

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

@@ -32,7 +32,7 @@ import { formatBioText } from '../../utils/format';
 import { useProxiedImageUrl } from '../chat/hooks/use-proxied-image-url';
 import { InteractiveSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
 import { SocialIconRow, socialIconRowClass } from '../social-icon-row';
-import { useLoadingScope } from '../ui/loading-scope';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
 import { SquareAvatar } from '../ui/square-avatar';
 import { StatusBadge } from '../ui/status-badge';
 
@@ -111,16 +111,16 @@ export function AuthorDetailView({ author, proxyImageUrl, children, className }:
           )}
           {loading ? (
             <div className={socialIconRowClass(true)}>
-              {Array.from({ length: AUTHOR_SKELETON_SOCIALS }, (_, i) => (
-                // biome-ignore lint/suspicious/noArrayIndexKey: skeleton icons never reorder
-                <InteractiveSkeleton.Button key={i} size="icon-sm" />
-              ))}
+              <LoadingItems count={AUTHOR_SKELETON_SOCIALS}>
+                {() => <InteractiveSkeleton.Button data-loading-item size="icon-sm" />}
+              </LoadingItems>
             </div>
           ) : (
             author.socialLinks.length > 0 && (
               // Ghost compact row (transparent 32px) — metadata, not CTAs.
               <SocialIconRow
                 compact
+                listItems
                 links={author.socialLinks.map(link => ({
                   platform: link.platform,
                   href: link.url,

package/src/components/case-studies/entity-quotes-panel.tsx

@@ -2,7 +2,6 @@
 
 import type { EntityQuote } from '../../types/video-processing';
 import { ENTITY_QUOTES_TITLE } from '../../types/video-processing';
-import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { StackedRowsPanel } from '../ui';
 import { useLoadingScope } from '../ui/loading-scope';
 
@@ -21,8 +20,6 @@ export interface EntityQuotesPanelProps {
 const QUOTE_CLASS = 'flex flex-col gap-[var(--spacing-system-xxs)]';
 const QUOTE_TEXT_CLASS = 'text-ods-text-primary text-h4';
 const QUOTE_SPEAKER_CLASS = 'text-ods-text-secondary text-h4';
-/** Quote rows the skeleton draws: the panel shows every quote (no fold), so the panel's own default count. */
-const QUOTES_SKELETON_ROWS = 3;
 
 export function EntityQuotesPanel({ quotes, className }: EntityQuotesPanelProps) {
   // Quotes are optional per record: a loading state cannot know a panel will be there, so it draws none (the
@@ -54,34 +51,3 @@ export function EntityQuotesPanel({ quotes, className }: EntityQuotesPanelProps)
     </div>
   );
 }
-
-/**
- * The quotes while they are read: the real "Key Quotes" caption (its count is read data, so it is left out) over
- * the panel's rows, each a quote's two lines and its speaker line as bars in the quote's own elements.
- */
-export function EntityQuotesPanelSkeleton({ className }: { className?: string }) {
-  return (
-    <StackedRowsPanel
-      className={className}
-      title={ENTITY_QUOTES_TITLE}
-      rows={Array.from({ length: QUOTES_SKELETON_ROWS }, (_, i) => ({
-        id: `skeleton-${i}`,
-        columns: [
-          {
-            key: 'quote',
-            content: (
-              <div className={QUOTE_CLASS} aria-hidden>
-                <p className={QUOTE_TEXT_CLASS}>
-                  <TextLineSkeleton type="inherit" as="span" lines={2} className="w-full" />
-                </p>
-                <p className={QUOTE_SPEAKER_CLASS}>
-                  <TextLineSkeleton type="inherit" as="span" className="w-40" />
-                </p>
-              </div>
-            ),
-          },
-        ],
-      }))}
-    />
-  );
-}

package/src/components/case-studies/index.ts

@@ -1,8 +1,7 @@
 export { ShareExperienceSection, type ShareExperienceSectionProps } from './share-experience-section';
-export { EntityQuotesPanel, EntityQuotesPanelSkeleton, type EntityQuotesPanelProps } from './entity-quotes-panel';
+export { EntityQuotesPanel, type EntityQuotesPanelProps } from './entity-quotes-panel';
 export {
   QuoteCardTile,
-  QuoteCardTileSkeleton,
   QuoteCardsStrip,
   type QuoteCard,
   type QuoteCardTileProps,

package/src/components/case-studies/quote-cards-strip.tsx

@@ -7,7 +7,7 @@ import { CardsStrip } from '../features/cards-strip';
 import { LoadingRegion } from '../loading/loading-region';
 import { Card } from '../ui/card';
 import { useLoadingScope } from '../ui/loading-scope';
-import { PersonCell, PersonCellSkeleton } from '../ui/people-cell';
+import { PersonCell } from '../ui/people-cell';
 
 /** One customer quote chip: the line, who said it, their logo, and the case study it opens. */
 export interface QuoteCard {
@@ -21,12 +21,15 @@ export interface QuoteCard {
   href: string;
 }
 
-export interface QuoteCardTileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-  quote: QuoteCard;
+interface QuoteCardTileOptions extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   /** The strip's loop clone: it keeps the click but stays out of the a11y tree. */
   decorative?: boolean;
 }
 
+/** The quote, or `loading` while it is read: the card then draws its own loading form (also in a loading scope). */
+export type QuoteCardTileProps = QuoteCardTileOptions &
+  ({ quote: QuoteCard; loading?: boolean } | { quote?: undefined; loading: true });
+
 const QUOTE_CARD_CLASS = 'relative p-[var(--spacing-system-sf)]';
 
 /**
@@ -34,7 +37,9 @@ const QUOTE_CARD_CLASS = 'relative p-[var(--spacing-system-sf)]';
  * their logo, and the whole card opening the case study it comes from. The
  * strip draws one per quote; a page that shows a single story draws one alone.
  */
-export function QuoteCardTile({ quote, decorative, className, ...props }: QuoteCardTileProps) {
+export function QuoteCardTile({ quote, decorative, className, loading, ...props }: QuoteCardTileProps) {
+  // ONE switch: while the quote is read (`loading`, or a loading scope) the card is its own loading form.
+  if (useLoadingScope() || loading || !quote) return <QuoteCardTileSkeleton className={className} />;
   return (
     <Card
       variant="panel"
@@ -49,11 +54,11 @@ export function QuoteCardTile({ quote, decorative, className, ...props }: QuoteC
 }
 
 /** One quote card while it loads: the same card and the person cell's own skeleton. */
-export function QuoteCardTileSkeleton({ className }: { className?: string }) {
+function QuoteCardTileSkeleton({ className }: { className?: string }) {
   return (
     <Card variant="panel" className={cn(QUOTE_CARD_CLASS, className)}>
       <LoadingRegion label="Loading a customer story">
-        <PersonCellSkeleton size="lg" />
+        <PersonCell loading size="lg" />
       </LoadingRegion>
     </Card>
   );
@@ -68,7 +73,7 @@ export interface QuoteCardsStripProps {
    * `QUOTE_STRIP_SKELETON_CARDS`, a typical count for a host that states none.
    */
   skeletonCount?: number;
-  /** @deprecated Use `skeletonCount`. */
+  /** @deprecated Ignored: the skeleton draws `skeletonCount` (a list draws its full count, never a fold). */
   fold?: number;
   className?: string;
 }
@@ -86,7 +91,7 @@ function QuoteCardsStripSkeleton({ count, className }: { count: number; classNam
       autoScroll={false}
       items={Array.from({ length: count }, (_, index) => ({ key: `quote-${index}` }))}
       itemKey={item => item.key}
-      renderCard={(_item, ctx) => <QuoteCardTileSkeleton key={ctx.cardKey} className="shrink-0" />}
+      renderCard={(_item, ctx) => <QuoteCardTile key={ctx.cardKey} loading className="shrink-0" />}
     />
   );
 }
@@ -98,12 +103,10 @@ function QuoteCardsStripSkeleton({ count, className }: { count: number; classNam
  * keeps the click but stays out of the a11y tree. While its quotes are read (a page's loading scope with none handed
  * over, or `loading`) it is its own skeleton; read and empty, it renders nothing.
  */
-export function QuoteCardsStrip({ quotes, loading = false, skeletonCount, fold, className }: QuoteCardsStripProps) {
+export function QuoteCardsStrip({ quotes, loading = false, skeletonCount, className }: QuoteCardsStripProps) {
   const scoped = useLoadingScope();
   if ((scoped && quotes.length === 0) || loading) {
-    return (
-      <QuoteCardsStripSkeleton count={skeletonCount ?? fold ?? QUOTE_STRIP_SKELETON_CARDS} className={className} />
-    );
+    return <QuoteCardsStripSkeleton count={skeletonCount ?? QUOTE_STRIP_SKELETON_CARDS} className={className} />;
   }
   if (quotes.length === 0) return null;
   return (

package/src/components/categories-cart.tsx

@@ -6,8 +6,8 @@ import { ICON_SIZE } from '../styles/component-sizes';
 import type { RealCategoryCardProps } from '../types/category';
 import { cn } from '../utils/cn';
 import { TextLineSkeleton } from './loading/unified-skeleton';
-import { useLoadingScope } from './ui/loading-scope';
-import { VendorIcon, VendorIconSkeleton } from './vendor-icon';
+import { LoadingItems, useLoadingScope } from './ui/loading-scope';
+import { VendorIcon } from './vendor-icon';
 
 /** The card's layout, read by the card and by its skeleton, so the skeleton is the card's size. */
 const CARD_SHELL_CLASS = 'group relative block rounded-lg border border-ods-border bg-ods-card p-3 pb-4 md:p-4 md:pb-6';
@@ -16,6 +16,8 @@ const ICON_STRIP_CLASS = 'relative h-8 w-full overflow-hidden md:h-10';
 const ICON_ROW_CLASS = 'flex w-full gap-2 md:gap-3';
 /** The strip's vendor icons: one size and frame for the loaded icon and its skeleton. */
 const VENDOR_ICON_SIZE = 'md';
+/** The vendor a loading icon is handed: none is read yet. */
+const EMPTY_VENDOR = { title: '' };
 const VENDOR_ICON_CLASS = 'overflow-hidden rounded opacity-60 grayscale filter';
 /** The inner stacks only stack: a one-column grid, not another column flexbox (WEBVIEW-001). */
 const INFO_STACK_CLASS = 'grid grid-cols-1 gap-2';
@@ -62,7 +64,13 @@ export function CategoriesCart({
           <div className={ICON_ROW_CLASS}>
             {/* A category with no vendors leaves the strip empty: it keeps its height, and draws no stand-in icons. */}
             {vendors.map(vendor => (
-              <VendorIcon key={vendor.id} vendor={vendor} size={VENDOR_ICON_SIZE} className={VENDOR_ICON_CLASS} />
+              <VendorIcon
+                key={vendor.id}
+                data-loading-item
+                vendor={vendor}
+                size={VENDOR_ICON_SIZE}
+                className={VENDOR_ICON_CLASS}
+              />
             ))}
           </div>
           <StripFades />
@@ -100,7 +108,7 @@ export function CategoriesCart({
  * A category card while its category is read: the card's frame, the vendor strip as icon boxes, a bar for the name,
  * the counts line and two description lines, and the arrow box as it is. Not a link: there is no category yet.
  */
-export function CategoriesCartSkeleton({
+function CategoriesCartSkeleton({
   vendors = CATEGORIES_CART_SKELETON_VENDORS,
   className,
 }: {
@@ -113,10 +121,17 @@ export function CategoriesCartSkeleton({
       <div className={CARD_STACK_CLASS}>
         <div className={ICON_STRIP_CLASS}>
           <div className={ICON_ROW_CLASS}>
-            {Array.from({ length: vendors }, (_, index) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: skeleton icons never reorder
-              <VendorIconSkeleton key={index} size={VENDOR_ICON_SIZE} className="rounded" />
-            ))}
+            <LoadingItems count={vendors}>
+              {() => (
+                <VendorIcon
+                  data-loading-item
+                  loading
+                  vendor={EMPTY_VENDOR}
+                  size={VENDOR_ICON_SIZE}
+                  className="rounded"
+                />
+              )}
+            </LoadingItems>
           </div>
           <StripFades />
         </div>

package/src/components/category-card.tsx

@@ -1,6 +1,63 @@
 'use client';
 
 import type React from 'react';
+import { cn } from '../utils/cn';
+import { TextLineSkeleton, UnifiedSkeleton } from './loading/unified-skeleton';
+import { BUTTON_SIZE_CLASS, Button } from './ui/button';
+import { LoadingItems, useLoadingScope } from './ui/loading-scope';
+
+interface CategoryCardSkeletonProps {
+  className?: string;
+}
+
+/** Vendor icons a typical card shows: the loading card draws that many. */
+const CATEGORY_CARD_SKELETON_ICONS = 10;
+/** The card's boxes, read by `CategoryCard` and by this skeleton, so both are one box. */
+const CATEGORY_CARD_FRAME_CLASS =
+  'box-border flex min-w-0 flex-col rounded-[12px] border border-ods-border bg-ods-card p-8';
+/** The icon row keeps one tile's height with no icons, so a card given none is the loading card's height. */
+const CATEGORY_CARD_ICON_ROW_CLASS = 'mb-8 flex min-h-10 items-center justify-center gap-6';
+const CATEGORY_CARD_ICON_TILE_CLASS = 'h-10 w-10 flex-shrink-0';
+const CATEGORY_CARD_TEXT_BLOCK_CLASS = 'flex flex-1 flex-col';
+const CATEGORY_CARD_TITLE_CLASS = 'mb-2 text-left text-ods-text-primary text-h2';
+const CATEGORY_CARD_COUNTS_CLASS = 'mb-4 text-left text-ods-text-secondary text-h6';
+const CATEGORY_CARD_DESCRIPTION_ROW_CLASS = 'flex flex-row items-start';
+const CATEGORY_CARD_DESCRIPTION_CLASS = 'flex-1 text-left text-ods-text-primary text-h6';
+/** The action's place in the row; its box is the `outline` `icon` button's, which the skeleton draws too. */
+const CATEGORY_CARD_ACTION_LAYOUT_CLASS = 'ml-4 shrink-0';
+const CATEGORY_CARD_ACTION_SKELETON_CLASS = cn(BUTTON_SIZE_CLASS.icon, 'rounded-md', CATEGORY_CARD_ACTION_LAYOUT_CLASS);
+
+/** One count of the counts line while it is read: a bar inside the line's real copy. */
+function CountSkeleton() {
+  return <TextLineSkeleton type="inherit" as="span" className="inline-block w-6 align-top" />;
+}
+
+/**
+ * A category card while it is read: the card's own boxes (the constants above), its icons as tiles, the title and
+ * description as bars of their type steps, the counts line's copy drawn for real with each number a bar, and the
+ * action's box.
+ */
+function CategoryCardSkeleton({ className }: CategoryCardSkeletonProps) {
+  return (
+    <article className={cn(CATEGORY_CARD_FRAME_CLASS, className)}>
+      <div className={CATEGORY_CARD_ICON_ROW_CLASS}>
+        <LoadingItems count={CATEGORY_CARD_SKELETON_ICONS}>
+          {() => <UnifiedSkeleton data-loading-item variant="circular" className={CATEGORY_CARD_ICON_TILE_CLASS} />}
+        </LoadingItems>
+      </div>
+      <div className={CATEGORY_CARD_TEXT_BLOCK_CLASS}>
+        <TextLineSkeleton type="h2" className={cn(CATEGORY_CARD_TITLE_CLASS, 'w-3/4')} />
+        <div className={CATEGORY_CARD_COUNTS_CLASS}>
+          <CountSkeleton /> Categories • <CountSkeleton /> Products
+        </div>
+        <div className={CATEGORY_CARD_DESCRIPTION_ROW_CLASS}>
+          <TextLineSkeleton type="h6" className={cn(CATEGORY_CARD_DESCRIPTION_CLASS, 'w-full')} />
+          <UnifiedSkeleton className={CATEGORY_CARD_ACTION_SKELETON_CLASS} />
+        </div>
+      </div>
+    </article>
+  );
+}
 
 interface CategoryCardProps {
   name: string;
@@ -11,31 +68,40 @@ interface CategoryCardProps {
 }
 
 export function CategoryCard({ name, description, categoryCount, productCount, icons = [] }: CategoryCardProps) {
+  // ONE switch: in a page's loading state the category is read: the card is its skeleton.
+  if (useLoadingScope()) return <CategoryCardSkeleton />;
   return (
-    <article className="box-border flex min-w-0 flex-col rounded-[12px] border border-ods-border bg-ods-card p-8">
-      <div className="mb-8 flex items-center justify-center gap-6">
-        {(icons.length > 0 ? icons : Array(10).fill(null)).map((icon, i) => (
-          <div key={i} className="flex h-10 w-10 items-center justify-center rounded bg-ods-border">
+    <article className={CATEGORY_CARD_FRAME_CLASS}>
+      {/* A card given no icons draws an empty row, one tile high (the row's own minimum height). */}
+      <div className={CATEGORY_CARD_ICON_ROW_CLASS}>
+        {icons.map((icon, i) => (
+          <div
+            // biome-ignore lint/suspicious/noArrayIndexKey: the host's icons carry no identity of their own
+            key={i}
+            data-loading-item
+            className={cn(CATEGORY_CARD_ICON_TILE_CLASS, 'flex items-center justify-center rounded bg-ods-border')}
+          >
             {icon}
           </div>
         ))}
       </div>
-      <div className="flex flex-1 flex-col">
-        <h2 className="mb-2 text-left text-ods-text-primary text-h2">{name}</h2>
-        <div className="mb-4 text-left text-ods-text-secondary text-h6">
+      <div className={CATEGORY_CARD_TEXT_BLOCK_CLASS}>
+        <h2 className={CATEGORY_CARD_TITLE_CLASS}>{name}</h2>
+        <div className={CATEGORY_CARD_COUNTS_CLASS}>
           {categoryCount} Categories • {productCount} Products
         </div>
-        <div className="flex flex-row items-start">
-          <p className="flex-1 text-left text-ods-text-primary text-h6">{description}</p>
-          <button
-            className="ml-4 flex h-12 w-12 items-center justify-center rounded-[6px] border border-ods-border bg-transparent transition-colors hover:bg-ods-accent"
-            style={{ minWidth: 48, minHeight: 48 }}
+        <div className={CATEGORY_CARD_DESCRIPTION_ROW_CLASS}>
+          <p className={CATEGORY_CARD_DESCRIPTION_CLASS}>{description}</p>
+          <Button
+            variant="outline"
+            size="icon"
+            className={CATEGORY_CARD_ACTION_LAYOUT_CLASS}
             aria-label={`View ${name}`}
           >
-            <svg width="24" height="24" fill="none" stroke="#FAFAFA" strokeWidth="2" viewBox="0 0 24 24">
+            <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
               <path d="M9 18l6-6-6-6" />
             </svg>
-          </button>
+          </Button>
         </div>
       </div>
     </article>

package/src/components/chat/approval-batch-message.tsx

@@ -144,11 +144,7 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
 
   return (
     <div className="flex w-full flex-col items-start border-b border-ods-border bg-ods-card last:border-b-0">
-      <button
-        type="button"
-        onClick={onToggle}
-        className="flex w-full cursor-pointer items-start gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-sf)] text-left"
-      >
+      <Button variant="row" type="button" onClick={onToggle} aria-expanded={expanded}>
         {/* The tool mark is the grey `currentColor` cut, so the wrapper sets the colour it takes; without it
             the icon inherits the message text's primary (white). Same treatment as ToolBadge. */}
         <div className="flex h-5 w-5 shrink-0 items-center justify-center text-ods-text-secondary">
@@ -172,7 +168,7 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
         <div className="flex h-5 w-5 shrink-0 items-center justify-center">
           <ExpandChevron expanded={expanded} />
         </div>
-      </button>
+      </Button>
 
       <div className="w-full" style={containerStyle}>
         <div ref={innerRef}>

package/src/components/chat/ask-display.tsx

@@ -4,6 +4,7 @@ import { forwardRef, useEffect, useId, useState } from 'react';
 
 import { cn } from '../../utils/cn';
 import { Chevron02LeftIcon, Chevron02RightIcon } from '../icons-v2-generated';
+import { Button } from '../ui/button';
 import type { AskDisplayProps } from './types';
 
 /** Why the card is locked. Surfaced twice on purpose: as the veil's `title`
@@ -67,27 +68,29 @@ const AskDisplay = forwardRef<HTMLDivElement, AskDisplayProps>(({ className, car
         <p className="min-w-0 flex-1 break-words text-ods-text-primary text-h4">{active.question}</p>
         {showPager && (
           <div className="flex shrink-0 items-center gap-[var(--spacing-system-xxs)]">
-            <button
+            <Button
+              variant="transparent"
+              size="icon-sm"
               type="button"
               aria-label="Previous question"
               disabled={index === 0}
               onClick={() => setIndex(current => Math.max(0, current - 1))}
-              className="text-ods-text-secondary transition-colors hover:text-ods-text-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary"
             >
               <Chevron02LeftIcon size={16} />
-            </button>
+            </Button>
             <span className="whitespace-nowrap text-ods-text-secondary text-h6">
               {index + 1} of {cards.length}
             </span>
-            <button
+            <Button
+              variant="transparent"
+              size="icon-sm"
               type="button"
               aria-label="Next question"
               disabled={index === cards.length - 1}
               onClick={() => setIndex(current => Math.min(cards.length - 1, current + 1))}
-              className="text-ods-text-secondary transition-colors hover:text-ods-text-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary"
             >
               <Chevron02RightIcon size={16} />
-            </button>
+            </Button>
           </div>
         )}
       </div>
@@ -106,16 +109,12 @@ const AskDisplay = forwardRef<HTMLDivElement, AskDisplayProps>(({ className, car
                 list never ends on a hanging border (the design's trailing rule
                 belongs to the custom-answer input, which this card does not have). */}
           {active.options.map((option, optionIndex) => (
-            <button
+            <Button
+              variant="row"
               key={`${option.label}-${optionIndex}`}
               type="button"
               disabled={!isInteractive}
               onClick={() => onSelect?.(option.label)}
-              className={cn(
-                'flex w-full items-start gap-[var(--spacing-system-s)] bg-ods-card p-[var(--spacing-system-s)] text-left transition-colors',
-                optionIndex > 0 && 'border-t border-ods-border',
-                'hover:bg-ods-bg-hover disabled:cursor-not-allowed disabled:hover:bg-ods-card',
-              )}
             >
               <span className="shrink-0 text-ods-text-secondary text-h4">{optionIndex + 1}.</span>
               <span className="flex min-w-0 flex-1 flex-col">
@@ -124,7 +123,7 @@ const AskDisplay = forwardRef<HTMLDivElement, AskDisplayProps>(({ className, car
                   <span className="break-words text-ods-text-secondary text-h6">{option.description}</span>
                 )}
               </span>
-            </button>
+            </Button>
           ))}
         </div>
         {!isInteractive && (