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

package/src/components/navigation/navigation-sidebar-toggle.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '../../utils';
 import { Chevrons03LeftIcon } from '../icons-v2-generated';
+import { Button } from '../ui/button';
 
 export interface NavigationSidebarToggleProps {
   minimized: boolean;
@@ -12,15 +13,11 @@ export interface NavigationSidebarToggleProps {
 export function NavigationSidebarToggle({ minimized, showLabel, onToggle }: NavigationSidebarToggleProps) {
   return (
     <div className="border-t border-ods-border">
-      <button
+      <Button
+        variant="row"
         onClick={onToggle}
-        className={cn(
-          'relative flex w-full items-center justify-start',
-          'h-14 p-[var(--spacing-system-m)]',
-          'transition-colors duration-300',
-          '[&_svg]:transition-colors [&_svg]:duration-300',
-          'text-ods-text-primary hover:bg-ods-bg-hover',
-        )}
+        // The sidebar's row height (its entries are `h-14` too).
+        className="h-14"
         title={minimized ? 'Hide Menu' : undefined}
         aria-label={'Hide Menu'}
       >
@@ -46,7 +43,7 @@ export function NavigationSidebarToggle({ minimized, showLabel, onToggle }: Navi
         >
           Hide Menu
         </span>
-      </button>
+      </Button>
     </div>
   );
 }

package/src/components/navigation/navigation-sidebar.tsx

@@ -9,7 +9,7 @@ import { useLgUp, useMdUp } from '../../hooks/ui/use-media-query';
 import type { NavigationSidebarConfig, NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
 import { NavigationSidebarHeader } from './navigation-sidebar-header';
-import { NavigationSidebarItemButton, NavigationSidebarItemSkeleton } from './navigation-sidebar-item';
+import { NavigationSidebarItemButton } from './navigation-sidebar-item';
 import { NavigationSidebarToggle } from './navigation-sidebar-toggle';
 
 const MINIMIZED_WIDTH = 56; // 3.5rem = 56px
@@ -376,7 +376,9 @@ export function NavigationSidebar({ config, disabled = false, pushOnTablet = fal
                 and each placeholder row is already `aria-hidden`. */}
             <nav className="flex flex-col" aria-label="Primary navigation" aria-busy={!!loadingRows}>
               {loadingRows
-                ? loadingRows.primary.map(key => <NavigationSidebarItemSkeleton key={key} showLabel={showLabel} />)
+                ? loadingRows.primary.map(key => (
+                    <NavigationSidebarItemButton key={key} loading showLabel={showLabel} />
+                  ))
                 : primaryItems.map(item => (
                     <NavigationSidebarItemButton
                       key={item.id}
@@ -394,7 +396,9 @@ export function NavigationSidebar({ config, disabled = false, pushOnTablet = fal
           {(loadingRows ? loadingRows.secondary.length > 0 : secondaryItems.length > 0) && (
             <nav className="flex flex-col" aria-label="Secondary navigation" aria-busy={!!loadingRows}>
               {loadingRows
-                ? loadingRows.secondary.map(key => <NavigationSidebarItemSkeleton key={key} showLabel={showLabel} />)
+                ? loadingRows.secondary.map(key => (
+                    <NavigationSidebarItemButton key={key} loading showLabel={showLabel} />
+                  ))
                 : secondaryItems.map(item => (
                     <NavigationSidebarItemButton
                       key={item.id}

package/src/components/navigation/sticky-section-nav.tsx

@@ -6,6 +6,7 @@ import Link from '../../embed-shims/next-link';
 import { cn } from '../../utils';
 import { scrollElementIntoView } from '../../utils/scroll-into-view';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { BUTTON_KIND_CLASS, Button } from '../ui/button';
 import { useLoadingScope } from '../ui/loading-scope';
 import { ScrollShadow } from '../ui/scroll-fade';
 
@@ -32,7 +33,9 @@ const PILL_CLASS = cn(
 );
 const VERTICAL_NAV_CLASS = 'relative bg-ods-bg';
 const VERTICAL_ROW_CLASS = 'relative flex h-10 w-full items-stretch transition-all duration-200';
-const VERTICAL_BUTTON_CLASS = 'relative flex flex-1 cursor-pointer items-center gap-2 px-3 py-2';
+/** A section's tab in its row; its box is the `tab` kind's, which the skeleton draws too. */
+const VERTICAL_BUTTON_LAYOUT_CLASS = 'flex-1 justify-start';
+const VERTICAL_BUTTON_SKELETON_CLASS = cn(BUTTON_KIND_CLASS.tab, VERTICAL_BUTTON_LAYOUT_CLASS);
 
 export interface StickyNavSection {
   id: string;
@@ -197,24 +200,17 @@ export function StickySectionNav({
           )}
 
           {/* Navigation button */}
-          <button
+          <Button
+            variant="tab"
             onClick={() => onSectionClick(section.id)}
             // The ribbon is the visual; this is the same state for assistive
             // tech (a table of contents marks the reader's current location).
             aria-current={activeSection === section.id ? 'location' : undefined}
-            className={VERTICAL_BUTTON_CLASS}
+            data-state={activeSection === section.id ? 'active' : undefined}
+            className={VERTICAL_BUTTON_LAYOUT_CLASS}
           >
-            <span
-              className={cn(
-                'text-left transition-all duration-200 text-h6',
-                activeSection === section.id
-                  ? 'text-ods-text-primary'
-                  : 'text-ods-text-secondary hover:text-ods-text-primary',
-              )}
-            >
-              {section.label}
-            </span>
-          </button>
+            <span className="text-left text-h6">{section.label}</span>
+          </Button>
         </div>
       ))}
     </nav>
@@ -228,7 +224,7 @@ const SKELETON_LABEL_WIDTHS = ['w-24', 'w-32', 'w-20', 'w-28', 'w-24'] as const;
  * The section navigation while its sections are read: the same bar (horizontal: its brand and action as given,
  * the sections as pill boxes) or list (vertical: its rail, each row a bar of its label).
  */
-export function StickySectionNavSkeleton({
+function StickySectionNavSkeleton({
   orientation = 'vertical',
   count = STICKY_SECTION_NAV_SKELETON_COUNT,
   brand,
@@ -268,7 +264,7 @@ export function StickySectionNavSkeleton({
       />
       {widths.map((width, i) => (
         <div key={i} className={VERTICAL_ROW_CLASS}>
-          <div className={VERTICAL_BUTTON_CLASS}>
+          <div className={VERTICAL_BUTTON_SKELETON_CLASS}>
             <TextLineSkeleton type="h6" className={width} />
           </div>
         </div>

package/src/components/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -43,11 +43,11 @@ import { VideoBitesStrip } from '../features/video-bites-strip';
 // the detail block visibly narrower than the rail.
 import { PageShell } from '../layout/article-detail-layout';
 import { PageLayout } from '../layout/page-layout';
-import { LoadingRegion } from '../loading/loading-region';
+import { LoadingFallback } from '../loading/loading-fallback';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { ArticleAuthorByline } from '../shared/article-author-byline';
 import { LoadError } from '../ui/error-state';
-import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
+import { useLoadingScope } from '../ui/loading-scope';
 import { RichMarkdownRenderer } from '../ui/markdown';
 
 export interface OnboardingGuideDetailViewProps {
@@ -356,13 +356,5 @@ export function OnboardingGuideDetailView({
     </PageLayout>
   );
   // The loading state is the page itself in a scope, announced once unless a host's scope already did.
-  return renderShell(
-    loading ? (
-      <LoadingRegion label="Loading the guide" announce={!scoped}>
-        <LoadingScope>{page}</LoadingScope>
-      </LoadingRegion>
-    ) : (
-      page
-    ),
-  );
+  return renderShell(loading ? <LoadingFallback label="Loading the guide">{page}</LoadingFallback> : page);
 }

package/src/components/onboarding-guides/onboarding-guides-catalog-view.tsx

@@ -30,21 +30,57 @@ import { cn } from '../../utils/cn';
 import { resolveContentHref } from '../../utils/content-href';
 import { OnboardingGuideCard } from '../chat/entity-cards/onboarding-guide-card';
 import type { OnboardingGuide } from '../chat/types/entities/onboarding-guide';
-import { LoadingRegion } from '../loading/loading-region';
+import { LoadingFallback } from '../loading/loading-fallback';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { DocSearchBar, useDocSearch } from '../shared/doc-search';
 import { LoadError } from '../ui/error-state';
 import { FilterPillRow } from '../ui/filter-pill-row';
-import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
-import {
-  CATALOG_CONTROLS_CLASS,
-  CATALOG_LIST_CLASS,
-  CATALOG_SECTION_CLASS,
-  CATALOG_SECTION_COUNT_CLASS,
-  CATALOG_SECTION_HEADING_CLASS,
-  CATALOG_SECTIONS_CLASS,
-  CATALOG_VIEW_CLASS,
-  OnboardingCatalogSectionsSkeleton,
-} from './onboarding-guides-catalog-skeleton';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
+
+/** The catalog's layout, read by the loaded view and by its sections' skeleton, so the skeleton is the view's size. */
+const CATALOG_VIEW_CLASS = 'flex w-full flex-col gap-10';
+const CATALOG_CONTROLS_CLASS = 'space-y-4';
+const CATALOG_SECTIONS_CLASS = 'space-y-10';
+const CATALOG_SECTION_CLASS = 'space-y-4';
+const CATALOG_SECTION_HEADING_CLASS = 'flex items-center gap-2 text-ods-text-primary text-h3';
+const CATALOG_SECTION_COUNT_CLASS =
+  'inline-flex items-center justify-center rounded-full bg-ods-text-secondary/20 px-2 py-0.5 text-ods-text-secondary text-h6';
+const CATALOG_LIST_CLASS = 'flex flex-col gap-4';
+
+/**
+ * Catalog cards the skeleton's section draws: a typical count, at every width. The catalog reads every guide (no
+ * page, no limit), so there is no page size to draw. The section count is the data's too: the skeleton draws ONE
+ * section, and every loaded section is a `data-loading-item`.
+ */
+const ONBOARDING_CATALOG_SKELETON_CARDS = 3;
+/**
+ * The catalog's sections while the guides are read: ONE section of `ONBOARDING_CATALOG_SKELETON_CARDS` cards in the view's
+ * own classes (its heading and count bars). The view draws it itself (`useLoadingScope() || loading`): its search bar
+ * is real and its section pills draw their own skeleton.
+ */
+function OnboardingCatalogSectionsSkeleton() {
+  return (
+    <div className={CATALOG_SECTIONS_CLASS}>
+      <section className={CATALOG_SECTION_CLASS} data-loading-item>
+        <h2 className={CATALOG_SECTION_HEADING_CLASS}>
+          <TextLineSkeleton type="inherit" as="span" className="w-40" />
+          <span className={CATALOG_SECTION_COUNT_CLASS}>
+            <TextLineSkeleton type="inherit" as="span" className="w-3" />
+          </span>
+        </h2>
+        <ul className={CATALOG_LIST_CLASS}>
+          <LoadingItems count={ONBOARDING_CATALOG_SKELETON_CARDS}>
+            {() => (
+              <li data-loading-item>
+                <OnboardingGuideCard loading size="catalog" />
+              </li>
+            )}
+          </LoadingItems>
+        </ul>
+      </section>
+    </div>
+  );
+}
 
 type SectionSummary = { section: string; section_order: number; count: number };
 
@@ -224,11 +260,7 @@ export function OnboardingGuidesCatalogView({
   // The first read (no data yet): the SAME view in a loading scope. A later section toggle that returns ZERO guides
   // keeps the page's controls and dims the grid (`dimmed`).
   if (!loading) return view;
-  return (
-    <LoadingRegion label="Loading onboarding guides" announce={!scoped}>
-      <LoadingScope>{view}</LoadingScope>
-    </LoadingRegion>
-  );
+  return <LoadingFallback label="Loading onboarding guides">{view}</LoadingFallback>;
 }
 
 /** The catalog's sections: their own skeleton while the guides are read (`useLoadingScope() || loading`). */
@@ -271,7 +303,9 @@ function OnboardingCatalogSections({
               read top-to-bottom; a grid would visually reorder them. */}
           <ul className={CATALOG_LIST_CLASS}>
             {sec.guides.map(guide => (
-              <li key={guide.id}>{renderCard(guide)}</li>
+              <li key={guide.id} data-loading-item>
+                {renderCard(guide)}
+              </li>
             ))}
           </ul>
         </section>

package/src/components/pagination.tsx

@@ -291,16 +291,7 @@ PaginationItem.displayName = 'PaginationItem';
 
 const PaginationLink = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
   ({ className, ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={cn(
-          'inline-flex h-10 w-10 items-center justify-center rounded-md border border-input bg-background transition-colors text-h6 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-          className,
-        )}
-        {...props}
-      />
-    );
+    return <Button variant="outline" size="icon" ref={ref} className={className} {...props} />;
   },
 );
 PaginationLink.displayName = 'PaginationLink';

package/src/components/platform/ToolBadge.tsx

@@ -62,7 +62,7 @@ const INLINE_CLASS = 'flex items-center gap-1 text-ods-text-secondary';
  */
 const CHIP_NAME_TYPICAL_CH = '11ch';
 
-export interface ToolBadgeSkeletonProps {
+interface ToolBadgeSkeletonProps {
   variant?: 'inline' | 'chip';
   /** Whether the badge leads with its mark (default true). */
   icon?: boolean;
@@ -70,7 +70,7 @@ export interface ToolBadgeSkeletonProps {
 }
 
 /** A badge while its tool is read: the chip's own frame (or the inline row), a mark box and a bar for the name. */
-export function ToolBadgeSkeleton({ variant = 'inline', icon = true, className }: ToolBadgeSkeletonProps) {
+function ToolBadgeSkeleton({ variant = 'inline', icon = true, className }: ToolBadgeSkeletonProps) {
   if (variant === 'chip') {
     return (
       <span className={cn(CHIP_CLASS, className)} style={CHIP_STYLE} aria-hidden>

package/src/components/platform/index.ts

@@ -16,8 +16,8 @@ export type { SoftwareSourceBadgeProps, SoftwareSource } from './SoftwareSourceB
 export { CveLink } from './CveLink';
 export type { CveLinkProps } from './CveLink';
 
-export { TOOL_CHIP_HEIGHT, ToolBadge, ToolBadgeSkeleton } from './ToolBadge';
-export type { ToolBadgeProps, ToolBadgeSkeletonProps } from './ToolBadge';
+export { TOOL_CHIP_HEIGHT, ToolBadge } from './ToolBadge';
+export type { ToolBadgeProps } from './ToolBadge';
 export type { ToolType } from '../../types/tool.types';
 
 export { ShellTypeBadge } from './ShellTypeBadge';

package/src/components/product-demo/product-screen.tsx

@@ -1,18 +1,36 @@
 'use client';
 
-import { lazy, type LazyExoticComponent, type ReactNode, Suspense } from 'react';
+import { createElement, type ReactNode, useEffect, useState } from 'react';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
-import { useLoadingScope } from '../ui/loading-scope';
+import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
 import { ProductScreenFrame, type ProductScreenFrameProps } from '../ui/product-screen-frame';
 import { PRODUCT_SCREEN_LOADERS } from './registry';
-import { PRODUCT_SCREEN_KEYS, PRODUCT_SCREEN_LABELS, type ProductScreenKey } from './screen-keys';
+import { PRODUCT_SCREEN_LABELS, type ProductScreenKey } from './screen-keys';
 import { PRODUCT_SCREEN_LOADING } from './screen-loading';
 import type { ProductScreenComponent } from './types';
 
-/** One lazy component per screen, made once: a screen's code is fetched the first time it renders. */
-const LAZY_SCREENS = Object.fromEntries(
-  PRODUCT_SCREEN_KEYS.map(key => [key, lazy(PRODUCT_SCREEN_LOADERS[key])]),
-) as Record<ProductScreenKey, LazyExoticComponent<ProductScreenComponent>>;
+/** The screens whose code has arrived, kept for the page's life: a screen shown again renders at once. */
+const LOADED_SCREENS = new Map<ProductScreenKey, ProductScreenComponent>();
+
+/**
+ * Fetches a screen's code outside a loading scope (a page's loading state fetches nothing) and re-renders once it is
+ * here. No Suspense: the frame keeps the SAME loading view mounted until the code arrives, so the loading state is
+ * drawn once and never torn down and mounted again (that was the double loading).
+ */
+function useScreenCode(screen: ProductScreenKey, fetch: boolean): void {
+  const [, setArrived] = useState(0);
+  useEffect(() => {
+    if (!fetch || LOADED_SCREENS.has(screen)) return undefined;
+    let live = true;
+    void PRODUCT_SCREEN_LOADERS[screen]().then(module => {
+      LOADED_SCREENS.set(screen, module.default);
+      if (live) setArrived(count => count + 1);
+    });
+    return () => {
+      live = false;
+    };
+  }, [screen, fetch]);
+}
 
 /** Frame heights of the two renderings: constants, so the loading state and the loaded screen are one box. */
 export const PRODUCT_SCREEN_HEIGHT = 440;
@@ -89,7 +107,13 @@ function ProductScreenShell({
  *  frame's box. */
 function ScreenLoading({ screen, compact }: { screen: ProductScreenKey; compact: boolean }) {
   const Loading = PRODUCT_SCREEN_LOADING[screen];
-  return Loading ? <Loading compact={compact} /> : <UnifiedSkeleton className="h-full w-full" />;
+  // Always in a loading scope: before the frame is measured (its scope) and while the screen's code downloads (the
+  // Suspense fallback) the view is drawn the SAME way, so the first paint and the fallback are one loading state.
+  return (
+    <LoadingScope bare>
+      {Loading ? <Loading compact={compact} /> : <UnifiedSkeleton className="h-full w-full" />}
+    </LoadingScope>
+  );
 }
 
 /**
@@ -99,17 +123,13 @@ function ScreenLoading({ screen, compact }: { screen: ProductScreenKey; compact:
  * nothing.
  */
 export function ProductScreen({ screen, compact = false, ...frame }: ProductScreenProps) {
-  const Screen = LAZY_SCREENS[screen];
   const loading = useLoadingScope();
+  useScreenCode(screen, !loading);
+  const Screen = LOADED_SCREENS.get(screen);
   return (
     <ProductScreenShell screen={screen} compact={compact} {...frame}>
-      {loading ? (
-        <ScreenLoading screen={screen} compact={compact} />
-      ) : (
-        <Suspense fallback={<ScreenLoading screen={screen} compact={compact} />}>
-          <Screen compact={compact} />
-        </Suspense>
-      )}
+      {/* The arrived screen is a module's component, kept in `LOADED_SCREENS`: never created during render. */}
+      {loading || !Screen ? <ScreenLoading screen={screen} compact={compact} /> : createElement(Screen, { compact })}
     </ProductScreenShell>
   );
 }

package/src/components/product-demo/screen-loading.tsx

@@ -4,11 +4,6 @@ import type { ProductScreenKey } from './screen-keys';
 import { DevicesScreenView } from './screens/devices-view';
 import type { ProductScreenComponent } from './types';
 
-/** The Devices screen while its code loads: the same view in its own loading state. */
-function DevicesScreenLoading({ compact = false }: { compact?: boolean }) {
-  return <DevicesScreenView compact={compact} loading />;
-}
-
 /**
  * Each screen's loading state, drawn in its frame while the screen's code (and its fixture) loads: the screen's own
  * VIEW rendered with `loading`, never a separate skeleton. Kept apart from `PRODUCT_SCREEN_LOADERS`: this module
@@ -16,5 +11,6 @@ function DevicesScreenLoading({ compact = false }: { compact?: boolean }) {
  * with no entry yet holds its frame's box.
  */
 export const PRODUCT_SCREEN_LOADING: Partial<Record<ProductScreenKey, ProductScreenComponent>> = {
-  devices: DevicesScreenLoading,
+  // The Devices screen while its code loads: the same view, in its own loading state.
+  devices: ({ compact = false }) => <DevicesScreenView compact={compact} loading />,
 };

package/src/components/related-content/card-registry.tsx

@@ -48,32 +48,27 @@ import type { CustomerInterview } from '../../types/customer-interview';
 import type { EntityAuthor } from '../../types/entity-author';
 import type { MSP } from '../../types/stack';
 import type { UserProfile } from '../../types/user';
-import { AiPromptCard, AiPromptCardSkeleton, type AiPromptCardData } from '../chat/entity-cards/ai-prompt-card';
+import { AiPromptCard, type AiPromptCardData } from '../chat/entity-cards/ai-prompt-card';
 // DEEP card imports — NOT the `../chat` barrel. See the import note in
 // `related-content-section.tsx`: the barrel statically reaches
 // @tanstack/react-query, deep paths keep this module's source graph free of it.
-import { BlogCard, BlogCardSkeleton } from '../chat/entity-cards/blog-card';
-import { CaseStudyCard, CaseStudyCardSkeleton } from '../chat/entity-cards/case-study-card';
-import { CustomerInterviewCard, CustomerInterviewCardSkeleton } from '../chat/entity-cards/customer-interview-card';
+import { BlogCard } from '../chat/entity-cards/blog-card';
+import { CaseStudyCard } from '../chat/entity-cards/case-study-card';
+import { CustomerInterviewCard } from '../chat/entity-cards/customer-interview-card';
 // Type-only — erased at build, no runtime dependency on the dispatch module.
 import type { ChatCardDispatchExtras } from '../chat/entity-cards/dispatch';
-import { HowIWorkCard, HowIWorkCardSkeleton, type HowIWorkCardData } from '../chat/entity-cards/how-i-work-card';
-import { InvestorUpdateCard, InvestorUpdateCardSkeleton } from '../chat/entity-cards/investor-update-card';
-import { OnboardingGuideCard, OnboardingGuideCardSkeleton } from '../chat/entity-cards/onboarding-guide-card';
+import { HowIWorkCard, type HowIWorkCardData } from '../chat/entity-cards/how-i-work-card';
+import { InvestorUpdateCard } from '../chat/entity-cards/investor-update-card';
+import { OnboardingGuideCard } from '../chat/entity-cards/onboarding-guide-card';
 import { buildProductReleaseCardProps } from '../chat/entity-cards/product-release-card-defaults';
-import { ProgramCard, ProgramCardSkeleton } from '../chat/entity-cards/program-card';
-import { RoadmapCard, RoadmapCardSkeleton } from '../chat/entity-cards/roadmap-card';
-import {
-  WhatIShippedCard,
-  WhatIShippedCardSkeleton,
-  type WhatIShippedCardData,
-} from '../chat/entity-cards/what-i-shipped-card';
+import { ProgramCard } from '../chat/entity-cards/program-card';
+import { RoadmapCard } from '../chat/entity-cards/roadmap-card';
+import { WhatIShippedCard, type WhatIShippedCardData } from '../chat/entity-cards/what-i-shipped-card';
 import type { InvestorUpdate } from '../chat/types/entities/investor-update';
 import type { OnboardingGuide } from '../chat/types/entities/onboarding-guide';
 import type { BaseProgramItem, ProgramHost, ProgramMedia } from '../chat/types/entities/program-types';
 import type { RoadmapItem } from '../chat/types/entities/roadmap-item';
 import { ProductReleaseCard } from '../shared/product-release/product-release-card';
-import { ProductReleaseCardSkeleton } from '../shared/product-release/product-release-card-skeleton';
 
 export type CardSize = 'lg' | 'default' | 'sm';
 
@@ -621,20 +616,13 @@ function cardEntry<Row>(definition: {
  *  which host-supplied `ProgramConfig` they render with. A group whose config
  *  the host didn't supply renders nothing (the skeleton still reserves its
  *  height, so a rail that never resolves collapses instead of flickering). */
-/** Gallery thumbnails an event card's skeleton draws: the gallery row's first fold (the row scrolls past it). */
-const EVENT_CARD_SKELETON_MEDIA = 4;
 
 function programEntry(configKey: 'podcast' | 'webinar' | 'event'): RelatedCardRegistryEntry {
   return cardEntry({
-    // An event's list API serves its gallery (the loaded card draws its photo row), the other programs' none.
-    // Hosts are drawn only for a type whose cards show them (its config's `cardShowsHosts`): elsewhere a record may
-    // have none.
+    // The gallery and hosts rows are drawn only for a type whose cards show them (its config's `cardShowsGallery`,
+    // `cardShowsHosts`), as `ProgramCard` decides in a scope: elsewhere a record may have none.
     skeleton: (size, extras) => (
-      <ProgramCardSkeleton
-        size={size === 'sm' ? 'sm' : 'default'}
-        media={configKey === 'event' ? EVENT_CARD_SKELETON_MEDIA : 0}
-        hosts={extras?.programConfigs?.[configKey]?.cardShowsHosts ? 1 : 0}
-      />
+      <ProgramCard loading config={extras?.programConfigs?.[configKey]} size={size === 'sm' ? 'sm' : 'default'} />
     ),
     decode: decodeProgramRow,
     render: (item, ctx) => {
@@ -662,7 +650,7 @@ function programEntry(configKey: 'podcast' | 'webinar' | 'event'): RelatedCardRe
  *  `cardType` (drives the compact icon slot). */
 function roadmapEntry(cardType: 'roadmap_item' | 'delivery_item' | 'internal_task'): RelatedCardRegistryEntry {
   return cardEntry({
-    skeleton: size => <RoadmapCardSkeleton size={size === 'sm' ? 'sm' : 'default'} />,
+    skeleton: size => <RoadmapCard loading size={size === 'sm' ? 'sm' : 'default'} />,
     decode: decodeRoadmapRow,
     render: (item, ctx) => (
       <RoadmapCard
@@ -681,7 +669,7 @@ function roadmapEntry(cardType: 'roadmap_item' | 'delivery_item' | 'internal_tas
 
 export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
   blog_post_existing: cardEntry({
-    skeleton: size => <BlogCardSkeleton size={size === 'sm' ? 'sm' : 'default'} />,
+    skeleton: size => <BlogCard loading size={size === 'sm' ? 'sm' : 'default'} />,
     decode: decodeBlogRow,
     render: (post, ctx) => (
       <BlogCard
@@ -697,7 +685,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
   }),
 
   case_study: cardEntry({
-    skeleton: size => <CaseStudyCardSkeleton size={size === 'sm' ? 'sm' : 'default'} />,
+    skeleton: size => <CaseStudyCard loading size={size === 'sm' ? 'sm' : 'default'} />,
     decode: decodeCaseStudyRow,
     render: (study, ctx) => (
       <CaseStudyCard
@@ -712,7 +700,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
   }),
 
   customer_interview: cardEntry({
-    skeleton: size => <CustomerInterviewCardSkeleton size={size === 'sm' ? 'sm' : 'default'} />,
+    skeleton: size => <CustomerInterviewCard loading size={size === 'sm' ? 'sm' : 'default'} />,
     decode: decodeCustomerInterviewRow,
     render: (interview, ctx) => (
       <CustomerInterviewCard
@@ -733,7 +721,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
    * record, and the three props the rail sets itself are read off it.
    */
   product_release: cardEntry({
-    skeleton: size => <ProductReleaseCardSkeleton size={size === 'sm' ? 'sm' : 'lg'} />,
+    skeleton: size => <ProductReleaseCard loading size={size === 'sm' ? 'sm' : 'lg'} />,
     decode: asRecord,
     render: (release, ctx) => {
       const buildReleaseProps = ctx.extras?.buildProductReleaseCardProps ?? buildProductReleaseCardProps;
@@ -764,7 +752,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
   event: programEntry('event'),
 
   investor_update: cardEntry({
-    skeleton: size => <InvestorUpdateCardSkeleton size={size === 'sm' ? 'sm' : 'default'} />,
+    skeleton: size => <InvestorUpdateCard loading size={size === 'sm' ? 'sm' : 'default'} />,
     decode: decodeInvestorUpdateRow,
     render: (update, ctx) => (
       <InvestorUpdateCard
@@ -782,7 +770,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
    *  step-numbered 'default' variant is for the guide detail page's "More in
    *  section" rail, not this full-width row. */
   onboarding_guide: cardEntry({
-    skeleton: size => <OnboardingGuideCardSkeleton size={size === 'sm' ? 'sm' : 'catalog'} published={false} />,
+    skeleton: size => <OnboardingGuideCard loading size={size === 'sm' ? 'sm' : 'catalog'} published={false} />,
     decode: decodeOnboardingGuideRow,
     render: (guide, ctx) => (
       <OnboardingGuideCard
@@ -802,7 +790,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
    *  href: an object with `href: undefined` is still truthy and would wrap the
    *  card in a dead <a>. */
   what_i_shipped: cardEntry({
-    skeleton: () => <WhatIShippedCardSkeleton />,
+    skeleton: () => <WhatIShippedCard loading />,
     decode: decodeEmployeeEntryRow,
     render: (entry, ctx) => (
       <WhatIShippedCard
@@ -815,7 +803,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
 
   /** Same shared employee-entry shape + anchor contract as What I Shipped. */
   how_i_work: cardEntry({
-    skeleton: () => <HowIWorkCardSkeleton />,
+    skeleton: () => <HowIWorkCard loading />,
     decode: decodeEmployeeEntryRow,
     render: (entry, ctx) => (
       <HowIWorkCard
@@ -828,7 +816,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
 
   /** Same shared employee-entry shape + anchor contract as What I Shipped. */
   ai_prompt: cardEntry({
-    skeleton: () => <AiPromptCardSkeleton />,
+    skeleton: () => <AiPromptCard loading />,
     decode: decodeEmployeeEntryRow,
     render: (entry, ctx) => (
       <AiPromptCard

package/src/components/related-content/index.ts

@@ -1,8 +1,6 @@
 // CLIENT subpath barrel — `@flamingo-stack/openframe-frontend-core/components/related-content`
 export {
   RelatedContentSection,
-  RelatedContentSectionSkeleton,
-  type RelatedContentSectionSkeletonProps,
   type RelatedContentSectionProps,
   type CardLinkProvider,
   type CardLinkProviderProps,

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

@@ -817,7 +817,7 @@ export function RelatedContentSection({
   );
 }
 
-export interface RelatedContentSectionSkeletonProps extends Pick<
+interface RelatedContentSectionSkeletonProps extends Pick<
   RelatedContentSectionProps,
   'title' | 'entityType' | 'minResults' | 'sameTypeMinResults' | 'columns' | 'adminCampaignCard' | 'extras'
 > {
@@ -834,7 +834,7 @@ export interface RelatedContentSectionSkeletonProps extends Pick<
  * group per type in the loaded rail's order, each with its real label heading and its cards' own skeletons in the
  * group's layout: `sameTypeMinResults` for the host's type, `minResults` for the others (a page never needs a pager).
  */
-export function RelatedContentSectionSkeleton({
+function RelatedContentSectionSkeleton({
   title = 'Related Content',
   types,
   entityType,

package/src/components/results-count.tsx

@@ -49,7 +49,7 @@ export function ResultsCount({ currentPage, pageSize, totalResults, resultType,
  * The results count while the list is read: the same row and line, the words its own ("Showing", "of", the result
  * type, the sorting message) and the two numbers as bars.
  */
-export function ResultsCountSkeleton({
+function ResultsCountSkeleton({
   resultType,
   sortingMessage,
 }: Pick<ResultsCountProps, 'resultType' | 'sortingMessage'>) {

package/src/components/shared/article-author-byline.tsx

@@ -168,7 +168,7 @@ export function ArticleAuthorByline({
  * The byline while its author is read: the card frame, the avatar circle at its size, and bars for the name (h5),
  * the job title and three bio lines, each inside the loaded text's own element so it takes that line's height.
  */
-export function ArticleAuthorBylineSkeleton({ size = 'md', className }: { size?: 'md' | 'lg'; className?: string }) {
+function ArticleAuthorBylineSkeleton({ size = 'md', className }: { size?: 'md' | 'lg'; className?: string }) {
   return (
     <div className={cn(BYLINE_FRAME_CLASS, className)} aria-hidden>
       <div className="flex-shrink-0">