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

package/src/components/features/entity-tag-badges.tsx

@@ -1,6 +1,10 @@
+'use client';
+
 import Link from 'next/link';
 import type { TagAssoc } from '../../types/blog';
-import { StatusBadge } from '../ui/status-badge';
+import { cn } from '../../utils/cn';
+import { useLoadingScope } from '../ui/loading-scope';
+import { StatusBadge, StatusBadgeSkeleton } from '../ui/status-badge';
 
 interface EntityTagBadgesProps {
   /** Flat `<entity>_tags[]` association array (from entity_tags hydration). */
@@ -11,8 +15,16 @@ interface EntityTagBadgesProps {
    * render non-interactive even when basePath is set).
    */
   basePath?: string;
-  /** Cap visible badges; the remainder collapse into a "+N" badge. */
+  /** Cap visible badges from tablet width up (a phone shows at most `ENTITY_TAG_BADGES_PHONE_CAP`); the remainder
+   *  collapse into a "+N" badge. */
   max?: number;
+  /** In a loading state with no `max`: how many tag boxes the row draws from tablet width up (default the row's fold). */
+  skeletonCount?: number;
+  /** In a loading state with no `max`: how many tag boxes a phone's row draws (default `skeletonCount`). */
+  skeletonPhoneCount?: number;
+  /** In a loading state: a host's typical tag label width (a sizing class) where its tags run longer or shorter than
+   *  the default, so its skeleton row wraps where its typical row wraps. */
+  skeletonItemClassName?: string;
   /** Extra classes on the wrapper row. */
   className?: string;
 }
@@ -31,7 +43,106 @@ const BADGE_CLASS = TAG_BADGE_CLASS;
  * `EntityTagList` delegates here so there is exactly one tag-display design.
  * Renders nothing when there are no tags.
  */
-export function EntityTagBadges({ tags, basePath, max, className }: EntityTagBadgesProps) {
+/** The row's layout, read by the row and by its skeleton. */
+const TAG_ROW_CLASS = 'flex w-full flex-wrap items-center gap-2';
+/**
+ * Each tag's box: the tags are a read list (`data-loading-item`: how many there are, and so how many lines the row
+ * wraps to, is the record's).
+ */
+const TAG_ITEM_CLASS = 'inline-flex';
+/** How many tags a row usually shows: what its loading state draws. */
+export const ENTITY_TAG_BADGES_SKELETON_COUNT = 3;
+
+/**
+ * A tag's label while it is read: a typical label's width, eight characters of the badge's monospaced type (loaded
+ * badges measure 41 to 132px, typically about 90px: "AI AGENTS", "AI IN IT"), so the row wraps where a typical row
+ * wraps: a capped row's phone cap of tags and its "+N" fit one line of a phone (342px), as a typical capped row does.
+ */
+const TAG_SKELETON_WIDTH_CLASS = 'w-[8ch]';
+/** The "+N" badge's skeleton: the width of a two-digit count. */
+const OVERFLOW_BADGE_SKELETON_CLASS = 'w-5';
+/**
+ * How many tags a CAPPED row (`max`) shows on a phone, loaded and loading: one line of a phone's column (342px) holds
+ * two typical tags and the "+N" badge, while a third typical tag wraps the row to a second line. A layout fold, the
+ * same for every host; from tablet width up the row shows its `max`.
+ */
+export const ENTITY_TAG_BADGES_PHONE_CAP = 2;
+/** A capped row's tags past the phone cap: drawn from tablet width up only. */
+const PAST_PHONE_CAP_CLASS = 'hidden content-md:inline-flex';
+
+/**
+ * A tag row while its tags are read: `count` badge boxes of the tag badge's size (the row's fold from tablet width
+ * up), and `phoneCount` below that width when a phone's row shows fewer (or more) before it wraps. Hosts pass their
+ * row's layout fold (`<THING>_TAG_ROW_FOLD`); the default is `ENTITY_TAG_BADGES_SKELETON_COUNT`. `overflow` adds the
+ * "+N" badge a row capped by `max` draws after its tags, and a capped row's phone count defaults to the phone cap
+ * (`ENTITY_TAG_BADGES_PHONE_CAP`), as the loaded capped row shows.
+ */
+export function EntityTagBadgesSkeleton({
+  count = ENTITY_TAG_BADGES_SKELETON_COUNT,
+  overflow = false,
+  phoneCount = overflow ? Math.min(count, ENTITY_TAG_BADGES_PHONE_CAP) : count,
+  className,
+  itemClassName,
+}: {
+  count?: number;
+  phoneCount?: number;
+  overflow?: boolean;
+  className?: string;
+  /** A host's typical tag label width (a sizing class on each badge, in place of the default); the row keeps the
+   *  row's own classes. */
+  itemClassName?: string;
+}) {
+  return (
+    <div aria-hidden className={cn(TAG_ROW_CLASS, className)}>
+      {Array.from({ length: Math.max(count, phoneCount) }, (_, i) => (
+        <span
+          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton badges never reorder
+          key={i}
+          className={cn(
+            TAG_ITEM_CLASS,
+            i >= phoneCount && 'hidden content-md:inline-flex',
+            i >= count && 'content-md:hidden',
+          )}
+          data-loading-item
+        >
+          {/* The loaded badge's 1px border (its colours are the skeleton's). */}
+          {/* The label's typical width: the host's (`itemClassName`), else the default. */}
+          <StatusBadgeSkeleton variant="card" className={cn('border', itemClassName ?? TAG_SKELETON_WIDTH_CLASS)} />
+        </span>
+      ))}
+      {/* The "+N" badge counts the tags left out: read data, so it is one of the list's items. */}
+      {overflow && (
+        <span className={TAG_ITEM_CLASS} data-loading-item>
+          <StatusBadgeSkeleton variant="card" className={cn('border', OVERFLOW_BADGE_SKELETON_CLASS)} />
+        </span>
+      )}
+    </div>
+  );
+}
+
+export function EntityTagBadges({
+  tags,
+  basePath,
+  max,
+  skeletonCount,
+  skeletonPhoneCount,
+  skeletonItemClassName,
+  className,
+}: EntityTagBadgesProps) {
+  // A capped row draws its cap and its "+N" badge while it loads, in the row's own wrapping layout: the skeleton
+  // takes the lines a typical capped row takes, and a loaded tag is never cut to fit it.
+  if (useLoadingScope()) {
+    return max == null ? (
+      <EntityTagBadgesSkeleton
+        count={skeletonCount}
+        phoneCount={skeletonPhoneCount}
+        itemClassName={skeletonItemClassName}
+        className={className}
+      />
+    ) : (
+      <EntityTagBadgesSkeleton count={max} overflow itemClassName={skeletonItemClassName} className={className} />
+    );
+  }
   const items = (tags || []).filter((t): t is TagAssoc => !!t && !!t.name);
   if (items.length === 0) return null;
 
@@ -39,28 +150,50 @@ export function EntityTagBadges({ tags, basePath, max, className }: EntityTagBad
   const visibleLimit = max == null ? items.length : Math.max(0, max);
   const shown = items.slice(0, visibleLimit);
   const overflow = items.length - shown.length;
+  // A capped row shows fewer tags on a phone (the phone cap), and its "+N" counts what the phone row leaves out.
+  const phoneLimit = max == null ? shown.length : Math.min(shown.length, ENTITY_TAG_BADGES_PHONE_CAP);
+  const phoneOverflow = items.length - phoneLimit;
+  const itemClass = (index: number) => cn(TAG_ITEM_CLASS, index >= phoneLimit && PAST_PHONE_CAP_CLASS);
 
   return (
-    <div className={`flex w-full flex-wrap items-center gap-2 ${className || ''}`}>
-      {shown.map(tag => {
+    <div className={cn(TAG_ROW_CLASS, className)}>
+      {shown.map((tag, index) => {
         const key = tag.tag_id ?? tag.id ?? tag.slug ?? tag.name;
         const label = (tag.name || '').toUpperCase();
         if (basePath && tag.slug) {
           return (
-            <Link key={key} href={`${basePath}?tags=${tag.slug}`} className="inline-flex">
+            <Link key={key} href={`${basePath}?tags=${tag.slug}`} className={itemClass(index)} data-loading-item>
               <StatusBadge
                 text={label}
                 variant="card"
-                className={`${BADGE_CLASS} cursor-pointer transition-colors hover:border-ods-accent`}
+                className={cn(BADGE_CLASS, 'cursor-pointer transition-colors hover:border-ods-accent')}
               />
             </Link>
           );
         }
-        return <StatusBadge key={key} text={label} variant="card" className={BADGE_CLASS} />;
+        return (
+          <span key={key} className={itemClass(index)} data-loading-item>
+            <StatusBadge text={label} variant="card" className={BADGE_CLASS} />
+          </span>
+        );
       })}
-      {overflow > 0 && (
-        <StatusBadge text={`+${overflow}`} variant="card" className={`${BADGE_CLASS} text-ods-text-secondary`} />
+      {phoneOverflow === overflow ? (
+        overflow > 0 && <OverflowBadge count={overflow} />
+      ) : (
+        <>
+          {phoneOverflow > 0 && <OverflowBadge count={phoneOverflow} className="content-md:hidden" />}
+          {overflow > 0 && <OverflowBadge count={overflow} className={PAST_PHONE_CAP_CLASS} />}
+        </>
       )}
     </div>
   );
 }
+
+/** The "+N" badge: how many tags the row leaves out (a phone's row and a wider row may leave out different counts). */
+function OverflowBadge({ count, className }: { count: number; className?: string }) {
+  return (
+    <span className={cn(TAG_ITEM_CLASS, className)} data-loading-item>
+      <StatusBadge text={`+${count}`} variant="card" className={cn(BADGE_CLASS, 'text-ods-text-secondary')} />
+    </span>
+  );
+}

package/src/components/features/entity-video-section.tsx

@@ -3,10 +3,12 @@
 import type React from 'react';
 import type { ComponentType } from 'react';
 import type { VideoTeaser } from '../../types/video-processing';
+import { cn } from '../../utils/cn';
 import { SECTION_HEADING_CLASS } from '../layout/page-heading';
+import { useLoadingScope } from '../ui/loading-scope';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/tabs';
 import { useCaptions } from './use-captions';
-import { Video } from './video';
+import { Video, VideoSkeleton } from './video';
 import { DEFAULT_VIDEO_BITES_TITLE, type VideoBiteStripProfile } from './video-bites-shared';
 import { VideoBitesStrip, type VideoBiteStripItem } from './video-bites-strip';
 
@@ -24,6 +26,14 @@ import { VideoBitesStrip, type VideoBiteStripItem } from './video-bites-strip';
  * so the underlying primitive stays single-source-per-render.
  */
 
+/** The tab row's layout, read by the section and by its skeleton, so the skeleton is the section's size. */
+const VIDEO_TAB_LIST_CLASS = 'inline-flex h-auto justify-start gap-0 rounded-none bg-transparent p-0';
+const VIDEO_TAB_TRIGGER_CLASS =
+  'rounded-none border-b-2 border-transparent px-4 py-3 text-ods-text-secondary data-[state=active]:border-ods-accent data-[state=active]:bg-transparent data-[state=active]:text-ods-text-primary data-[state=active]:shadow-none content-md:px-6';
+const VIDEO_TAB_CONTENT_CLASS = 'mt-4';
+const FULL_VIDEO_TAB_LABEL = 'Full Video';
+const HIGHLIGHTS_TAB_LABEL = 'Highlights';
+
 interface MarkdownRendererProps {
   content: string;
 }
@@ -79,6 +89,11 @@ export interface EntityVideoSectionProps {
   captionsEntity?: { type: string; id: string | number } | null;
   /** LCP hint — when true, the full-video tab's poster eager-loads. */
   priority?: boolean;
+  /**
+   * The host's records carry both a full video and a highlight reel (an interview is recorded with its reel): in a
+   * loading scope the section draws its player under the real "Full Video" / "Highlights" tabs. Default false.
+   */
+  skeletonTabs?: boolean;
 }
 
 export function EntityVideoSection({
@@ -102,8 +117,10 @@ export function EntityVideoSection({
   highlightCaptionsUrl: highlightCaptionsUrlProp,
   captionsEntity,
   priority = false,
+  skeletonTabs = false,
 }: EntityVideoSectionProps) {
   const captions = useCaptions();
+  const loading = useLoadingScope();
   const hasFullVideo = !!(youtubeUrl || mainVideoUrl);
   const hasHighlight = !!highlightVideoUrl;
   const hasVideo = hasFullVideo || hasHighlight;
@@ -115,6 +132,9 @@ export function EntityVideoSection({
   const captionsUrl = captionsUrlProp ?? derivedCaptions?.captionsUrl;
   const highlightCaptionsUrl = highlightCaptionsUrlProp ?? derivedCaptions?.highlightCaptionsUrl;
 
+  // In a loading scope the props are empty: the section is its player while the record is read.
+  if (loading) return <EntityVideoSectionSkeleton tabs={skeletonTabs} />;
+
   if (!hasVideo && !videoSummary && (!videoBites || videoBites.length === 0)) {
     return null;
   }
@@ -134,22 +154,16 @@ export function EntityVideoSection({
       {hasVideo &&
         (fullVideoUrl && hasHighlight ? (
           <Tabs defaultValue="full-video" className="w-full">
-            <TabsList className="inline-flex h-auto justify-start gap-0 rounded-none bg-transparent p-0">
-              <TabsTrigger
-                value="full-video"
-                className="rounded-none border-b-2 border-transparent px-4 py-3 text-ods-text-secondary data-[state=active]:border-ods-accent data-[state=active]:bg-transparent data-[state=active]:text-ods-text-primary data-[state=active]:shadow-none content-md:px-6"
-              >
-                Full Video
+            <TabsList className={VIDEO_TAB_LIST_CLASS}>
+              <TabsTrigger value="full-video" className={VIDEO_TAB_TRIGGER_CLASS}>
+                {FULL_VIDEO_TAB_LABEL}
               </TabsTrigger>
-              <TabsTrigger
-                value="highlights"
-                className="rounded-none border-b-2 border-transparent px-4 py-3 text-ods-text-secondary data-[state=active]:border-ods-accent data-[state=active]:bg-transparent data-[state=active]:text-ods-text-primary data-[state=active]:shadow-none content-md:px-6"
-              >
-                Highlights
+              <TabsTrigger value="highlights" className={VIDEO_TAB_TRIGGER_CLASS}>
+                {HIGHLIGHTS_TAB_LABEL}
               </TabsTrigger>
             </TabsList>
 
-            <TabsContent value="full-video" className="mt-4">
+            <TabsContent value="full-video" className={VIDEO_TAB_CONTENT_CLASS}>
               <Video
                 kind={fullVideoKind}
                 url={fullVideoUrl}
@@ -161,7 +175,7 @@ export function EntityVideoSection({
               />
             </TabsContent>
 
-            <TabsContent value="highlights" className="mt-4">
+            <TabsContent value="highlights" className={VIDEO_TAB_CONTENT_CLASS}>
               <Video
                 url={highlightVideoUrl}
                 poster={highlightVideoThumbnail}
@@ -214,3 +228,27 @@ export function EntityVideoSection({
     </>
   );
 }
+
+/**
+ * The video section while its record is read: the centered player box (`VideoSkeleton`), under the real static
+ * "Full Video" / "Highlights" tab row when `tabs` (a record that has both). Its classes are the section's own.
+ */
+export function EntityVideoSectionSkeleton({ tabs = false, className }: { tabs?: boolean; className?: string }) {
+  if (!tabs) return <VideoSkeleton layout="centered" className={className} />;
+  // The real tabs (static labels): TabsTrigger draws its own box in a scope. `inert`: nothing in it can be focused or clicked.
+  return (
+    <Tabs defaultValue="full-video" className={cn('w-full', className)} aria-hidden inert>
+      <TabsList className={VIDEO_TAB_LIST_CLASS}>
+        <TabsTrigger value="full-video" className={VIDEO_TAB_TRIGGER_CLASS}>
+          {FULL_VIDEO_TAB_LABEL}
+        </TabsTrigger>
+        <TabsTrigger value="highlights" className={VIDEO_TAB_TRIGGER_CLASS}>
+          {HIGHLIGHTS_TAB_LABEL}
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="full-video" className={VIDEO_TAB_CONTENT_CLASS}>
+        <VideoSkeleton layout="centered" />
+      </TabsContent>
+    </Tabs>
+  );
+}

package/src/components/features/figma-prototype-viewer.tsx

@@ -4,6 +4,7 @@ import type React from 'react';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { cn } from '../../utils/cn';
 import { fetchPriorityProp } from '../../utils/fetch-priority';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Badge } from '../ui/badge';
 import { SectionSelector } from './section-selector';
 
@@ -491,14 +492,9 @@ function UnifiedUI({ state, handlers, config, iframeRef }: UnifiedUIProps) {
 
         {/* Loading Skeleton */}
         {showSkeleton && (
-          <div className="absolute inset-0 z-10 flex h-full w-full animate-pulse items-center justify-center rounded-lg bg-ods-skeleton">
-            <div className="text-center">
-              <div className="text-ods-text-primary text-h2">
-                Warming up <span className="text-ods-open-yellow">Fae</span> and{' '}
-                <span className="text-ods-open-yellow">Mingo</span>
-              </div>
-              <div className="mt-2 text-ods-text-secondary text-h6">Loading AI Co-Pilots...</div>
-            </div>
+          // The prototype's frame as one skeleton surface: no words of its own.
+          <div className="absolute inset-0 z-10 h-full w-full overflow-hidden rounded-lg">
+            <UnifiedSkeleton variant="rectangular" className="absolute inset-0 h-full" />
           </div>
         )}
       </div>

package/src/components/features/index.ts

@@ -110,3 +110,14 @@ export * from './conversation-card';
 
 // The jobs a product does, one at a time with its real screen (marketing pages)
 export * from './capability-explorer';
+export { VIDEO_PLAYBACK_FAILED_EVENT } from './video-shared';
+export type {
+  VideoFailureKind,
+  VideoFailureReason,
+  VideoLayout,
+  VideoMutedFallbackState,
+  VideoPlaybackFailureDetail,
+  VideoPlayerHandle,
+  VideoProps,
+} from './video-shared';
+export { MUX_STREAM_ORIGIN, MUX_IMAGE_ORIGIN } from './mux-origins';

package/src/components/features/knowledge-base/index.ts

@@ -12,8 +12,5 @@ export type {
   KnowledgeBaseTableMode,
 } from './knowledge-base-table';
 export { KnowledgeBaseArticleView } from './knowledge-base-article-view';
-export type {
-  KnowledgeBaseArticleAuthor,
-  KnowledgeBaseArticleStatus,
-  KnowledgeBaseArticleViewProps,
-} from './knowledge-base-article-view';
+export type { KnowledgeBaseArticleAuthor, KnowledgeBaseArticleViewProps } from './knowledge-base-article-view';
+export type { KnowledgeBaseArticleStatus } from './knowledge-base-status';

package/src/components/features/knowledge-base/knowledge-base-article-view.tsx

@@ -13,8 +13,6 @@ import { TicketDetailSection } from '../../ui/ticket-detail-section';
 import { TruncateText } from '../../ui/truncate-text';
 import { KNOWLEDGE_BASE_STATUS_VARIANT, type KnowledgeBaseArticleStatus } from './knowledge-base-status';
 
-export type { KnowledgeBaseArticleStatus };
-
 export interface KnowledgeBaseArticleAuthor {
   /** Display name; null: "Unknown". */
   name: string | null;