shared-features 0.1.8 → 0.1.9

package/dist/{index-WWndE5XT.js → index-gXNz1Cox.js}

@@ -1471,6 +1471,476 @@ function AdBanner({
     }
   );
 }
+const DISMISSED_TOPBAR_KEY = "sf_topbar_dismissed";
+function TopbarAdBanner({
+  placement = "topbar_banner",
+  rotationInterval = 2e4,
+  maxCampaigns = 5,
+  className,
+  style
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+  const trackedImpressions = useRef(/* @__PURE__ */ new Set());
+  const timerRef = useRef(null);
+  useEffect(() => {
+    try {
+      const dismissed = sessionStorage.getItem(DISMISSED_TOPBAR_KEY);
+      if (dismissed === "true") {
+        setIsDismissed(true);
+      }
+    } catch {
+    }
+  }, []);
+  const handleDismiss = useCallback(() => {
+    setIsDismissed(true);
+    try {
+      sessionStorage.setItem(DISMISSED_TOPBAR_KEY, "true");
+    } catch {
+    }
+  }, []);
+  const {
+    campaigns,
+    loading,
+    recordImpression,
+    recordClick
+  } = useCampaigns({ placement, maxCampaigns });
+  useEffect(() => {
+    if (campaigns.length === 0) return;
+    const campaign2 = campaigns[currentIndex];
+    if (!campaign2 || trackedImpressions.current.has(campaign2.id)) return;
+    trackedImpressions.current.add(campaign2.id);
+    recordImpression(campaign2);
+  }, [currentIndex, campaigns, recordImpression]);
+  useEffect(() => {
+    if (campaigns.length <= 1) return;
+    timerRef.current = setInterval(() => {
+      setIsAnimating(true);
+      setTimeout(() => {
+        setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+        setTimeout(() => setIsAnimating(false), 50);
+      }, 200);
+    }, rotationInterval);
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [campaigns.length, rotationInterval]);
+  const handleClick = useCallback(
+    (campaign2) => {
+      recordClick(campaign2);
+      const targetUrl = campaign2.customCtaUrl || campaign2.product.url;
+      window.open(targetUrl, "_blank");
+    },
+    [recordClick]
+  );
+  const goToPrev = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev - 1 + campaigns.length) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length]);
+  const goToNext = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length]);
+  if (loading || campaigns.length === 0 || isDismissed) return null;
+  const campaign = campaigns[currentIndex];
+  if (!campaign) return null;
+  const { product } = campaign;
+  const displayTitle = campaign.customTitle || product.name;
+  const displayTagline = campaign.customTagline || product.tagline;
+  const displayCta = campaign.customCta || "Learn More";
+  const displayColor = campaign.customProductColor || product.color || "#3B82F6";
+  const displayIcon = campaign.customIcon || product.icon64 || "";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      style: {
+        background: `linear-gradient(90deg, ${displayColor}10 0%, ${displayColor}18 50%, ${displayColor}10 100%)`,
+        borderBottom: `2px solid ${displayColor}40`,
+        position: "relative",
+        maxHeight: 100,
+        overflow: "hidden",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box, { style: { height: 2, background: displayColor } }),
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            align: "center",
+            justify: "between",
+            gap: "3",
+            px: { initial: "3", sm: "4" },
+            py: "2",
+            style: {
+              opacity: isAnimating ? 0 : 1,
+              transform: isAnimating ? "translateY(-5px)" : "translateY(0)",
+              transition: "all 0.2s ease-out",
+              minHeight: 50,
+              maxHeight: 70
+            },
+            children: [
+              campaigns.length > 1 && /* @__PURE__ */ jsx(Flex, { gap: "1", display: { initial: "none", sm: "flex" }, children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "1",
+                  variant: "ghost",
+                  color: "gray",
+                  onClick: goToPrev,
+                  style: { cursor: "pointer" },
+                  "aria-label": "Previous ad",
+                  children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    style: {
+                      width: 40,
+                      height: 40,
+                      borderRadius: 8,
+                      background: `${displayColor}20`,
+                      border: `1px solid ${displayColor}40`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0
+                    },
+                    dangerouslySetInnerHTML: { __html: displayIcon }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "0", style: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", style: { lineHeight: 1.2 }, children: displayTitle }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "1",
+                      color: "gray",
+                      style: {
+                        display: "-webkit-box",
+                        WebkitLineClamp: 1,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden"
+                      },
+                      children: displayTagline
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    size: "1",
+                    onClick: () => handleClick(campaign),
+                    style: {
+                      background: displayColor,
+                      color: "white",
+                      fontWeight: 600,
+                      fontSize: "12px",
+                      padding: "0 12px",
+                      height: 28,
+                      flexShrink: 0
+                    },
+                    children: [
+                      displayCta,
+                      /* @__PURE__ */ jsx(ExternalLink, { size: 12, style: { marginLeft: 4 } })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Flex, { gap: "1", align: "center", children: [
+                campaigns.length > 1 && /* @__PURE__ */ jsx(Box, { display: { initial: "none", sm: "block" }, children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "1",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: goToNext,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Next ad",
+                    children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "1",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: handleDismiss,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Close banner",
+                    children: /* @__PURE__ */ jsx(X, { size: 16 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        campaigns.length > 1 && /* @__PURE__ */ jsx(Flex, { justify: "center", gap: "1", pb: "1", display: { initial: "flex", sm: "none" }, children: campaigns.map((_, i) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: i === currentIndex ? displayColor : "var(--gray-a5)",
+              transition: "background 0.2s ease"
+            }
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+function AdCarousel({
+  placement = "home_banner",
+  rotationInterval = 2e4,
+  maxCampaigns = 5,
+  className,
+  style
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const trackedImpressions = useRef(/* @__PURE__ */ new Set());
+  const timerRef = useRef(null);
+  const {
+    campaigns,
+    loading,
+    recordImpression,
+    recordClick
+  } = useCampaigns({ placement, maxCampaigns });
+  useEffect(() => {
+    if (campaigns.length === 0) return;
+    const campaign2 = campaigns[currentIndex];
+    if (!campaign2 || trackedImpressions.current.has(campaign2.id)) return;
+    trackedImpressions.current.add(campaign2.id);
+    recordImpression(campaign2);
+  }, [currentIndex, campaigns, recordImpression]);
+  useEffect(() => {
+    if (campaigns.length <= 1) return;
+    setProgress(0);
+    const progressInterval = 50;
+    const steps = rotationInterval / progressInterval;
+    let currentStep = 0;
+    timerRef.current = setInterval(() => {
+      currentStep++;
+      setProgress(currentStep / steps * 100);
+      if (currentStep >= steps) {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+          setProgress(0);
+          currentStep = 0;
+          setTimeout(() => setIsAnimating(false), 50);
+        }, 200);
+      }
+    }, progressInterval);
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [campaigns.length, rotationInterval, currentIndex]);
+  const handleClick = useCallback(
+    (campaign2) => {
+      recordClick(campaign2);
+      const targetUrl = campaign2.customCtaUrl || campaign2.product.url;
+      window.open(targetUrl, "_blank");
+    },
+    [recordClick]
+  );
+  const resetTimer = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    setProgress(0);
+  }, []);
+  const goToPrev = useCallback(() => {
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev - 1 + campaigns.length) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length, resetTimer]);
+  const goToNext = useCallback(() => {
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length, resetTimer]);
+  const goToSlide = useCallback((index) => {
+    if (index === currentIndex) return;
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex(index);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [currentIndex, resetTimer]);
+  if (loading || campaigns.length === 0) return null;
+  const campaign = campaigns[currentIndex];
+  if (!campaign) return null;
+  const { product } = campaign;
+  const displayTitle = campaign.customTitle || product.name;
+  const displayTagline = campaign.customTagline || product.tagline;
+  const displayCta = campaign.customCta || "Learn More";
+  const displayColor = campaign.customProductColor || product.color || "#3B82F6";
+  const displayIcon = campaign.customIcon || product.icon64 || "";
+  const displayFeatures = campaign.customFeatures || product.features || [];
+  return /* @__PURE__ */ jsx(Box, { className, style: { padding: "16px 0", ...style }, children: /* @__PURE__ */ jsxs(
+    Card,
+    {
+      style: {
+        background: `linear-gradient(135deg, ${displayColor}08 0%, ${displayColor}15 100%)`,
+        border: `1px solid ${displayColor}25`,
+        overflow: "hidden"
+      },
+      children: [
+        campaigns.length > 1 && /* @__PURE__ */ jsx(Box, { style: { height: 3, background: "var(--gray-a3)", position: "relative" }, children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              height: "100%",
+              width: `${progress}%`,
+              background: displayColor,
+              transition: "width 50ms linear"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Box, { p: { initial: "3", sm: "4" }, children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              direction: { initial: "column", sm: "row" },
+              align: "center",
+              justify: "between",
+              gap: "4",
+              style: {
+                opacity: isAnimating ? 0 : 1,
+                transform: isAnimating ? "translateX(-10px)" : "translateX(0)",
+                transition: "all 0.2s ease-out"
+              },
+              children: [
+                campaigns.length > 1 && /* @__PURE__ */ jsx(Box, { display: { initial: "none", sm: "block" }, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "2",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: goToPrev,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Previous",
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { size: 20 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      style: {
+                        width: 64,
+                        height: 64,
+                        borderRadius: 12,
+                        background: `${displayColor}18`,
+                        border: `2px solid ${displayColor}35`,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0
+                      },
+                      dangerouslySetInnerHTML: { __html: displayIcon }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", style: { flex: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", wrap: "wrap", children: [
+                      /* @__PURE__ */ jsx(Text, { size: "4", weight: "bold", children: displayTitle }),
+                      /* @__PURE__ */ jsx(
+                        Badge,
+                        {
+                          size: "1",
+                          style: {
+                            background: `${displayColor}20`,
+                            color: displayColor,
+                            fontWeight: 600
+                          },
+                          children: product.type === "extension" ? "Extension" : product.type === "android" ? "App" : "Web"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", style: { lineHeight: 1.4 }, children: displayTagline }),
+                    /* @__PURE__ */ jsx(Flex, { gap: "3", mt: "1", wrap: "wrap", display: { initial: "none", md: "flex" }, children: displayFeatures.slice(0, 3).map((feature, i) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", children: [
+                      /* @__PURE__ */ jsx(Check, { size: 14, color: displayColor, strokeWidth: 2.5 }),
+                      /* @__PURE__ */ jsx(Text, { size: "1", color: "gray", children: feature })
+                    ] }, i)) })
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      size: { initial: "2", sm: "3" },
+                      onClick: () => handleClick(campaign),
+                      style: {
+                        background: displayColor,
+                        color: "white",
+                        fontWeight: 600,
+                        flexShrink: 0,
+                        boxShadow: `0 2px 8px ${displayColor}40`
+                      },
+                      children: [
+                        displayCta,
+                        /* @__PURE__ */ jsx(ExternalLink, { size: 16, style: { marginLeft: 6 } })
+                      ]
+                    }
+                  )
+                ] }),
+                campaigns.length > 1 && /* @__PURE__ */ jsx(Box, { display: { initial: "none", sm: "block" }, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "2",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: goToNext,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Next",
+                    children: /* @__PURE__ */ jsx(ChevronRight, { size: 20 })
+                  }
+                ) })
+              ]
+            }
+          ),
+          campaigns.length > 1 && /* @__PURE__ */ jsx(Flex, { justify: "center", gap: "2", mt: "3", children: campaigns.map((c, i) => /* @__PURE__ */ jsx(
+            Box,
+            {
+              onClick: () => goToSlide(i),
+              style: {
+                width: 32,
+                height: 4,
+                borderRadius: 2,
+                background: i === currentIndex ? c.product?.color || displayColor : "var(--gray-a4)",
+                cursor: "pointer",
+                transition: "background 0.2s ease"
+              }
+            },
+            i
+          )) })
+        ] })
+      ]
+    }
+  ) });
+}
 const TYPE_STYLES = {
   info: {
     icon: Info,
@@ -2093,23 +2563,25 @@ export {
   SMALL_PANEL_VARIANTS as S,
   TaglineVariant as T,
   VideoVariant as V,
-  AdModal as a,
-  AdPanel as b,
-  AdSlider as c,
-  AdUpdateModal as d,
-  AddressCard as e,
-  AnnouncementModal as f,
-  BroadcastBanners as g,
-  ComparisonVariant as h,
-  ContactCard as i,
-  FeaturesVariant as j,
-  FooterSection as k,
-  ServicesGrid as l,
-  SkillsDisplay as m,
-  SocialLinksBar as n,
-  TestimonialVariant as o,
-  TestimonialsGrid as p,
-  getLargePanelVariant as q,
-  getSmallPanelVariant as r
+  AdCarousel as a,
+  AdModal as b,
+  AdPanel as c,
+  AdSlider as d,
+  AdUpdateModal as e,
+  AddressCard as f,
+  AnnouncementModal as g,
+  BroadcastBanners as h,
+  ComparisonVariant as i,
+  ContactCard as j,
+  FeaturesVariant as k,
+  FooterSection as l,
+  ServicesGrid as m,
+  SkillsDisplay as n,
+  SocialLinksBar as o,
+  TestimonialVariant as p,
+  TestimonialsGrid as q,
+  TopbarAdBanner as r,
+  getLargePanelVariant as s,
+  getSmallPanelVariant as t
 };
-//# sourceMappingURL=index-WWndE5XT.js.map
+//# sourceMappingURL=index-gXNz1Cox.js.map