@flamingo-stack/openframe-frontend-core 0.0.407-snapshot.20260711133234 → 0.0.407

package/src/components/media-carousel.tsx

@@ -1,12 +1,10 @@
 "use client";
 
-import { useState, useRef, useEffect, memo, useCallback, type KeyboardEvent, type TouchEvent } from 'react';
+import { useState, useRef, useEffect, memo, useCallback } from 'react';
 import { cn } from "../utils/cn";
 import { MediaItem } from '../utils/media-carousel-utils-stub';
-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';
+import { Video, extractYouTubeId } from './features/video';
+import { VideoPlayBadge } from './features/video-center-badge';
 
 // Navigation icons
 const ChevronLeftIcon = () => (
@@ -21,79 +19,58 @@ const ChevronRightIcon = () => (
   </svg>
 );
 
-/**
- * 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 {
+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';
-  /** Hover-revealed prev/next arrows (default true; dots always render). */
-  showArrows?: boolean;
+  showThumbnails?: boolean;
+  autoPlay?: 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",
-  showArrows = true,
-  objectFit = 'contain',
-  posterPriority = false,
-  transformImageSrc,
-  reserveDotRow = false,
+  showThumbnails = true,
+  autoPlay = false,
+  objectFit = 'contain'
 }: 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 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.
+  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.
   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];
 
-  // Navigation — `<Video>` owns its own play/pause lifecycle.
+  // 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.
   const nextSlide = useCallback(() => {
     setCurrentIndex((prev) => (prev + 1) % media.length);
   }, [media.length]);
@@ -103,13 +80,14 @@ export const MediaCarousel = memo(function MediaCarousel({
   }, [media.length]);
 
   const selectSlide = useCallback((index: number) => {
-    setCurrentIndex((prev) => (index === prev ? prev : index));
-  }, []);
+    if (index === currentIndex) return;
+    setCurrentIndex(index);
+  }, [currentIndex]);
 
   // Keyboard navigation - only when carousel is focused
-  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (media.length <= 1) return;
-
+    
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
       prevSlide();
@@ -119,33 +97,21 @@ 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: TouchEvent) => {
+  const onTouchStart = (e: React.TouchEvent) => {
     setTouchEnd(null);
     setTouchStart(e.targetTouches[0].clientX);
   };
 
-  const onTouchMove = (e: TouchEvent) => {
+  const onTouchMove = (e: React.TouchEvent) => {
     setTouchEnd(e.targetTouches[0].clientX);
   };
 
   const onTouchEnd = () => {
-    // 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;
-
+    if (!touchStart || !touchEnd) return;
+    
     const distance = touchStart - touchEnd;
     const isLeftSwipe = distance > minSwipeDistance;
     const isRightSwipe = distance < -minSwipeDistance;
@@ -158,92 +124,52 @@ export const MediaCarousel = memo(function MediaCarousel({
     }
   };
 
-  const displayImageSrc = (url: string): string =>
-    transformImageSrc ? transformImageSrc(url) : url;
+  // 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}
+    />
+  );
 
-  // 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.
+  // 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.
   const renderVideo = (item: MediaItem, index: number) => (
     <Video
-      key={`video-${index}-${item.src}`}
       url={item.src}
-      poster={item.poster ? displayImageSrc(item.poster) : undefined}
-      title={item.alt || `Video ${index + 1}`}
+      poster={item.poster}
       muted
       layout="fill"
-      priority={Boolean(posterPriority && index === 0)}
-      className="w-full h-full bg-black"
+      priority={index === currentIndex}
     />
   );
 
-  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>
+  // 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';
+        }}
+      />
     </div>
   );
 
-  // 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).
+  // Render main media item
   const renderMainMedia = (item: MediaItem, index: number) => {
     switch (item.type) {
       case 'youtube':
+        return renderYouTubeEmbed(item, index);
       case 'video':
         return renderVideo(item, index);
       case 'image':
@@ -252,6 +178,55 @@ 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) {
@@ -268,14 +243,12 @@ export const MediaCarousel = memo(function MediaCarousel({
   };
 
   return (
-    <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
+    <div className={cn("space-y-4", className)}>
+      {/* Main Display Area with Fixed Aspect Ratio */}
+      <div 
         ref={carouselRef}
         className={cn(
-          "relative bg-ods-bg border border-ods-border rounded-md overflow-hidden group w-full",
-          "[box-shadow:var(--shadow-media-frame)]",
+          "relative bg-ods-bg border border-ods-border rounded-2xl overflow-hidden group w-full",
           getAspectRatioClass()
         )}
         onTouchStart={onTouchStart}
@@ -289,64 +262,45 @@ export const MediaCarousel = memo(function MediaCarousel({
         {/* Media content */}
         {renderMainMedia(currentItem, currentIndex)}
 
-        {/* Navigation Arrows — hover-revealed, only with multiple items.
-            The common <Button> (transparent) with overlay positioning. */}
-        {showArrows && media.length > 1 && (
+        {/* Navigation Arrows - only show if multiple items */}
+        {media.length > 1 && (
           <>
-            <Button
-              variant="transparent"
+            <button
               onClick={prevSlide}
-              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"
+              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"
               aria-label="Previous media"
             >
               <ChevronLeftIcon />
-            </Button>
+            </button>
 
-            <Button
-              variant="transparent"
+            <button
               onClick={nextSlide}
-              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"
+              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"
               aria-label="Next media"
             >
               <ChevronRightIcon />
-            </Button>
+            </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>
           </>
         )}
       </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>
-            );
-          })}
+      {/* 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>
         </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,18 +7,11 @@ import { cn } from "../../utils/cn"
 
 const tagVariants = cva(
   [
-    "inline-flex items-center justify-center rounded-md",
+    "text-h5 h-8 inline-flex items-center justify-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-xsf)] 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)]",
@@ -49,15 +42,6 @@ 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).
@@ -69,7 +53,6 @@ const tagVariants = cva(
     },
     defaultVariants: {
       variant: "primary",
-      size: "default",
     },
   }
 )
@@ -103,7 +86,6 @@ export interface TagProps
 function Tag({
   label,
   variant,
-  size,
   icon,
   onClose,
   className,
@@ -115,7 +97,7 @@ function Tag({
   return (
     <Comp
       className={cn(
-        tagVariants({ variant, size }),
+        tagVariants({ variant }),
         disabled && disabledTagClasses,
         className
       )}
@@ -123,7 +105,7 @@ function Tag({
       {...props}
     >
       {icon && (
-        <span className={cn("flex items-center justify-center shrink-0", size === 'large' ? 'size-6' : 'size-5')}>
+        <span className="flex items-center justify-center size-5 shrink-0">
           {icon}
         </span>
       )}

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

@@ -59,8 +59,6 @@
   --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.md

@@ -0,0 +1,31 @@
+<!-- source-hash: 4cdb3166112b0dff8dcc314964dcbba3 -->
+Utility functions for processing and handling media items in carousel components, providing standardized interfaces for images, videos, and embedded content.
+
+## Key Components
+
+- **`MediaItem`** - Interface defining the structure for carousel media items with id, type, URL, and optional metadata
+- **`processMediaItems()`** - Transforms raw media data arrays into standardized MediaItem objects with fallback values
+- **`getMediaThumbnail()`** - Retrieves thumbnail URL for media items (currently returns the main URL)
+
+## Usage Example
+
+```typescript
+import { MediaItem, processMediaItems, getMediaThumbnail } from './media-carousel-utils';
+
+// Process raw media data
+const rawItems = [
+  { id: '1', type: 'image', url: '/photo1.jpg', alt: 'Photo 1' },
+  { url: '/video1.mp4', type: 'video', caption: 'Demo video' },
+  { url: '/embed-content' } // Missing fields will use defaults
+];
+
+const mediaItems: MediaItem[] = processMediaItems(rawItems);
+
+// Get thumbnail for display
+mediaItems.forEach(item => {
+  const thumbnail = getMediaThumbnail(item);
+  console.log(`${item.type}: ${thumbnail}`);
+});
+```
+
+The utility handles missing properties gracefully, using index-based IDs and 'image' as the default type when not specified.

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

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

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

@@ -0,0 +1,22 @@
+// Media carousel utilities stub
+export interface MediaItem {
+  id: string;
+  type: 'image' | 'video' | 'embed';
+  url: string;
+  alt?: string;
+  caption?: string;
+}
+
+export function processMediaItems(items: any[]): MediaItem[] {
+  return items.map((item, index) => ({
+    id: item.id || index.toString(),
+    type: item.type || 'image',
+    url: item.url || '',
+    alt: item.alt || '',
+    caption: item.caption || ''
+  }));
+}
+
+export function getMediaThumbnail(item: MediaItem): string {
+  return item.url;
+}