@flamingo-stack/openframe-frontend-core 0.0.407 → 0.0.408

package/src/components/media-carousel.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { useState, useRef, useEffect, memo, useCallback } from 'react';
+import { useState, useRef, useEffect, memo, useCallback, type KeyboardEvent, type TouchEvent } from 'react';
 import { cn } from "../utils/cn";
 import { MediaItem } from '../utils/media-carousel-utils-stub';
-import { Video, extractYouTubeId } from './features/video';
-import { VideoPlayBadge } from './features/video-center-badge';
+import { Image, Link } from '../embed-shims';
+import { Button } from './ui/button';
+import { Video } from './features/video';
+import { ImageOffIcon } from './icons-v2-generated/audio-and-visual/image-off-icon';
 
 // Navigation icons
 const ChevronLeftIcon = () => (
@@ -19,58 +21,79 @@ const ChevronRightIcon = () => (
   </svg>
 );
 
-interface MediaCarouselProps {
+/**
+ * THE media carousel (Figma 4033:90570) — the single slide viewer for the
+ * whole codebase: OpenFrame homepage categories, openmsp vendor screenshots,
+ * who-am-i profiles, reddit embeds. One viewport + dot pagination; no
+ * thumbnail rail, no slide counter (both removed with the 2026-07 redesign).
+ *
+ * - Slides render through the SSoT `<Video>` (MuxPlayer / lite-youtube
+ *   facade) for `video`/`youtube` items and a broken-image-resilient
+ *   `<Image>` shim for `image` items.
+ * - Dots: 24px hit target, 8px dot, active = flamingo pink (per design).
+ * - Hover-revealed prev/next arrows (`showArrows`), keyboard arrows, and
+ *   touch swipe all preserved from the previous generation.
+ */
+export interface MediaCarouselProps {
   media: MediaItem[];
   className?: string;
   /** Use aspect ratio instead of height classes for stable dimensions */
   aspectRatio?: '16/9' | '4/3' | '3/2' | '1/1';
-  showThumbnails?: boolean;
-  autoPlay?: boolean;
+  /** Hover-revealed prev/next arrows (default true; dots always render). */
+  showArrows?: boolean;
   /** How content should fit within the container */
   objectFit?: 'contain' | 'cover';
+  /** When true, the first slide's image or YouTube poster uses `priority` / eager load (e.g. vendor detail LCP). */
+  posterPriority?: boolean;
+  /** Optional per-host rewrite for image URLs (e.g. the hub proxies plain
+   *  `http://` sources to avoid mixed content). Applied to image slide srcs
+   *  and derived thumbnails only — video/youtube URLs go to `<Video>` raw. */
+  transformImageSrc?: (url: string) => string;
+  /** Always reserve the dot-row height (24px) even when there is nothing to
+   *  paginate — for surfaces that swap media sets in place (the OpenFrame
+   *  categories showcase), so 1-slide vs N-slide sets never shift layout.
+   *  Default false: standalone carousels (vendor page) collapse the row. */
+  reserveDotRow?: boolean;
 }
 
-export const MediaCarousel = memo(function MediaCarousel({ 
-  media, 
+export const MediaCarousel = memo(function MediaCarousel({
+  media,
   className,
   aspectRatio = "16/9",
-  showThumbnails = true,
-  autoPlay = false,
-  objectFit = 'contain'
+  showArrows = true,
+  objectFit = 'contain',
+  posterPriority = false,
+  transformImageSrc,
+  reserveDotRow = false,
 }: MediaCarouselProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [touchStart, setTouchStart] = useState<number | null>(null);
   const [touchEnd, setTouchEnd] = useState<number | null>(null);
+  /** Resource URLs that failed to load (e.g. 404, blocked CDN) */
+  const [brokenResourceUrls, setBrokenResourceUrls] = useState<Record<string, true>>({});
+  /** The src whose <Image> finished loading — keyed by URL (not a shared
+   *  boolean) so a late onLoad from a previous slide can never reveal the
+   *  current image prematurely; slide changes need no reset effect. */
+  const [loadedImageSrc, setLoadedImageSrc] = useState<string | null>(null);
   const carouselRef = useRef<HTMLDivElement>(null);
-  const thumbnailsRef = useRef<HTMLDivElement>(null);
-
-  // Clamp `currentIndex` whenever `media` shrinks (e.g. an admin removes
-  // a slide while the user is on the last one) so the thumbnail active
-  // state + `currentItem` lookup stay in sync. Without this, the
-  // `media[currentIndex] || media[0]` fallback renders the first slide
-  // but every thumbnail's `isActive = index === currentIndex` reads
-  // false — visually nothing is selected.
+
+  const onImageError = useCallback((originalUrl: string) => {
+    const key = originalUrl.trim() || '__missing_src__';
+    setBrokenResourceUrls((b) => (b[key] ? b : { ...b, [key]: true }));
+  }, []);
+
+  // Clamp `currentIndex` whenever `media` shrinks (e.g. an admin removes a
+  // slide while the user is on the last one) so the dot active state +
+  // `currentItem` lookup stay in sync.
   useEffect(() => {
     if (currentIndex >= media.length && media.length > 0) {
       setCurrentIndex(media.length - 1);
     }
   }, [media.length, currentIndex]);
 
-  // Early return if no media provided
-  if (!media || media.length === 0) {
-    return null;
-  }
-
   const currentItem = media[currentIndex] || media[0];
 
-  // Additional safety check
-  if (!currentItem) {
-    return null;
-  }
-
-  // Navigation functions — `<Video>` (MuxPlayer/YT facade) owns its own
-  // play/pause lifecycle, so the previous bare-`<video>`-element pause
-  // logic in nextSlide/prevSlide/selectSlide is no longer needed.
+  // Navigation — `<Video>` owns its own play/pause lifecycle.
   const nextSlide = useCallback(() => {
     setCurrentIndex((prev) => (prev + 1) % media.length);
   }, [media.length]);
@@ -80,14 +103,13 @@ export const MediaCarousel = memo(function MediaCarousel({
   }, [media.length]);
 
   const selectSlide = useCallback((index: number) => {
-    if (index === currentIndex) return;
-    setCurrentIndex(index);
-  }, [currentIndex]);
+    setCurrentIndex((prev) => (index === prev ? prev : index));
+  }, []);
 
   // Keyboard navigation - only when carousel is focused
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
     if (media.length <= 1) return;
-    
+
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
       prevSlide();
@@ -97,21 +119,33 @@ export const MediaCarousel = memo(function MediaCarousel({
     }
   }, [nextSlide, prevSlide, media.length]);
 
+  // Early return if no media provided
+  if (!media || media.length === 0) {
+    return null;
+  }
+
+  // Additional safety check
+  if (!currentItem) {
+    return null;
+  }
+
   // Touch/swipe handling
   const minSwipeDistance = 50;
 
-  const onTouchStart = (e: React.TouchEvent) => {
+  const onTouchStart = (e: TouchEvent) => {
     setTouchEnd(null);
     setTouchStart(e.targetTouches[0].clientX);
   };
 
-  const onTouchMove = (e: React.TouchEvent) => {
+  const onTouchMove = (e: TouchEvent) => {
     setTouchEnd(e.targetTouches[0].clientX);
   };
 
   const onTouchEnd = () => {
-    if (!touchStart || !touchEnd) return;
-    
+    // Explicit null checks — a swipe starting/ending at the viewport edge has
+    // clientX === 0, which a truthiness check would wrongly discard.
+    if (touchStart === null || touchEnd === null) return;
+
     const distance = touchStart - touchEnd;
     const isLeftSwipe = distance > minSwipeDistance;
     const isRightSwipe = distance < -minSwipeDistance;
@@ -124,52 +158,92 @@ export const MediaCarousel = memo(function MediaCarousel({
     }
   };
 
-  // Render YouTube embed via the SSoT `<Video>` — same lite-youtube
-  // facade everywhere, no carousel-local fork.
-  const renderYouTubeEmbed = (item: MediaItem, index: number) => (
-    <Video
-      kind="youtube"
-      url={item.src}
-      title={item.alt || `Video ${index + 1}`}
-      layout="fill"
-      priority={index === currentIndex}
-    />
-  );
+  const displayImageSrc = (url: string): string =>
+    transformImageSrc ? transformImageSrc(url) : url;
 
-  // Render video via the SSoT `<Video>` — MuxPlayer handles both HLS
-  // and plain MP4, so the carousel no longer needs its own bare
-  // `<video>` element + custom play overlay + 60 LOC of error handling.
+  // Render any playable slide via the SSoT `<Video>` — its default `auto`
+  // routing owns the youtube-vs-file decision (lite-youtube facade vs
+  // MuxPlayer), so the carousel keeps NO url-detection fork of its own.
   const renderVideo = (item: MediaItem, index: number) => (
     <Video
+      key={`video-${index}-${item.src}`}
       url={item.src}
-      poster={item.poster}
+      poster={item.poster ? displayImageSrc(item.poster) : undefined}
+      title={item.alt || `Video ${index + 1}`}
       muted
       layout="fill"
-      priority={index === currentIndex}
+      priority={Boolean(posterPriority && index === 0)}
+      className="w-full h-full bg-black"
     />
   );
 
-  // Render image
-  const renderImage = (item: MediaItem, index: number) => (
-    <div className="absolute inset-0 bg-black">
-      <img 
-        src={item.src} 
-        alt={item.alt || `Media ${index + 1}`} 
-        className={`w-full h-full object-${objectFit}`}
-        loading="lazy"
-        onError={(e) => {
-          const target = e.target as HTMLImageElement;
-          target.style.display = 'none';
-        }}
-      />
+  const renderImageUnavailable = (failedUrl: string) => (
+    <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-ods-card px-6 text-center">
+      <ImageOffIcon className="size-8 text-ods-text-secondary" />
+      <p className="text-ods-text-secondary text-sm max-w-md">
+        This image is no longer available at the original URL.
+      </p>
+      <Link
+        href={failedUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-ods-accent text-sm underline break-all"
+      >
+        Open link
+      </Link>
     </div>
   );
 
-  // Render main media item
+  // Render image — skeleton until onLoad; keep Image opacity-0 until then to
+  // avoid the browser broken-image icon flash.
+  const renderImage = (item: MediaItem, index: number) => {
+    const rawSrc = typeof item.src === 'string' ? item.src.trim() : '';
+    if (!rawSrc) {
+      return (
+        <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-ods-card px-6 text-center">
+          <p className="text-ods-text-secondary text-sm max-w-md">No image URL for this slide.</p>
+        </div>
+      );
+    }
+    if (brokenResourceUrls[rawSrc]) {
+      return renderImageUnavailable(rawSrc);
+    }
+    const mainImagePriority = Boolean(posterPriority && index === 0);
+    const imageLoaded = loadedImageSrc === rawSrc;
+    return (
+      <div className="absolute inset-0 bg-ods-bg">
+        {!imageLoaded && (
+          <div
+            className="absolute inset-0 z-[1] bg-ods-card/90 animate-pulse"
+            aria-hidden
+          />
+        )}
+        <Image
+          src={displayImageSrc(rawSrc)}
+          alt={item.alt || `Media ${index + 1}`}
+          className={cn(
+            `w-full h-full object-${objectFit} relative z-[2]`,
+            !imageLoaded && 'opacity-0',
+            imageLoaded && 'opacity-100 transition-opacity duration-200'
+          )}
+          priority={mainImagePriority}
+          loading={mainImagePriority ? 'eager' : 'lazy'}
+          sizes="(max-width: 1279px) 100vw, 1428px"
+          width={1428}
+          height={802}
+          unoptimized
+          onLoad={() => setLoadedImageSrc(rawSrc)}
+          onError={() => onImageError(rawSrc)}
+        />
+      </div>
+    );
+  };
+
+  // Render main media item — video AND youtube both route through the SSoT
+  // `<Video>` (its `auto` kind owns the detection).
   const renderMainMedia = (item: MediaItem, index: number) => {
     switch (item.type) {
       case 'youtube':
-        return renderYouTubeEmbed(item, index);
       case 'video':
         return renderVideo(item, index);
       case 'image':
@@ -178,55 +252,6 @@ export const MediaCarousel = memo(function MediaCarousel({
     }
   };
 
-  // Render thumbnail
-  const renderThumbnail = (item: MediaItem, index: number) => {
-    const isActive = index === currentIndex;
-    
-    let thumbnailSrc = item.src;
-    if (item.type === 'youtube') {
-      // Use the SSoT `extractYouTubeId` (strict URL parsing, ReDoS-safe)
-      // rather than a local regex so YouTube id extraction has a single
-      // implementation across the lib.
-      const videoId = extractYouTubeId(item.src);
-      thumbnailSrc = videoId ? `https://img.youtube.com/vi/${videoId}/mqdefault.jpg` : item.src;
-    } else if (item.type === 'video' && item.poster) {
-      thumbnailSrc = item.poster;
-    }
-
-    return (
-      <button
-        key={index}
-        onClick={() => selectSlide(index)}
-        className={cn(
-          "relative flex-shrink-0 overflow-hidden transition-all duration-200",
-          "w-20 h-20 md:w-24 md:h-24 rounded-lg border-2",
-          isActive 
-            ? "border-[#FFC008] ring-2 ring-[#FFC008]/20" 
-            : "border-ods-border hover:border-[#888888]"
-        )}
-      >
-        <img
-          src={thumbnailSrc}
-          alt={item.alt || `Thumbnail ${index + 1}`}
-          className="w-full h-full object-cover"
-          loading="lazy"
-        />
-        
-        {/* Play icon overlay for videos */}
-        {(item.type === 'video' || item.type === 'youtube') && (
-          <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-            <VideoPlayBadge size="sm" />
-          </div>
-        )}
-        
-        {/* Active indicator */}
-        {isActive && (
-          <div className="absolute bottom-1 right-1 w-2 h-2 bg-[#FFC008] rounded-full" />
-        )}
-      </button>
-    );
-  };
-
   // Get CSS for aspect ratio
   const getAspectRatioClass = () => {
     switch (aspectRatio) {
@@ -243,12 +268,14 @@ export const MediaCarousel = memo(function MediaCarousel({
   };
 
   return (
-    <div className={cn("space-y-4", className)}>
-      {/* Main Display Area with Fixed Aspect Ratio */}
-      <div 
+    <div className={cn("flex flex-col items-center gap-[var(--spacing-system-l)]", className)}>
+      {/* Main Display Area with Fixed Aspect Ratio — Figma media frame:
+          rounded-md, ods border, semantic elevation token. */}
+      <div
         ref={carouselRef}
         className={cn(
-          "relative bg-ods-bg border border-ods-border rounded-2xl overflow-hidden group w-full",
+          "relative bg-ods-bg border border-ods-border rounded-md overflow-hidden group w-full",
+          "[box-shadow:var(--shadow-media-frame)]",
           getAspectRatioClass()
         )}
         onTouchStart={onTouchStart}
@@ -262,45 +289,64 @@ export const MediaCarousel = memo(function MediaCarousel({
         {/* Media content */}
         {renderMainMedia(currentItem, currentIndex)}
 
-        {/* Navigation Arrows - only show if multiple items */}
-        {media.length > 1 && (
+        {/* Navigation Arrows — hover-revealed, only with multiple items.
+            The common <Button> (transparent) with overlay positioning. */}
+        {showArrows && media.length > 1 && (
           <>
-            <button
+            <Button
+              variant="transparent"
               onClick={prevSlide}
-              className="absolute left-3 top-1/2 transform -translate-y-1/2 bg-black/50 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:bg-black/70 z-10"
+              className="absolute left-3 top-1/2 h-auto md:h-auto -translate-y-1/2 rounded-full bg-black/50 p-2 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100 hover:bg-black/70 z-10"
               aria-label="Previous media"
             >
               <ChevronLeftIcon />
-            </button>
+            </Button>
 
-            <button
+            <Button
+              variant="transparent"
               onClick={nextSlide}
-              className="absolute right-3 top-1/2 transform -translate-y-1/2 bg-black/50 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:bg-black/70 z-10"
+              className="absolute right-3 top-1/2 h-auto md:h-auto -translate-y-1/2 rounded-full bg-black/50 p-2 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100 hover:bg-black/70 z-10"
               aria-label="Next media"
             >
               <ChevronRightIcon />
-            </button>
-
-            {/* Media Counter */}
-            <div className="absolute top-3 right-3 bg-black/70 text-white px-3 py-1 rounded-lg text-sm font-medium">
-              {currentIndex + 1} / {media.length}
-            </div>
+            </Button>
           </>
         )}
       </div>
 
-      {/* Thumbnail Navigation - only show if multiple items and showThumbnails is true */}
-      {media.length > 1 && showThumbnails && (
-        <div className="w-full">
-          <div 
-            ref={thumbnailsRef}
-            className="flex gap-2 overflow-x-auto scrollbar-none py-2"
-            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-          >
-            {media.map((item, index) => renderThumbnail(item, index))}
-          </div>
+      {/* Dot pagination (Figma) — 24px hit target, 8px dot, active pink.
+          Plain grouped buttons (NOT tablist: no roving tabIndex/arrow-key
+          model here — aria-current marks the active slide instead). */}
+      {(media.length > 1 || reserveDotRow) && (
+        <div className="flex h-6 items-center gap-[var(--spacing-system-xs)]" role="group" aria-label="Choose slide">
+          {media.length > 1 && media.map((item, index) => {
+            const isActive = index === currentIndex;
+            return (
+              <Button
+                key={index}
+                variant="transparent"
+                aria-current={isActive ? 'true' : undefined}
+                aria-label={`Go to slide ${index + 1}`}
+                onClick={() => selectSlide(index)}
+                className="flex h-6 w-6 md:h-6 shrink-0 items-center justify-center rounded-full p-0"
+              >
+                <span
+                  className={cn(
+                    "size-2 rounded-full transition-colors duration-150",
+                    isActive
+                      ? "bg-[var(--ods-flamingo-pink-base)]"
+                      : "bg-[var(--ods-system-greys-soft-grey)] hover:bg-[var(--ods-system-greys-soft-grey-hover)]"
+                  )}
+                />
+              </Button>
+            );
+          })}
         </div>
       )}
     </div>
   );
-}); 
+});
+
+// The carousel's item shape is the lib-wide SSOT — re-exported here so hub
+// code can `import type { MediaItem } from '.../components'`.
+export type { MediaItem };

package/src/components/ui/tag.tsx

@@ -7,11 +7,18 @@ import { cn } from "../../utils/cn"
 
 const tagVariants = cva(
   [
-    "text-h5 h-8 inline-flex items-center justify-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-xsf)] rounded-md",
+    "inline-flex items-center justify-center rounded-md",
     "transition-colors duration-150",
   ],
   {
     variants: {
+      // Chip scale. `default` is the classic 32px mono-uppercase tag; `large`
+      // is the Figma "Feature Item" chip (48px, h3 bold body label) used by
+      // chip groups acting as tabs (OpenFrame categories).
+      size: {
+        default: "text-h5 h-8 gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-xsf)]",
+        large: "text-h3 font-bold h-12 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]",
+      },
       variant: {
         primary: [
           "bg-[var(--ods-open-yellow-base)] text-[var(--ods-system-greys-black)]",
@@ -42,6 +49,15 @@ const tagVariants = cva(
           "bg-[var(--ods-system-greys-soft-grey)] text-[var(--ods-system-greys-grey)]",
           "hover:bg-[var(--ods-system-greys-soft-grey-hover)] active:bg-[var(--ods-system-greys-soft-grey-action)]",
         ],
+        // Active/selected chip state (Figma "Feature Item" active): pink
+        // border + pink-secondary fill. A dedicated variant (not appended
+        // utilities) so its own hover rules win — the outline variant's
+        // hover:bg/hover:border would otherwise repaint an active chip grey.
+        selected: [
+          "bg-[var(--ods-flamingo-pink-secondary)] text-[var(--ods-system-greys-white)] border border-[var(--ods-flamingo-pink-base)]",
+          "hover:bg-[var(--ods-flamingo-pink-secondary-hover)] hover:border-[var(--ods-flamingo-pink-base)]",
+          "active:bg-[var(--ods-flamingo-pink-secondary-action)]",
+        ],
         // Matches the EntityTagBadges / StatusBadge tag skin (ods-card + ods-border,
         // mono uppercase) so the tag-editor chips render identically to the public
         // tag badges. Used for FilterChipData variant 'tag' (see search-input).
@@ -53,6 +69,7 @@ const tagVariants = cva(
     },
     defaultVariants: {
       variant: "primary",
+      size: "default",
     },
   }
 )
@@ -86,6 +103,7 @@ export interface TagProps
 function Tag({
   label,
   variant,
+  size,
   icon,
   onClose,
   className,
@@ -97,7 +115,7 @@ function Tag({
   return (
     <Comp
       className={cn(
-        tagVariants({ variant }),
+        tagVariants({ variant, size }),
         disabled && disabledTagClasses,
         className
       )}
@@ -105,7 +123,7 @@ function Tag({
       {...props}
     >
       {icon && (
-        <span className="flex items-center justify-center size-5 shrink-0">
+        <span className={cn("flex items-center justify-center shrink-0", size === 'large' ? 'size-6' : 'size-5')}>
           {icon}
         </span>
       )}

package/src/styles/ods-design-tokens.css

@@ -59,6 +59,8 @@
   --shadow-card-hover: var(--shadow-md);
   --shadow-modal: var(--shadow-xl);
   --shadow-dropdown: var(--shadow-lg);
+  /* Figma media-frame elevation (Flamingo website carousels/panels, 4033:90570) */
+  --shadow-media-frame: 0px 24px 48px 0px rgba(0, 0, 0, 0.24);
   --shadow-tooltip: var(--shadow-base);
   --shadow-focus: 0 0 0 3px rgba(255, 192, 8, 0.3);
 

package/src/utils/media-carousel-utils-stub.ts

@@ -1,5 +1,7 @@
 export interface MediaItem {
-  id: string;
+  /** Optional stable key. The carousel keys slides by index; converters may
+   *  omit this (hub vendor/profile/category converters all do). */
+  id?: string;
   type: 'image' | 'video' | 'youtube';
   src: string;
   alt?: string;