shared-features 0.0.3 → 0.0.5

package/README.md

@@ -43,6 +43,7 @@ VITE_SHARED_FEATURES_PROJECT_ID=
 VITE_SHARED_FEATURES_STORAGE_BUCKET=
 VITE_SHARED_FEATURES_MESSAGING_SENDER_ID=
 VITE_SHARED_FEATURES_APP_ID=
+VITE_SHARED_FEATURES_MEASUREMENT_ID=
 ```
 
 ### 2. Initialize the package
@@ -60,6 +61,7 @@ if (import.meta.env.VITE_SHARED_FEATURES_API_KEY) {
       storageBucket: import.meta.env.VITE_SHARED_FEATURES_STORAGE_BUCKET,
       messagingSenderId: import.meta.env.VITE_SHARED_FEATURES_MESSAGING_SENDER_ID,
       appId: import.meta.env.VITE_SHARED_FEATURES_APP_ID,
+      measurementId: import.meta.env.VITE_SHARED_FEATURES_MEASUREMENT_ID,
     },
     projectId: 'your-project-id',   // e.g., 'ztools', '2fa-studio'
     projectName: 'Your Project Name', // e.g., 'ZTools', '2FA Studio'

package/dist/{AdBanner-D-KuNTje.cjs → AnnouncementModal-Bqy0pn3V.cjs}

@@ -3,9 +3,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const themes = require("@radix-ui/themes");
 const reactIcons = require("@radix-ui/react-icons");
-const useCampaigns = require("./useCampaigns-Dltisb9N.cjs");
+const useCampaigns = require("./useCampaigns-BOZ9dDsG.cjs");
 const lucideReact = require("lucide-react");
-const analytics = require("./analytics--ZSO9ova.cjs");
+const analytics = require("./analytics-lEzOx2vl.cjs");
 function AdPanel({
   placement,
   variant: _variant = "small_panel_2",
@@ -419,7 +419,6 @@ function AdModal({
 }) {
   const [dontShowAgain, setDontShowAgain] = react.useState(false);
   const hasTrackedImpression = react.useRef(false);
-  const config = analytics.getConfig();
   const { shouldShow, markAsShown } = useCampaigns.useOneTimeAdModal();
   const {
     campaign,
@@ -447,10 +446,14 @@ function AdModal({
     markAsShown();
     onClose?.();
   }, [campaign, recordClose, markAsShown, onClose]);
+  if (!analytics.isInitialized()) {
+    return null;
+  }
   if (!shouldShow || loading) {
     return null;
   }
   if (!campaign) {
+    const config = analytics.getConfig();
     const defaultTitle = welcomeTitle || `Welcome to ${config.projectName}!`;
     const defaultDesc = welcomeDescription || "Discover amazing features and tools at your fingertips.";
     return /* @__PURE__ */ jsxRuntime.jsx(themes.Dialog.Root, { open: true, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(themes.Dialog.Content, { style: { maxWidth: 450 }, children: [
@@ -1405,11 +1408,436 @@ function AdBanner({
     }
   );
 }
+const TYPE_STYLES = {
+  info: {
+    icon: lucideReact.Info,
+    bgColor: "var(--blue-2)",
+    borderColor: "var(--blue-6)",
+    textColor: "var(--blue-11)",
+    iconColor: "var(--blue-9)"
+  },
+  success: {
+    icon: lucideReact.CheckCircle,
+    bgColor: "var(--green-2)",
+    borderColor: "var(--green-6)",
+    textColor: "var(--green-11)",
+    iconColor: "var(--green-9)"
+  },
+  warning: {
+    icon: lucideReact.AlertTriangle,
+    bgColor: "var(--yellow-2)",
+    borderColor: "var(--yellow-6)",
+    textColor: "var(--yellow-11)",
+    iconColor: "var(--yellow-9)"
+  },
+  error: {
+    icon: lucideReact.AlertCircle,
+    bgColor: "var(--red-2)",
+    borderColor: "var(--red-6)",
+    textColor: "var(--red-11)",
+    iconColor: "var(--red-9)"
+  },
+  reminder: {
+    icon: lucideReact.AlertTriangle,
+    bgColor: "var(--orange-2)",
+    borderColor: "var(--orange-6)",
+    textColor: "var(--orange-11)",
+    iconColor: "var(--orange-9)"
+  },
+  milestone: {
+    icon: lucideReact.CheckCircle,
+    bgColor: "var(--violet-2)",
+    borderColor: "var(--violet-6)",
+    textColor: "var(--violet-11)",
+    iconColor: "var(--violet-9)"
+  },
+  announcement: {
+    icon: lucideReact.Megaphone,
+    bgColor: "var(--iris-2)",
+    borderColor: "var(--iris-6)",
+    textColor: "var(--iris-11)",
+    iconColor: "var(--iris-9)"
+  }
+};
+function BroadcastBanner({
+  broadcast,
+  onActionClick,
+  onDismiss,
+  className
+}) {
+  const impressionTrackedRef = react.useRef(false);
+  react.useEffect(() => {
+    if (!impressionTrackedRef.current) {
+      impressionTrackedRef.current = true;
+    }
+  }, []);
+  const handleActionClick = react.useCallback(() => {
+    onActionClick?.();
+    if (broadcast.actionUrl) {
+      window.open(broadcast.actionUrl, "_blank");
+    }
+  }, [broadcast.actionUrl, onActionClick]);
+  const handleDismiss = react.useCallback(() => {
+    onDismiss?.();
+  }, [onDismiss]);
+  if (!analytics.isInitialized()) {
+    return null;
+  }
+  const typeStyle = TYPE_STYLES[broadcast.type] || TYPE_STYLES.info;
+  const Icon = typeStyle.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    themes.Box,
+    {
+      className,
+      style: {
+        background: typeStyle.bgColor,
+        borderBottom: `1px solid ${typeStyle.borderColor}`,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          themes.Box,
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: 4,
+              background: typeStyle.iconColor
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          themes.Flex,
+          {
+            align: "center",
+            justify: "between",
+            gap: "3",
+            py: "3",
+            px: "4",
+            style: { paddingLeft: 20 },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "3", style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.Box,
+                  {
+                    style: {
+                      width: 32,
+                      height: 32,
+                      borderRadius: 8,
+                      background: `color-mix(in srgb, ${typeStyle.iconColor} 15%, transparent)`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 18, color: typeStyle.iconColor })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "0", style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    themes.Text,
+                    {
+                      size: "2",
+                      weight: "bold",
+                      style: {
+                        color: typeStyle.textColor,
+                        display: "-webkit-box",
+                        WebkitLineClamp: 1,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden"
+                      },
+                      children: broadcast.title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    themes.Text,
+                    {
+                      size: "2",
+                      style: {
+                        color: "var(--gray-11)",
+                        display: "-webkit-box",
+                        WebkitLineClamp: 1,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden"
+                      },
+                      children: broadcast.message
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "2", style: { flexShrink: 0 }, children: [
+                broadcast.actionUrl && /* @__PURE__ */ jsxRuntime.jsxs(
+                  themes.Button,
+                  {
+                    size: "1",
+                    variant: "soft",
+                    onClick: handleActionClick,
+                    style: {
+                      background: `color-mix(in srgb, ${typeStyle.iconColor} 15%, transparent)`,
+                      color: typeStyle.iconColor
+                    },
+                    children: [
+                      broadcast.actionText || "Learn More",
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 12 })
+                    ]
+                  }
+                ),
+                broadcast.dismissible && /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.IconButton,
+                  {
+                    size: "1",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: handleDismiss,
+                    style: { opacity: 0.7 },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function BroadcastBanners({
+  broadcasts,
+  onDismiss,
+  onActionClick,
+  maxBanners = 3,
+  className
+}) {
+  const displayBroadcasts = broadcasts.slice(0, maxBanners);
+  if (displayBroadcasts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className, children: displayBroadcasts.map((broadcast) => /* @__PURE__ */ jsxRuntime.jsx(
+    BroadcastBanner,
+    {
+      broadcast,
+      onDismiss: () => onDismiss?.(broadcast.id),
+      onActionClick: () => onActionClick?.(broadcast.id)
+    },
+    broadcast.id
+  )) });
+}
+const TYPE_CONFIG = {
+  info: {
+    icon: lucideReact.Info,
+    gradient: "linear-gradient(135deg, var(--blue-3) 0%, var(--blue-2) 100%)",
+    accentColor: "var(--blue-9)",
+    iconBg: "var(--blue-4)"
+  },
+  success: {
+    icon: lucideReact.CheckCircle,
+    gradient: "linear-gradient(135deg, var(--green-3) 0%, var(--green-2) 100%)",
+    accentColor: "var(--green-9)",
+    iconBg: "var(--green-4)"
+  },
+  warning: {
+    icon: lucideReact.AlertTriangle,
+    gradient: "linear-gradient(135deg, var(--yellow-3) 0%, var(--yellow-2) 100%)",
+    accentColor: "var(--yellow-9)",
+    iconBg: "var(--yellow-4)"
+  },
+  error: {
+    icon: lucideReact.AlertCircle,
+    gradient: "linear-gradient(135deg, var(--red-3) 0%, var(--red-2) 100%)",
+    accentColor: "var(--red-9)",
+    iconBg: "var(--red-4)"
+  },
+  reminder: {
+    icon: lucideReact.Bell,
+    gradient: "linear-gradient(135deg, var(--orange-3) 0%, var(--orange-2) 100%)",
+    accentColor: "var(--orange-9)",
+    iconBg: "var(--orange-4)"
+  },
+  milestone: {
+    icon: lucideReact.Sparkles,
+    gradient: "linear-gradient(135deg, var(--violet-3) 0%, var(--violet-2) 100%)",
+    accentColor: "var(--violet-9)",
+    iconBg: "var(--violet-4)"
+  },
+  announcement: {
+    icon: lucideReact.Megaphone,
+    gradient: "linear-gradient(135deg, var(--iris-3) 0%, var(--iris-2) 100%)",
+    accentColor: "var(--iris-9)",
+    iconBg: "var(--iris-4)"
+  }
+};
+function AnnouncementModal({
+  broadcast,
+  isOpen,
+  onClose,
+  onActionClick
+}) {
+  const impressionTrackedRef = react.useRef(false);
+  react.useEffect(() => {
+    if (isOpen && broadcast && !impressionTrackedRef.current) {
+      impressionTrackedRef.current = true;
+    }
+  }, [isOpen, broadcast]);
+  const handleActionClick = react.useCallback(() => {
+    onActionClick?.();
+    if (broadcast?.actionUrl) {
+      window.open(broadcast.actionUrl, "_blank");
+    }
+    onClose();
+  }, [broadcast, onActionClick, onClose]);
+  const handleClose = react.useCallback(() => {
+    onClose();
+  }, [onClose]);
+  if (!analytics.isInitialized() || !broadcast) {
+    return null;
+  }
+  const typeConfig = TYPE_CONFIG[broadcast.type] || TYPE_CONFIG.announcement;
+  const Icon = typeConfig.icon;
+  return /* @__PURE__ */ jsxRuntime.jsx(themes.Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    themes.Dialog.Content,
+    {
+      style: {
+        maxWidth: 480,
+        padding: 0,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          themes.Box,
+          {
+            style: {
+              background: typeConfig.gradient,
+              padding: "var(--space-6)",
+              position: "relative"
+            },
+            children: [
+              broadcast.dismissible && /* @__PURE__ */ jsxRuntime.jsx(
+                themes.Box,
+                {
+                  style: {
+                    position: "absolute",
+                    top: "var(--space-3)",
+                    right: "var(--space-3)"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(themes.Dialog.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(themes.Button, { variant: "ghost", size: "1", color: "gray", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18 }) }) })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", align: "center", gap: "4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.Box,
+                  {
+                    style: {
+                      width: 72,
+                      height: 72,
+                      borderRadius: "var(--radius-4)",
+                      background: typeConfig.iconBg,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 36, color: typeConfig.accentColor })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.Heading,
+                  {
+                    size: "5",
+                    weight: "bold",
+                    align: "center",
+                    style: { color: "var(--gray-12)" },
+                    children: broadcast.title
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(themes.Box, { p: "5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            themes.Text,
+            {
+              as: "p",
+              size: "3",
+              align: "center",
+              style: {
+                color: "var(--gray-11)",
+                lineHeight: 1.6
+              },
+              children: broadcast.message
+            }
+          ),
+          broadcast.isImportant && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { justify: "center", mt: "4", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            themes.Box,
+            {
+              style: {
+                padding: "var(--space-1) var(--space-3)",
+                borderRadius: "var(--radius-2)",
+                background: typeConfig.iconBg,
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "var(--space-1)"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 12, color: typeConfig.accentColor }),
+                /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "1", weight: "medium", style: { color: typeConfig.accentColor }, children: "Important" })
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          themes.Flex,
+          {
+            gap: "3",
+            p: "4",
+            justify: "center",
+            style: {
+              borderTop: "1px solid var(--gray-4)",
+              background: "var(--gray-2)"
+            },
+            children: broadcast.actionUrl ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(themes.Dialog.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(themes.Button, { variant: "soft", color: "gray", size: "2", children: "Maybe Later" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                themes.Button,
+                {
+                  size: "2",
+                  onClick: handleActionClick,
+                  style: {
+                    background: typeConfig.accentColor
+                  },
+                  children: [
+                    broadcast.actionText || "Learn More",
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 14 })
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(themes.Dialog.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              themes.Button,
+              {
+                size: "2",
+                style: {
+                  background: typeConfig.accentColor,
+                  minWidth: 120
+                },
+                children: "Got It"
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  ) });
+}
 exports.AdBanner = AdBanner;
 exports.AdModal = AdModal;
 exports.AdPanel = AdPanel;
 exports.AdSlider = AdSlider;
 exports.AdUpdateModal = AdUpdateModal;
+exports.AnnouncementModal = AnnouncementModal;
+exports.BroadcastBanner = BroadcastBanner;
+exports.BroadcastBanners = BroadcastBanners;
 exports.CardVariant = CardVariant;
 exports.ComparisonVariant = ComparisonVariant;
 exports.FeatureGridVariant = FeatureGridVariant;
@@ -1424,4 +1852,4 @@ exports.TestimonialVariant = TestimonialVariant;
 exports.VideoVariant = VideoVariant;
 exports.getLargePanelVariant = getLargePanelVariant;
 exports.getSmallPanelVariant = getSmallPanelVariant;
-//# sourceMappingURL=AdBanner-D-KuNTje.cjs.map
+//# sourceMappingURL=AnnouncementModal-Bqy0pn3V.cjs.map