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

package/src/components/chat/entity-cards/how-i-work-card.tsx

@@ -1,11 +1,6 @@
 import type React from 'react';
 import { formatDateUTC } from '../../../utils/format';
-import {
-  EmployeeEntryCard,
-  EmployeeEntryCardSkeleton,
-  EmployeeEntryBadge,
-  type EmployeeEntryCardData,
-} from './employee-entry-card';
+import { EmployeeEntryCard, EmployeeEntryBadge, type EmployeeEntryCardData } from './employee-entry-card';
 
 /** Minimal row shape the card renders. Both the hub dashboard entry and the
  *  related-content hydrated row satisfy it structurally. */
@@ -16,7 +11,7 @@ export interface HowIWorkCardData extends EmployeeEntryCardData {
   discipline?: string | null;
 }
 
-export interface HowIWorkCardProps {
+interface LoadedHowIWorkCardProps {
   entry: HowIWorkCardData;
   /** OG fallback cover. Caller computes it (hub: `useOgPlaceholderUrl`; related
    *  rail: `extras.buildOgPlaceholderUrl`). */
@@ -29,6 +24,10 @@ export interface HowIWorkCardProps {
   className?: string;
 }
 
+/** The entry, or `loading` while the host reads it: the card then draws its own loading form (`EmployeeEntryCard`'s). */
+export type HowIWorkCardProps =
+  (LoadedHowIWorkCardProps & { loading?: boolean }) | (Partial<LoadedHowIWorkCardProps> & { loading: true });
+
 /** `ops` is an initialism, so the generic capitalize would render it "Ops" —
  *  fine — but `session_date`-style multiword disciplines need the underscore
  *  stripped too. One place, so the badge matches the filter chip exactly. */
@@ -43,7 +42,9 @@ function disciplineLabel(discipline: string): string {
  * related-content rail (with `anchorProps`), so the card cannot drift between
  * the two surfaces.
  */
-export function HowIWorkCard({ entry, placeholderUrl, actions, anchorProps, className }: HowIWorkCardProps) {
+export function HowIWorkCard(props: HowIWorkCardProps) {
+  if (props.loading) return <EmployeeEntryCard loading actions={props.actions} className={props.className} />;
+  const { entry, placeholderUrl, actions, anchorProps, className } = props;
   return (
     <EmployeeEntryCard
       entry={entry}
@@ -61,7 +62,3 @@ export function HowIWorkCard({ entry, placeholderUrl, actions, anchorProps, clas
     />
   );
 }
-
-/** Loading skeleton matching HowIWorkCard's shape. Shared with every other
- *  employee-entry card so the rail's placeholder never diverges from the card. */
-export const HowIWorkCardSkeleton = EmployeeEntryCardSkeleton;

package/src/components/chat/entity-cards/hubspot-ticket-card.tsx

@@ -171,7 +171,7 @@ export function HubspotTicketCard({ item, variant = 'compact', className, anchor
   );
 }
 
-export function HubspotTicketCardSkeleton({
+function HubspotTicketCardSkeleton({
   variant = 'compact',
   className,
 }: {

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

@@ -12,22 +12,13 @@ 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,
-  EntityPortraitCardSkeleton,
-  type EntityPortraitCardProps,
-  type EntityPortraitPerson,
-} from './entity-portrait-card';
+export { EntityPortraitCard, type EntityPortraitCardProps, type EntityPortraitPerson } from './entity-portrait-card';
 export { useCoverImageFallback, hideOnError, type CoverImageFallback } from './use-cover-image-fallback';
-export { AdminContentCard, AdminContentCardSkeleton } from './admin-content-card';
+export { AdminContentCard } from './admin-content-card';
 export {
   CONTENT_CARD_FRAME_CLASS,
   CONTENT_CARD_SKELETON_FRAME_CLASS,
@@ -36,28 +27,21 @@ export {
 } from './content-card-frame';
 export {
   AdminContentCardGrid,
-  AdminContentCardGridSkeleton,
   ADMIN_CONTENT_CARD_GRID_CLASS,
   type AdminContentCardGridProps,
-  type AdminContentCardGridSkeletonProps,
 } from './admin-content-card-grid';
-export { EmployeeEntryCard, EmployeeEntryCardSkeleton, EmployeeEntryBadge } from './employee-entry-card';
+export { EmployeeEntryCard, EmployeeEntryBadge } from './employee-entry-card';
 export type { EmployeeEntryCardData, EmployeeEntryCardProps } from './employee-entry-card';
-export { WhatIShippedCard, WhatIShippedCardSkeleton } from './what-i-shipped-card';
+export { WhatIShippedCard } from './what-i-shipped-card';
 export type { WhatIShippedCardData, WhatIShippedCardProps } from './what-i-shipped-card';
-export { HowIWorkCard, HowIWorkCardSkeleton } from './how-i-work-card';
+export { HowIWorkCard } from './how-i-work-card';
 export type { HowIWorkCardData, HowIWorkCardProps } from './how-i-work-card';
-export { AiPromptCard, AiPromptCardSkeleton } from './ai-prompt-card';
+export { AiPromptCard } from './ai-prompt-card';
 export type { AiPromptCardData, AiPromptCardProps } from './ai-prompt-card';
 
 // Moved-into-subdir flat cards
 export { BlockCard, type BlockCardProps } from './block-card';
-export {
-  ChatTicketItem,
-  ChatTicketItemSkeleton,
-  type ChatTicketItemData,
-  type ChatTicketItemProps,
-} from './chat-ticket-item';
+export { ChatTicketItem, type ChatTicketItemData, type ChatTicketItemProps } from './chat-ticket-item';
 export { ChatVideoEntityCard, type ChatVideoEntityCardProps } from './chat-video-entity-card';
 export {
   ProductReleaseCard,
@@ -65,7 +49,6 @@ export {
   type ProductReleaseCardSize,
   type ProductReleaseCardAnchorProps,
 } 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).
@@ -76,64 +59,41 @@ export {
 } from './product-release-card-defaults';
 
 // Refactored pure-presentation cards
-export { BlogCard, BlogCardSkeleton, type BlogCardProps } from './blog-card';
-export { CaseStudyCard, CaseStudyCardSkeleton, type CaseStudyCardProps } from './case-study-card';
-export {
-  CustomerInterviewCard,
-  CustomerInterviewCardSkeleton,
-  type CustomerInterviewCardProps,
-} from './customer-interview-card';
-export { InvestorUpdateCard, InvestorUpdateCardSkeleton, type InvestorUpdateCardProps } from './investor-update-card';
-export {
-  OnboardingGuideCard,
-  OnboardingGuideCardSkeleton,
-  type OnboardingGuideCardProps,
-} from './onboarding-guide-card';
-export { RoadmapCard, RoadmapCardSkeleton, type RoadmapCardProps, type VoteType } from './roadmap-card';
-export {
-  DesignDocCard,
-  DesignDocCardSkeleton,
-  designDocMetaLine,
-  designDocPeople,
-  type DesignDocCardProps,
-} from './design-doc-card';
+export { BlogCard, type BlogCardProps } from './blog-card';
+export { CaseStudyCard, type CaseStudyCardProps } from './case-study-card';
+export { CustomerInterviewCard, type CustomerInterviewCardProps } from './customer-interview-card';
+export { InvestorUpdateCard, type InvestorUpdateCardProps } from './investor-update-card';
+export { OnboardingGuideCard, type OnboardingGuideCardProps } from './onboarding-guide-card';
+export { RoadmapCard, type RoadmapCardProps, type VoteType } from './roadmap-card';
+export { DesignDocCard, designDocMetaLine, designDocPeople, type DesignDocCardProps } from './design-doc-card';
 export { RoadmapVoteButton, type RoadmapVoteButtonProps } from './roadmap-vote-button';
 export { TaskTypeIcon, type TaskTypeIconProps } from './task-type-icon';
 export {
   GitHubActivityCard,
-  GitHubActivityCardSkeleton,
   type GitHubActivityCardProps,
   type GitHubActivityCardAnchorProps,
 } from './github-activity-card';
-export {
-  SlackMessageCard,
-  SlackMessageCardSkeleton,
-  type SlackMessageCardProps,
-  type SlackMessageCardAnchorProps,
-} from './slack-message-card';
+export { SlackMessageCard, type SlackMessageCardProps, type SlackMessageCardAnchorProps } from './slack-message-card';
 export {
   HubspotTicketCard,
-  HubspotTicketCardSkeleton,
   type HubspotTicketCardProps,
   type HubspotTicketCardAnchorProps,
 } from './hubspot-ticket-card';
+export { DataRoomDocCard, type DataRoomDocCardProps, type DataRoomDocCardAnchorProps } from './data-room-doc-card';
 export {
-  DataRoomDocCard,
-  DataRoomDocCardSkeleton,
-  type DataRoomDocCardProps,
-  type DataRoomDocCardAnchorProps,
-} from './data-room-doc-card';
-export { ProgramCard, ProgramCardSkeleton, type ProgramCardProps } from './program-card';
+  PROGRAM_CARD_SKELETON_HOSTS,
+  PROGRAM_CARD_SKELETON_MEDIA,
+  ProgramCard,
+  type ProgramCardProps,
+} from './program-card';
 export {
   CampaignCardAdmin,
-  CampaignCardAdminSkeleton,
   type CampaignCardItem,
   type CampaignCardAdminProps,
   type CampaignCardAdminAnchorProps,
 } from './campaign-card-admin';
 export {
   GenericEntityCard,
-  GenericEntityCardSkeleton,
   type GenericEntityCardItem,
   type GenericEntityCardProps,
   type GenericEntityCardAnchorProps,

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

@@ -25,15 +25,15 @@ import {
   COMPACT_CARD_TITLE_ROW,
 } from '../utils/compact-card-classes';
 import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
-import { AdminContentCard, AdminContentCardSkeleton } from './admin-content-card';
-import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
+import { AdminContentCard } from './admin-content-card';
+import { EntityPortraitCard } 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';
 
-export interface InvestorUpdateCardProps {
+interface LoadedInvestorUpdateCardProps {
   update: InvestorUpdate;
   href: string;
   /** When `_blank`, opens in a new tab. Set by chat dispatch via
@@ -49,11 +49,19 @@ export interface InvestorUpdateCardProps {
   className?: string;
 }
 
+/**
+ * The record and its link, or `loading` while the host reads it: the card then draws its own loading form, as it
+ * does in a loading scope.
+ */
+export type InvestorUpdateCardProps =
+  | (LoadedInvestorUpdateCardProps & { loading?: boolean })
+  | (Partial<LoadedInvestorUpdateCardProps> & { loading: true });
+
 /**
  * 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({
+function InvestorUpdateCardSkeleton({
   size = 'default',
   showTypeBadge = true,
   className,
@@ -65,7 +73,11 @@ export function InvestorUpdateCardSkeleton({
 }) {
   if (size === 'portrait') {
     return (
-      <EntityPortraitCardSkeleton
+      <EntityPortraitCard
+        loading
+        href=""
+        imageAlt=""
+        title=""
         typeLabel={showTypeBadge ? INVESTOR_UPDATE_TYPE_LABEL : undefined}
         className={className}
       />
@@ -74,7 +86,7 @@ export function InvestorUpdateCardSkeleton({
   if (size === 'default') {
     return (
       <div className={`block h-full ${className ?? ''}`}>
-        <AdminContentCardSkeleton actions={false} subtitleRow={false} />
+        <AdminContentCard loading title="" subtitleRow={false} />
       </div>
     );
   }
@@ -91,7 +103,17 @@ export function InvestorUpdateCardSkeleton({
   return null;
 }
 
-export function InvestorUpdateCard({
+/** ONE switch: in a loading scope (or `loading`) the card is its own loading form. */
+export function InvestorUpdateCard(props: InvestorUpdateCardProps) {
+  if (useLoadingScope() || props.loading) {
+    return (
+      <InvestorUpdateCardSkeleton size={props.size} showTypeBadge={props.showTypeBadge} className={props.className} />
+    );
+  }
+  return <LoadedInvestorUpdateCard {...props} />;
+}
+
+function LoadedInvestorUpdateCard({
   update,
   href,
   target: targetProp,
@@ -101,7 +123,7 @@ export function InvestorUpdateCard({
   size = 'default',
   showTypeBadge = true,
   className,
-}: InvestorUpdateCardProps) {
+}: LoadedInvestorUpdateCardProps) {
   const { target, rel } = useEntityCardLink({
     href,
     targetPlatform,
@@ -114,9 +136,6 @@ 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);

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

@@ -39,8 +39,8 @@ import {
 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, EntityAuthorCardSkeleton } from './entity-author-card';
-import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
+import { EntityAuthorCard } from './entity-author-card';
+import { EntityPortraitCard } from './entity-portrait-card';
 
 /** The content-type chip a portrait guide shows (a static label). */
 const GUIDE_TYPE_LABEL = 'Guide';
@@ -48,7 +48,7 @@ import { MEDIA_ASPECT, TEXT_LINES_MIN } from '../../../styles/component-sizes';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
-export interface OnboardingGuideCardProps {
+interface LoadedOnboardingGuideCardProps {
   guide: OnboardingGuide;
   /** Detail URL resolved by the caller. */
   href: string;
@@ -65,6 +65,17 @@ export interface OnboardingGuideCardProps {
   className?: string;
 }
 
+/**
+ * The record and its link, or `loading` while the host reads it: the card then draws its own loading form, as it
+ * does in a loading scope.
+ */
+export type OnboardingGuideCardProps =
+  | (LoadedOnboardingGuideCardProps & { loading?: boolean })
+  | (Partial<LoadedOnboardingGuideCardProps> & {
+      loading: true;
+      /** `catalog`: the loading card draws its Published cell. Default true. */ published?: boolean;
+    });
+
 /** Markdown source → clean one-line preview prose. The guide cards preview
  *  `video_summary || content`, and `content` is raw markdown — without this,
  *  the clamped summary shows literal `**bold**` / `## heading` noise. */
@@ -110,7 +121,7 @@ const HORIZONTAL_SIZE_TOKENS = {
 } as const;
 
 /** A guide card while it is read, one per density; `portrait` is the shared portrait skeleton with the static chip. */
-export function OnboardingGuideCardSkeleton({
+function OnboardingGuideCardSkeleton({
   size = 'default',
   showTypeBadge = true,
   published = true,
@@ -128,7 +139,14 @@ export function OnboardingGuideCardSkeleton({
 }) {
   if (size === 'portrait') {
     return (
-      <EntityPortraitCardSkeleton typeLabel={showTypeBadge ? GUIDE_TYPE_LABEL : undefined} className={className} />
+      <EntityPortraitCard
+        loading
+        href=""
+        imageAlt=""
+        title=""
+        typeLabel={showTypeBadge ? GUIDE_TYPE_LABEL : undefined}
+        className={className}
+      />
     );
   }
   if (size === 'catalog') {
@@ -151,9 +169,11 @@ export function OnboardingGuideCardSkeleton({
               </div>
             </div>
           </div>
-          <EntityAuthorCardSkeleton
-            extraCellLabels={CATALOG_EXTRA_CELL_LABELS}
-            publishedLabel={published ? undefined : null}
+          <EntityAuthorCard
+            loading
+            author={null}
+            extraCells={CATALOG_EXTRA_CELL_LABELS.map(label => ({ value: '', label }))}
+            publishedAt={published ? null : undefined}
           />
         </div>
       </div>
@@ -177,7 +197,22 @@ export function OnboardingGuideCardSkeleton({
   );
 }
 
-export function OnboardingGuideCard({
+/** ONE switch: in a loading scope (or `loading`) the card is its own loading form. */
+export function OnboardingGuideCard(props: OnboardingGuideCardProps) {
+  if (useLoadingScope() || props.loading) {
+    return (
+      <OnboardingGuideCardSkeleton
+        size={props.size}
+        showTypeBadge={props.showTypeBadge !== false}
+        published={'published' in props ? props.published : props.guide ? props.guide.published_at != null : true}
+        className={props.className}
+      />
+    );
+  }
+  return <LoadedOnboardingGuideCard {...props} />;
+}
+
+function LoadedOnboardingGuideCard({
   guide,
   href,
   target: targetProp,
@@ -187,7 +222,7 @@ export function OnboardingGuideCard({
   size = 'default',
   showTypeBadge = true,
   className,
-}: OnboardingGuideCardProps) {
+}: LoadedOnboardingGuideCardProps) {
   const { target, rel } = useEntityCardLink({
     href,
     targetPlatform,
@@ -199,9 +234,6 @@ 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