@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.767

package/src/components/chat/entity-cards/index.ts

@@ -12,13 +12,22 @@ export {
   EntityAuthorCard,
   EntityMetadataValueCell,
   EntityMetadataAuthorCell,
+  EntityAuthorCardSkeleton,
+  EntityMetadataValueCellSkeleton,
+  EntityMetadataAuthorCellSkeleton,
+  type EntityAuthorCardSkeletonProps,
   EMPTY_AUTHOR_PLACEHOLDER,
   type EntityAuthorCardProps,
 } from './entity-author-card';
 export { BlogImagePlaceholder } from './blog-image-placeholder';
-export { EntityPortraitCard, type EntityPortraitCardProps, type EntityPortraitPerson } from './entity-portrait-card';
+export {
+  EntityPortraitCard,
+  EntityPortraitCardSkeleton,
+  type EntityPortraitCardProps,
+  type EntityPortraitPerson,
+} from './entity-portrait-card';
 export { useCoverImageFallback, hideOnError, type CoverImageFallback } from './use-cover-image-fallback';
-export { AdminContentCard } from './admin-content-card';
+export { AdminContentCard, AdminContentCardSkeleton } from './admin-content-card';
 export {
   CONTENT_CARD_FRAME_CLASS,
   CONTENT_CARD_SKELETON_FRAME_CLASS,
@@ -28,7 +37,6 @@ export {
 export {
   AdminContentCardGrid,
   AdminContentCardGridSkeleton,
-  AdminContentCardSkeleton,
   ADMIN_CONTENT_CARD_GRID_CLASS,
   type AdminContentCardGridProps,
   type AdminContentCardGridSkeletonProps,
@@ -44,15 +52,20 @@ export type { AiPromptCardData, AiPromptCardProps } from './ai-prompt-card';
 
 // Moved-into-subdir flat cards
 export { BlockCard, type BlockCardProps } from './block-card';
-export { ChatTicketItem, type ChatTicketItemData, type ChatTicketItemProps } from './chat-ticket-item';
+export {
+  ChatTicketItem,
+  ChatTicketItemSkeleton,
+  type ChatTicketItemData,
+  type ChatTicketItemProps,
+} from './chat-ticket-item';
 export { ChatVideoEntityCard, type ChatVideoEntityCardProps } from './chat-video-entity-card';
 export {
   ProductReleaseCard,
-  ProductReleaseCardSkeleton,
   type ProductReleaseCardProps,
   type ProductReleaseCardSize,
   type ProductReleaseCardAnchorProps,
-} from './product-release-card';
+} from '../../shared/product-release/product-release-card';
+export { ProductReleaseCardSkeleton } from '../../shared/product-release/product-release-card-skeleton';
 // Card-prop builders: `defaultBuildProductReleaseCardProps` (sm chat default) +
 // `buildProductReleaseCardProps` (RICH lg builder — the ProductReleasesView
 // default; lifted from the hub so embedders get the full metadata grid).
@@ -140,5 +153,5 @@ export {
 // Program author-ref + video-bites profile adapter — re-exported through the
 // PACKAGE-EXPORTED chat barrel so the hub can value-import them (deep paths
 // into chat/types/* are not in the package exports map and 404 at runtime).
-export { programItemToStripProfile, type ProgramAuthorRef } from '../types/entities/program-types';
+export { programItemToStripProfile, type ProgramAuthorRef } from '../../features/video-bites-shared';
 export { type MingoInfoCardAction, MingoInfoCardActionProvider } from '../mingo-info-card';

package/src/components/chat/entity-cards/investor-update-card.tsx

@@ -11,24 +11,25 @@
 import { Calendar } from 'lucide-react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { formatInvestorUpdatePeriod, type InvestorUpdate } from '../types/entities/investor-update';
 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 { AdminContentCard } from './admin-content-card';
-import { CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
-import { EntityPortraitCard } from './entity-portrait-card';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
+import { AdminContentCard, AdminContentCardSkeleton } from './admin-content-card';
+import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
+
+/** The content-type chip a portrait investor update shows (a static label). */
+const INVESTOR_UPDATE_TYPE_LABEL = 'Investor Update';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
@@ -48,38 +49,41 @@ export interface InvestorUpdateCardProps {
   className?: string;
 }
 
-/** `portrait` shares the default skeleton shape (same zone boxes). */
-export function InvestorUpdateCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' }) {
-  if (size === 'sm') {
+/**
+ * An investor update card while it is read, one per density: `default` is the admin card's own skeleton (the card is
+ * an `AdminContentCard`), `portrait` the shared portrait skeleton with the static chip, `sm` the compact card's rows.
+ */
+export function InvestorUpdateCardSkeleton({
+  size = 'default',
+  showTypeBadge = true,
+  className,
+}: {
+  size?: 'default' | 'sm' | 'portrait';
+  /** `portrait`: the card shows the "Investor Update" 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} flex-nowrap gap-2`}>
-            <UnifiedSkeleton as="span" className="h-3.5 w-1/2 rounded" />
-            <UnifiedSkeleton as="span" className="h-4 w-8 shrink-0 rounded" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-1/3 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 ? INVESTOR_UPDATE_TYPE_LABEL : undefined}
+        className={className}
+      />
     );
   }
-  return (
-    <div className={`h-full ${CONTENT_CARD_SKELETON_FRAME_CLASS}`}>
-      <UnifiedSkeleton className="aspect-[1200/630]" />
-      <div className="space-y-3 p-4">
-        <UnifiedSkeleton className="h-5 w-3/4 rounded" />
-        <UnifiedSkeleton className="h-3 w-full rounded" />
-        <UnifiedSkeleton className="h-3 w-4/5 rounded" />
-        <UnifiedSkeleton className="h-4 w-1/3 rounded" />
+  if (size === 'default') {
+    return (
+      <div className={`block h-full ${className ?? ''}`}>
+        <AdminContentCardSkeleton actions={false} subtitleRow={false} />
       </div>
-    </div>
-  );
+    );
+  }
+  if (size === 'sm') {
+    return (
+      <CompactCardSkeleton titleWidth="w-1/2" titleBadges={['w-8']} rows={[{ width: 'w-1/3' }, { width: 'w-11/12' }]} className={className} />
+    );
+  }
+  return null;
 }
 
 export function InvestorUpdateCard({
@@ -105,6 +109,9 @@ export function InvestorUpdateCard({
     aspect: size === 'sm' ? 'square' : 'wide',
   });
   const coverImage = update.featured_image || placeholderUrl || null;
+  if (useLoadingScope()) {
+    return <InvestorUpdateCardSkeleton size={size} showTypeBadge={showTypeBadge} className={className} />;
+  }
 
   if (size === 'sm') {
     const periodText = formatInvestorUpdatePeriod(update.period_start, update.period_end);
@@ -164,7 +171,7 @@ export function InvestorUpdateCard({
         href={href}
         target={target}
         rel={rel}
-        typeLabel={showTypeBadge ? 'Investor Update' : undefined}
+        typeLabel={showTypeBadge ? INVESTOR_UPDATE_TYPE_LABEL : undefined}
         imageUrl={update.featured_image}
         placeholderUrl={placeholderUrl}
         imageAlt={update.title ?? 'Investor update'}

package/src/components/chat/entity-cards/onboarding-guide-card.tsx

@@ -23,13 +23,12 @@ import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
 import { formatDurationMMSS } from '../../../utils/format';
 import { CardHoverPlay } from '../../features/video-center-badge';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import type { OnboardingGuide } from '../types/entities/onboarding-guide';
 import {
   COMPACT_CARD_OUTER,
   COMPACT_CARD_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE_ROW,
   COMPACT_CARD_TITLE,
@@ -37,10 +36,15 @@ import {
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_ROW_FILLER,
 } from '../utils/compact-card-classes';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 import { BlogImagePlaceholder } from './blog-image-placeholder';
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
-import { EntityAuthorCard } from './entity-author-card';
-import { EntityPortraitCard } from './entity-portrait-card';
+import { EntityAuthorCard, EntityAuthorCardSkeleton } from './entity-author-card';
+import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
+
+/** The content-type chip a portrait guide shows (a static label). */
+const GUIDE_TYPE_LABEL = 'Guide';
+import { MEDIA_ASPECT, TEXT_LINES_MIN } from '../../../styles/component-sizes';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
@@ -83,6 +87,19 @@ function stripMarkdownPreview(text: string): string {
   );
 }
 
+// The catalog card's boxes, read by the card AND its skeleton, so the two are one size at every width.
+const CATALOG_BODY = 'flex flex-col gap-4 p-6';
+const CATALOG_ROW = 'flex flex-col gap-4 md:flex-row md:gap-6';
+const CATALOG_COVER_COL = 'w-full flex-shrink-0 md:w-[256px]';
+const CATALOG_COVER = `relative ${MEDIA_ASPECT.og} w-full overflow-hidden rounded-lg`;
+const CATALOG_TEXT = 'flex min-w-0 flex-1 flex-col';
+/** Two `text-h2` lines at most. */
+const CATALOG_TITLE_ROW = `mb-3 flex items-start text-h2 ${TEXT_LINES_MIN[2]}`;
+/** Two `text-h6` lines. */
+const CATALOG_SUMMARY_ROW = `text-h6 ${TEXT_LINES_MIN[2]}`;
+/** The catalog card's metadata cells before Published (the card's own label). */
+const CATALOG_EXTRA_CELL_LABELS = ['Section'];
+
 const HORIZONTAL_SIZE_TOKENS = {
   default: {
     padding: 'p-4',
@@ -92,70 +109,64 @@ const HORIZONTAL_SIZE_TOKENS = {
   },
 } as const;
 
-export function OnboardingGuideCardSkeleton({ size = 'default' }: { size?: 'catalog' | 'default' | 'sm' }) {
+/** A guide card while it is read, one per density; `portrait` is the shared portrait skeleton with the static chip. */
+export function OnboardingGuideCardSkeleton({
+  size = 'default',
+  showTypeBadge = true,
+  published = true,
+  className,
+}: {
+  size?: 'catalog' | 'default' | 'sm' | 'portrait';
+  /**
+   * `catalog`: the metadata grid has its Published cell (the card shows one when the guide carries `published_at`;
+   * the related-content rail's rows do not).
+   */
+  published?: boolean;
+  /** `portrait`: the card shows the "Guide" chip. */
+  showTypeBadge?: boolean;
+  className?: string;
+}) {
+  if (size === 'portrait') {
+    return (
+      <EntityPortraitCardSkeleton typeLabel={showTypeBadge ? GUIDE_TYPE_LABEL : undefined} className={className} />
+    );
+  }
   if (size === 'catalog') {
     return (
-      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex flex-col gap-4 p-6')}>
-        <div className="flex flex-col gap-4 md:flex-row md:gap-6">
-          <UnifiedSkeleton className="aspect-[1200/630] w-full flex-shrink-0 rounded-lg md:w-[256px]" />
-          <div className="flex min-w-0 flex-1 flex-col">
-            <div className="mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 md:min-h-[72px]">
-              <UnifiedSkeleton className="h-[25px] w-3/4 rounded md:h-[30px]" />
-              <UnifiedSkeleton className="h-[25px] w-1/2 rounded md:h-[30px]" />
-            </div>
-            <div className="flex min-h-[46px] flex-col justify-start gap-2 md:min-h-[52px]">
-              <UnifiedSkeleton className="h-3 w-full rounded" />
-              <UnifiedSkeleton className="h-3 w-5/6 rounded" />
+      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'block', className)} aria-hidden>
+        <div className={CATALOG_BODY}>
+          <div className={CATALOG_ROW}>
+            <div className={CATALOG_COVER_COL}>
+              <UnifiedSkeleton className={CATALOG_COVER} />
             </div>
-          </div>
-        </div>
-        <div className="grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border md:grid-cols-3">
-          {[0, 1].map(i => (
-            <div
-              key={`cell-${i}`}
-              className="flex flex-col gap-3 border-b border-ods-border p-4 md:border-b-0 md:border-r"
-            >
-              <div className="flex flex-col gap-2">
-                <UnifiedSkeleton className="h-6 w-32 rounded" />
-                <UnifiedSkeleton className="h-3 w-20 rounded" />
+            <div className={CATALOG_TEXT}>
+              <div className={CATALOG_TITLE_ROW}>
+                {/* The loaded title's clamp, two `text-h2` lines, wherever a typical title wraps (a phone, a tablet's
+                    column); one line from lg, where the text column holds a typical title. */}
+                <TextLineSkeleton type="h2" lines={2} className="w-3/4 lg:hidden" />
+                <TextLineSkeleton type="h2" className="hidden w-3/4 lg:flex" />
+              </div>
+              <div className={CATALOG_SUMMARY_ROW}>
+                <TextLineSkeleton type="h6" lines={2} className="w-full" />
               </div>
-            </div>
-          ))}
-          <div className="flex items-center gap-3 p-4">
-            <UnifiedSkeleton className="h-10 w-10 shrink-0 rounded-full" />
-            <div className="flex min-w-0 flex-1 flex-col gap-2">
-              <UnifiedSkeleton className="h-4 w-3/4 rounded" />
-              <UnifiedSkeleton className="h-3 w-1/2 rounded" />
             </div>
           </div>
+          <EntityAuthorCardSkeleton
+            extraCellLabels={CATALOG_EXTRA_CELL_LABELS}
+            publishedLabel={published ? undefined : null}
+          />
         </div>
       </div>
     );
   }
   if (size === 'sm') {
-    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 className="flex h-5 shrink-0 items-center self-start">
-          <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
-        </span>
-      </span>
-    );
+    return <CompactCardSkeleton trailingIcon className={className} />;
   }
   const t = HORIZONTAL_SIZE_TOKENS.default;
   return (
-    <span className={`flex items-start gap-3 rounded-md border border-ods-border bg-ods-card ${t.padding}`}>
+    <span
+      className={cn(`flex items-start gap-3 rounded-md border border-ods-border bg-ods-card ${t.padding}`, className)}
+    >
       <span className={`inline-flex shrink-0 items-center justify-center rounded-full bg-ods-bg ${t.step}`} />
       <span className="flex min-w-0 flex-1 flex-col gap-2">
         <UnifiedSkeleton as="span" className="block h-4 w-2/3 rounded" />
@@ -188,6 +199,9 @@ export function OnboardingGuideCard({
     placeholderUrl: placeholderUrlProp,
     aspect: size === 'sm' ? 'square' : 'wide',
   });
+  if (useLoadingScope()) {
+    return <OnboardingGuideCardSkeleton size={size} showTypeBadge={showTypeBadge !== false} className={className} />;
+  }
 
   if (size === 'portrait') {
     // Rail/strip density — shared <EntityPortraitCard> shell. Same cover
@@ -198,7 +212,7 @@ export function OnboardingGuideCard({
         href={href}
         target={target}
         rel={rel}
-        typeLabel={showTypeBadge ? 'Guide' : undefined}
+        typeLabel={showTypeBadge ? GUIDE_TYPE_LABEL : undefined}
         imageUrl={coverImage}
         placeholderUrl={placeholderUrl}
         imageAlt={guide.title}
@@ -226,10 +240,10 @@ export function OnboardingGuideCard({
         prefetch={false}
         className={cn(CONTENT_CARD_FRAME_CLASS, 'block no-underline', className)}
       >
-        <div className="flex flex-col gap-4 p-6">
-          <div className="flex flex-col gap-4 md:flex-row md:gap-6">
-            <div className="w-full flex-shrink-0 md:w-[256px]">
-              <div className="relative aspect-[1200/630] w-full overflow-hidden rounded-lg bg-ods-bg">
+        <div className={CATALOG_BODY}>
+          <div className={CATALOG_ROW}>
+            <div className={CATALOG_COVER_COL}>
+              <div className={cn(CATALOG_COVER, 'bg-ods-bg')}>
                 {coverImage ? (
                   <Image
                     src={coverImage}
@@ -256,11 +270,11 @@ export function OnboardingGuideCard({
               </div>
             </div>
 
-            <div className="flex min-w-0 flex-1 flex-col">
-              <div className="mb-3 flex min-h-[60px] items-start md:min-h-[72px]">
+            <div className={CATALOG_TEXT}>
+              <div className={CATALOG_TITLE_ROW}>
                 <h3 className="line-clamp-2 text-ods-text-primary text-h2">{guide.title}</h3>
               </div>
-              <div className="min-h-[46px] md:min-h-[52px]">
+              <div className={CATALOG_SUMMARY_ROW}>
                 <p className="line-clamp-2 text-ods-text-secondary text-h6">
                   {stripMarkdownPreview(guide.video_summary || guide.content || '')}
                 </p>
@@ -275,7 +289,7 @@ export function OnboardingGuideCard({
             extraCells={[
               {
                 value: `${guide.section} · Step ${stepLabel}`,
-                label: 'Section',
+                label: CATALOG_EXTRA_CELL_LABELS[0],
                 uppercase: false,
               },
             ]}