featuredrop 2.7.2 → 3.0.1

package/dist/react.js

@@ -2222,6 +2222,111 @@ function useSurvey(id) {
     [askLater, hide, show, snapshot]
   );
 }
+function useChangelog() {
+  const ctx = useFeatureDrop();
+  const markAllSeen = useCallback(() => {
+    void ctx.dismissAll();
+  }, [ctx]);
+  const getByCategory = useCallback(
+    (category) => {
+      return ctx.newFeatures.filter((f) => f.category === category);
+    },
+    [ctx.newFeatures]
+  );
+  return useMemo(
+    () => ({
+      features: ctx.manifest,
+      newFeatures: ctx.newFeatures,
+      newCount: ctx.newCount,
+      newFeaturesSorted: ctx.newFeaturesSorted,
+      dismiss: ctx.dismiss,
+      dismissAll: () => void ctx.dismissAll(),
+      isNew: ctx.isNew,
+      markAllSeen,
+      getByCategory
+    }),
+    [ctx.manifest, ctx.newFeatures, ctx.newCount, ctx.newFeaturesSorted, ctx.dismiss, ctx.dismissAll, ctx.isNew, markAllSeen, getByCategory]
+  );
+}
+function useSmartFeature(featureId) {
+  const { engine, manifest, dismiss: providerDismiss } = useFeatureDrop();
+  const sessionStartRef = useRef(Date.now());
+  const feature = manifest.find((f) => f.id === featureId);
+  const dismiss = useCallback(() => {
+    engine?.trackInteraction(featureId, "dismissed");
+    providerDismiss(featureId);
+  }, [engine, featureId, providerDismiss]);
+  if (!engine) {
+    return {
+      show: !!feature,
+      format: "badge",
+      fallbackFormat: "inline",
+      feature,
+      dismiss,
+      confidence: 1,
+      reason: "no_engine"
+    };
+  }
+  const currentPath = typeof window !== "undefined" ? window.location.pathname : "/";
+  const sessionAge = (Date.now() - sessionStartRef.current) / 1e3;
+  const timing = engine.shouldShow(featureId, {
+    currentPath,
+    sessionAge,
+    recentDismissals: 0,
+    featurePriority: feature?.priority ?? "normal"
+  });
+  const formatRec = engine.recommendFormat(featureId);
+  return {
+    show: timing.show,
+    format: formatRec.primary,
+    fallbackFormat: formatRec.fallback,
+    feature,
+    dismiss,
+    confidence: timing.confidence,
+    reason: timing.reason
+  };
+}
+var DEFAULT_SCORE = {
+  score: 100,
+  grade: "A",
+  breakdown: {
+    featuresExplored: 0,
+    dismissRate: 0,
+    completionRate: 0,
+    engagementTrend: "stable"
+  },
+  recommendations: []
+};
+function useAdoptionScore() {
+  const { engine } = useFeatureDrop();
+  return useMemo(() => {
+    if (!engine) return DEFAULT_SCORE;
+    return engine.getAdoptionScore();
+  }, [engine]);
+}
+var DEFAULT_PROFILE = {
+  sessionCount: 0,
+  dismissRate: 0,
+  engagementRate: 0,
+  preferredFormat: "badge",
+  hasEngine: false
+};
+function useBehaviorProfile() {
+  const { engine } = useFeatureDrop();
+  return useMemo(() => {
+    if (!engine) return DEFAULT_PROFILE;
+    const score = engine.getAdoptionScore();
+    return {
+      sessionCount: 0,
+      // Not directly exposed by FeatureDropEngine interface
+      dismissRate: score.breakdown.dismissRate,
+      engagementRate: 1 - score.breakdown.dismissRate,
+      preferredFormat: "badge",
+      // Default — full profile requires AdoptionEngine
+      hasEngine: true
+    };
+  }, [engine]);
+}
 var FeatureDropComponentBoundary = class extends Component {
   state = { hasError: false };
   componentDidCatch(error, info) {
@@ -7751,6 +7856,249 @@ function FeatureRequestForm({
     }
   );
 }
+var badgeStyles = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "2px 6px",
+  borderRadius: "9999px",
+  fontSize: "var(--featuredrop-font-size, 10px)",
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  lineHeight: 1,
+  color: "var(--featuredrop-color, #b45309)",
+  backgroundColor: "var(--featuredrop-bg, rgba(245, 158, 11, 0.15))",
+  fontFamily: "inherit"
+};
+var toastStyles2 = {
+  position: "fixed",
+  bottom: 16,
+  right: 16,
+  zIndex: 9999,
+  maxWidth: 360,
+  padding: "12px 16px",
+  borderRadius: "var(--featuredrop-toast-radius, 8px)",
+  backgroundColor: "var(--featuredrop-toast-bg, white)",
+  color: "var(--featuredrop-toast-color, #1f2937)",
+  boxShadow: "var(--featuredrop-toast-shadow, 0 4px 12px rgba(0, 0, 0, 0.15))",
+  border: "1px solid var(--featuredrop-toast-border, #e5e7eb)",
+  fontFamily: "inherit",
+  fontSize: 14,
+  lineHeight: 1.5
+};
+var bannerStyles = {
+  width: "100%",
+  padding: "10px 16px",
+  backgroundColor: "var(--featuredrop-banner-bg, #eff6ff)",
+  borderBottom: "1px solid var(--featuredrop-banner-border, #bfdbfe)",
+  color: "var(--featuredrop-banner-color, #1e40af)",
+  fontFamily: "inherit",
+  fontSize: 14,
+  lineHeight: 1.5,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between"
+};
+var inlineStyles = {
+  display: "inline",
+  color: "var(--featuredrop-inline-color, #6b7280)",
+  fontFamily: "inherit",
+  fontSize: 13
+};
+var dismissButtonStyles = {
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  padding: "4px",
+  fontSize: 16,
+  lineHeight: 1,
+  color: "inherit",
+  opacity: 0.6
+};
+function SmartAnnouncement({
+  id,
+  format: formatOverride,
+  className,
+  style,
+  children
+}) {
+  const smartFeature = useSmartFeature(id);
+  const { engine } = useFeatureDrop();
+  const hasTrackedSeen = useRef(false);
+  const resolvedFormat = formatOverride ?? smartFeature.format;
+  useEffect(() => {
+    ensureFeatureDropAnimationStyles();
+  }, []);
+  useEffect(() => {
+    if (smartFeature.show && !hasTrackedSeen.current) {
+      hasTrackedSeen.current = true;
+      engine?.trackInteraction(id, "seen");
+    }
+  }, [smartFeature.show, engine, id]);
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, { children: children({
+      show: smartFeature.show,
+      format: resolvedFormat,
+      fallbackFormat: smartFeature.fallbackFormat,
+      feature: smartFeature.feature,
+      dismiss: smartFeature.dismiss,
+      confidence: smartFeature.confidence,
+      reason: smartFeature.reason
+    }) });
+  }
+  if (!smartFeature.show || !smartFeature.feature) return null;
+  const feature = smartFeature.feature;
+  const description = parseDescription(feature.description ?? "");
+  switch (resolvedFormat) {
+    case "badge":
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-featuredrop": "smart-badge",
+          className,
+          style: { ...badgeStyles, ...style },
+          role: "status",
+          "aria-label": `New: ${feature.label}`,
+          children: "New"
+        }
+      );
+    case "toast":
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-featuredrop": "smart-toast",
+          className,
+          style: {
+            ...toastStyles2,
+            animation: getEnterAnimation("normal", "toast") ?? void 0,
+            ...style
+          },
+          role: "alert",
+          "aria-live": "polite",
+          children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }, children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: 2 }, children: feature.label }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: { fontSize: 13, opacity: 0.8 },
+                  dangerouslySetInnerHTML: { __html: description }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: smartFeature.dismiss,
+                style: dismissButtonStyles,
+                "aria-label": "Dismiss",
+                type: "button",
+                children: "\xD7"
+              }
+            )
+          ] })
+        }
+      );
+    case "banner":
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-featuredrop": "smart-banner",
+          className,
+          style: { ...bannerStyles, ...style },
+          role: "alert",
+          children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("strong", { children: feature.label }),
+              feature.description ? ` \u2014 ${feature.description}` : ""
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: smartFeature.dismiss,
+                style: dismissButtonStyles,
+                "aria-label": "Dismiss",
+                type: "button",
+                children: "\xD7"
+              }
+            )
+          ]
+        }
+      );
+    case "inline":
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-featuredrop": "smart-inline",
+          className,
+          style: { ...inlineStyles, ...style },
+          children: feature.label
+        }
+      );
+    case "modal":
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-featuredrop": "smart-toast",
+          className,
+          style: {
+            ...toastStyles2,
+            animation: getEnterAnimation("normal", "toast") ?? void 0,
+            ...style
+          },
+          role: "alert",
+          "aria-live": "polite",
+          children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }, children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: 2 }, children: feature.label }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: { fontSize: 13, opacity: 0.8 },
+                  dangerouslySetInnerHTML: { __html: description }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: smartFeature.dismiss,
+                style: dismissButtonStyles,
+                "aria-label": "Dismiss",
+                type: "button",
+                children: "\xD7"
+              }
+            )
+          ] })
+        }
+      );
+    case "spotlight":
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-featuredrop": "smart-badge",
+          className,
+          style: { ...badgeStyles, ...style },
+          role: "status",
+          "aria-label": `New: ${feature.label}`,
+          children: "New"
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-featuredrop": "smart-badge",
+          className,
+          style: { ...badgeStyles, ...style },
+          role: "status",
+          "aria-label": `New: ${feature.label}`,
+          children: "New"
+        }
+      );
+  }
+}
 
 // src/react/index.ts
 var NewBadge2 = withFeatureDropBoundary(NewBadge, "NewBadge");
@@ -7769,7 +8117,8 @@ var SpotlightChain2 = withFeatureDropBoundary(SpotlightChain, "SpotlightChain");
 var Survey2 = withFeatureDropBoundary(Survey, "Survey");
 var FeatureRequestButton2 = withFeatureDropBoundary(FeatureRequestButton, "FeatureRequestButton");
 var FeatureRequestForm2 = withFeatureDropBoundary(FeatureRequestForm, "FeatureRequestForm");
+var SmartAnnouncement2 = withFeatureDropBoundary(SmartAnnouncement, "SmartAnnouncement");
 
-export { AnnouncementModal2 as AnnouncementModal, Banner2 as Banner, ChangelogPage2 as ChangelogPage, ChangelogWidget2 as ChangelogWidget, Checklist2 as Checklist, FeatureDropContext, FeatureDropProvider, FeatureRequestButton2 as FeatureRequestButton, FeatureRequestForm2 as FeatureRequestForm, FeedbackWidget2 as FeedbackWidget, Hotspot2 as Hotspot, NewBadge2 as NewBadge, Spotlight2 as Spotlight, SpotlightChain2 as SpotlightChain, Survey2 as Survey, ThemeProvider, Toast2 as Toast, TooltipGroup2 as TooltipGroup, Tour2 as Tour, useAdoptionAnalytics, useChecklist, useFeatureDrop, useNewCount, useNewFeature, useSurvey, useTabNotification, useTour, useTourSequencer };
+export { AnnouncementModal2 as AnnouncementModal, Banner2 as Banner, ChangelogPage2 as ChangelogPage, ChangelogWidget2 as ChangelogWidget, Checklist2 as Checklist, FeatureDropContext, FeatureDropProvider, FeatureRequestButton2 as FeatureRequestButton, FeatureRequestForm2 as FeatureRequestForm, FeedbackWidget2 as FeedbackWidget, Hotspot2 as Hotspot, NewBadge2 as NewBadge, SmartAnnouncement2 as SmartAnnouncement, Spotlight2 as Spotlight, SpotlightChain2 as SpotlightChain, Survey2 as Survey, ThemeProvider, Toast2 as Toast, TooltipGroup2 as TooltipGroup, Tour2 as Tour, useAdoptionAnalytics, useAdoptionScore, useBehaviorProfile, useChangelog, useChecklist, useFeatureDrop, useNewCount, useNewFeature, useSmartFeature, useSurvey, useTabNotification, useTour, useTourSequencer };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map