@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/src/components/features/approval-level.tsx

@@ -7,7 +7,11 @@ import { HeadsetIcon } from '../icons-v2-generated/audio-and-visual/headset-icon
 import { BannedIcon } from '../icons-v2-generated/security/banned-icon';
 import { CheckCircleIcon } from '../icons-v2-generated/signs-and-symbols/check-circle-icon';
 import { UserIcon } from '../icons-v2-generated/users/user-icon';
-import { ToggleGroup, ToggleGroupItem } from '../toggle-group';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TOGGLE_GROUP_CLASS, ToggleGroup, ToggleGroupItem } from '../toggle-group';
+import { TextHold } from '../ui/layout-hold';
+import { useLoadingScope } from '../ui/loading-scope';
+import { TOGGLE_SIZE_CLASS } from '../ui/toggle';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 import { TouchFriendlyTooltip } from '../ui/touch-friendly-tooltip';
 
@@ -57,6 +61,17 @@ export const APPROVAL_LEVEL_META: Record<ApprovalLevel, ApprovalLevelMeta> = {
 
 const ICON_PX = 16;
 
+/** The view's layout, read by the view and by its skeleton, so the skeleton is the view's size. */
+const READ_ONLY_ROW_CLASS = 'inline-flex shrink-0 items-center gap-[var(--spacing-system-xxs)]';
+const EDITABLE_ROW_CLASS = 'flex shrink-0 items-center gap-[var(--spacing-system-sf)]';
+const LEVEL_NAME_CLASS = 'whitespace-nowrap text-h6';
+/** An editable level's button: the small toggle with tighter sides. */
+const LEVEL_BUTTON_CLASS = 'px-2';
+/** The longest level name: the skeleton's name bar is exactly its width (the component's own words, unseen). */
+const LONGEST_LEVEL_LABEL = APPROVAL_LEVELS.map(level => APPROVAL_LEVEL_META[level].label).reduce((a, b) =>
+  b.length > a.length ? b : a,
+);
+
 export interface ApprovalLevelViewProps {
   /** The level in force. */
   value: ApprovalLevel;
@@ -78,6 +93,8 @@ export interface ApprovalLevelViewProps {
   showLabel?: boolean;
   /** Editable: the id of the element that names what is being decided (the rule's label). */
   'aria-labelledby'?: string;
+  /** The level is still being read: the view draws its own skeleton (also in a loading scope). */
+  loading?: boolean;
   className?: string;
 }
 
@@ -98,13 +115,16 @@ export function ApprovalLevelView({
   disabled = false,
   showLabel = true,
   'aria-labelledby': labelledBy,
+  loading = false,
   className,
 }: ApprovalLevelViewProps) {
-  const current = APPROVAL_LEVEL_META[value];
   const canEdit = editable ?? onChange !== undefined;
-  const name = showLabel ? (
-    <span className={cn('whitespace-nowrap text-h6', current.toneClassName)}>{current.label}</span>
-  ) : null;
+  // One switch: while the level is read (a prop, or a page's loading scope) the view is its own skeleton.
+  if (useLoadingScope() || loading) {
+    return <ApprovalLevelSkeleton editable={canEdit} showLabel={showLabel} className={className} />;
+  }
+  const current = APPROVAL_LEVEL_META[value];
+  const name = showLabel ? <span className={cn(LEVEL_NAME_CLASS, current.toneClassName)}>{current.label}</span> : null;
 
   if (!canEdit) {
     const icon = (
@@ -114,7 +134,7 @@ export function ApprovalLevelView({
       </span>
     );
     return (
-      <span className={cn('inline-flex shrink-0 items-center gap-[var(--spacing-system-xxs)]', className)}>
+      <span className={cn(READ_ONLY_ROW_CLASS, className)}>
         {name}
         {showLabel ? (
           icon
@@ -128,7 +148,7 @@ export function ApprovalLevelView({
   }
 
   return (
-    <div className={cn('flex shrink-0 items-center gap-[var(--spacing-system-sf)]', className)}>
+    <div className={cn(EDITABLE_ROW_CLASS, className)}>
       {name}
       <TooltipProvider delayDuration={150}>
         <ToggleGroup
@@ -153,7 +173,7 @@ export function ApprovalLevelView({
                   <ToggleGroupItem
                     value={level}
                     aria-label={label}
-                    className={cn('px-2', level === value && toneClassName)}
+                    className={cn(LEVEL_BUTTON_CLASS, level === value && toneClassName)}
                   >
                     <Icon size={ICON_PX} aria-hidden />
                   </ToggleGroupItem>
@@ -169,3 +189,46 @@ export function ApprovalLevelView({
     </div>
   );
 }
+
+export interface ApprovalLevelSkeletonProps {
+  /** The editable form (the four levels' group) or the read-only one (the level's icon). */
+  editable?: boolean;
+  /** Whether the level's name is written before the icons (default true, like the view). */
+  showLabel?: boolean;
+  className?: string;
+}
+
+/**
+ * `ApprovalLevelView`'s own skeleton (a level chip, not a whole view): a level while it is read: the view's own row, the name a bar at its type step (the longest name's width), and the
+ * read-only icon's box or the editable group's four small toggle boxes. Inert: nothing in it can be picked.
+ */
+export function ApprovalLevelSkeleton({ editable = false, showLabel = true, className }: ApprovalLevelSkeletonProps) {
+  const name = showLabel ? (
+    <span className={LEVEL_NAME_CLASS}>
+      <TextHold>{LONGEST_LEVEL_LABEL}</TextHold>
+    </span>
+  ) : null;
+  if (!editable) {
+    return (
+      <span aria-hidden className={cn(READ_ONLY_ROW_CLASS, className)}>
+        {name}
+        <UnifiedSkeleton as="span" className="inline-block shrink-0 rounded-sm" width={ICON_PX} height={ICON_PX} />
+      </span>
+    );
+  }
+  return (
+    <div aria-hidden inert className={cn(EDITABLE_ROW_CLASS, className)}>
+      {name}
+      <div className={TOGGLE_GROUP_CLASS}>
+        {APPROVAL_LEVELS.map(level => (
+          <UnifiedSkeleton
+            key={level}
+            // The small toggle's height and its tighter sides around one icon (`box-content`: the padding adds).
+            className={cn(TOGGLE_SIZE_CLASS.sm, LEVEL_BUTTON_CLASS, 'box-content shrink-0 rounded-md')}
+            width={ICON_PX}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/features/capability-explorer.tsx

@@ -2,13 +2,17 @@
 
 import { type KeyboardEvent, type ReactNode, useRef } from 'react';
 import { useContentLgUp } from '../../hooks/ui/use-content-breakpoint';
+import { TILE_SIZE } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
+import { AgentAvatarSkeleton } from '../agent-mark';
 import { EntityIcon } from '../icon-display';
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
 import { LoadingRegion } from '../loading/loading-region';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { MediaSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 import { SnapCarousel, SnapCarouselControlsSkeleton } from '../ui/snap-carousel';
+import { SquareAvatarSkeleton } from '../ui/square-avatar';
 import { TruncateText } from '../ui/truncate-text';
 
 /** One job the product does, as the explorer shows it. Every field is the host's data. */
@@ -79,6 +83,10 @@ export interface CapabilityExplorerProps {
   /** The marks beside the two turns of an example that names nobody of its own. */
   requesterMark?: ReactNode;
   responderMark?: ReactNode;
+  /** The jobs are being read (the host's query runs): the explorer draws its own skeleton. A page's loading scope does too. */
+  loading?: boolean;
+  /** The jobs the skeleton's list draws: one screen of the host's list. */
+  fold?: number;
   className?: string;
 }
 
@@ -92,17 +100,28 @@ const PANEL_TOP_HEIGHT_CLASS = 'h-[256px]';
 const PANEL_SCREEN_HEIGHT_CLASS = 'h-[420px]';
 const PANEL_FOOTER_HEIGHT_CLASS = 'h-[52px]';
 const CARD_HEIGHT_CLASS = 'h-[700px]';
+/** A job's icon tile's box (in the list, a card's head and their skeletons). */
+const JOB_ICON_TILE_BOX = `${TILE_SIZE.md} shrink-0 rounded-lg`;
+const JOB_ICON_TILE_CLASS = cn(
+  JOB_ICON_TILE_BOX,
+  'flex items-center justify-center border border-ods-border bg-ods-bg',
+);
+/** The mark beside each turn of an example (the host's avatar is drawn at this size). */
+const EXAMPLE_MARK_PX = 24;
 
 /** The element id of a job's tab (never the job's own id: that is the host's anchor). */
 export const capabilityTabId = (id: string): string => `${id}-tab`;
 
+/** A highlight's check mark: `MediaSkeleton.Icon size="sm"` (16px) while loading. */
+const HIGHLIGHT_ICON_PX = 16;
+
 function Highlights({ items, className }: { items: readonly string[]; className?: string }) {
   if (items.length === 0) return null;
   return (
     <ul className={cn('grid grid-cols-1 gap-2', className)}>
       {items.slice(0, 3).map(text => (
         <li key={text} className="flex min-w-0 items-center gap-2.5">
-          <CheckIcon size={16} className="shrink-0 text-ods-flamingo-cyan" />
+          <CheckIcon size={HIGHLIGHT_ICON_PX} className="shrink-0 text-ods-flamingo-cyan" />
           <TruncateText variant="h6" triggerClassName="flex-1">
             {text}
           </TruncateText>
@@ -133,7 +152,14 @@ function Example({
   );
   // The mark is the host's own avatar: its shape says who it is (a person who uses a computer, one who runs it, an agent), so it is never clipped here.
   const mark = (node: ReactNode) =>
-    node ? <span className="flex size-6 shrink-0 items-center justify-center">{node}</span> : null;
+    node ? (
+      <span
+        className="flex shrink-0 items-center justify-center"
+        style={{ width: EXAMPLE_MARK_PX, height: EXAMPLE_MARK_PX }}
+      >
+        {node}
+      </span>
+    ) : null;
   const requester = example.requester;
   const responder = example.responder;
   return (
@@ -168,28 +194,21 @@ function Example({
   );
 }
 
-/**
- * A text placeholder in its line's own box (`text-h…` on the line, the bar inline in it), so a
- * placeholder line is the loaded line's height.
- */
-const LINE_SKELETON_CLASS = 'inline-block h-[0.7em] rounded align-middle';
-
 /** The example's two turns, in the loaded example's own box. */
 function ExampleSkeleton({ className }: { className?: string }) {
+  // Who asks is a person (the host's avatar), who answers the agent.
   const turn = (first: boolean) => (
     <div className={cn('flex min-w-0 gap-2.5', !first && 'border-t border-ods-border pt-3')}>
-      <UnifiedSkeleton className="size-6 shrink-0 rounded-full" />
+      {first ? (
+        <SquareAvatarSkeleton variant="round" sizePx={EXAMPLE_MARK_PX} className="shrink-0" />
+      ) : (
+        <AgentAvatarSkeleton size={EXAMPLE_MARK_PX} />
+      )}
       <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <div className="text-h6">
-          <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-28')} />
-        </div>
+        <TextLineSkeleton type="h6" className="w-28" />
         <div className="min-h-[2lh] text-h4">
-          <div className="text-h4">
-            <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-full')} />
-          </div>
-          <div className="text-h4">
-            <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-2/3')} />
-          </div>
+          <TextLineSkeleton type="h4" className="w-full" />
+          <TextLineSkeleton type="h4" className="w-2/3" />
         </div>
       </div>
     </div>
@@ -211,15 +230,11 @@ function ExampleSkeleton({ className }: { className?: string }) {
 function JobHeadSkeleton() {
   return (
     <>
-      <UnifiedSkeleton className="size-9 shrink-0 rounded-lg" />
+      <UnifiedSkeleton className={JOB_ICON_TILE_BOX} />
       <div className="flex min-w-0 flex-1 flex-col">
-        <div className="text-h4">
-          <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-32')} />
-        </div>
+        <TextLineSkeleton type="h4" className="w-32" />
         <div className="mt-0.5">
-          <div className="text-h6">
-            <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-40')} />
-          </div>
+          <TextLineSkeleton type="h6" className="w-40" />
         </div>
       </div>
     </>
@@ -257,12 +272,8 @@ export function CapabilityExplorerSkeleton({
               <JobHeadSkeleton />
             </div>
             <div className="min-h-[3lh] text-h6">
-              <div className="text-h6">
-                <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-full')} />
-              </div>
-              <div className="text-h6">
-                <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-5/6')} />
-              </div>
+              <TextLineSkeleton type="h6" className="w-full" />
+              <TextLineSkeleton type="h6" className="w-5/6" />
             </div>
             <UnifiedSkeleton className="h-[300px] shrink-0 rounded-lg" />
             <ExampleSkeleton className="shrink-0" />
@@ -294,43 +305,25 @@ export function CapabilityExplorerSkeleton({
           <div className={cn('grid shrink-0 grid-cols-[minmax(0,1fr)_minmax(0,380px)] gap-8', PANEL_TOP_HEIGHT_CLASS)}>
             <div className="flex min-w-0 flex-col overflow-hidden">
               <div className="mb-2">
-                <div className="text-h2">
-                  <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-64')} />
-                </div>
+                <TextLineSkeleton type="h2" className="w-64" />
               </div>
               <div className="min-h-[3lh] text-h4">
-                <div className="text-h4">
-                  <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-full')} />
-                </div>
-                <div className="text-h4">
-                  <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-4/5')} />
-                </div>
+                <TextLineSkeleton type="h4" className="w-full" />
+                <TextLineSkeleton type="h4" className="w-4/5" />
               </div>
               <div className="mt-auto grid grid-cols-1 gap-2">
                 {[0, 1, 2].map(i => (
                   <div key={i} className="flex min-w-0 items-center gap-2.5">
-                    <UnifiedSkeleton className="size-4 shrink-0 rounded-full" />
-                    <div className="text-h6">
-                      <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, i === 1 ? 'w-56' : 'w-48')} />
-                    </div>
+                    <MediaSkeleton.Icon size="sm" className="shrink-0" />
+                    <TextLineSkeleton type="h6" className={i === 1 ? 'w-56' : 'w-48'} />
                   </div>
                 ))}
               </div>
             </div>
             <ExampleSkeleton />
           </div>
+          {/* The footer is the job's own (not every job has one) and the panel is one height: not drawn. */}
           <UnifiedSkeleton className={cn('shrink-0 rounded-xl', PANEL_SCREEN_HEIGHT_CLASS)} />
-          <div
-            className={cn(
-              'flex min-w-0 shrink-0 items-center gap-[var(--spacing-system-sf)]',
-              PANEL_FOOTER_HEIGHT_CLASS,
-            )}
-          >
-            <div className="text-h5">
-              <UnifiedSkeleton as="span" className={cn(LINE_SKELETON_CLASS, 'w-16')} />
-            </div>
-            <UnifiedSkeleton className="h-7 w-36 rounded-md" />
-          </div>
         </div>
       </div>
     </LoadingRegion>
@@ -361,11 +354,17 @@ export function CapabilityExplorer({
   renderScreen,
   requesterMark,
   responderMark,
+  loading = false,
+  fold,
   className,
 }: CapabilityExplorerProps) {
   const wide = useContentLgUp();
   const listRef = useRef<HTMLDivElement>(null);
+  const inScope = useLoadingScope();
 
+  // While the page is read its jobs are not known (none in a loading state): the explorer is its skeleton, never
+  // left out. The page's loading region announces it, so this one does not; a host's own read does.
+  if (inScope || loading) return <CapabilityExplorerSkeleton region={!inScope} count={fold} className={className} />;
   if (items.length === 0) return null;
   // Unknown until measured: one box, so neither layout's ids are in the page twice.
   if (wide === undefined) return <CapabilityExplorerSkeleton className={className} />;
@@ -390,7 +389,7 @@ export function CapabilityExplorer({
           >
             <div className="flex min-w-0 items-center gap-3">
               {item.iconName && (
-                <span className="flex size-9 shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg text-ods-flamingo-cyan">
+                <span className={cn(JOB_ICON_TILE_CLASS, 'text-ods-flamingo-cyan')}>
                   <EntityIcon icon={{ name: item.iconName }} size={18} />
                 </span>
               )}
@@ -423,6 +422,7 @@ export function CapabilityExplorer({
                 className="shrink-0"
               />
             )}
+            {/* Inside the card's fixed height: the footer moves nothing, so it is not optional to the loading state. */}
             {item.footer && <div className="mt-auto min-w-0 shrink-0 overflow-hidden">{item.footer}</div>}
           </article>
         )}
@@ -490,10 +490,7 @@ export function CapabilityExplorer({
             >
               {item.iconName && (
                 <span
-                  className={cn(
-                    'flex size-9 shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg',
-                    selected ? 'text-ods-flamingo-cyan' : 'text-ods-text-secondary',
-                  )}
+                  className={cn(JOB_ICON_TILE_CLASS, selected ? 'text-ods-flamingo-cyan' : 'text-ods-text-secondary')}
                 >
                   <EntityIcon icon={{ name: item.iconName }} size={18} />
                 </span>
@@ -559,6 +556,7 @@ export function CapabilityExplorer({
         <div className={cn('shrink-0 overflow-hidden rounded-xl border border-ods-border', PANEL_SCREEN_HEIGHT_CLASS)}>
           {renderScreen(active, { compact: false })}
         </div>
+        {/* Inside the panel's fixed height: the footer moves nothing, so it is not optional to the loading state. */}
         {active.footer && (
           <div className={cn('flex min-w-0 shrink-0 items-center overflow-hidden', PANEL_FOOTER_HEIGHT_CLASS)}>
             {active.footer}

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

@@ -53,6 +53,7 @@ import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
 import { accentSentenceMarks, SECTION_HEADING_CLASS } from '../layout/page-heading';
 import { Button } from '../ui/button';
+import { useLoadingScope } from '../ui/loading-scope';
 
 // =============================================================================
 // Types
@@ -117,6 +118,12 @@ interface CardsStripEngineProps {
   /** Merged into the engine's wrapper ref (e.g. `useVideoWarmup().ref`). */
   rootRef?: (el: HTMLDivElement | null) => void;
   className?: string;
+  /**
+   * The strip in a page's loading state, when its items are read (none handed in yet): `count` copies of `card`, the
+   * strip's cards' own skeleton (in children mode each in the managed cell's width). `count` is the strip's fold:
+   * the cards one screen of the strip shows. Absent: an empty strip draws nothing, in a scope too.
+   */
+  skeleton?: { card: React.ReactNode; count: number };
 }
 
 // The two mode interfaces hand-mirror each other's field names as `never` —
@@ -229,6 +236,17 @@ function measureBleedInsets(el: HTMLElement): BleedInsets {
 // (Clone focus suppression lives in hooks/ui/use-suppress-clone-focus — shared
 // with <MarqueeWall>, which renders the same 2-copy endless-loop structure.)
 
+/** The managed cell's width, CSS's (the engine's own 767px line): read by the cell and by the strip's skeleton. */
+const STRIP_CELL_CLASS = 'w-[var(--strip-cell-mobile)] shrink-0 self-stretch min-[768px]:w-[var(--strip-cell-desktop)]';
+const stripCellStyle = (mobile: number, desktop: number) =>
+  ({
+    '--strip-cell-mobile': `${mobile}px`,
+    '--strip-cell-desktop': `${desktop}px`,
+    maxWidth: STRIP_CELL_MAX_WIDTH,
+  }) as React.CSSProperties;
+const STRIP_ROOT_CLASS = 'flex w-full min-w-0 flex-col gap-6';
+const STRIP_TRACK_CLASS = 'flex w-max items-stretch gap-4';
+
 /**
  * Children-mode cell: fixed width + hover/keyboard activation (wired here, never
  * on the card — the single-place activation invariant). The OUTER cell is never
@@ -262,14 +280,8 @@ function ManagedCell({
       // 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
-      }
+      className={STRIP_CELL_CLASS}
+      style={stripCellStyle(cardWidthMobile, desktopWidth)}
       data-strip-card-key={ctx.cardKey}
       onPointerEnter={ctx.isTouch ? undefined : () => ctx.onActivate(ctx.cardKey)}
       onPointerLeave={ctx.isTouch ? undefined : () => ctx.onDeactivate(ctx.cardKey)}
@@ -295,6 +307,7 @@ function ManagedCell({
 // Component
 // =============================================================================
 
+
 export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactElement | null {
   const {
     title,
@@ -310,7 +323,9 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
     nextLabel = 'Next items',
     rootRef,
     className,
+    skeleton,
   } = props;
+  const inScope = useLoadingScope();
 
   // ---- input-mode normalization ---------------------------------------------
   // Children mode feeds the SAME engine path as render-prop mode — one
@@ -786,7 +801,34 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
     return <ManagedCell item={item} ctx={ctx} cardWidthMobile={cardWidthMobile} cardWidthDesktop={cardWidthDesktop} />;
   };
 
-  if (items.length === 0) return null;
+  const heading = showTitle && title && <h2 className={`${SECTION_HEADING_CLASS} break-words`}>{accentSentenceMarks(title)}</h2>;
+  if (items.length === 0) {
+    // Outside a loading state an empty strip is nothing; inside one, a strip whose host states a skeleton draws it
+    // (a host that states none expects no strip, e.g. a record with no bites).
+    if (!inScope || !skeleton) return null;
+    // The items are read: the heading (the page's own words), the slot, and a fold of the cards' own skeleton.
+    return (
+      <div className={cn(STRIP_ROOT_CLASS, className)}>
+        {heading}
+        {headerSlot}
+        <div className="overflow-hidden">
+          <div className={STRIP_TRACK_CLASS}>
+            {Array.from({ length: skeleton.count }, (_, i) =>
+              childrenMode ? (
+                // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
+                <div key={i} className={STRIP_CELL_CLASS} style={stripCellStyle(cardWidthMobile, cardWidthDesktop)}>
+                  {skeleton.card}
+                </div>
+              ) : (
+                // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
+                <React.Fragment key={i}>{skeleton.card}</React.Fragment>
+              ),
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   const copies = marqueeActive ? 2 : 1;
 
@@ -804,9 +846,9 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
         wrapperRef.current = node;
         rootRef?.(node);
       }}
-      className={cn('flex w-full min-w-0 flex-col gap-6', className)}
+      className={cn(STRIP_ROOT_CLASS, className)}
     >
-      {showTitle && title && <h2 className={`${SECTION_HEADING_CLASS} break-words`}>{accentSentenceMarks(title)}</h2>}
+      {heading}
       {headerSlot}
 
       <div className="relative" style={bled ? { marginLeft: -insets.left, marginRight: -insets.right } : undefined}>
@@ -833,7 +875,7 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
           onPointerCancel={clearHover}
           onScroll={onSeamWarp}
         >
-          <div ref={trackRef} data-copies={copies} className="flex w-max items-stretch gap-4">
+          <div ref={trackRef} data-copies={copies} className={STRIP_TRACK_CLASS}>
             {Array.from({ length: copies }, (_, copyIndex) =>
               items.map((item, i) => {
                 const key = `${getItemKey(item, i)}__${copyIndex}__${i}`;