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

package/src/components/chat/chat-turn.tsx

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
+import { SquareAvatarSkeleton } from '../ui/square-avatar';
 
 export interface ChatTurnProps {
   /** Rendered as given, at the size the caller draws it (a person's picture, an agent's mark). */
@@ -14,38 +17,141 @@ export interface ChatTurnProps {
   /** What was said. A string is drawn as the message text; a node is drawn as given. */
   children?: ReactNode;
   className?: string;
+  /**
+   * The loading state a loading scope draws, the turn's own skeleton: the picture's size in px (none without it),
+   * the message's line count (1 by default) and whether a time is shown.
+   */
+  skeleton?: Omit<ChatTurnSkeletonProps, 'nameSize' | 'className'>;
 }
 
+/** The turn's layout, read by the turn and by its skeleton, so the skeleton is the turn's size. */
+export const TURN_ROW_CLASS = 'flex min-w-0 items-start gap-[var(--spacing-system-sf)]';
+export const TURN_BODY_CLASS = 'flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]';
+const NAME_ROW_CLASS = 'flex min-w-0 items-baseline gap-[var(--spacing-system-xsf)]';
+/**
+ * The name and its meta: stacked below `content-md` (a phone's card has no room for both on one line, and a cut
+ * name or meta says nothing), side by side from `content-md`. The skeleton reads the same class, so it stacks where
+ * the turn does.
+ */
+const NAME_GROUP_CLASS =
+  'flex min-w-0 flex-1 flex-col content-md:flex-row content-md:items-baseline content-md:gap-[var(--spacing-system-xsf)]';
+const META_CLASS = 'min-w-0 text-ods-text-secondary text-h6 content-md:truncate';
+const NAME_TYPE = { default: 'h4', quiet: 'h6' } as const;
+const NAME_CLASS = { default: 'text-ods-text-primary text-h4', quiet: 'text-ods-text-secondary text-h6' } as const;
+const TIME_CLASS = 'shrink-0 text-ods-text-secondary text-h6';
+const MESSAGE_CLASS = 'm-0 whitespace-pre-wrap text-ods-text-primary text-h4';
+
 /**
  * THE turn of a scripted conversation (an example card, a step of a demo): the
  * speaker's picture, then beside it their name, the time at the far end, and
  * what was said under them. Names read as they do everywhere else: the body
  * face, the text colour.
  */
-export function ChatTurn({ avatar, name, meta, nameSize = 'default', time, children, className }: ChatTurnProps) {
+export function ChatTurn({
+  avatar,
+  name,
+  meta,
+  nameSize = 'default',
+  time,
+  children,
+  className,
+  skeleton,
+}: ChatTurnProps) {
+  if (useLoadingScope()) {
+    return (
+      <ChatTurnSkeleton
+        nameSize={nameSize}
+        // `null` says the turn has no time; a placeholder's `''` is a time still to be read.
+        time={skeleton?.time ?? time != null}
+        meta={skeleton?.meta ?? !!meta}
+        lines={skeleton?.lines}
+        avatarPx={skeleton?.avatarPx}
+        className={className}
+      />
+    );
+  }
   return (
-    <div className={cn('flex min-w-0 items-start gap-[var(--spacing-system-sf)]', className)}>
+    <div className={cn(TURN_ROW_CLASS, className)}>
       {avatar && <span className="shrink-0">{avatar}</span>}
-      <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-        <div className="flex min-w-0 items-baseline gap-[var(--spacing-system-xsf)]">
-          <span className="flex min-w-0 flex-1 items-baseline gap-[var(--spacing-system-xsf)]">
-            <span
-              className={cn(
-                'min-w-0 truncate',
-                nameSize === 'quiet' ? 'text-ods-text-secondary text-h6' : 'text-ods-text-primary text-h4',
-              )}
-            >
-              {name}
-            </span>
-            {meta && <span className="min-w-0 truncate text-ods-text-secondary text-h6">{meta}</span>}
+      <div className={TURN_BODY_CLASS}>
+        <div className={NAME_ROW_CLASS}>
+          <span className={NAME_GROUP_CLASS}>
+            <span className={cn('min-w-0 truncate', NAME_CLASS[nameSize])}>{name}</span>
+            {meta && <span className={META_CLASS}>{meta}</span>}
           </span>
-          {time && <span className="shrink-0 text-ods-text-secondary text-h6">{time}</span>}
+          {time && <span className={TIME_CLASS}>{time}</span>}
         </div>
-        {typeof children === 'string' ? (
-          <p className="m-0 whitespace-pre-wrap text-ods-text-primary text-h4">{children}</p>
+        {typeof children === 'string' ? <p className={MESSAGE_CLASS}>{children}</p> : children}
+      </div>
+    </div>
+  );
+}
+
+export interface ChatTurnSkeletonProps {
+  /** The picture's size in px; no picture without it. */
+  avatarPx?: number;
+  /** The picture's corner, as the caller draws it (a person's round photo by default, a square logo). */
+  avatarShape?: 'square' | 'round';
+  nameSize?: 'default' | 'quiet';
+  /** How many lines the message takes. */
+  lines?: 1 | 2 | 3;
+  /** Whether the name row carries a time at its far end. */
+  time?: boolean;
+  /** Whether the name carries a meta line; a string is static copy, drawn for real. */
+  meta?: boolean | string;
+  className?: string;
+}
+
+/**
+ * The turn's name row while it is read: a bar at the name's type step, the meta (stacked under it below
+ * `content-md`, beside it from there, as the turn draws it) and the time at the far end. Read by the turn's
+ * skeleton and by every card that draws a turn of its own.
+ */
+export function ChatTurnNameSkeleton({
+  nameSize = 'default',
+  meta = false,
+  time = false,
+}: Pick<ChatTurnSkeletonProps, 'nameSize' | 'meta' | 'time'>) {
+  return (
+    <div className={NAME_ROW_CLASS}>
+      <span className={NAME_GROUP_CLASS}>
+        <TextLineSkeleton type={NAME_TYPE[nameSize]} className="w-24" />
+        {typeof meta === 'string' ? (
+          <span className={META_CLASS}>{meta}</span>
         ) : (
-          children
+          meta && <TextLineSkeleton type="h6" className="w-20" />
         )}
+      </span>
+      {time && <TextLineSkeleton type="h6" className="w-12 shrink-0" />}
+    </div>
+  );
+}
+
+/** A turn while it is read: the picture's box, a bar at the name's type step, and a bar per message line. */
+export function ChatTurnSkeleton({
+  avatarPx,
+  avatarShape = 'round',
+  nameSize = 'default',
+  lines = 1,
+  time = false,
+  meta = false,
+  className,
+}: ChatTurnSkeletonProps) {
+  return (
+    <div className={cn(TURN_ROW_CLASS, className)} aria-hidden>
+      {avatarPx ? <SquareAvatarSkeleton sizePx={avatarPx} variant={avatarShape} /> : null}
+      <div className={TURN_BODY_CLASS}>
+        <ChatTurnNameSkeleton nameSize={nameSize} meta={meta} time={time} />
+        <div>
+          {Array.from({ length: lines }, (_, i) => (
+            <TextLineSkeleton
+              // biome-ignore lint/suspicious/noArrayIndexKey: skeleton lines never reorder
+              key={i}
+              type="h4"
+              className={i === lines - 1 && lines > 1 ? 'w-2/3' : 'w-full'}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );

package/src/components/chat/embeddable-chat.tsx

@@ -47,6 +47,7 @@ import { useRouter } from '../../embed-shims/next-navigation';
 import { useIsHydrated } from '../../hooks/ui/use-is-hydrated';
 import { cn } from '../../utils/cn';
 import { formatCitationIndices } from '../../utils/source-grouping';
+import { getSourceIconName } from '../../utils/source-icons';
 import { AgentMark } from '../agent-mark';
 import { EntityIcon } from '../icon-display';
 import {
@@ -88,8 +89,8 @@ import { useChatDialogManager } from './hooks/use-chat-dialog-manager';
 import { useChatIdentity } from './hooks/use-chat-identity';
 import { useCloseOnNavigation } from './hooks/use-close-on-navigation';
 import { useEmptyStateConfig } from './hooks/use-empty-state-config';
-import { fetchSlashCommands, useSlashCommandRegistry, type SlashCommandSummary } from './hooks/use-slash-commands';
-import type { ChatSource, UseSseChatAdapterOptions } from './hooks/use-sse-chat-adapter';
+import { fetchSlashCommands, useSlashCommandRegistry } from './hooks/use-slash-commands';
+import type { UseSseChatAdapterOptions } from './hooks/use-sse-chat-adapter';
 import { useUnifiedChat, type ChatMode, type UseUnifiedChatModes } from './hooks/use-unified-chat';
 import { awaitsDecision, useWhatToAsk, type WhatToAskContent } from './hooks/use-what-to-ask';
 import { MingoArchiveList } from './mingo-archive-list';
@@ -104,9 +105,9 @@ import { NavLinkAnchorViaRuntime } from './nav-link-anchor-via-runtime';
 import { accentFromIdentityIcon, getAgentAccent } from './quick-action-chip';
 import { SourceActionButton } from './source-action-button';
 import { AUTHOR_TYPE, CHAT_APPEARANCE, type ChatAppearance } from './types/chat.types';
-import type { ChatInputRef, DialogItem, SlashCommandActionId } from './types/component.types';
+import type { SlashCommandSummary, ChatInputRef, DialogItem, SlashCommandActionId } from './types/component.types';
 import type { ChatContextItem, ChatContextPickerConfig } from './types/context-item.types';
-import type { MessageSegment, Message } from './types/message.types';
+import type { ChatSource, MessageSegment, Message } from './types/message.types';
 import type {
   ChatDialogCapabilities,
   UnifiedChatState,
@@ -123,7 +124,6 @@ import { mapHostMessage, pruneTimestampCache } from './utils/host-message';
 import { resolveIcon } from './utils/icon-library';
 import { computeIsNewTab, newTabAnchorAttrs } from './utils/nav-anchor-props';
 import { formatSingularLookupInvocation } from './utils/slash-dispatch-utils';
-import { getSourceIconName } from './utils/source-icons';
 import { resolveSourceRowCTA, sourceRowCtxFromRuntime } from './utils/source-row-cta';
 
 /**

package/src/components/chat/entity-cards/admin-content-card-grid.tsx

@@ -3,62 +3,12 @@
 import type { ComponentType, ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
 import { LoadingRegion } from '../../loading/loading-region';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { AdminContentCardSkeleton } from './admin-content-card';
 
 /** THE admin card grid: columns and gap shared by the live grid and its skeleton. */
 export const ADMIN_CONTENT_CARD_GRID_CLASS =
   'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-system-lf)]';
 
-/**
- * One `AdminContentCard reserveRows`-shaped placeholder. It mirrors that card box
- * for box (3:2 cover, then a `gap-3 p-5` column: two-line title, subtitle line,
- * two-line summary, 28px badges row, meta line, bordered actions row), each text
- * row sized in its own typography's line height, so a skeleton, a real card and a
- * reserved slot are the same height at every breakpoint. `p-5` has no ODS token
- * (20px); it is the card's own padding and must match it exactly.
- */
-export function AdminContentCardSkeleton({
-  className,
-  actions = true,
-  subtitleRow = true,
-}: {
-  className?: string;
-  /** Matches the card's `subtitleRow`: off for a card type that has no subtitle line. */
-  subtitleRow?: boolean;
-  /** The bordered actions row. Off for a card rendered without `actions` (a read-only rail card). */
-  actions?: boolean;
-}) {
-  return (
-    <div
-      className={cn(
-        'flex h-full flex-col overflow-hidden rounded-2xl border border-ods-border bg-transparent',
-        className,
-      )}
-    >
-      <UnifiedSkeleton className="aspect-[3/2] w-full shrink-0" />
-      <div className="flex flex-1 flex-col gap-[var(--spacing-system-sf)] p-5">
-        <UnifiedSkeleton className="h-[2lh] w-full rounded text-h3" />
-        {subtitleRow && <UnifiedSkeleton className="h-[1lh] w-1/2 rounded text-h6" />}
-        <UnifiedSkeleton className="h-[2lh] w-full rounded text-h6" />
-        <div className="flex h-7 items-center gap-[var(--spacing-system-xsf)]">
-          <UnifiedSkeleton className="h-5 w-20 rounded-full" />
-          <UnifiedSkeleton className="h-5 w-24 rounded-full" />
-        </div>
-        <UnifiedSkeleton className="h-[1lh] w-32 rounded text-h6" />
-        {actions && (
-          <div className="mt-auto flex items-center justify-between border-t border-ods-border pt-[var(--spacing-system-sf)]">
-            <UnifiedSkeleton className="h-10 w-24 rounded" />
-            <div className="flex gap-[var(--spacing-system-xsf)]">
-              <UnifiedSkeleton className="h-10 w-20 rounded" />
-              <UnifiedSkeleton className="h-10 w-20 rounded" />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
 export interface AdminContentCardGridSkeletonProps {
   /** How many placeholder cards: one page. */
   count?: number;

package/src/components/chat/entity-cards/admin-content-card.tsx

@@ -4,10 +4,22 @@ import type React from 'react';
 import { useState } from 'react';
 import Image from '../../../embed-shims/next-image';
 import { useImageEdgeColor } from '../../../hooks/ui/use-image-edge-color';
+import { MEDIA_ASPECT } from '../../../styles/component-sizes';
 import { cn } from '../../../utils/cn';
-import { PlatformBadge } from '../../features/platform-badge';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
-import { CONTENT_CARD_FRAME_CLASS } from './content-card-frame';
+import { PlatformBadge, PlatformBadgeSkeleton } from '../../features/platform-badge';
+import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
+
+// The card's boxes, read by the card AND `AdminContentCardSkeleton`, so the two are one size at every width.
+const ADMIN_CARD_FRAME = 'flex h-full flex-col';
+const ADMIN_CARD_COVER = `relative ${MEDIA_ASPECT.photo} w-full shrink-0 overflow-hidden`;
+/** `p-5` has no ODS token (20px); it is the card's own padding. */
+const ADMIN_CARD_BODY = 'flex flex-1 flex-col gap-3 p-5';
+const ADMIN_CARD_BADGES = 'flex flex-wrap items-center gap-2';
+const ADMIN_CARD_BADGES_RESERVED = 'min-h-7';
+const ADMIN_CARD_META = 'flex items-center gap-3 text-ods-text-secondary text-h6';
+const ADMIN_CARD_ACTIONS = 'mt-auto flex items-center justify-between border-t border-ods-border pt-3';
 
 interface PlatformInfo {
   platform_id?: string;
@@ -79,10 +91,16 @@ export function AdminContentCard({
   const imageLoaded = Boolean(displayUrl) && loadedUrl === displayUrl;
   const imageBgColor = useImageEdgeColor(displayUrl || null, 'transparent');
 
+  if (useLoadingScope()) {
+    return (
+      <AdminContentCardSkeleton className={className} subtitleRow={subtitleRow} actions={actions ? actions : false} />
+    );
+  }
+
   return (
-    <article className={cn(CONTENT_CARD_FRAME_CLASS, 'flex h-full flex-col', className)}>
+    <article className={cn(CONTENT_CARD_FRAME_CLASS, ADMIN_CARD_FRAME, className)}>
       {/* Cover Image — 3:2 aspect ratio, centered with edge-color fill */}
-      <div className="relative aspect-[3/2] w-full shrink-0 overflow-hidden" style={{ backgroundColor: imageBgColor }}>
+      <div className={ADMIN_CARD_COVER} style={{ backgroundColor: imageBgColor }}>
         {displayUrl ? (
           <>
             {!imageLoaded && <UnifiedSkeleton className="absolute inset-0 h-full rounded-none" />}
@@ -108,7 +126,7 @@ export function AdminContentCard({
       </div>
 
       {/* Content */}
-      <div className="flex flex-1 flex-col gap-3 p-5">
+      <div className={ADMIN_CARD_BODY}>
         {/* Title */}
         <h3 className={cn('line-clamp-2 break-words text-ods-text-primary text-h3', reserveRows && 'min-h-[2lh]')}>
           {title}
@@ -126,7 +144,7 @@ export function AdminContentCard({
 
         {/* Badges row */}
         {(Number(platforms?.length) > 0 || badges || reserveRows) && (
-          <div className={cn('flex flex-wrap items-center gap-2', reserveRows && 'min-h-7')}>
+          <div className={cn(ADMIN_CARD_BADGES, reserveRows && ADMIN_CARD_BADGES_RESERVED)}>
             {platforms?.map(p => (
               <PlatformBadge
                 key={p.platform_id || p.id}
@@ -139,17 +157,64 @@ export function AdminContentCard({
         )}
 
         {/* Meta row */}
-        {(meta || reserveRows) && (
-          <div className={cn('flex items-center gap-3 text-ods-text-secondary text-h6', reserveRows && 'min-h-[1lh]')}>
-            {meta}
-          </div>
-        )}
+        {(meta || reserveRows) && <div className={cn(ADMIN_CARD_META, reserveRows && 'min-h-[1lh]')}>{meta}</div>}
 
         {/* Actions — pushed to bottom */}
-        {actions && (
-          <div className="mt-auto flex items-center justify-between border-t border-ods-border pt-3">{actions}</div>
-        )}
+        {actions && <div className={ADMIN_CARD_ACTIONS}>{actions}</div>}
       </div>
     </article>
   );
 }
+
+/**
+ * One `AdminContentCard reserveRows`-shaped placeholder, in the card's own boxes: the 3:2 cover, a two-line `text-h3`
+ * title, the subtitle line, a two-line `text-h6` summary, the 28px badges row, the meta line and the bordered actions
+ * row. The actions are the caller's own controls (static) when it passes them, bars otherwise.
+ */
+export function AdminContentCardSkeleton({
+  className,
+  actions = true,
+  subtitleRow = true,
+}: {
+  className?: string;
+  /** Matches the card's `subtitleRow`: off for a card type that has no subtitle line. */
+  subtitleRow?: boolean;
+  /**
+   * The bordered actions row: `true` draws button bars, a node draws those controls for real, `false` (a read-only
+   * rail card) draws none.
+   */
+  actions?: boolean | React.ReactNode;
+}) {
+  return (
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, ADMIN_CARD_FRAME, className)} aria-hidden>
+      <UnifiedSkeleton className={cn(ADMIN_CARD_COVER, 'rounded-none')} />
+      <div className={ADMIN_CARD_BODY}>
+        <TextLineSkeleton type="h3" lines={2} className="w-full" />
+        {subtitleRow && <TextLineSkeleton type="h6" className="w-1/2" />}
+        <TextLineSkeleton type="h6" lines={2} className="w-full" />
+        <div className={cn(ADMIN_CARD_BADGES, ADMIN_CARD_BADGES_RESERVED)}>
+          <PlatformBadgeSkeleton size="xs" />
+          <PlatformBadgeSkeleton size="xs" />
+        </div>
+        <div className={ADMIN_CARD_META}>
+          <TextLineSkeleton type="h6" className="w-32" />
+        </div>
+        {actions === true ? (
+          <div className={ADMIN_CARD_ACTIONS}>
+            {/* The admin cards' actions are `small-legacy` buttons: their own size classes, never a copied box. */}
+            <InteractiveSkeleton.Button size="small-legacy" />
+            <div className="flex gap-[var(--spacing-system-xsf)]">
+              <InteractiveSkeleton.Button size="small-legacy" className="w-20" />
+              <InteractiveSkeleton.Button size="small-legacy" className="w-20" />
+            </div>
+          </div>
+        ) : actions ? (
+          // The caller's own controls, drawn as they are but never focused while the card is a skeleton.
+          <div className={ADMIN_CARD_ACTIONS} inert>
+            {actions}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

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

@@ -21,26 +21,27 @@
 import { Eye } from 'lucide-react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
+import { AVATAR_SIZE, MEDIA_ASPECT, TEXT_LINES_MIN } from '../../../styles/component-sizes';
 import type { BlogPostSummary } from '../../../types/blog';
 import { cn } from '../../../utils/cn';
 import { formatDateWithTimezone } from '../../../utils/format';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { MediaSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { StatusBadge } from '../../ui/status-badge';
 import {
   COMPACT_CARD_IMAGE_SLOT,
   COMPACT_CARD_META_ROW_BOX,
   COMPACT_CARD_OUTER,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUBTITLE,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW,
 } from '../utils/compact-card-classes';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
-import { EntityPortraitCard } from './entity-portrait-card';
+import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
 import { useCoverImageFallback } from './use-cover-image-fallback';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
@@ -72,37 +73,65 @@ export interface BlogCardProps {
   priority?: boolean;
 }
 
-/** `portrait` shares the default skeleton shape (same zone boxes). */
-export function BlogCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' }) {
-  if (size === 'sm') {
+// The default card's boxes, read by the card AND its skeleton, so the two are one size at every width.
+const BLOG_CARD_FRAME = 'flex h-full flex-col';
+const BLOG_CARD_COVER = `relative ${MEDIA_ASPECT.og} w-full overflow-hidden`;
+const BLOG_CARD_BODY = 'flex flex-grow flex-col p-4';
+/** The title row keeps two lines of `text-h3` whatever the title's length. */
+const BLOG_CARD_TITLE_ROW = `mb-3 flex items-center text-h3 ${TEXT_LINES_MIN[2]}`;
+/** The summary row keeps two lines of `text-h6`. */
+const BLOG_CARD_SUMMARY_ROW = `mb-3 flex items-center text-h6 ${TEXT_LINES_MIN[2]}`;
+const BLOG_CARD_BYLINE = 'mt-auto flex items-center justify-between gap-2 text-ods-text-secondary text-h6';
+const BLOG_CARD_BYLINE_PERSON = 'flex min-w-0 items-center gap-2';
+const BLOG_CARD_VIEWS = 'flex shrink-0 items-center gap-1';
+/** The byline avatar's box (32px, the photo cropped to it): an author photo of any shape takes exactly this box, and
+ *  the skeleton draws the same box. */
+const BLOG_CARD_AVATAR = `${AVATAR_SIZE.sm} shrink-0 rounded-full object-cover`;
+/** The content-type chip a portrait blog card shows (a static label). */
+const BLOG_POST_TYPE_LABEL = 'Blog Post';
+
+/**
+ * A blog card while it is read, one per density. `default`: the card's own rows (cover; the title as two `text-h3`
+ * lines; the summary as two `text-h6` lines; the byline's 32px avatar and `text-h6` line; the view count's icon is
+ * drawn for real beside its bar). `portrait`: the shared portrait skeleton with the static chip.
+ */
+export function BlogCardSkeleton({
+  size = 'default',
+  showTypeBadge = true,
+  className,
+}: {
+  size?: 'default' | 'sm' | 'portrait';
+  /** `portrait`: the card shows the "Blog Post" chip. */
+  showTypeBadge?: boolean;
+  className?: string;
+}) {
+  if (size === 'portrait') {
     return (
-      <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
-        <span className={COMPACT_CARD_TEXT_COL}>
-          <span className={COMPACT_CARD_TITLE_ROW}>
-            <UnifiedSkeleton as="span" className="h-3.5 w-3/5 rounded" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-2/5 rounded" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-11/12 rounded" />
-          </span>
-        </span>
-      </span>
+      <EntityPortraitCardSkeleton typeLabel={showTypeBadge ? BLOG_POST_TYPE_LABEL : undefined} className={className} />
     );
   }
+  if (size === 'sm') {
+    return <CompactCardSkeleton className={className} />;
+  }
   return (
-    <article className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'group flex h-full flex-col')}>
-      <UnifiedSkeleton className="aspect-[1200/630]" />
-      <div className="flex flex-grow flex-col space-y-3 p-4">
-        <UnifiedSkeleton className="h-5 w-3/4 rounded" />
-        <UnifiedSkeleton className="h-5 w-1/2 rounded" />
-        <UnifiedSkeleton className="h-3 w-full rounded" />
-        <UnifiedSkeleton className="h-3 w-4/5 rounded" />
-        <div className="mt-auto flex items-center gap-2">
-          <UnifiedSkeleton className="h-8 w-8 rounded-full" />
-          <UnifiedSkeleton className="h-3 w-24 rounded" />
+    <article className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, BLOG_CARD_FRAME, className)} aria-hidden>
+      <UnifiedSkeleton className={cn(BLOG_CARD_COVER, 'rounded-none')} />
+      <div className={BLOG_CARD_BODY}>
+        <div className={BLOG_CARD_TITLE_ROW}>
+          <TextLineSkeleton type="h3" lines={2} className="w-full" />
+        </div>
+        <div className={BLOG_CARD_SUMMARY_ROW}>
+          <TextLineSkeleton type="h6" lines={2} className="w-full" />
+        </div>
+        <div className={BLOG_CARD_BYLINE}>
+          <div className={BLOG_CARD_BYLINE_PERSON}>
+            <MediaSkeleton.Avatar size="sm" className={BLOG_CARD_AVATAR} />
+            <TextLineSkeleton type="h6" className="w-40" />
+          </div>
+          <div className={BLOG_CARD_VIEWS}>
+            <Eye className="h-4 w-4 shrink-0" />
+            <TextLineSkeleton type="h6" className="w-8" />
+          </div>
         </div>
       </div>
     </article>
@@ -135,6 +164,7 @@ export function BlogCard({
   });
   // Shared cover → placeholder → hide chain (ONE fallback logic for all cards).
   const { src: displayImage, onError: onImageError } = useCoverImageFallback(post.featured_image, placeholderUrl);
+  if (useLoadingScope()) return <BlogCardSkeleton size={size} showTypeBadge={showTypeBadge} className={className} />;
 
   if (size === 'sm') {
     const dateStr = post.published_at ? formatDateWithTimezone(post.published_at, null, 'medium') : '';
@@ -186,7 +216,7 @@ export function BlogCard({
         href={href}
         target={target}
         rel={rel}
-        typeLabel={showTypeBadge ? 'Blog Post' : undefined}
+        typeLabel={showTypeBadge ? BLOG_POST_TYPE_LABEL : undefined}
         imageUrl={post.featured_image}
         placeholderUrl={placeholderUrl}
         imageAlt={post.title}
@@ -204,9 +234,9 @@ export function BlogCard({
   // Default: full vertical card.
   const dateStr = post.published_at ? formatDateWithTimezone(post.published_at, null, 'medium') : '';
   return (
-    <article className={cn(CONTENT_CARD_FRAME_CLASS, 'flex h-full flex-col', className)} role="article">
+    <article className={cn(CONTENT_CARD_FRAME_CLASS, BLOG_CARD_FRAME, className)} role="article">
       <Link href={href} target={target} rel={rel} className="flex h-full flex-col focus:outline-none">
-        <div className="relative aspect-[1200/630] w-full overflow-hidden bg-ods-bg">
+        <div className={cn(BLOG_CARD_COVER, 'bg-ods-bg')}>
           {displayImage ? (
             <Image
               src={displayImage}
@@ -222,8 +252,8 @@ export function BlogCard({
           ) : null}
         </div>
 
-        <div className="flex flex-grow flex-col p-4">
-          <div className="mb-3 flex min-h-[50.4px] items-center md:min-h-[56px] lg:min-h-[61.6px]">
+        <div className={BLOG_CARD_BODY}>
+          <div className={BLOG_CARD_TITLE_ROW}>
             <h3
               className={cn(
                 'text-ods-text-primary text-h3',
@@ -236,19 +266,19 @@ export function BlogCard({
             </h3>
           </div>
 
-          <div className="mb-3 flex min-h-[42px] items-center md:min-h-[45px] lg:min-h-[48px]">
+          <div className={BLOG_CARD_SUMMARY_ROW}>
             <p className={cn('text-ods-text-primary text-h6', 'line-clamp-2')}>{post.summary || ''}</p>
           </div>
 
-          <div className="mt-auto flex items-center justify-between gap-2 text-ods-text-secondary text-h6">
-            <div className="flex min-w-0 items-center gap-2">
+          <div className={BLOG_CARD_BYLINE}>
+            <div className={BLOG_CARD_BYLINE_PERSON}>
               {post.author_avatar ? (
                 <Image
                   src={post.author_avatar}
                   alt={post.author_name || ''}
                   width={32}
                   height={32}
-                  className="shrink-0 rounded-full"
+                  className={BLOG_CARD_AVATAR}
                   unoptimized
                 />
               ) : null}
@@ -258,7 +288,7 @@ export function BlogCard({
               </span>
             </div>
             <div
-              className="flex shrink-0 items-center gap-1"
+              className={BLOG_CARD_VIEWS}
               aria-label={`View count: ${(post.view_count ?? 0).toLocaleString('en-US')} views`}
             >
               <Eye className="h-4 w-4 shrink-0" />

package/src/components/chat/entity-cards/campaign-card-admin.tsx

@@ -13,21 +13,20 @@ import { Megaphone } from 'lucide-react';
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { formatDateShort } from '../../../utils/date-formatters';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import {
   COMPACT_CARD_ICON_SLOT,
   COMPACT_CARD_META_ROW_BOX,
   COMPACT_CARD_OUTER,
   COMPACT_CARD_OUTER_STATIC,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUBTITLE,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW,
 } from '../utils/compact-card-classes';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 
 /** Minimal campaign shape needed by the chat-inline compact card. */
 export interface CampaignCardItem {
@@ -52,6 +51,7 @@ export interface CampaignCardAdminProps {
 }
 
 export function CampaignCardAdmin({ campaign, className, anchorProps }: CampaignCardAdminProps) {
+  if (useLoadingScope()) return <CampaignCardAdminSkeleton className={className} />;
   const goalsCount = campaign.goals?.length || 0;
 
   const innerChildren = (
@@ -96,19 +96,6 @@ export function CampaignCardAdmin({ campaign, className, anchorProps }: Campaign
 
 export function CampaignCardAdminSkeleton({ className }: { className?: string }) {
   return (
-    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
-      <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
-      <span className={COMPACT_CARD_TEXT_COL}>
-        <span className={COMPACT_CARD_TITLE_ROW}>
-          <UnifiedSkeleton as="span" className="h-3.5 w-3/5 rounded" />
-        </span>
-        <span className={COMPACT_CARD_META_ROW_BOX}>
-          <UnifiedSkeleton as="span" className="h-3 w-1/2 rounded" />
-        </span>
-        <span className={COMPACT_CARD_META_ROW_BOX}>
-          <UnifiedSkeleton as="span" className="h-3 w-11/12 rounded" />
-        </span>
-      </span>
-    </span>
+    <CompactCardSkeleton rows={[{ width: 'w-1/2' }, { width: 'w-11/12' }]} className={className} />
   );
 }