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

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

@@ -26,7 +26,7 @@ import {
   useOgPlaceholderUrl,
   useOnboardingState,
   useToast
-} from "./chunk-E6YHDT3D.js";
+} from "./chunk-7Q52HP45.js";
 import {
   AlertCircleIcon,
   AnthropicLogoGreyIcon,
@@ -90,6 +90,7 @@ import {
   GraduationCapIcon,
   HeadphoneIcon,
   HubspotLogoGreyIcon,
+  ImageOffIcon,
   ImagePlusIcon,
   InfoCircleIcon,
   LayersIcon,
@@ -150,7 +151,7 @@ import {
 import {
   useChatRuntime,
   useRequiredChatRuntime
-} from "./chunk-NA7XJRWB.js";
+} from "./chunk-KFQXO7QB.js";
 import {
   dynamic
 } from "./chunk-EL5YVPD5.js";
@@ -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",
@@ -2745,6 +2764,174 @@ function ColorSwatch({ color, className }) {
 // src/components/ui/ticket-status-tag.tsx
 init_cn();
 
+// src/utils/color-analysis.ts
+var DESIGN_PALETTE = [
+  { name: "yellow", hex: "#FFC008", rgb: [255, 192, 8] },
+  { name: "black", hex: "#161616", rgb: [22, 22, 22] },
+  { name: "gray", hex: "#888888", rgb: [136, 136, 136] }
+];
+function hexToRgb(hex) {
+  const normalized = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `${r}${r}${g}${g}${b}${b}`);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(normalized);
+  return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [0, 0, 0];
+}
+function getLuminance(rgb) {
+  const [r, g, b] = rgb.map((c) => {
+    c = c / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function getContrastRatio(color1, color2) {
+  const lum1 = getLuminance(color1);
+  const lum2 = getLuminance(color2);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+function pickReadableTextColor(bgHex) {
+  const bg = hexToRgb(bgHex);
+  const darkContrast = getContrastRatio(bg, [26, 26, 26]);
+  const lightContrast = getContrastRatio(bg, [250, 250, 250]);
+  return darkContrast >= lightContrast ? "dark" : "light";
+}
+function extractDominantColor(canvas) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return [128, 128, 128];
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
+  const sampleSize = Math.max(1, Math.floor(data.length / (4 * 1e3)));
+  const colorCounts = {};
+  for (let i = 0; i < data.length; i += 4 * sampleSize) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    const alpha = data[i + 3];
+    if (alpha < 128) continue;
+    const bucketR = Math.round(r / 32) * 32;
+    const bucketG = Math.round(g / 32) * 32;
+    const bucketB = Math.round(b / 32) * 32;
+    const key = `${bucketR},${bucketG},${bucketB}`;
+    colorCounts[key] = (colorCounts[key] || 0) + 1;
+  }
+  let maxCount = 0;
+  let dominantColor = [128, 128, 128];
+  for (const [colorKey, count] of Object.entries(colorCounts)) {
+    if (count > maxCount) {
+      maxCount = count;
+      const [r, g, b] = colorKey.split(",").map(Number);
+      dominantColor = [r, g, b];
+    }
+  }
+  return dominantColor;
+}
+function getBestContrastColor(imageColor) {
+  let bestColor = DESIGN_PALETTE[0];
+  let bestContrast = 0;
+  for (const color of DESIGN_PALETTE) {
+    const contrast = getContrastRatio(imageColor, color.rgb);
+    if (contrast > bestContrast) {
+      bestContrast = contrast;
+      bestColor = color;
+    }
+  }
+  return bestContrast >= 3 ? bestColor : DESIGN_PALETTE.find((c) => c.name === "black") || bestColor;
+}
+function analyzeImageColor(imageSrc) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject(new Error("Could not get canvas context"));
+          return;
+        }
+        const maxSize = 100;
+        const scale = Math.min(maxSize / img.width, maxSize / img.height);
+        canvas.width = img.width * scale;
+        canvas.height = img.height * scale;
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        const dominantColor = extractDominantColor(canvas);
+        const bestContrastColor = getBestContrastColor(dominantColor);
+        resolve(bestContrastColor);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    img.onerror = () => reject(new Error("Failed to load image"));
+    img.src = imageSrc;
+  });
+}
+async function extractImageEdgeColorAsync(imageUrl) {
+  return new Promise((resolve) => {
+    if (typeof window === "undefined") {
+      resolve("#000000");
+      return;
+    }
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          resolve("#000000");
+          return;
+        }
+        const maxSize = 50;
+        const scale = Math.min(maxSize / img.naturalWidth, maxSize / img.naturalHeight);
+        const w = Math.round(img.naturalWidth * scale);
+        const h = Math.round(img.naturalHeight * scale);
+        canvas.width = w;
+        canvas.height = h;
+        ctx.drawImage(img, 0, 0, w, h);
+        const data = ctx.getImageData(0, 0, w, h).data;
+        const edgeW = Math.max(2, Math.round(w * 0.15));
+        const edgeH = Math.max(2, Math.round(h * 0.15));
+        const bucketSize = 32;
+        const buckets = /* @__PURE__ */ new Map();
+        for (let y = 0; y < h; y++) {
+          for (let x = 0; x < w; x++) {
+            if (!(x < edgeW || x >= w - edgeW || y < edgeH || y >= h - edgeH)) continue;
+            const i = (y * w + x) * 4;
+            if (data[i + 3] < 128) continue;
+            const br = Math.floor(data[i] / bucketSize) * bucketSize;
+            const bg = Math.floor(data[i + 1] / bucketSize) * bucketSize;
+            const bb = Math.floor(data[i + 2] / bucketSize) * bucketSize;
+            const key = `${br},${bg},${bb}`;
+            const existing = buckets.get(key);
+            if (existing) {
+              existing.r += data[i];
+              existing.g += data[i + 1];
+              existing.b += data[i + 2];
+              existing.count++;
+            } else {
+              buckets.set(key, { r: data[i], g: data[i + 1], b: data[i + 2], count: 1 });
+            }
+          }
+        }
+        let best = { r: 0, g: 0, b: 0, count: 0 };
+        for (const b2 of buckets.values()) {
+          if (b2.count > best.count) best = b2;
+        }
+        if (best.count === 0) {
+          resolve("#000000");
+          return;
+        }
+        const r = Math.round(best.r / best.count), g = Math.round(best.g / best.count), b = Math.round(best.b / best.count);
+        resolve(`#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`);
+      } catch {
+        resolve("#000000");
+      }
+    };
+    img.onerror = () => resolve("#000000");
+    img.src = imageUrl;
+  });
+}
+
 // src/utils/ods-color-utils.ts
 function getPlatformAccentColor(platform) {
   const currentPlatform = platform || getCurrentPlatform();
@@ -2769,18 +2956,13 @@ function getCurrentPlatform() {
   return process.env.NEXT_PUBLIC_APP_TYPE || "openmsp";
 }
 function getReadableTextColor(hex) {
-  const n = parseInt(hex.replace("#", ""), 16);
-  const r = n >> 16 & 255;
-  const g = n >> 8 & 255;
-  const b = n & 255;
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.5 ? "#212121" : "#fafafa";
+  return pickReadableTextColor(hex) === "dark" ? "#212121" : "#fafafa";
 }
 var HEX_PATTERN = /^#[0-9a-fA-F]{6}$/;
 function clamp(n, min, max) {
   return Math.max(min, Math.min(max, n));
 }
-function hexToRgb(hex) {
+function hexToRgb2(hex) {
   if (!HEX_PATTERN.test(hex)) return null;
   const n = Number.parseInt(hex.slice(1), 16);
   return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
@@ -2792,7 +2974,7 @@ function rgbToHex(r, g, b) {
 var HOVER_DARKEN_STEP = 10;
 var ACTIVE_DARKEN_STEP = 20;
 function darkenByStep(hex, step) {
-  const rgb = hexToRgb(hex);
+  const rgb = hexToRgb2(hex);
   if (!rgb) return hex;
   return rgbToHex(rgb.r - step, rgb.g - step, rgb.b - step);
 }
@@ -6341,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` } })
@@ -6360,6 +6543,8 @@ function QuickActionChipButton({
   icon,
   lozenge,
   variant = "outline",
+  selected = false,
+  size: size2 = "default",
   onSelect,
   onHoverStart,
   onHoverEnd,
@@ -6368,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",
@@ -6380,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 })
     }
   );
 }
@@ -18521,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" }) });
@@ -18528,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]);
@@ -18556,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") {
@@ -18569,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);
@@ -18578,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;
@@ -18589,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":
@@ -18633,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":
@@ -18681,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,
@@ -18699,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
+      );
+    }) })
   ] });
 });
 
@@ -19071,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;
@@ -19118,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: [
@@ -22901,173 +23104,6 @@ function isGenericWebsiteDomain(website) {
   return isGenericDomain(normalizeDomain(website));
 }
 
-// src/utils/color-analysis.ts
-var DESIGN_PALETTE = [
-  { name: "yellow", hex: "#FFC008", rgb: [255, 192, 8] },
-  { name: "black", hex: "#161616", rgb: [22, 22, 22] },
-  { name: "gray", hex: "#888888", rgb: [136, 136, 136] }
-];
-function hexToRgb2(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [0, 0, 0];
-}
-function getLuminance(rgb) {
-  const [r, g, b] = rgb.map((c) => {
-    c = c / 255;
-    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-  });
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-function getContrastRatio(color1, color2) {
-  const lum1 = getLuminance(color1);
-  const lum2 = getLuminance(color2);
-  const brightest = Math.max(lum1, lum2);
-  const darkest = Math.min(lum1, lum2);
-  return (brightest + 0.05) / (darkest + 0.05);
-}
-function pickReadableTextColor(bgHex) {
-  const bg = hexToRgb2(bgHex);
-  const darkContrast = getContrastRatio(bg, [26, 26, 26]);
-  const lightContrast = getContrastRatio(bg, [250, 250, 250]);
-  return darkContrast >= lightContrast ? "dark" : "light";
-}
-function extractDominantColor(canvas) {
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return [128, 128, 128];
-  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-  const data = imageData.data;
-  const sampleSize = Math.max(1, Math.floor(data.length / (4 * 1e3)));
-  const colorCounts = {};
-  for (let i = 0; i < data.length; i += 4 * sampleSize) {
-    const r = data[i];
-    const g = data[i + 1];
-    const b = data[i + 2];
-    const alpha = data[i + 3];
-    if (alpha < 128) continue;
-    const bucketR = Math.round(r / 32) * 32;
-    const bucketG = Math.round(g / 32) * 32;
-    const bucketB = Math.round(b / 32) * 32;
-    const key = `${bucketR},${bucketG},${bucketB}`;
-    colorCounts[key] = (colorCounts[key] || 0) + 1;
-  }
-  let maxCount = 0;
-  let dominantColor = [128, 128, 128];
-  for (const [colorKey, count] of Object.entries(colorCounts)) {
-    if (count > maxCount) {
-      maxCount = count;
-      const [r, g, b] = colorKey.split(",").map(Number);
-      dominantColor = [r, g, b];
-    }
-  }
-  return dominantColor;
-}
-function getBestContrastColor(imageColor) {
-  let bestColor = DESIGN_PALETTE[0];
-  let bestContrast = 0;
-  for (const color of DESIGN_PALETTE) {
-    const contrast = getContrastRatio(imageColor, color.rgb);
-    if (contrast > bestContrast) {
-      bestContrast = contrast;
-      bestColor = color;
-    }
-  }
-  return bestContrast >= 3 ? bestColor : DESIGN_PALETTE.find((c) => c.name === "black") || bestColor;
-}
-function analyzeImageColor(imageSrc) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => {
-      try {
-        const canvas = document.createElement("canvas");
-        const ctx = canvas.getContext("2d");
-        if (!ctx) {
-          reject(new Error("Could not get canvas context"));
-          return;
-        }
-        const maxSize = 100;
-        const scale = Math.min(maxSize / img.width, maxSize / img.height);
-        canvas.width = img.width * scale;
-        canvas.height = img.height * scale;
-        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-        const dominantColor = extractDominantColor(canvas);
-        const bestContrastColor = getBestContrastColor(dominantColor);
-        resolve(bestContrastColor);
-      } catch (error) {
-        reject(error);
-      }
-    };
-    img.onerror = () => reject(new Error("Failed to load image"));
-    img.src = imageSrc;
-  });
-}
-async function extractImageEdgeColorAsync(imageUrl) {
-  return new Promise((resolve) => {
-    if (typeof window === "undefined") {
-      resolve("#000000");
-      return;
-    }
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => {
-      try {
-        const canvas = document.createElement("canvas");
-        const ctx = canvas.getContext("2d");
-        if (!ctx) {
-          resolve("#000000");
-          return;
-        }
-        const maxSize = 50;
-        const scale = Math.min(maxSize / img.naturalWidth, maxSize / img.naturalHeight);
-        const w = Math.round(img.naturalWidth * scale);
-        const h = Math.round(img.naturalHeight * scale);
-        canvas.width = w;
-        canvas.height = h;
-        ctx.drawImage(img, 0, 0, w, h);
-        const data = ctx.getImageData(0, 0, w, h).data;
-        const edgeW = Math.max(2, Math.round(w * 0.15));
-        const edgeH = Math.max(2, Math.round(h * 0.15));
-        const bucketSize = 32;
-        const buckets = /* @__PURE__ */ new Map();
-        for (let y = 0; y < h; y++) {
-          for (let x = 0; x < w; x++) {
-            if (!(x < edgeW || x >= w - edgeW || y < edgeH || y >= h - edgeH)) continue;
-            const i = (y * w + x) * 4;
-            if (data[i + 3] < 128) continue;
-            const br = Math.floor(data[i] / bucketSize) * bucketSize;
-            const bg = Math.floor(data[i + 1] / bucketSize) * bucketSize;
-            const bb = Math.floor(data[i + 2] / bucketSize) * bucketSize;
-            const key = `${br},${bg},${bb}`;
-            const existing = buckets.get(key);
-            if (existing) {
-              existing.r += data[i];
-              existing.g += data[i + 1];
-              existing.b += data[i + 2];
-              existing.count++;
-            } else {
-              buckets.set(key, { r: data[i], g: data[i + 1], b: data[i + 2], count: 1 });
-            }
-          }
-        }
-        let best = { r: 0, g: 0, b: 0, count: 0 };
-        for (const b2 of buckets.values()) {
-          if (b2.count > best.count) best = b2;
-        }
-        if (best.count === 0) {
-          resolve("#000000");
-          return;
-        }
-        const r = Math.round(best.r / best.count), g = Math.round(best.g / best.count), b = Math.round(best.b / best.count);
-        resolve(`#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`);
-      } catch {
-        resolve("#000000");
-      }
-    };
-    img.onerror = () => resolve("#000000");
-    img.src = imageUrl;
-  });
-}
-
 // src/utils/announcement-storage.ts
 function announcementDismissCookieName(platform) {
   return `${platform}-announcement-dismissed`;
@@ -23096,6 +23132,19 @@ function isAnnouncementDismissed(platform, id) {
     return false;
   }
 }
+function clearAnnouncementDismissals(platform) {
+  if (typeof document === "undefined") return;
+  document.cookie = `${announcementDismissCookieName(platform)}=; path=/; max-age=0`;
+  try {
+    const prefix = `${platform}-announcement-`;
+    Object.keys(localStorage).forEach((key) => {
+      if (key.startsWith(prefix) && key.endsWith("-dismissed")) {
+        localStorage.removeItem(key);
+      }
+    });
+  } catch {
+  }
+}
 function clearLegacyAnnouncementCache(platform) {
   if (typeof window === "undefined") return;
   try {
@@ -41858,7 +41907,7 @@ function ChannelInput({
   );
 }
 function RgbInputs({ value, onChange }) {
-  const rgb = hexToRgb(value) ?? { r: 0, g: 0, b: 0 };
+  const rgb = hexToRgb2(value) ?? { r: 0, g: 0, b: 0 };
   const update = (next) => {
     const r = next.r ?? rgb.r;
     const g = next.g ?? rgb.g;
@@ -41872,7 +41921,7 @@ function RgbInputs({ value, onChange }) {
   ] });
 }
 function HslInputs({ value, onChange }) {
-  const rgb = hexToRgb(value) ?? { r: 0, g: 0, b: 0 };
+  const rgb = hexToRgb2(value) ?? { r: 0, g: 0, b: 0 };
   const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
   const update = (next) => {
     const h = next.h ?? hsl.h;
@@ -52466,11 +52515,18 @@ export {
   ActionsMenu,
   ActionsMenuDropdown,
   ColorSwatch,
+  DESIGN_PALETTE,
+  getContrastRatio,
+  pickReadableTextColor,
+  extractDominantColor,
+  getBestContrastColor,
+  analyzeImageColor,
+  extractImageEdgeColorAsync,
   getPlatformAccentColor,
   getCurrentPlatform,
   getReadableTextColor,
   HEX_PATTERN,
-  hexToRgb,
+  hexToRgb2 as hexToRgb,
   rgbToHex,
   deriveHoverColor,
   deriveActiveColor,
@@ -53033,18 +53089,11 @@ export {
   isGenericDomain,
   hasGenericEmailDomain,
   isGenericWebsiteDomain,
-  DESIGN_PALETTE,
-  getLuminance,
-  getContrastRatio,
-  pickReadableTextColor,
-  extractDominantColor,
-  getBestContrastColor,
-  analyzeImageColor,
-  extractImageEdgeColorAsync,
   announcementDismissCookieName,
   isDismissedCookieValue,
   dismissAnnouncement,
   isAnnouncementDismissed,
+  clearAnnouncementDismissals,
   clearLegacyAnnouncementCache,
   readLeadingDecisionFrame,
   ANNOUNCEMENT_CTA_DEFAULTS,
@@ -53360,4 +53409,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-SOK32D6C.js.map
+//# sourceMappingURL=chunk-IVM47EGI.js.map