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

package/dist/{chunk-IVM47EGI.js → chunk-CVYSW33D.js}

@@ -90,7 +90,6 @@ import {
   GraduationCapIcon,
   HeadphoneIcon,
   HubspotLogoGreyIcon,
-  ImageOffIcon,
   ImagePlusIcon,
   InfoCircleIcon,
   LayersIcon,
@@ -425,18 +424,11 @@ init_cn();
 import { jsx, jsxs } from "react/jsx-runtime";
 var 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)]",
@@ -467,15 +459,6 @@ var 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).
@@ -486,8 +469,7 @@ var tagVariants = cva(
       }
     },
     defaultVariants: {
-      variant: "primary",
-      size: "default"
+      variant: "primary"
     }
   }
 );
@@ -500,7 +482,6 @@ var disabledTagClasses = [
 function Tag({
   label,
   variant,
-  size: size2,
   icon,
   onClose,
   className,
@@ -513,14 +494,14 @@ function Tag({
     Comp,
     {
       className: cn(
-        tagVariants({ variant, size: size2 }),
+        tagVariants({ variant }),
         disabled && disabledTagClasses,
         className
       ),
       "aria-disabled": disabled || void 0,
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center shrink-0", size2 === "large" ? "size-6" : "size-5"), children: icon }),
+        icon && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center size-5 shrink-0", children: icon }),
         /* @__PURE__ */ jsx("span", { className: cn("truncate", labelClassName), title: typeof label === "string" ? label : void 0, children: label }),
         onClose && /* @__PURE__ */ jsx(
           "button",
@@ -6523,14 +6504,13 @@ function composeChipLabel(label, lozenge) {
 function ChipSkelBar({ className, style }) {
   return /* @__PURE__ */ jsx34("span", { "aria-hidden": true, className: cn("animate-pulse rounded-md bg-ods-border", className), style });
 }
-function QuickActionChipSkeleton({ labelCh = 16, icon = true, lozenge = false, size: size2 = "default", className }) {
+function QuickActionChipSkeleton({ labelCh = 16, icon = true, lozenge = false, className }) {
   return /* @__PURE__ */ jsx34(
     Tag,
     {
       variant: "outline",
-      size: size2,
       className,
-      icon: icon ? /* @__PURE__ */ jsx34(ChipSkelBar, { className: size2 === "large" ? "block size-5" : "block size-4" }) : void 0,
+      icon: icon ? /* @__PURE__ */ jsx34(ChipSkelBar, { className: "block size-4" }) : void 0,
       label: /* @__PURE__ */ jsxs28(Fragment8, { children: [
         lozenge && /* @__PURE__ */ jsx34(ChipSkelBar, { className: "mr-2 inline-block h-[16px] w-[26px] translate-y-[2px]" }),
         /* @__PURE__ */ jsx34(ChipSkelBar, { className: "inline-block h-[0.9em] translate-y-[0.08em]", style: { width: `${labelCh}ch` } })
@@ -6543,8 +6523,6 @@ function QuickActionChipButton({
   icon,
   lozenge,
   variant = "outline",
-  selected = false,
-  size: size2 = "default",
   onSelect,
   onHoverStart,
   onHoverEnd,
@@ -6553,9 +6531,8 @@ function QuickActionChipButton({
 }) {
   const resolvedIcon = renderQuickActionIcon(icon);
   const resolvedLabel = composeChipLabel(label, lozenge);
-  const tagVariant = selected ? "selected" : variant;
   if (!interactive) {
-    return /* @__PURE__ */ jsx34(Tag, { variant: tagVariant, size: size2, icon: resolvedIcon, label: resolvedLabel, className });
+    return /* @__PURE__ */ jsx34(Tag, { variant, icon: resolvedIcon, label: resolvedLabel, className });
   }
   return /* @__PURE__ */ jsx34(
     "button",
@@ -6566,12 +6543,11 @@ function QuickActionChipButton({
       onMouseLeave: onHoverEnd,
       onFocus: onHoverStart,
       onBlur: onHoverEnd,
-      "aria-pressed": selected || void 0,
       className: cn(
         "shrink-0 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent",
         className
       ),
-      children: /* @__PURE__ */ jsx34(Tag, { variant: tagVariant, size: size2, icon: resolvedIcon, label: resolvedLabel })
+      children: /* @__PURE__ */ jsx34(Tag, { variant, icon: resolvedIcon, label: resolvedLabel })
     }
   );
 }
@@ -18708,7 +18684,6 @@ var socialCache = SocialEmbedCache.getInstance();
 // src/components/media-carousel.tsx
 init_cn();
 import { useState as useState39, useRef as useRef23, useEffect as useEffect32, memo as memo4, useCallback as useCallback19 } from "react";
-init_button2();
 import { Fragment as Fragment30, jsx as jsx135, jsxs as jsxs104 } from "react/jsx-runtime";
 var ChevronLeftIcon = () => /* @__PURE__ */ jsx135("svg", { width: "24", height: "24", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx135("polyline", { points: "15,18 9,12 15,6" }) });
 var ChevronRightIcon = () => /* @__PURE__ */ jsx135("svg", { width: "24", height: "24", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx135("polyline", { points: "9,18 15,12 9,6" }) });
@@ -18716,28 +18691,27 @@ var MediaCarousel = memo4(function MediaCarousel2({
   media,
   className,
   aspectRatio = "16/9",
-  showArrows = true,
-  objectFit = "contain",
-  posterPriority = false,
-  transformImageSrc,
-  reserveDotRow = false
+  showThumbnails = true,
+  autoPlay = false,
+  objectFit = "contain"
 }) {
   const [currentIndex, setCurrentIndex] = useState39(0);
   const [touchStart, setTouchStart] = useState39(null);
   const [touchEnd, setTouchEnd] = useState39(null);
-  const [brokenResourceUrls, setBrokenResourceUrls] = useState39({});
-  const [loadedImageSrc, setLoadedImageSrc] = useState39(null);
   const carouselRef = useRef23(null);
-  const onImageError = useCallback19((originalUrl) => {
-    const key = originalUrl.trim() || "__missing_src__";
-    setBrokenResourceUrls((b) => b[key] ? b : { ...b, [key]: true });
-  }, []);
+  const thumbnailsRef = useRef23(null);
   useEffect32(() => {
     if (currentIndex >= media.length && media.length > 0) {
       setCurrentIndex(media.length - 1);
     }
   }, [media.length, currentIndex]);
+  if (!media || media.length === 0) {
+    return null;
+  }
   const currentItem = media[currentIndex] || media[0];
+  if (!currentItem) {
+    return null;
+  }
   const nextSlide = useCallback19(() => {
     setCurrentIndex((prev) => (prev + 1) % media.length);
   }, [media.length]);
@@ -18745,8 +18719,9 @@ var MediaCarousel = memo4(function MediaCarousel2({
     setCurrentIndex((prev) => (prev - 1 + media.length) % media.length);
   }, [media.length]);
   const selectSlide = useCallback19((index) => {
-    setCurrentIndex((prev) => index === prev ? prev : index);
-  }, []);
+    if (index === currentIndex) return;
+    setCurrentIndex(index);
+  }, [currentIndex]);
   const handleKeyDown = useCallback19((e) => {
     if (media.length <= 1) return;
     if (e.key === "ArrowLeft") {
@@ -18757,12 +18732,6 @@ var MediaCarousel = memo4(function MediaCarousel2({
       nextSlide();
     }
   }, [nextSlide, prevSlide, media.length]);
-  if (!media || media.length === 0) {
-    return null;
-  }
-  if (!currentItem) {
-    return null;
-  }
   const minSwipeDistance = 50;
   const onTouchStart = (e) => {
     setTouchEnd(null);
@@ -18772,7 +18741,7 @@ var MediaCarousel = memo4(function MediaCarousel2({
     setTouchEnd(e.targetTouches[0].clientX);
   };
   const onTouchEnd = () => {
-    if (touchStart === null || touchEnd === null) return;
+    if (!touchStart || !touchEnd) return;
     const distance = touchStart - touchEnd;
     const isLeftSwipe = distance > minSwipeDistance;
     const isRightSwipe = distance < -minSwipeDistance;
@@ -18783,77 +18752,43 @@ var MediaCarousel = memo4(function MediaCarousel2({
       prevSlide();
     }
   };
-  const displayImageSrc = (url) => transformImageSrc ? transformImageSrc(url) : url;
-  const renderVideo = (item, index) => /* @__PURE__ */ jsx135(
+  const renderYouTubeEmbed = (item, index) => /* @__PURE__ */ jsx135(
     Video2,
     {
+      kind: "youtube",
       url: item.src,
-      poster: item.poster ? displayImageSrc(item.poster) : void 0,
       title: item.alt || `Video ${index + 1}`,
+      layout: "fill",
+      priority: index === currentIndex
+    }
+  );
+  const renderVideo = (item, index) => /* @__PURE__ */ jsx135(
+    Video2,
+    {
+      url: item.src,
+      poster: item.poster,
       muted: true,
       layout: "fill",
-      priority: Boolean(posterPriority && index === 0),
-      className: "w-full h-full bg-black"
-    },
-    `video-${index}-${item.src}`
+      priority: index === currentIndex
+    }
   );
-  const renderImageUnavailable = (failedUrl) => /* @__PURE__ */ jsxs104("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-ods-card px-6 text-center", children: [
-    /* @__PURE__ */ jsx135(ImageOffIcon, { className: "size-8 text-ods-text-secondary" }),
-    /* @__PURE__ */ jsx135("p", { className: "text-ods-text-secondary text-sm max-w-md", children: "This image is no longer available at the original URL." }),
-    /* @__PURE__ */ jsx135(
-      next_link_default,
-      {
-        href: failedUrl,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "text-ods-accent text-sm underline break-all",
-        children: "Open link"
+  const renderImage = (item, index) => /* @__PURE__ */ jsx135("div", { className: "absolute inset-0 bg-black", children: /* @__PURE__ */ jsx135(
+    "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;
+        target.style.display = "none";
       }
-    )
-  ] });
-  const renderImage = (item, index) => {
-    const rawSrc = typeof item.src === "string" ? item.src.trim() : "";
-    if (!rawSrc) {
-      return /* @__PURE__ */ jsx135("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-ods-card px-6 text-center", children: /* @__PURE__ */ jsx135("p", { className: "text-ods-text-secondary text-sm max-w-md", children: "No image URL for this slide." }) });
-    }
-    if (brokenResourceUrls[rawSrc]) {
-      return renderImageUnavailable(rawSrc);
-    }
-    const mainImagePriority = Boolean(posterPriority && index === 0);
-    const imageLoaded = loadedImageSrc === rawSrc;
-    return /* @__PURE__ */ jsxs104("div", { className: "absolute inset-0 bg-ods-bg", children: [
-      !imageLoaded && /* @__PURE__ */ jsx135(
-        "div",
-        {
-          className: "absolute inset-0 z-[1] bg-ods-card/90 animate-pulse",
-          "aria-hidden": true
-        }
-      ),
-      /* @__PURE__ */ jsx135(
-        next_image_default,
-        {
-          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: true,
-          onLoad: () => setLoadedImageSrc(rawSrc),
-          onError: () => onImageError(rawSrc)
-        }
-      )
-    ] });
-  };
+    }
+  ) });
   const renderMainMedia = (item, index) => {
     switch (item.type) {
       case "youtube":
+        return renderYouTubeEmbed(item, index);
       case "video":
         return renderVideo(item, index);
       case "image":
@@ -18861,6 +18796,41 @@ var MediaCarousel = memo4(function MediaCarousel2({
         return renderImage(item, index);
     }
   };
+  const renderThumbnail = (item, index) => {
+    const isActive = index === currentIndex;
+    let thumbnailSrc = item.src;
+    if (item.type === "youtube") {
+      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 /* @__PURE__ */ jsxs104(
+      "button",
+      {
+        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]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx135(
+            "img",
+            {
+              src: thumbnailSrc,
+              alt: item.alt || `Thumbnail ${index + 1}`,
+              className: "w-full h-full object-cover",
+              loading: "lazy"
+            }
+          ),
+          (item.type === "video" || item.type === "youtube") && /* @__PURE__ */ jsx135("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsx135(VideoPlayBadge, { size: "sm" }) }),
+          isActive && /* @__PURE__ */ jsx135("div", { className: "absolute bottom-1 right-1 w-2 h-2 bg-[#FFC008] rounded-full" })
+        ]
+      },
+      index
+    );
+  };
   const getAspectRatioClass = () => {
     switch (aspectRatio) {
       case "4/3":
@@ -18874,14 +18844,13 @@ var MediaCarousel = memo4(function MediaCarousel2({
         return "aspect-video";
     }
   };
-  return /* @__PURE__ */ jsxs104("div", { className: cn("flex flex-col items-center gap-[var(--spacing-system-l)]", className), children: [
+  return /* @__PURE__ */ jsxs104("div", { className: cn("space-y-4", className), children: [
     /* @__PURE__ */ jsxs104(
       "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,
@@ -18893,54 +18862,43 @@ var MediaCarousel = memo4(function MediaCarousel2({
         "aria-label": media.length > 1 ? "Media carousel, use arrow keys to navigate" : void 0,
         children: [
           renderMainMedia(currentItem, currentIndex),
-          showArrows && media.length > 1 && /* @__PURE__ */ jsxs104(Fragment30, { children: [
+          media.length > 1 && /* @__PURE__ */ jsxs104(Fragment30, { children: [
             /* @__PURE__ */ jsx135(
-              Button,
+              "button",
               {
-                variant: "transparent",
                 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",
                 children: /* @__PURE__ */ jsx135(ChevronLeftIcon, {})
               }
             ),
             /* @__PURE__ */ jsx135(
-              Button,
+              "button",
               {
-                variant: "transparent",
                 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",
                 children: /* @__PURE__ */ jsx135(ChevronRightIcon, {})
               }
-            )
+            ),
+            /* @__PURE__ */ jsxs104("div", { className: "absolute top-3 right-3 bg-black/70 text-white px-3 py-1 rounded-lg text-sm font-medium", children: [
+              currentIndex + 1,
+              " / ",
+              media.length
+            ] })
           ] })
         ]
       }
     ),
-    (media.length > 1 || reserveDotRow) && /* @__PURE__ */ jsx135("div", { className: "flex h-6 items-center gap-[var(--spacing-system-xs)]", role: "group", "aria-label": "Choose slide", children: media.length > 1 && media.map((item, index) => {
-      const isActive = index === currentIndex;
-      return /* @__PURE__ */ jsx135(
-        Button,
-        {
-          variant: "transparent",
-          "aria-current": isActive ? "true" : void 0,
-          "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",
-          children: /* @__PURE__ */ jsx135(
-            "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)]"
-              )
-            }
-          )
-        },
-        index
-      );
-    }) })
+    media.length > 1 && showThumbnails && /* @__PURE__ */ jsx135("div", { className: "w-full", children: /* @__PURE__ */ jsx135(
+      "div",
+      {
+        ref: thumbnailsRef,
+        className: "flex gap-2 overflow-x-auto scrollbar-none py-2",
+        style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+        children: media.map((item, index) => renderThumbnail(item, index))
+      }
+    ) })
   ] });
 });
 
@@ -19276,6 +19234,7 @@ function RedditEmbedClient({ url, maxWidth = 700 }) {
     width: m.width,
     height: m.height
   }));
+  console.log("\u{1F3AC} MediaCarousel will render with:", mediaContent.length, "items", mediaContent);
   const formatTimeAgo = (timestamp) => {
     const now = Math.floor(Date.now() / 1e3);
     const diffSeconds = now - timestamp;
@@ -19322,7 +19281,8 @@ function RedditEmbedClient({ url, maxWidth = 700 }) {
         MediaCarousel,
         {
           media: carouselItems,
-          aspectRatio: "16/9"
+          aspectRatio: "16/9",
+          showThumbnails: carouselItems.length > 1
         }
       ),
       /* @__PURE__ */ jsxs105("div", { className: "flex items-center space-x-6 text-ods-text-secondary text-sm", children: [
@@ -53409,4 +53369,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-IVM47EGI.js.map
+//# sourceMappingURL=chunk-CVYSW33D.js.map