featuredrop 2.7.1 → 3.0.1

package/dist/preact.cjs

@@ -2244,6 +2244,111 @@ function useSurvey(id) {
     [askLater, hide, show, snapshot]
   );
 }
+function useChangelog() {
+  const ctx = useFeatureDrop();
+  const markAllSeen = react.useCallback(() => {
+    void ctx.dismissAll();
+  }, [ctx]);
+  const getByCategory = react.useCallback(
+    (category) => {
+      return ctx.newFeatures.filter((f) => f.category === category);
+    },
+    [ctx.newFeatures]
+  );
+  return react.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 = react.useRef(Date.now());
+  const feature = manifest.find((f) => f.id === featureId);
+  const dismiss = react.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 react.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 react.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 react.Component {
   state = { hasError: false };
   componentDidCatch(error, info) {
@@ -7773,6 +7878,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 = react.useRef(false);
+  const resolvedFormat = formatOverride ?? smartFeature.format;
+  react.useEffect(() => {
+    ensureFeatureDropAnimationStyles();
+  }, []);
+  react.useEffect(() => {
+    if (smartFeature.show && !hasTrackedSeen.current) {
+      hasTrackedSeen.current = true;
+      engine?.trackInteraction(id, "seen");
+    }
+  }, [smartFeature.show, engine, id]);
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-featuredrop": "smart-badge",
+          className,
+          style: { ...badgeStyles, ...style },
+          role: "status",
+          "aria-label": `New: ${feature.label}`,
+          children: "New"
+        }
+      );
+    case "toast":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-featuredrop": "smart-toast",
+          className,
+          style: {
+            ...toastStyles2,
+            animation: getEnterAnimation("normal", "toast") ?? void 0,
+            ...style
+          },
+          role: "alert",
+          "aria-live": "polite",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: 2 }, children: feature.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: { fontSize: 13, opacity: 0.8 },
+                  dangerouslySetInnerHTML: { __html: description }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: smartFeature.dismiss,
+                style: dismissButtonStyles,
+                "aria-label": "Dismiss",
+                type: "button",
+                children: "\xD7"
+              }
+            )
+          ] })
+        }
+      );
+    case "banner":
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "data-featuredrop": "smart-banner",
+          className,
+          style: { ...bannerStyles, ...style },
+          role: "alert",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: feature.label }),
+              feature.description ? ` \u2014 ${feature.description}` : ""
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: smartFeature.dismiss,
+                style: dismissButtonStyles,
+                "aria-label": "Dismiss",
+                type: "button",
+                children: "\xD7"
+              }
+            )
+          ]
+        }
+      );
+    case "inline":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-featuredrop": "smart-inline",
+          className,
+          style: { ...inlineStyles, ...style },
+          children: feature.label
+        }
+      );
+    case "modal":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-featuredrop": "smart-toast",
+          className,
+          style: {
+            ...toastStyles2,
+            animation: getEnterAnimation("normal", "toast") ?? void 0,
+            ...style
+          },
+          role: "alert",
+          "aria-live": "polite",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: 2 }, children: feature.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: { fontSize: 13, opacity: 0.8 },
+                  dangerouslySetInnerHTML: { __html: description }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: smartFeature.dismiss,
+                style: dismissButtonStyles,
+                "aria-label": "Dismiss",
+                type: "button",
+                children: "\xD7"
+              }
+            )
+          ] })
+        }
+      );
+    case "spotlight":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-featuredrop": "smart-badge",
+          className,
+          style: { ...badgeStyles, ...style },
+          role: "status",
+          "aria-label": `New: ${feature.label}`,
+          children: "New"
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsxRuntime.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");
@@ -7791,6 +8139,7 @@ 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");
 
 exports.AnnouncementModal = AnnouncementModal2;
 exports.Banner = Banner2;
@@ -7804,6 +8153,7 @@ exports.FeatureRequestForm = FeatureRequestForm2;
 exports.FeedbackWidget = FeedbackWidget2;
 exports.Hotspot = Hotspot2;
 exports.NewBadge = NewBadge2;
+exports.SmartAnnouncement = SmartAnnouncement2;
 exports.Spotlight = Spotlight2;
 exports.SpotlightChain = SpotlightChain2;
 exports.Survey = Survey2;
@@ -7812,10 +8162,14 @@ exports.Toast = Toast2;
 exports.TooltipGroup = TooltipGroup2;
 exports.Tour = Tour2;
 exports.useAdoptionAnalytics = useAdoptionAnalytics;
+exports.useAdoptionScore = useAdoptionScore;
+exports.useBehaviorProfile = useBehaviorProfile;
+exports.useChangelog = useChangelog;
 exports.useChecklist = useChecklist;
 exports.useFeatureDrop = useFeatureDrop;
 exports.useNewCount = useNewCount;
 exports.useNewFeature = useNewFeature;
+exports.useSmartFeature = useSmartFeature;
 exports.useSurvey = useSurvey;
 exports.useTabNotification = useTabNotification;
 exports.useTour = useTour;