@gravity-ai/react 1.1.3 → 1.1.5

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// src/components/AdBanner.tsx
+// src/components/GravityAd.tsx
 import { useState } from "react";
 
 // src/hooks/useAdTracking.ts
@@ -9,153 +9,233 @@ function useAdTracking({
   onImpression,
   onClickTracked
 }) {
-  const impressionTracked = useRef(false);
+  const containerRef = useRef(null);
+  const impressionFired = useRef(false);
+  const impUrlRef = useRef(ad?.impUrl);
   useEffect(() => {
-    if (!ad || !ad.impUrl || disableImpressionTracking || impressionTracked.current) {
+    if (ad?.impUrl !== impUrlRef.current) {
+      impressionFired.current = false;
+      impUrlRef.current = ad?.impUrl;
+    }
+  }, [ad?.impUrl]);
+  useEffect(() => {
+    if (!ad?.impUrl || disableImpressionTracking || impressionFired.current) {
       return;
     }
-    const trackImpression = async () => {
-      try {
-        const img = new Image();
-        img.src = ad.impUrl;
-        impressionTracked.current = true;
-        onImpression?.();
-      } catch (error) {
-        console.error("[Gravity] Failed to track impression:", error);
-      }
-    };
-    trackImpression();
+    const el = containerRef.current;
+    if (!el) return;
+    if (typeof IntersectionObserver === "undefined") {
+      fireImpression(ad.impUrl, impressionFired, onImpression);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting && !impressionFired.current && ad.impUrl) {
+            fireImpression(ad.impUrl, impressionFired, onImpression);
+            observer.disconnect();
+          }
+        }
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
   }, [ad, disableImpressionTracking, onImpression]);
-  useEffect(() => {
-    impressionTracked.current = false;
-  }, [ad?.impUrl]);
   const handleClick = useCallback(() => {
     if (!ad?.clickUrl) return;
     onClickTracked?.();
   }, [ad?.clickUrl, onClickTracked]);
   return {
+    containerRef,
     handleClick,
-    impressionTracked: impressionTracked.current
+    impressionFired: impressionFired.current
   };
 }
+function fireImpression(impUrl, firedRef, onImpression) {
+  try {
+    const img = new Image();
+    img.src = impUrl;
+    firedRef.current = true;
+    onImpression?.();
+  } catch {
+  }
+}
 
-// src/styles.ts
-var baseContainerStyle = {
-  display: "block",
-  textDecoration: "none",
-  cursor: "pointer",
-  transition: "all 0.2s ease",
-  boxSizing: "border-box",
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-};
-var themeStyles = {
-  light: {
-    backgroundColor: "#ffffff",
-    color: "#1a1a1a",
-    border: "1px solid #e5e5e5",
-    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)"
+// src/components/GravityAd.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var FOCUS_STYLE_KEY = "__gravity_ad_focus__";
+function injectFocusStyle() {
+  if (typeof document === "undefined" || document[FOCUS_STYLE_KEY]) {
+    return;
+  }
+  document[FOCUS_STYLE_KEY] = true;
+  const s = document.createElement("style");
+  s.textContent = "[data-gravity-ad]:focus-visible{outline:2px solid #2563EB;outline-offset:2px}";
+  document.head.appendChild(s);
+}
+var FONT = 'Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+var defaults = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 0,
+    padding: 0,
+    background: "#FFFFFF",
+    color: "#18181B",
+    border: "1px solid #E4E4E7",
+    borderRadius: 10,
+    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.04),0 1px 6px 0 rgba(0,0,0,0.06)",
+    fontFamily: FONT,
+    textDecoration: "none",
+    cursor: "pointer",
+    transition: "box-shadow 150ms ease, transform 150ms ease",
+    boxSizing: "border-box",
+    lineHeight: 1.5,
+    position: "relative",
+    overflow: "hidden"
   },
-  dark: {
-    backgroundColor: "#1a1a1a",
-    color: "#f5f5f5",
-    border: "1px solid #333333",
-    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
+  containerHover: {
+    boxShadow: "0 4px 16px 0 rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06)",
+    transform: "translateY(-1px)"
   },
-  minimal: {
-    backgroundColor: "transparent",
-    color: "inherit",
-    border: "none",
-    boxShadow: "none"
+  inner: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+    padding: "14px 16px 16px"
   },
-  branded: {
-    backgroundColor: "#6366f1",
-    color: "#ffffff",
-    border: "none",
-    boxShadow: "0 2px 8px rgba(99, 102, 241, 0.3)"
-  }
-};
-var sizeStyles = {
-  small: {
-    padding: "8px 12px",
-    fontSize: "13px",
-    lineHeight: "1.4",
-    borderRadius: "6px"
+  header: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  },
+  favicon: {
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+    objectFit: "contain",
+    flexShrink: 0
+  },
+  brand: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: "#18181B",
+    lineHeight: 1
   },
-  medium: {
-    padding: "12px 16px",
-    fontSize: "14px",
-    lineHeight: "1.5",
-    borderRadius: "8px"
+  label: {
+    fontSize: 10,
+    fontWeight: 500,
+    letterSpacing: "0.03em",
+    textTransform: "uppercase",
+    color: "#71717A",
+    lineHeight: 1,
+    marginLeft: "auto",
+    padding: "2px 6px",
+    border: "1px solid #E4E4E7",
+    borderRadius: 4
   },
-  large: {
-    padding: "16px 20px",
-    fontSize: "16px",
-    lineHeight: "1.6",
-    borderRadius: "10px"
+  body: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6
   },
-  responsive: {
-    padding: "clamp(8px, 2vw, 16px) clamp(12px, 3vw, 20px)",
-    fontSize: "clamp(13px, 1.5vw, 16px)",
-    lineHeight: "1.5",
-    borderRadius: "clamp(6px, 1vw, 10px)"
+  title: {
+    fontSize: 14,
+    fontWeight: 500,
+    color: "#18181B",
+    margin: 0,
+    lineHeight: 1.4
+  },
+  text: {
+    fontSize: 13,
+    color: "#71717A",
+    margin: 0,
+    lineHeight: 1.5
+  },
+  cta: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-start",
+    gap: 4,
+    padding: "7px 16px",
+    fontSize: 13,
+    fontWeight: 500,
+    color: "#FFFFFF",
+    background: "#2563EB",
+    border: "none",
+    borderRadius: 6,
+    cursor: "pointer",
+    transition: "background 150ms ease",
+    textDecoration: "none",
+    lineHeight: 1,
+    fontFamily: "inherit",
+    marginTop: 2
+  },
+  ctaHover: {
+    background: "#1E40AF"
   }
 };
-var baseLabelStyle = {
-  fontSize: "10px",
-  fontWeight: 600,
-  textTransform: "uppercase",
-  letterSpacing: "0.5px",
-  opacity: 0.7,
-  marginBottom: "4px",
-  display: "block"
-};
-function getAdBannerStyles(theme, size, customStyles) {
-  const combined = {
-    ...baseContainerStyle,
-    ...themeStyles[theme],
-    ...sizeStyles[size]
-  };
-  if (customStyles?.backgroundColor) {
-    combined.backgroundColor = customStyles.backgroundColor;
-  }
-  if (customStyles?.textColor) {
-    combined.color = customStyles.textColor;
-  }
-  if (customStyles?.borderRadius !== void 0) {
-    combined.borderRadius = customStyles.borderRadius;
+var variantOverrides = {
+  inline: {
+    container: { overflow: "visible" },
+    inner: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 14,
+      padding: "12px 16px"
+    },
+    body: { gap: 2 },
+    cta: { flexShrink: 0, marginTop: 0 }
+  },
+  minimal: {
+    container: {
+      background: "transparent",
+      border: "none",
+      boxShadow: "none",
+      borderRadius: 0,
+      overflow: "visible"
+    },
+    containerHover: {
+      boxShadow: "none",
+      transform: "none"
+    },
+    inner: { padding: "8px 0" }
   }
-  if (customStyles?.style) {
-    Object.assign(combined, customStyles.style);
+};
+function merge(base, ...overrides) {
+  let result = base;
+  for (const o of overrides) {
+    if (o) result = { ...result, ...o };
   }
-  return combined;
+  return result;
 }
-
-// src/components/AdBanner.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function AdBanner({
+function slotStyle(slot, base, variant, slotProps, extra) {
+  const vo = variant !== "card" ? variantOverrides[variant]?.[slot] : void 0;
+  return merge(base, vo, slotProps?.[slot]?.style, extra);
+}
+function slotClass(slot, slotProps) {
+  return slotProps?.[slot]?.className;
+}
+function GravityAd({
   ad,
-  theme = "light",
-  size = "medium",
+  variant = "card",
   className,
   style,
-  textStyle,
-  textClassName,
+  slotProps,
   showLabel = true,
   labelText = "Sponsored",
-  labelStyle,
   onClick,
   onImpression,
   onClickTracked,
   fallback = null,
   disableImpressionTracking = false,
-  openInNewTab = true,
-  borderRadius,
-  backgroundColor,
-  textColor,
-  accentColor
+  openInNewTab = true
 }) {
-  const [isHovered, setIsHovered] = useState(false);
-  const { handleClick } = useAdTracking({
+  injectFocusStyle();
+  const [hovered, setHovered] = useState(false);
+  const { containerRef, handleClick } = useAdTracking({
     ad,
     disableImpressionTracking,
     onImpression,
@@ -164,25 +244,6 @@ function AdBanner({
   if (!ad) {
     return /* @__PURE__ */ jsx(Fragment, { children: fallback });
   }
-  const containerStyles = getAdBannerStyles(theme, size, {
-    backgroundColor,
-    textColor,
-    borderRadius,
-    style
-  });
-  if (isHovered && theme !== "minimal") {
-    containerStyles.transform = "translateY(-1px)";
-    containerStyles.boxShadow = theme === "dark" ? "0 4px 12px rgba(0, 0, 0, 0.4)" : theme === "branded" ? "0 4px 16px rgba(99, 102, 241, 0.4)" : "0 4px 12px rgba(0, 0, 0, 0.12)";
-  }
-  const labelStyles = {
-    ...baseLabelStyle,
-    color: accentColor || (theme === "branded" ? "rgba(255,255,255,0.8)" : void 0),
-    ...labelStyle
-  };
-  const textStyles = {
-    margin: 0,
-    ...textStyle
-  };
   const handleClickInternal = (e) => {
     handleClick();
     onClick?.();
@@ -195,24 +256,131 @@ function AdBanner({
     target: openInNewTab ? "_blank" : void 0,
     rel: openInNewTab ? "noopener noreferrer sponsored" : "sponsored"
   } : {};
-  return /* @__PURE__ */ jsxs(
+  const hoverExtra = hovered ? merge(
+    defaults.containerHover,
+    variant !== "card" ? variantOverrides[variant]?.containerHover : void 0
+  ) : void 0;
+  const containerStyle = slotStyle(
+    "container",
+    defaults.container,
+    variant,
+    slotProps,
+    { ...hoverExtra, ...style }
+  );
+  const ctaHoverExtra = hovered ? defaults.ctaHover : void 0;
+  const hasHeader = ad.favicon || ad.brandName || showLabel;
+  const headerEl = hasHeader ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: slotStyle("header", defaults.header, variant, slotProps),
+      className: slotClass("header", slotProps),
+      children: [
+        ad.favicon && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: ad.favicon,
+            alt: "",
+            loading: "lazy",
+            style: slotStyle("favicon", defaults.favicon, variant, slotProps),
+            className: slotClass("favicon", slotProps),
+            onError: (e) => {
+              e.target.style.display = "none";
+            }
+          }
+        ),
+        ad.brandName && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: slotStyle("brand", defaults.brand, variant, slotProps),
+            className: slotClass("brand", slotProps),
+            children: ad.brandName
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: slotStyle("label", defaults.label, variant, slotProps),
+            className: slotClass("label", slotProps),
+            children: labelText
+          }
+        )
+      ]
+    }
+  ) : null;
+  const bodyEl = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: slotStyle("body", defaults.body, variant, slotProps),
+      className: slotClass("body", slotProps),
+      children: [
+        ad.title && /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: slotStyle("title", defaults.title, variant, slotProps),
+            className: slotClass("title", slotProps),
+            children: ad.title
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: slotStyle("text", defaults.text, variant, slotProps),
+            className: slotClass("text", slotProps),
+            children: ad.adText
+          }
+        )
+      ]
+    }
+  );
+  const ctaEl = ad.cta ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: slotStyle("cta", defaults.cta, variant, slotProps, ctaHoverExtra),
+      className: slotClass("cta", slotProps),
+      children: ad.cta
+    }
+  ) : null;
+  const content = variant === "inline" ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: slotStyle("inner", defaults.inner, variant, slotProps),
+      className: slotClass("inner", slotProps),
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 8 }, children: [
+          headerEl,
+          bodyEl
+        ] }),
+        ctaEl
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: slotStyle("inner", defaults.inner, variant, slotProps),
+      className: slotClass("inner", slotProps),
+      children: [
+        headerEl,
+        bodyEl,
+        ctaEl
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(
     "a",
     {
       ...linkProps,
+      ref: containerRef,
       className,
-      style: containerStyles,
+      style: containerStyle,
       onClick: handleClickInternal,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
       "data-gravity-ad": true,
-      children: [
-        showLabel && /* @__PURE__ */ jsx("span", { style: labelStyles, children: labelText }),
-        /* @__PURE__ */ jsx("p", { className: textClassName, style: textStyles, children: ad.adText })
-      ]
+      children: content
     }
   );
 }
-AdBanner.displayName = "GravityAdBanner";
+GravityAd.displayName = "GravityAd";
 
 // src/components/AdText.tsx
 import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
@@ -227,7 +395,7 @@ function AdText({
   disableImpressionTracking = false,
   openInNewTab = true
 }) {
-  const { handleClick } = useAdTracking({
+  const { containerRef, handleClick } = useAdTracking({
     ad,
     disableImpressionTracking,
     onImpression,
@@ -253,6 +421,7 @@ function AdText({
     return /* @__PURE__ */ jsx2(
       "a",
       {
+        ref: containerRef,
         href: ad.clickUrl,
         target: openInNewTab ? "_blank" : void 0,
         rel: openInNewTab ? "noopener noreferrer sponsored" : "sponsored",
@@ -264,11 +433,20 @@ function AdText({
       }
     );
   }
-  return /* @__PURE__ */ jsx2("span", { className, style: baseStyle, "data-gravity-ad": true, children: ad.adText });
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      ref: containerRef,
+      className,
+      style: baseStyle,
+      "data-gravity-ad": true,
+      children: ad.adText
+    }
+  );
 }
 AdText.displayName = "GravityAdText";
 export {
-  AdBanner,
   AdText,
+  GravityAd,
   useAdTracking
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ai/react",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "React components for rendering Gravity AI advertisements",
   "main": "dist/index.js",
   "module": "dist/index.mjs",