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

package/src/components/chat/types/entities/index.ts

@@ -14,10 +14,6 @@
  * (+ pure formatters that operate on it) lives here.
  */
 
-export * from './blog';
-export * from './case-study';
-export * from './content-ref';
-export * from './customer-interview';
 export * from './data-room-doc';
 export * from './github-activity';
 export * from './hubspot-ticket';
@@ -26,3 +22,27 @@ export * from './onboarding-guide';
 export * from './program-types';
 export * from './roadmap-item';
 export * from './slack-message';
+export type {
+  BlogPost,
+  BlogPostSummary,
+  BlogPostPlatform,
+  BlogPostCategory,
+  BlogPostTag,
+  BlogCategory,
+  BlogTag,
+  BlogAuthor,
+  BlogMediaAsset,
+  BlogStatus,
+  BlogPagination,
+  BlogSearchParams,
+} from '../../../../types/blog';
+export type { CaseStudy, CaseStudyFilters, CaseStudyListResponse } from '../../../../types/case-study';
+export type { ContentRef, ContentRefWithReason } from '../../../../types/content-ref';
+export type {
+  CustomerInterview,
+  CustomerInterviewConfig,
+  CustomerInterviewFilters,
+  CustomerInterviewListResponse,
+} from '../../../../types/customer-interview';
+export { programItemToStripProfile } from '../../../features/video-bites-shared';
+export type { ProgramAuthorRef } from '../../../features/video-bites-shared';

package/src/components/chat/types/entities/investor-update.ts

@@ -8,8 +8,8 @@
  * formatter move here.
  */
 
+import type { ContentRef } from '../../../../types/content-ref';
 import { formatDateWithTimezone } from '../../../../utils/format';
-import type { ContentRef } from './content-ref';
 
 export interface MetricEntry {
   current: number;

package/src/components/chat/types/entities/program-types.ts

@@ -35,11 +35,6 @@ export interface ProgramHost {
   role?: string; // e.g., "Host", "Speaker", "Guest"
 }
 
-// The author ref and its strip-profile adapter live in the server-safe leaf
-// (`features/video-bites-shared`): a server module that imports them from this
-// chat tree makes the whole chat a client reference of its page.
-export { programItemToStripProfile, type ProgramAuthorRef } from '../../../features/video-bites-shared';
-
 // ============================================================================
 // DATABASE ROW TYPES
 // ============================================================================
@@ -292,6 +287,8 @@ export interface ProgramConfig<T extends BaseProgramItem = BaseProgramItem> {
   showInNav?: boolean; // Whether to show in navigation
   platformUrl?: string; // Fallback URL to external platform (e.g., Podbean main page)
   heroCoverAspect?: 'landscape' | 'square'; // Hero cover image aspect ratio (default: 'landscape')
+  /** A card of this type shows its hosts (a webinar presents its speakers): the card's skeleton draws the hosts row. */
+  cardShowsHosts?: boolean;
 }
 
 // ============================================================================

package/src/components/chat/utils/compact-card-classes.ts

@@ -1,3 +1,4 @@
+import { MEDIA_ASPECT, TILE_SIZE } from '../../../styles/component-sizes';
 import { UNSAFE_URL_CHARS, isSameOriginPath } from '../../../utils/url-safety';
 
 /**
@@ -35,7 +36,7 @@ export const COMPACT_CARD_IMAGE_SLOT =
   'relative block shrink-0 self-start w-14 h-14 aspect-square overflow-hidden rounded-md bg-ods-bg';
 
 /** 56×56 placeholder slot for skeletons: the box of a `UnifiedSkeleton as="span"`, which draws the surface. */
-export const COMPACT_CARD_SKELETON_IMAGE_SLOT = 'block h-14 w-14 aspect-square shrink-0 self-start rounded-md';
+export const COMPACT_CARD_SKELETON_IMAGE_SLOT = `block ${TILE_SIZE.thumb} ${MEDIA_ASPECT.square} shrink-0 self-start rounded-md`;
 
 /** 56×56 icon slot — for cards without a cover image. */
 export const COMPACT_CARD_ICON_SLOT =
@@ -50,8 +51,20 @@ export const COMPACT_CARD_TITLE_ROW = 'flex items-center min-w-0 h-5';
 /** Subtitle / summary row container — fixed 16px (h-4). */
 export const COMPACT_CARD_META_ROW_BOX = 'flex items-center min-w-0 h-4';
 
+/** The title's type: bold 14px on a 20px line (the skeleton's title bar takes the same line). */
+export const COMPACT_CARD_TITLE_TYPE = 'text-sm font-semibold leading-5';
+
 /** Title text — bold 14px on a 20px line. */
-export const COMPACT_CARD_TITLE = 'truncate text-sm font-semibold leading-5 text-ods-text-primary';
+export const COMPACT_CARD_TITLE = `truncate ${COMPACT_CARD_TITLE_TYPE} text-ods-text-primary`;
+
+/** Title row that wraps (the title followed by its badges), for cards with no fixed title row. */
+export const COMPACT_CARD_TITLE_WRAP_ROW = 'flex min-w-0 flex-wrap items-center gap-1.5';
+
+/** Two-line preview under the title (data-room docs, generic entities, tickets). */
+export const COMPACT_CARD_PREVIEW = 'line-clamp-2 whitespace-pre-wrap break-words text-ods-text-secondary text-h6';
+
+/** The trailing external-link icon's slot, top-aligned with the title. */
+export const COMPACT_CARD_TRAILING_ICON = 'flex h-5 shrink-0 items-center self-start text-ods-text-secondary';
 
 /** Subtitle text — 11px on a 16px line. */
 export const COMPACT_CARD_SUBTITLE = 'truncate text-h6 text-ods-text-secondary';

package/src/components/chat/utils/compact-card-skeleton.tsx

@@ -0,0 +1,111 @@
+import { ExternalLink } from 'lucide-react';
+import type React from 'react';
+import { cn } from '../../../utils/cn';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { StatusBadgeSkeleton } from '../../ui/status-badge';
+import {
+  COMPACT_CARD_META_ROW_BOX,
+  COMPACT_CARD_SKELETON_IMAGE_SLOT,
+  COMPACT_CARD_SKELETON_OUTER,
+  COMPACT_CARD_TEXT_COL,
+  COMPACT_CARD_TITLE_ROW,
+  COMPACT_CARD_TITLE_TYPE,
+  COMPACT_CARD_TITLE_WRAP_ROW,
+  COMPACT_CARD_TRAILING_ICON,
+} from './compact-card-classes';
+
+/** One `text-h6` row under the title: its bar's width, its line count, and anything drawn after it in the row. */
+export interface CompactCardSkeletonRow {
+  /** The bar's width class. Omitted: the row is kept empty (a card whose row holds no read words). */
+  width?: string;
+  /** Lines of `text-h6`. One line sits in the card's fixed 16px row box; more lines are a free block (a preview). */
+  lines?: number;
+  /** Drawn after the bar in the same row (an avatar box, a short count bar). */
+  after?: React.ReactNode;
+}
+
+/** The rows most compact cards draw: a meta line and a summary line. */
+const DEFAULT_ROWS: CompactCardSkeletonRow[] = [{ width: 'w-2/5' }, { width: 'w-11/12' }];
+
+/**
+ * THE compact (`size="sm"`) entity card while it is read, in the compact card's own boxes: the 56px slot, the title
+ * as a bar of the title's own line, the `text-h6` rows, and the trailing link icon (static, drawn for real). Every
+ * card's `sm` skeleton is this, configured by the parts that card draws.
+ */
+export function CompactCardSkeleton({
+  slot = true,
+  slotClassName,
+  titleWidth = 'w-3/5',
+  titleBadges = [],
+  rows = DEFAULT_ROWS,
+  trailingIcon = false,
+  className,
+}: {
+  /** Draw the 56px image/icon slot. */
+  slot?: boolean;
+  /** A card whose slot is not the standard image slot (the roadmap's bordered logo box). */
+  slotClassName?: string;
+  titleWidth?: string;
+  /** Width classes of the status stamps after the title (`StatusBadgeSkeleton variant="button"`); the title row then wraps like the card's. */
+  titleBadges?: string[];
+  rows?: CompactCardSkeletonRow[];
+  /** The card shows the trailing external-link icon. */
+  trailingIcon?: boolean;
+  className?: string;
+}) {
+  return (
+    <span className={cn(COMPACT_CARD_SKELETON_OUTER, className)} aria-hidden>
+      {slot && <UnifiedSkeleton as="span" className={slotClassName ?? COMPACT_CARD_SKELETON_IMAGE_SLOT} />}
+      <span className={COMPACT_CARD_TEXT_COL}>
+        <span className={titleBadges.length > 0 ? COMPACT_CARD_TITLE_WRAP_ROW : COMPACT_CARD_TITLE_ROW}>
+          <TextLineSkeleton as="span" type="inherit" className={cn(COMPACT_CARD_TITLE_TYPE, titleWidth)} />
+          {titleBadges.map((width, i) => (
+            // The compact cards' title badges are `StatusBadge variant="button"` stamps: their own skeleton.
+            <StatusBadgeSkeleton key={i} variant="button" className={cn('shrink-0', width)} />
+          ))}
+        </span>
+        {rows.map((row, i) =>
+          (row.lines ?? 1) > 1 ? (
+            <TextLineSkeleton key={i} as="span" type="h6" lines={row.lines} className={row.width} />
+          ) : (
+            <span key={i} className={cn(COMPACT_CARD_META_ROW_BOX, row.after ? 'gap-2' : undefined)}>
+              {row.width && <TextLineSkeleton as="span" type="h6" className={row.width} />}
+              {row.after}
+            </span>
+          ),
+        )}
+      </span>
+      {trailingIcon && (
+        <span className={COMPACT_CARD_TRAILING_ICON}>
+          <ExternalLink className="h-3.5 w-3.5" />
+        </span>
+      )}
+    </span>
+  );
+}
+
+/**
+ * THE one-line activity row (a card's `variant="row"`) while it is read: the card's leading cells, the flexible text
+ * bar, then one fixed `text-h6`-high bar per trailing cell. Shared by every activity row (GitHub, Slack).
+ */
+export function ActivityRowSkeleton({
+  lead,
+  trailingWidths,
+  className,
+}: {
+  /** The row's leading cells (its kind icon and its id or author), drawn in the loaded row's own boxes. */
+  lead: React.ReactNode;
+  /** Width classes of the fixed cells after the text (a repository, a channel, a date). */
+  trailingWidths: string[];
+  className?: string;
+}) {
+  return (
+    <div className={cn('flex min-w-0 items-center gap-3', className)}>
+      {lead}
+      <UnifiedSkeleton className="h-3 w-2/3 flex-1 rounded" />
+      {trailingWidths.map((width, i) => (
+        <UnifiedSkeleton key={i} className={cn('h-3 shrink-0 rounded', width)} />
+      ))}
+    </div>
+  );
+}

package/src/components/chat/utils/icon-library.tsx

@@ -32,8 +32,6 @@ import { platformAccentVarName } from '../../../utils/platform-identity';
 import { iconFromSet, iconOf, lucideIcon, setIcon, type IconComponent, type IconRef } from './icon-loading';
 import { getIconComponent, normalizeIconKey, registryIcon } from './icon-registry';
 
-export type { IconComponent } from './icon-loading';
-
 // A sister platform's mark is drawn in THAT platform's brand colour (the
 // platform brand registry), never in the accent of the page showing it: on
 // flamingo.run the OpenMSP mark stays OpenMSP yellow, not flamingo pink.

package/src/components/chat/utils/index.ts

@@ -82,7 +82,8 @@ export { decideNewTab, type DecideNewTabInput, type NavSurface, type RuntimeMode
 
 // Pure content helpers
 export { flattenAssistantContent } from './flatten-assistant-content';
-export { SCROLL_ANCHOR, type ScrollAnchor, SCROLL_ANCHOR_WIRE_KEY, parseScrollAnchor } from './scroll-anchor';
+export { SCROLL_ANCHOR_WIRE_KEY, parseScrollAnchor } from './scroll-anchor';
+export { SCROLL_ANCHOR, type ScrollAnchor } from '../types/message.types';
 export {
   AUTO_CONTINUATION_DIRECTIVE_PREFIX,
   buildAutoContinuationDirective,
@@ -157,7 +158,8 @@ export {
 // Library icon resolver — `icons-v2-generated`-backed, shared by the chat
 // empty-state chips, the slash-command autocomplete, AND the admin icon picker
 // (`ICON_OPTIONS`), so picked icons always display.
-export { resolveIcon, findIcon, ICON_ALIASES, ICON_OPTIONS, type IconComponent, type IconOption } from './icon-library';
+export { resolveIcon, findIcon, ICON_ALIASES, ICON_OPTIONS, type IconOption } from './icon-library';
+export { type IconComponent } from './icon-loading';
 export {
   SOURCE_ICON_NAMES,
   getSourceIconName,
@@ -165,7 +167,7 @@ export {
   getSourceLabel,
   DEFAULT_DOCUMENT_TYPE_TO_TABLE_ID,
   defaultTableIdForDocumentType,
-} from './source-icons';
+} from '../../../utils/source-icons';
 export {
   type SourceRowInput,
   type SourceRowContext,

package/src/components/chat/utils/scroll-anchor.ts

@@ -20,8 +20,6 @@
 
 import { SCROLL_ANCHOR, type ScrollAnchor } from '../types/message.types';
 
-export { SCROLL_ANCHOR, type ScrollAnchor };
-
 /** Wire-frame key for the `scrollAnchor` field on the metadata leading
  *  frame. Used as a computed property name on both the emit side
  *  (server) and the parse side (client) so a rename is one-file. */

package/src/components/chat/utils/source-row-cta.ts

@@ -27,10 +27,10 @@ import { getPlatformUrl } from '../../../platform-domains';
 import type { ComposeContentUrl } from '../../../utils/content-href';
 import { canonicalContentRefType } from '../../../utils/list-url';
 import { DOC_TABLE_TYPES } from '../../../utils/source-grouping';
+import { getSourceIconName } from '../../../utils/source-icons';
 import type { ChatRef } from '../chat-ref.types';
 import { safeHref } from './compact-card-classes';
 import { resolveIcon } from './icon-library';
-import { getSourceIconName } from './source-icons';
 
 /** Path sanitization — keep alphanumerics, slash, dash, dot, underscore;
  *  strip everything else. Defends against a hostile mapper returning a
@@ -155,10 +155,6 @@ function pickSourceIcon(sourceRepo: string | null, documentType: string | null |
   return { icon, iconLabel };
 }
 
-// Declared once in `utils/source-grouping`; re-exported so embedders that key
-// `docPlatformTargets` by it keep their import.
-export { DOC_TABLE_TYPES };
-
 /**
  * Only doc-table rows (DOC_TABLE_TYPES) fall back to doc-viewer navigation when no
  * `externalUrl` is set; the in-app/per-platform viewer can render them. Entity-table

package/src/components/comment-card.tsx

@@ -1,10 +1,18 @@
 'use client';
 
+import { TILE_SIZE } from '../styles/component-sizes';
+import { cn } from '../utils/cn';
 import { formatRelativeTime } from '../utils/date-utils';
 import { useAuth } from './auth-stub';
+import { TextLineSkeleton, UnifiedSkeleton } from './loading/unified-skeleton';
 import { Button } from './ui/button';
+import { useLoadingScope } from './ui/loading-scope';
 import { UserSummary } from './user-summary-stub';
-import { VendorDisplayButton } from './vendor-display-button';
+import {
+  VENDOR_DISPLAY_BUTTON_FRAME_CLASS,
+  VENDOR_DISPLAY_BUTTON_LOGO_CLASS,
+  VendorDisplayButton,
+} from './vendor-display-button';
 
 /** The comment shape every comment surface renders (vendor reviews, design-doc and prompt threads). */
 export interface CommentCardComment {
@@ -60,6 +68,24 @@ interface CommentCardProps {
   children?: React.ReactNode;
 }
 
+// The card's boxes, read by the card AND its skeleton, so the two are one size at every width.
+const COMMENT_CARD_FRAME =
+  'group box-border w-full max-w-full overflow-hidden rounded-lg border border-ods-border bg-ods-card p-4 transition-all hover:border-ods-accent';
+const COMMENT_CARD_HEADER =
+  'mb-3 flex w-full flex-col gap-3 min-[420px]:flex-row min-[420px]:items-center min-[420px]:justify-between min-[420px]:gap-2';
+const COMMENT_CARD_LEAD = 'flex min-w-0 flex-1 items-center gap-2';
+const COMMENT_CARD_ACTIONS = 'flex justify-start gap-2 min-[420px]:justify-end';
+const COMMENT_CARD_TIME = 'flex-shrink-0 whitespace-nowrap text-ods-text-secondary text-h6';
+const COMMENT_CARD_CONTENT = 'w-full max-w-full space-y-2 overflow-hidden';
+/** The card's footer row (a thread's reply count, badges and Reply), loaded and loading. */
+const COMMENT_CARD_FOOTER = 'flex flex-wrap items-center gap-2 pt-2';
+const commentTitleRow = (compact: boolean) => (compact ? 'flex h-[20px] items-center' : 'flex h-[24px] items-center');
+const commentBodyRow = (compact: boolean) => (compact ? 'flex h-[60px] items-center' : 'flex h-[72px] items-center');
+/** The commenter header's avatar (UserSummary `compact`, `avatarSize`). */
+const COMMENT_CARD_AVATAR_PX = 48;
+/** The delete button's box (`Button` size `icon`). */
+const COMMENT_CARD_DELETE_BOX = TILE_SIZE.touch;
+
 export function CommentCard({
   comment,
   onViewProduct,
@@ -92,32 +118,41 @@ export function CommentCard({
 
   const showDeleteButton = canUserDeleteComment();
 
+  if (useLoadingScope()) {
+    return (
+      <>
+        <CommentCardSkeleton
+          leadWith={leadWith}
+          showTitle={!!comment.title}
+          showDelete={showDeleteButton && !!onDeleteComment}
+          compact={compact}
+        />
+        {children}
+      </>
+    );
+  }
+
   return (
     <>
-      <div
-        className="group box-border w-full max-w-full overflow-hidden rounded-lg border border-ods-border bg-ods-card p-4 transition-all hover:border-ods-accent"
-        style={{ maxWidth: '100%', wordBreak: 'break-word' }}
-      >
+      <div className={COMMENT_CARD_FRAME} style={{ maxWidth: '100%', wordBreak: 'break-word' }}>
         {/* Comment Header */}
-        <div className="mb-3 flex w-full flex-col gap-3 min-[420px]:flex-row min-[420px]:items-center min-[420px]:justify-between min-[420px]:gap-2">
+        <div className={COMMENT_CARD_HEADER}>
           {/* Row 1: Info + Timestamp */}
-          <div className="flex min-w-0 flex-1 items-center gap-2">
+          <div className={COMMENT_CARD_LEAD}>
             {leadWith === 'vendor' && comment.vendor ? (
               <>
                 {/* Vendor Button - Icon + Name */}
                 <VendorDisplayButton vendor={comment.vendor} onClick={onViewProduct || (() => {})} />
 
                 {/* Timestamp */}
-                <span className="flex-shrink-0 whitespace-nowrap text-ods-text-secondary text-h6">
-                  {formatActivityTime(comment.createdAt)}
-                </span>
+                <span className={COMMENT_CARD_TIME}>{formatActivityTime(comment.createdAt)}</span>
               </>
             ) : comment.user ? (
               <UserSummary
                 name={comment.user.name}
                 email=""
                 compact
-                avatarSize={48}
+                avatarSize={COMMENT_CARD_AVATAR_PX}
                 subtitle={formatActivityTime(comment.createdAt)}
                 avatarUrl={comment.user.profilePicture ?? null}
                 mspPreview={
@@ -138,7 +173,7 @@ export function CommentCard({
           </div>
 
           {/* Row 2: Action Buttons */}
-          <div className="flex justify-start gap-2 min-[420px]:justify-end">
+          <div className={COMMENT_CARD_ACTIONS}>
             {/* Delete Button - shown when user can delete the comment */}
             {showDeleteButton && onDeleteComment && (
               <Button
@@ -170,12 +205,9 @@ export function CommentCard({
         </div>
 
         {/* Comment Content */}
-        <div
-          className="w-full max-w-full space-y-2 overflow-hidden"
-          style={{ maxWidth: '100%', wordBreak: 'break-word' }}
-        >
+        <div className={COMMENT_CARD_CONTENT} style={{ maxWidth: '100%', wordBreak: 'break-word' }}>
           {comment.title && (
-            <div className={compact ? 'flex h-[20px] items-center' : 'flex h-[24px] items-center'}>
+            <div className={commentTitleRow(compact)}>
               <h4
                 className="line-clamp-1 tracking-[-0.02em] text-ods-text-primary transition-colors text-h3 group-hover:text-ods-accent"
                 style={{
@@ -202,7 +234,7 @@ export function CommentCard({
               {comment.content}
             </p>
           ) : (
-            <div className={compact ? 'flex h-[60px] items-center' : 'flex h-[72px] items-center'}>
+            <div className={commentBodyRow(compact)}>
               <p
                 className="line-clamp-3 text-ods-text-primary text-h4"
                 style={{
@@ -220,10 +252,77 @@ export function CommentCard({
               </p>
             </div>
           )}
-          {footer ? <div className="flex flex-wrap items-center gap-2 pt-2">{footer}</div> : null}
+          {footer ? <div className={COMMENT_CARD_FOOTER}>{footer}</div> : null}
         </div>
       </div>
       {children}
     </>
   );
 }
+
+/**
+ * A comment tile while it is read, in the card's own boxes: the header it leads with (the vendor button's outline
+ * with its logo box and a name bar, then a time bar; or the commenter's 48px avatar box with name and time bars), the
+ * delete button's box, the title as one `text-h3` line, and the body as the tile's three `text-h4` lines.
+ */
+export function CommentCardSkeleton({
+  leadWith = 'vendor',
+  showTitle = true,
+  showDelete = false,
+  compact = false,
+  footer,
+  className,
+}: {
+  leadWith?: 'vendor' | 'commenter';
+  showTitle?: boolean;
+  /** Draw the delete button's box (the viewer may delete the comment). */
+  showDelete?: boolean;
+  compact?: boolean;
+  /** The card's footer row as the loaded card draws it (its static controls, such as a thread's Reply). */
+  footer?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn(COMMENT_CARD_FRAME, className)} aria-hidden>
+      <div className={COMMENT_CARD_HEADER}>
+        <div className={COMMENT_CARD_LEAD}>
+          {leadWith === 'vendor' ? (
+            <>
+              <div className={VENDOR_DISPLAY_BUTTON_FRAME_CLASS}>
+                <UnifiedSkeleton className={VENDOR_DISPLAY_BUTTON_LOGO_CLASS} />
+                <TextLineSkeleton type="h4" className="w-28" />
+              </div>
+              <TextLineSkeleton type="h6" className="w-16 shrink-0" />
+            </>
+          ) : (
+            <div className="flex min-w-0 items-center gap-3">
+              <UnifiedSkeleton
+                className="shrink-0 rounded-lg"
+                width={COMMENT_CARD_AVATAR_PX}
+                height={COMMENT_CARD_AVATAR_PX}
+              />
+              <div className="min-w-0 flex-1">
+                <TextLineSkeleton type="h4" className="w-32" />
+                <TextLineSkeleton type="h6" className="w-16" />
+              </div>
+            </div>
+          )}
+        </div>
+        <div className={COMMENT_CARD_ACTIONS}>
+          {showDelete && <UnifiedSkeleton className={cn(COMMENT_CARD_DELETE_BOX, 'rounded-md')} />}
+        </div>
+      </div>
+      <div className={COMMENT_CARD_CONTENT}>
+        {showTitle && (
+          <div className={commentTitleRow(compact)}>
+            <TextLineSkeleton type="h3" className="w-2/3" />
+          </div>
+        )}
+        <div className={commentBodyRow(compact)}>
+          <TextLineSkeleton type="h4" lines={3} className="w-full" />
+        </div>
+        {footer ? <div className={COMMENT_CARD_FOOTER}>{footer}</div> : null}
+      </div>
+    </div>
+  );
+}