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

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

@@ -90,6 +90,7 @@ import {
   GraduationCapIcon,
   HeadphoneIcon,
   HubspotLogoGreyIcon,
+  ImageOffIcon,
   ImagePlusIcon,
   InfoCircleIcon,
   LayersIcon,
@@ -424,11 +425,18 @@ init_cn();
 import { jsx, jsxs } from "react/jsx-runtime";
 var 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)]",
@@ -459,6 +467,15 @@ 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).
@@ -469,7 +486,8 @@ var tagVariants = cva(
       }
     },
     defaultVariants: {
-      variant: "primary"
+      variant: "primary",
+      size: "default"
     }
   }
 );
@@ -482,6 +500,7 @@ var disabledTagClasses = [
 function Tag({
   label,
   variant,
+  size: size2,
   icon,
   onClose,
   className,
@@ -494,14 +513,14 @@ function Tag({
     Comp,
     {
       className: cn(
-        tagVariants({ variant }),
+        tagVariants({ variant, size: size2 }),
         disabled && disabledTagClasses,
         className
       ),
       "aria-disabled": disabled || void 0,
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center size-5 shrink-0", children: icon }),
+        icon && /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center shrink-0", size2 === "large" ? "size-6" : "size-5"), children: icon }),
         /* @__PURE__ */ jsx("span", { className: cn("truncate", labelClassName), title: typeof label === "string" ? label : void 0, children: label }),
         onClose && /* @__PURE__ */ jsx(
           "button",
@@ -6504,13 +6523,14 @@ 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, className }) {
+function QuickActionChipSkeleton({ labelCh = 16, icon = true, lozenge = false, size: size2 = "default", className }) {
   return /* @__PURE__ */ jsx34(
     Tag,
     {
       variant: "outline",
+      size: size2,
       className,
-      icon: icon ? /* @__PURE__ */ jsx34(ChipSkelBar, { className: "block size-4" }) : void 0,
+      icon: icon ? /* @__PURE__ */ jsx34(ChipSkelBar, { className: size2 === "large" ? "block size-5" : "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` } })
@@ -6523,6 +6543,8 @@ function QuickActionChipButton({
   icon,
   lozenge,
   variant = "outline",
+  selected = false,
+  size: size2 = "default",
   onSelect,
   onHoverStart,
   onHoverEnd,
@@ -6531,8 +6553,9 @@ function QuickActionChipButton({
 }) {
   const resolvedIcon = renderQuickActionIcon(icon);
   const resolvedLabel = composeChipLabel(label, lozenge);
+  const tagVariant = selected ? "selected" : variant;
   if (!interactive) {
-    return /* @__PURE__ */ jsx34(Tag, { variant, icon: resolvedIcon, label: resolvedLabel, className });
+    return /* @__PURE__ */ jsx34(Tag, { variant: tagVariant, size: size2, icon: resolvedIcon, label: resolvedLabel, className });
   }
   return /* @__PURE__ */ jsx34(
     "button",
@@ -6543,11 +6566,12 @@ 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, icon: resolvedIcon, label: resolvedLabel })
+      children: /* @__PURE__ */ jsx34(Tag, { variant: tagVariant, size: size2, icon: resolvedIcon, label: resolvedLabel })
     }
   );
 }
@@ -18684,6 +18708,7 @@ 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" }) });
@@ -18691,27 +18716,28 @@ var MediaCarousel = memo4(function MediaCarousel2({
   media,
   className,
   aspectRatio = "16/9",
-  showThumbnails = true,
-  autoPlay = false,
-  objectFit = "contain"
+  showArrows = true,
+  objectFit = "contain",
+  posterPriority = false,
+  transformImageSrc,
+  reserveDotRow = false
 }) {
   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 thumbnailsRef = useRef23(null);
+  const onImageError = useCallback19((originalUrl) => {
+    const key = originalUrl.trim() || "__missing_src__";
+    setBrokenResourceUrls((b) => b[key] ? b : { ...b, [key]: true });
+  }, []);
   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]);
@@ -18719,9 +18745,8 @@ var MediaCarousel = memo4(function MediaCarousel2({
     setCurrentIndex((prev) => (prev - 1 + media.length) % media.length);
   }, [media.length]);
   const selectSlide = useCallback19((index) => {
-    if (index === currentIndex) return;
-    setCurrentIndex(index);
-  }, [currentIndex]);
+    setCurrentIndex((prev) => index === prev ? prev : index);
+  }, []);
   const handleKeyDown = useCallback19((e) => {
     if (media.length <= 1) return;
     if (e.key === "ArrowLeft") {
@@ -18732,6 +18757,12 @@ 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);
@@ -18741,7 +18772,7 @@ var MediaCarousel = memo4(function MediaCarousel2({
     setTouchEnd(e.targetTouches[0].clientX);
   };
   const onTouchEnd = () => {
-    if (!touchStart || !touchEnd) return;
+    if (touchStart === null || touchEnd === null) return;
     const distance = touchStart - touchEnd;
     const isLeftSwipe = distance > minSwipeDistance;
     const isRightSwipe = distance < -minSwipeDistance;
@@ -18752,43 +18783,77 @@ var MediaCarousel = memo4(function MediaCarousel2({
       prevSlide();
     }
   };
-  const renderYouTubeEmbed = (item, index) => /* @__PURE__ */ jsx135(
-    Video2,
-    {
-      kind: "youtube",
-      url: item.src,
-      title: item.alt || `Video ${index + 1}`,
-      layout: "fill",
-      priority: index === currentIndex
-    }
-  );
+  const displayImageSrc = (url) => transformImageSrc ? transformImageSrc(url) : url;
   const renderVideo = (item, index) => /* @__PURE__ */ jsx135(
     Video2,
     {
       url: item.src,
-      poster: item.poster,
+      poster: item.poster ? displayImageSrc(item.poster) : void 0,
+      title: item.alt || `Video ${index + 1}`,
       muted: true,
       layout: "fill",
-      priority: index === currentIndex
-    }
+      priority: Boolean(posterPriority && index === 0),
+      className: "w-full h-full bg-black"
+    },
+    `video-${index}-${item.src}`
   );
-  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 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) => {
+    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":
@@ -18796,41 +18861,6 @@ 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":
@@ -18844,13 +18874,14 @@ var MediaCarousel = memo4(function MediaCarousel2({
         return "aspect-video";
     }
   };
-  return /* @__PURE__ */ jsxs104("div", { className: cn("space-y-4", className), children: [
+  return /* @__PURE__ */ jsxs104("div", { className: cn("flex flex-col items-center gap-[var(--spacing-system-l)]", className), children: [
     /* @__PURE__ */ jsxs104(
       "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,
@@ -18862,43 +18893,54 @@ var MediaCarousel = memo4(function MediaCarousel2({
         "aria-label": media.length > 1 ? "Media carousel, use arrow keys to navigate" : void 0,
         children: [
           renderMainMedia(currentItem, currentIndex),
-          media.length > 1 && /* @__PURE__ */ jsxs104(Fragment30, { children: [
+          showArrows && media.length > 1 && /* @__PURE__ */ jsxs104(Fragment30, { children: [
             /* @__PURE__ */ jsx135(
-              "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",
                 children: /* @__PURE__ */ jsx135(ChevronLeftIcon, {})
               }
             ),
             /* @__PURE__ */ jsx135(
-              "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",
                 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 && 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))
-      }
-    ) })
+    (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
+      );
+    }) })
   ] });
 });
 
@@ -19234,7 +19276,6 @@ 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;
@@ -19281,8 +19322,7 @@ function RedditEmbedClient({ url, maxWidth = 700 }) {
         MediaCarousel,
         {
           media: carouselItems,
-          aspectRatio: "16/9",
-          showThumbnails: carouselItems.length > 1
+          aspectRatio: "16/9"
         }
       ),
       /* @__PURE__ */ jsxs105("div", { className: "flex items-center space-x-6 text-ods-text-secondary text-sm", children: [
@@ -53369,4 +53409,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-CVYSW33D.js.map
+//# sourceMappingURL=chunk-IVM47EGI.js.map