shared-features 0.1.7 → 0.1.9

package/dist/{index-DxjbpnFC.cjs → index--8iNqKw6.cjs}

@@ -1168,17 +1168,63 @@ function AdUpdateModal({
     }
   ) });
 }
+const DISMISSED_BANNERS_KEY = "sf_dismissed_banners";
 function AdBanner({
   placement = "home_banner",
   rotationInterval = 1e4,
   maxCampaigns = 5,
+  dismissible = false,
+  dismissDuration = "session",
   className,
   style
 }) {
   const [currentIndex, setCurrentIndex] = react.useState(0);
   const [isAnimating, setIsAnimating] = react.useState(false);
   const [progress, setProgress] = react.useState(0);
+  const [isDismissed, setIsDismissed] = react.useState(false);
   const trackedImpressions = react.useRef(/* @__PURE__ */ new Set());
+  react.useEffect(() => {
+    if (!dismissible) return;
+    const checkDismissed = () => {
+      if (dismissDuration === "persistent") {
+        try {
+          const dismissed = localStorage.getItem(DISMISSED_BANNERS_KEY);
+          if (dismissed) {
+            const dismissedPlacements = JSON.parse(dismissed);
+            if (dismissedPlacements.includes(placement)) {
+              setIsDismissed(true);
+            }
+          }
+        } catch {
+        }
+      } else {
+        try {
+          const dismissed = sessionStorage.getItem(DISMISSED_BANNERS_KEY);
+          if (dismissed) {
+            const dismissedPlacements = JSON.parse(dismissed);
+            if (dismissedPlacements.includes(placement)) {
+              setIsDismissed(true);
+            }
+          }
+        } catch {
+        }
+      }
+    };
+    checkDismissed();
+  }, [dismissible, dismissDuration, placement]);
+  const handleDismiss = react.useCallback(() => {
+    setIsDismissed(true);
+    const storage = dismissDuration === "persistent" ? localStorage : sessionStorage;
+    try {
+      const existing = storage.getItem(DISMISSED_BANNERS_KEY);
+      const dismissedPlacements = existing ? JSON.parse(existing) : [];
+      if (!dismissedPlacements.includes(placement)) {
+        dismissedPlacements.push(placement);
+        storage.setItem(DISMISSED_BANNERS_KEY, JSON.stringify(dismissedPlacements));
+      }
+    } catch {
+    }
+  }, [dismissDuration, placement]);
   const {
     campaigns,
     loading,
@@ -1230,7 +1276,7 @@ function AdBanner({
       setTimeout(() => setIsAnimating(false), 50);
     }, 200);
   }, [currentIndex]);
-  if (loading || campaigns.length === 0) return null;
+  if (loading || campaigns.length === 0 || isDismissed) return null;
   const campaign = campaigns[currentIndex];
   if (!campaign) return null;
   const { product } = campaign;
@@ -1251,6 +1297,24 @@ function AdBanner({
         ...style
       },
       children: [
+        dismissible && /* @__PURE__ */ jsxRuntime.jsx(
+          themes.IconButton,
+          {
+            size: "1",
+            variant: "ghost",
+            color: "gray",
+            onClick: handleDismiss,
+            style: {
+              position: "absolute",
+              top: 8,
+              right: 8,
+              zIndex: 10,
+              cursor: "pointer"
+            },
+            "aria-label": "Close banner",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { style: { height: 3, background: displayColor } }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           themes.Box,
@@ -1408,6 +1472,476 @@ function AdBanner({
     }
   );
 }
+const DISMISSED_TOPBAR_KEY = "sf_topbar_dismissed";
+function TopbarAdBanner({
+  placement = "topbar_banner",
+  rotationInterval = 2e4,
+  maxCampaigns = 5,
+  className,
+  style
+}) {
+  const [currentIndex, setCurrentIndex] = react.useState(0);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [isDismissed, setIsDismissed] = react.useState(false);
+  const trackedImpressions = react.useRef(/* @__PURE__ */ new Set());
+  const timerRef = react.useRef(null);
+  react.useEffect(() => {
+    try {
+      const dismissed = sessionStorage.getItem(DISMISSED_TOPBAR_KEY);
+      if (dismissed === "true") {
+        setIsDismissed(true);
+      }
+    } catch {
+    }
+  }, []);
+  const handleDismiss = react.useCallback(() => {
+    setIsDismissed(true);
+    try {
+      sessionStorage.setItem(DISMISSED_TOPBAR_KEY, "true");
+    } catch {
+    }
+  }, []);
+  const {
+    campaigns,
+    loading,
+    recordImpression,
+    recordClick
+  } = useCommonFeatures.useCampaigns({ placement, maxCampaigns });
+  react.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]);
+  react.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 = react.useCallback(
+    (campaign2) => {
+      recordClick(campaign2);
+      const targetUrl = campaign2.customCtaUrl || campaign2.product.url;
+      window.open(targetUrl, "_blank");
+    },
+    [recordClick]
+  );
+  const goToPrev = react.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 = react.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__ */ jsxRuntime.jsxs(
+    themes.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__ */ jsxRuntime.jsx(themes.Box, { style: { height: 2, background: displayColor } }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          themes.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__ */ jsxRuntime.jsx(themes.Flex, { gap: "1", display: { initial: "none", sm: "flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                themes.IconButton,
+                {
+                  size: "1",
+                  variant: "ghost",
+                  color: "gray",
+                  onClick: goToPrev,
+                  style: { cursor: "pointer" },
+                  "aria-label": "Previous ad",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "3", style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.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__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "0", style: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "2", weight: "bold", style: { lineHeight: 1.2 }, children: displayTitle }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    themes.Text,
+                    {
+                      size: "1",
+                      color: "gray",
+                      style: {
+                        display: "-webkit-box",
+                        WebkitLineClamp: 1,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden"
+                      },
+                      children: displayTagline
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  themes.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__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 12, style: { marginLeft: 4 } })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { gap: "1", align: "center", children: [
+                campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", sm: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.IconButton,
+                  {
+                    size: "1",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: goToNext,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Next ad",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.IconButton,
+                  {
+                    size: "1",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: handleDismiss,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Close banner",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { justify: "center", gap: "1", pb: "1", display: { initial: "flex", sm: "none" }, children: campaigns.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          themes.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] = react.useState(0);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const trackedImpressions = react.useRef(/* @__PURE__ */ new Set());
+  const timerRef = react.useRef(null);
+  const {
+    campaigns,
+    loading,
+    recordImpression,
+    recordClick
+  } = useCommonFeatures.useCampaigns({ placement, maxCampaigns });
+  react.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]);
+  react.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 = react.useCallback(
+    (campaign2) => {
+      recordClick(campaign2);
+      const targetUrl = campaign2.customCtaUrl || campaign2.product.url;
+      window.open(targetUrl, "_blank");
+    },
+    [recordClick]
+  );
+  const resetTimer = react.useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    setProgress(0);
+  }, []);
+  const goToPrev = react.useCallback(() => {
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev - 1 + campaigns.length) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length, resetTimer]);
+  const goToNext = react.useCallback(() => {
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length, resetTimer]);
+  const goToSlide = react.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__ */ jsxRuntime.jsx(themes.Box, { className, style: { padding: "16px 0", ...style }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    themes.Card,
+    {
+      style: {
+        background: `linear-gradient(135deg, ${displayColor}08 0%, ${displayColor}15 100%)`,
+        border: `1px solid ${displayColor}25`,
+        overflow: "hidden"
+      },
+      children: [
+        campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { style: { height: 3, background: "var(--gray-a3)", position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          themes.Box,
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              height: "100%",
+              width: `${progress}%`,
+              background: displayColor,
+              transition: "width 50ms linear"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(themes.Box, { p: { initial: "3", sm: "4" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            themes.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__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", sm: "block" }, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.IconButton,
+                  {
+                    size: "2",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: goToPrev,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Previous",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 20 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "4", style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    themes.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__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "1", style: { flex: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "2", wrap: "wrap", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "4", weight: "bold", children: displayTitle }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        themes.Badge,
+                        {
+                          size: "1",
+                          style: {
+                            background: `${displayColor}20`,
+                            color: displayColor,
+                            fontWeight: 600
+                          },
+                          children: product.type === "extension" ? "Extension" : product.type === "android" ? "App" : "Web"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "2", color: "gray", style: { lineHeight: 1.4 }, children: displayTagline }),
+                    /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { gap: "3", mt: "1", wrap: "wrap", display: { initial: "none", md: "flex" }, children: displayFeatures.slice(0, 3).map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14, color: displayColor, strokeWidth: 2.5 }),
+                      /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "1", color: "gray", children: feature })
+                    ] }, i)) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    themes.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__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 16, style: { marginLeft: 6 } })
+                      ]
+                    }
+                  )
+                ] }),
+                campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", sm: "block" }, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.IconButton,
+                  {
+                    size: "2",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: goToNext,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Next",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 20 })
+                  }
+                ) })
+              ]
+            }
+          ),
+          campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { justify: "center", gap: "2", mt: "3", children: campaigns.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            themes.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: lucideReact.Info,
@@ -2018,6 +2552,7 @@ function FooterSection({ showContact = true, showSocialLinks = true, showAddress
   ] });
 }
 exports.AdBanner = AdBanner;
+exports.AdCarousel = AdCarousel;
 exports.AdModal = AdModal;
 exports.AdPanel = AdPanel;
 exports.AdSlider = AdSlider;
@@ -2044,7 +2579,8 @@ exports.SocialLinksBar = SocialLinksBar;
 exports.TaglineVariant = TaglineVariant;
 exports.TestimonialVariant = TestimonialVariant;
 exports.TestimonialsGrid = TestimonialsGrid;
+exports.TopbarAdBanner = TopbarAdBanner;
 exports.VideoVariant = VideoVariant;
 exports.getLargePanelVariant = getLargePanelVariant;
 exports.getSmallPanelVariant = getSmallPanelVariant;
-//# sourceMappingURL=index-DxjbpnFC.cjs.map
+//# sourceMappingURL=index--8iNqKw6.cjs.map