featuredrop 1.2.0 → 1.3.0

package/dist/react.js

@@ -1,10 +1,138 @@
 "use client";
-import { createContext, useRef, useState, useMemo, useCallback, useEffect, useContext } from 'react';
+import { createContext, useRef, useState, useMemo, useCallback, useEffect, useContext, Component } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createRequire } from 'module';
 
 // src/react/provider.tsx
 
+// src/animation.ts
+var injectedAnimationStyles = false;
+function ensureFeatureDropAnimationStyles() {
+  if (injectedAnimationStyles || typeof document === "undefined") return;
+  injectedAnimationStyles = true;
+  const style = document.createElement("style");
+  style.setAttribute("data-featuredrop-animations", "true");
+  style.textContent = `
+    @keyframes featuredrop-enter-fade-up {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes featuredrop-enter-scale {
+      from { opacity: 0; transform: scale(0.96); }
+      to { opacity: 1; transform: scale(1); }
+    }
+    @keyframes featuredrop-enter-panel {
+      from { opacity: 0; transform: translateX(14px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes featuredrop-enter-pop {
+      0% { opacity: 0; transform: translateY(12px) scale(0.94); }
+      70% { opacity: 1; transform: translateY(-2px) scale(1.02); }
+      100% { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    @keyframes featuredrop-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.55; }
+    }
+    @keyframes featuredrop-pulse-playful {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      40% { opacity: 0.7; transform: scale(1.08); }
+      70% { opacity: 0.9; transform: scale(0.96); }
+    }
+    @keyframes featuredrop-beacon-pulse {
+      0%, 100% { transform: scale(1); opacity: 0.65; }
+      50% { transform: scale(1.5); opacity: 0; }
+    }
+    @keyframes featuredrop-beacon-pop-pulse {
+      0%, 100% { transform: scale(1); opacity: 0.72; }
+      45% { transform: scale(1.65); opacity: 0.08; }
+      75% { transform: scale(0.95); opacity: 0.28; }
+    }
+    @keyframes featuredrop-exit-fade-down {
+      from { opacity: 1; transform: translateY(0); }
+      to { opacity: 0; transform: translateY(8px); }
+    }
+    @keyframes featuredrop-exit-scale {
+      from { opacity: 1; transform: scale(1); }
+      to { opacity: 0; transform: scale(0.96); }
+    }
+    @keyframes featuredrop-exit-panel {
+      from { opacity: 1; transform: translateX(0); }
+      to { opacity: 0; transform: translateX(14px); }
+    }
+    @keyframes featuredrop-exit-pop {
+      from { opacity: 1; transform: translateY(0) scale(1); }
+      to { opacity: 0; transform: translateY(10px) scale(0.96); }
+    }
+  `;
+  document.head.appendChild(style);
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function resolveAnimationPreset(preset = "normal", options) {
+  if (options?.reducedMotion) return "none";
+  return preset;
+}
+function getEnterAnimation(preset, surface) {
+  if (preset === "none") return void 0;
+  if (preset === "subtle") {
+    if (surface === "panel") return "featuredrop-enter-panel 180ms ease-out";
+    if (surface === "modal") return "featuredrop-enter-scale 180ms ease-out";
+    return "featuredrop-enter-fade-up 170ms ease-out";
+  }
+  if (preset === "playful") {
+    if (surface === "panel") return "featuredrop-enter-panel 320ms cubic-bezier(0.2, 0.9, 0.2, 1)";
+    return "featuredrop-enter-pop 300ms cubic-bezier(0.22, 1.4, 0.36, 1)";
+  }
+  if (surface === "panel") return "featuredrop-enter-panel 240ms cubic-bezier(0.2, 0.9, 0.2, 1)";
+  if (surface === "modal") return "featuredrop-enter-scale 220ms cubic-bezier(0.2, 0.9, 0.2, 1)";
+  return "featuredrop-enter-fade-up 210ms cubic-bezier(0.2, 0.9, 0.2, 1)";
+}
+function getExitAnimation(preset, surface) {
+  if (preset === "none") return void 0;
+  if (preset === "subtle") {
+    if (surface === "panel") return "featuredrop-exit-panel 150ms ease-in forwards";
+    if (surface === "modal") return "featuredrop-exit-scale 150ms ease-in forwards";
+    return "featuredrop-exit-fade-down 140ms ease-in forwards";
+  }
+  if (preset === "playful") {
+    if (surface === "panel") return "featuredrop-exit-panel 260ms ease-in forwards";
+    return "featuredrop-exit-pop 240ms ease-in forwards";
+  }
+  if (surface === "panel") return "featuredrop-exit-panel 200ms ease-in forwards";
+  if (surface === "modal") return "featuredrop-exit-scale 190ms ease-in forwards";
+  return "featuredrop-exit-fade-down 180ms ease-in forwards";
+}
+function getPulseAnimation(preset, surface = "beacon") {
+  if (preset === "none") return void 0;
+  if (surface === "dot") {
+    if (preset === "subtle") return "featuredrop-pulse 2.6s ease-in-out infinite";
+    if (preset === "playful") {
+      return "featuredrop-pulse-playful 1.8s cubic-bezier(0.22, 1.4, 0.36, 1) infinite";
+    }
+    return "featuredrop-pulse 2s ease-in-out infinite";
+  }
+  if (preset === "subtle") return "featuredrop-beacon-pulse 2.6s ease-in-out infinite";
+  if (preset === "playful") {
+    return "featuredrop-beacon-pop-pulse 1.8s cubic-bezier(0.22, 1.4, 0.36, 1) infinite";
+  }
+  return "featuredrop-beacon-pulse 2s ease-in-out infinite";
+}
+function getAnimationDurationMs(preset, surface, phase) {
+  if (preset === "none") return 0;
+  const animation = getExitAnimation(preset, surface);
+  if (!animation) return 0;
+  const msMatch = animation.match(/(\d+)ms/);
+  if (msMatch?.[1]) return Number(msMatch[1]);
+  const sMatch = animation.match(/(\d+(?:\.\d+)?)s/);
+  if (sMatch?.[1]) return Math.round(Number(sMatch[1]) * 1e3);
+  return 0;
+}
+
 // src/semver.ts
 var SEMVER_REGEX = /^(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?/;
 function parseSemver(input) {
@@ -226,6 +354,20 @@ function isVersionMatch(feature, appVersion) {
   if (v.showNewUntil && compareSemver(appVersion, v.showNewUntil) >= 0) return false;
   return true;
 }
+function isFlagMatch(feature, flagBridge, userContext) {
+  if (!feature.flagKey) return true;
+  if (!flagBridge) return false;
+  try {
+    return flagBridge.isEnabled(feature.flagKey, userContext);
+  } catch {
+    return false;
+  }
+}
+function isProductMatch(feature, product) {
+  if (!feature.product || feature.product === "*") return true;
+  if (!product) return false;
+  return feature.product === product;
+}
 function isDependencyMatch(feature, dismissedIds, dependencyState) {
   const dependsOn = feature.dependsOn;
   if (!dependsOn) return true;
@@ -250,11 +392,13 @@ function isDependencyMatch(feature, dismissedIds, dependencyState) {
   }
   return true;
 }
-function isNew(feature, watermark, dismissedIds, now = /* @__PURE__ */ new Date(), userContext, matchAudience, appVersion, dependencyState, triggerContext) {
+function isNew(feature, watermark, dismissedIds, now = /* @__PURE__ */ new Date(), userContext, matchAudience, appVersion, dependencyState, triggerContext, flagBridge, product) {
   if (dismissedIds.has(feature.id)) return false;
   if (!isAudienceMatch(feature, userContext, matchAudience)) return false;
   if (!isDependencyMatch(feature, dismissedIds, dependencyState)) return false;
   if (!isVersionMatch(feature, appVersion)) return false;
+  if (!isFlagMatch(feature, flagBridge, userContext)) return false;
+  if (!isProductMatch(feature, product)) return false;
   if (!isTriggerMatch(feature.trigger, triggerContext)) return false;
   const nowMs = now.getTime();
   if (feature.publishAt) {
@@ -270,7 +414,7 @@ function isNew(feature, watermark, dismissedIds, now = /* @__PURE__ */ new Date(
   }
   return true;
 }
-function getNewFeatures(manifest, storage, now = /* @__PURE__ */ new Date(), userContext, matchAudience, appVersion, dependencyState, triggerContext) {
+function getNewFeatures(manifest, storage, now = /* @__PURE__ */ new Date(), userContext, matchAudience, appVersion, dependencyState, triggerContext, flagBridge, product) {
   const watermark = storage.getWatermark();
   const dismissedIds = storage.getDismissedIds();
   return manifest.filter(
@@ -283,7 +427,9 @@ function getNewFeatures(manifest, storage, now = /* @__PURE__ */ new Date(), use
       matchAudience,
       appVersion,
       dependencyState,
-      triggerContext
+      triggerContext,
+      flagBridge,
+      product
     )
   );
 }
@@ -343,6 +489,7 @@ var EN_TRANSLATIONS = {
   loadMore: "Load more",
   share: "Share",
   skipToEntries: "Skip to changelog entries",
+  newFeatureCount: (count) => count === 0 ? "No new features" : `${count} new feature${count === 1 ? "" : "s"}`,
   stepOf: (current, total) => `Step ${current} of ${total}`,
   back: "Back",
   next: "Next",
@@ -593,16 +740,133 @@ var SIMPLE_TRANSLATIONS = {
     askLater: "\u092C\u093E\u0926 \u092E\u0947\u0902 \u092A\u0942\u091B\u0947\u0902"
   }
 };
+var RTL_LANGUAGES = /* @__PURE__ */ new Set(["ar", "fa", "he", "ur"]);
+var STEP_OF_TRANSLATIONS = {
+  en: EN_TRANSLATIONS.stepOf,
+  es: (current, total) => `Paso ${current} de ${total}`,
+  fr: (current, total) => `Etape ${current} sur ${total}`,
+  de: (current, total) => `Schritt ${current} von ${total}`,
+  pt: (current, total) => `Etapa ${current} de ${total}`,
+  "zh-cn": (current, total) => `\u7B2C ${current} / ${total} \u6B65`,
+  ja: (current, total) => `${total}\u4E2D${current}\u756A\u76EE`,
+  ko: (current, total) => `${total}\uB2E8\uACC4 \uC911 ${current}\uB2E8\uACC4`,
+  ar: (current, total) => `\u0627\u0644\u062E\u0637\u0648\u0629 ${current} \u0645\u0646 ${total}`,
+  hi: (current, total) => `${total} \u092E\u0947\u0902 \u0938\u0947 \u091A\u0930\u0923 ${current}`
+};
+var NEW_FEATURE_COUNT_TRANSLATIONS = {
+  en: EN_TRANSLATIONS.newFeatureCount,
+  es: (count) => count === 0 ? "Sin novedades" : `${count} novedad${count === 1 ? "" : "es"}`,
+  fr: (count) => count === 0 ? "Aucune nouveaute" : `${count} nouveaute${count === 1 ? "" : "s"}`,
+  de: (count) => count === 0 ? "Keine neuen Features" : `${count} ${count === 1 ? "neues Feature" : "neue Features"}`,
+  pt: (count) => count === 0 ? "Sem novidades" : `${count} novidade${count === 1 ? "" : "s"}`,
+  "zh-cn": (count) => count === 0 ? "\u6682\u65E0\u66F4\u65B0" : `${count} \u6761\u65B0\u66F4\u65B0`,
+  ja: (count) => count === 0 ? "\u65B0\u7740\u306F\u3042\u308A\u307E\u305B\u3093" : `\u65B0\u7740 ${count} \u4EF6`,
+  ko: (count) => count === 0 ? "\uC0C8 \uC18C\uC2DD \uC5C6\uC74C" : `\uC0C8 \uC18C\uC2DD ${count}\uAC1C`,
+  ar: (count) => {
+    if (count === 0) return "\u0644\u0627 \u062A\u0648\u062C\u062F \u0645\u064A\u0632\u0627\u062A \u062C\u062F\u064A\u062F\u0629";
+    const category = new Intl.PluralRules("ar").select(count);
+    if (category === "one") return "\u0645\u064A\u0632\u0629 \u062C\u062F\u064A\u062F\u0629 \u0648\u0627\u062D\u062F\u0629";
+    if (category === "two") return "\u0645\u064A\u0632\u062A\u0627\u0646 \u062C\u062F\u064A\u062F\u062A\u0627\u0646";
+    return `${count} \u0645\u064A\u0632\u0627\u062A \u062C\u062F\u064A\u062F\u0629`;
+  },
+  hi: (count) => count === 0 ? "\u0915\u094B\u0908 \u0928\u092F\u093E \u0905\u092A\u0921\u0947\u091F \u0928\u0939\u0940\u0902" : `${count} ${count === 1 ? "\u0928\u092F\u093E \u0905\u092A\u0921\u0947\u091F" : "\u0928\u090F \u0905\u092A\u0921\u0947\u091F"}`
+};
+function resolveLocale(locale) {
+  const normalized = (locale ?? "en").toLowerCase();
+  if (normalized === "en" || normalized.startsWith("en-")) return "en";
+  if (Object.prototype.hasOwnProperty.call(SIMPLE_TRANSLATIONS, normalized)) {
+    return normalized;
+  }
+  const base = normalized.split("-")[0];
+  if (base === "en") return "en";
+  if (Object.prototype.hasOwnProperty.call(SIMPLE_TRANSLATIONS, base)) {
+    return base;
+  }
+  return "en";
+}
+function getLocaleDirection(locale) {
+  const resolved = resolveLocale(locale);
+  const base = resolved.split("-")[0];
+  return RTL_LANGUAGES.has(base) ? "rtl" : "ltr";
+}
+function formatDateForLocale(value, locale, options = {
+  month: "short",
+  day: "numeric",
+  year: "numeric"
+}) {
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  const resolved = resolveLocale(locale);
+  try {
+    return new Intl.DateTimeFormat(resolved, options).format(date);
+  } catch {
+    return date.toLocaleDateString(void 0, options);
+  }
+}
+function formatRelativeTimeForLocale(value, locale, options) {
+  const target = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(target.getTime())) return "";
+  const nowInput = options?.now;
+  const nowDate = nowInput instanceof Date ? nowInput : /* @__PURE__ */ new Date();
+  if (Number.isNaN(nowDate.getTime())) return "";
+  const diffMs = target.getTime() - nowDate.getTime();
+  const absDiff = Math.abs(diffMs);
+  const minute = 6e4;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+  const week = 7 * day;
+  const month = 30 * day;
+  const year = 365 * day;
+  let unit = "second";
+  let divisor = 1e3;
+  if (absDiff >= year) {
+    unit = "year";
+    divisor = year;
+  } else if (absDiff >= month) {
+    unit = "month";
+    divisor = month;
+  } else if (absDiff >= week) {
+    unit = "week";
+    divisor = week;
+  } else if (absDiff >= day) {
+    unit = "day";
+    divisor = day;
+  } else if (absDiff >= hour) {
+    unit = "hour";
+    divisor = hour;
+  } else if (absDiff >= minute) {
+    unit = "minute";
+    divisor = minute;
+  }
+  const relativeValue = Math.round(diffMs / divisor);
+  const resolvedLocale = resolveLocale(locale);
+  try {
+    const formatter = new Intl.RelativeTimeFormat(resolvedLocale, {
+      numeric: options?.numeric ?? "auto",
+      style: options?.style ?? "long"
+    });
+    return formatter.format(relativeValue, unit);
+  } catch {
+    const fallback = formatDateForLocale(target, resolvedLocale);
+    return fallback || target.toISOString();
+  }
+}
 function resolveTranslations(locale, overrides) {
-  const normalizedLocale = (locale ?? "en").toLowerCase();
-  const base = SIMPLE_TRANSLATIONS[normalizedLocale] ?? SIMPLE_TRANSLATIONS[normalizedLocale.split("-")[0]] ?? {};
+  const resolvedLocale = resolveLocale(locale);
+  const base = resolvedLocale === "en" ? {} : SIMPLE_TRANSLATIONS[resolvedLocale] ?? {};
+  const stepOf = overrides?.stepOf ?? STEP_OF_TRANSLATIONS[resolvedLocale] ?? STEP_OF_TRANSLATIONS.en;
+  const newFeatureCount = overrides?.newFeatureCount ?? NEW_FEATURE_COUNT_TRANSLATIONS[resolvedLocale] ?? NEW_FEATURE_COUNT_TRANSLATIONS.en;
   return {
     ...EN_TRANSLATIONS,
     ...base,
     ...overrides ?? {},
-    stepOf: overrides?.stepOf ?? EN_TRANSLATIONS.stepOf
+    stepOf,
+    newFeatureCount
   };
 }
+({
+  ...SIMPLE_TRANSLATIONS
+});
 
 // src/variants.ts
 var VARIANT_META_KEY = "featuredropVariant";
@@ -756,12 +1020,14 @@ function computeFeatureState({
   userContext,
   matchAudience,
   appVersion,
+  product,
   throttle,
   sessionStartedAt,
   quietMode,
   seenFeatureIds,
   clickedFeatureIds,
-  triggerContext
+  triggerContext,
+  flagBridge
 }) {
   const dismissedIds = storage.getDismissedIds();
   const allFeatures = getNewFeatures(
@@ -776,7 +1042,9 @@ function computeFeatureState({
       clickedIds: clickedFeatureIds,
       dismissedIds
     },
-    triggerContext
+    triggerContext,
+    flagBridge,
+    product
   );
   const throttled = applyAnnouncementThrottle(
     allFeatures,
@@ -797,13 +1065,17 @@ function FeatureDropProvider({
   manifest,
   storage,
   analytics,
+  onError,
   userContext,
   matchAudience: matchAudienceFn,
   appVersion,
+  product,
   throttle,
   variantKey,
   collector,
+  flagBridge,
   locale = "en",
+  animation = "normal",
   translations: translationOverrides,
   children
 }) {
@@ -832,9 +1104,15 @@ function FeatureDropProvider({
     () => readIdSet(CLICKED_FEATURES_STORAGE_KEY)
   );
   const resolvedVariantKey = useMemo(() => getOrCreateVariantKey(variantKey), [variantKey]);
+  const resolvedLocale = useMemo(() => resolveLocale(locale), [locale]);
+  const direction = useMemo(() => getLocaleDirection(resolvedLocale), [resolvedLocale]);
+  const resolvedAnimation = useMemo(
+    () => resolveAnimationPreset(animation, { reducedMotion: prefersReducedMotion() }),
+    [animation]
+  );
   const translations = useMemo(
-    () => resolveTranslations(locale, translationOverrides),
-    [locale, translationOverrides]
+    () => resolveTranslations(resolvedLocale, translationOverrides),
+    [resolvedLocale, translationOverrides]
   );
   const resolvedManifest = useMemo(
     () => applyFeatureVariants(manifest, resolvedVariantKey),
@@ -848,6 +1126,7 @@ function FeatureDropProvider({
       userContext,
       matchAudience: matchAudienceFn,
       appVersion,
+      product,
       throttle,
       sessionStartedAt: sessionStartedAtRef.current,
       quietMode: readQuietMode(),
@@ -858,7 +1137,8 @@ function FeatureDropProvider({
         if (!engine) return void 0;
         engine.setElapsedMs(Date.now() - sessionStartedAtRef.current);
         return engine.getContext();
-      })()
+      })(),
+      flagBridge
     })
   );
   const recompute = useCallback(() => {
@@ -876,12 +1156,14 @@ function FeatureDropProvider({
         userContext,
         matchAudience: matchAudienceFn,
         appVersion,
+        product,
         throttle,
         sessionStartedAt: sessionStartedAtRef.current,
         quietMode,
         seenFeatureIds,
         clickedFeatureIds,
-        triggerContext
+        triggerContext,
+        flagBridge
       })
     );
   }, [
@@ -890,11 +1172,13 @@ function FeatureDropProvider({
     userContext,
     matchAudienceFn,
     appVersion,
+    product,
     throttle,
     quietMode,
     seenFeatureIds,
     clickedFeatureIds,
-    triggerVersion
+    triggerVersion,
+    flagBridge
   ]);
   useEffect(() => {
     recompute();
@@ -1101,6 +1385,15 @@ function FeatureDropProvider({
       variant: event.variant ?? (feature ? getFeatureVariantName(feature) : void 0)
     });
   }, [collector, resolvedManifest]);
+  const reportError = useCallback(
+    (error, context) => {
+      onError?.(error, context);
+      if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+        console.warn("[featuredrop] component error", context?.component, error);
+      }
+    },
+    [onError]
+  );
   const trackUsageEvent = useCallback((event, delta = 1) => {
     if (!event) return;
     triggerEngineRef.current?.trackUsage(event, delta);
@@ -1164,7 +1457,10 @@ function FeatureDropProvider({
       releaseSpotlightSlot,
       activeSpotlightCount: activeSpotlightIds.size,
       trackAdoptionEvent,
-      locale,
+      reportError,
+      locale: resolvedLocale,
+      direction,
+      animation: resolvedAnimation,
       translations,
       trackUsageEvent,
       trackTriggerEvent,
@@ -1195,7 +1491,10 @@ function FeatureDropProvider({
       releaseSpotlightSlot,
       activeSpotlightIds.size,
       trackAdoptionEvent,
-      locale,
+      reportError,
+      resolvedLocale,
+      direction,
+      resolvedAnimation,
       translations,
       trackUsageEvent,
       trackTriggerEvent,
@@ -1914,6 +2213,34 @@ function useSurvey(id) {
     [askLater, hide, show, snapshot]
   );
 }
+var FeatureDropComponentBoundary = class extends Component {
+  state = { hasError: false };
+  componentDidCatch(error, info) {
+    this.setState({ hasError: true });
+    this.props.onError?.(error, info);
+  }
+  render() {
+    if (this.state.hasError) return null;
+    return this.props.children;
+  }
+};
+function withFeatureDropBoundary(ComponentImpl, componentName) {
+  function Wrapped(props) {
+    const context = useContext(FeatureDropContext);
+    const onError = useCallback(
+      (error, info) => {
+        context?.reportError(error, {
+          component: componentName,
+          componentStack: info.componentStack ?? void 0
+        });
+      },
+      [context]
+    );
+    return /* @__PURE__ */ jsx(FeatureDropComponentBoundary, { onError, children: /* @__PURE__ */ jsx(ComponentImpl, { ...props }) });
+  }
+  Wrapped.displayName = `FeatureDropBoundary(${componentName})`;
+  return Wrapped;
+}
 var baseStyles = {
   display: "inline-flex",
   alignItems: "center",
@@ -1964,15 +2291,25 @@ function NewBadge({
   style,
   children
 }) {
+  const context = useContext(FeatureDropContext);
+  const pulsePreset = useMemo(
+    () => resolveAnimationPreset(context?.animation ?? "normal", {
+      reducedMotion: prefersReducedMotion()
+    }),
+    [context?.animation]
+  );
+  const dotPulseAnimation = useMemo(() => getPulseAnimation(pulsePreset, "dot"), [pulsePreset]);
+  useEffect(() => {
+    ensureFeatureDropAnimationStyles();
+  }, []);
   if (children) {
     return /* @__PURE__ */ jsx(Fragment, { children: children({ isNew: show }) });
   }
   if (!show) return null;
   const handleClick = dismissOnClick && onDismiss ? onDismiss : void 0;
-  const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   const variantStyles = variant === "dot" ? {
     ...dotStyles,
-    animation: reduceMotion ? "none" : dotStyles.animation
+    animation: dotPulseAnimation ?? "none"
   } : variant === "count" ? countStyles : pillStyles;
   const content = variant === "dot" ? null : variant === "count" ? count ?? 0 : label;
   const ariaLabel = variant === "count" ? `${count ?? 0} new features` : "New feature";
@@ -2525,14 +2862,6 @@ var TYPE_COLORS = {
   fix: { color: "#92400e", bg: "rgba(245, 158, 11, 0.15)" },
   breaking: { color: "#991b1b", bg: "rgba(239, 68, 68, 0.15)" }
 };
-function formatDate(iso) {
-  const d = new Date(iso);
-  return d.toLocaleDateString(void 0, {
-    month: "short",
-    day: "numeric",
-    year: "numeric"
-  });
-}
 function getFocusableElements(container) {
   const nodes = container.querySelectorAll(
     [
@@ -2555,7 +2884,9 @@ function DefaultEntry({
   reactions,
   userReaction,
   canReact,
-  react
+  react,
+  locale,
+  dateFormat
 }) {
   const typeStyle = feature.type ? TYPE_COLORS[feature.type] ?? TYPE_COLORS.feature : null;
   const descriptionHtml = feature.description ? parseDescription(feature.description) : null;
@@ -2605,7 +2936,7 @@ function DefaultEntry({
         }
       ),
       feature.category && /* @__PURE__ */ jsx("span", { children: feature.category }),
-      /* @__PURE__ */ jsx("span", { children: formatDate(feature.releasedAt) }),
+      /* @__PURE__ */ jsx("span", { children: dateFormat === "relative" ? formatRelativeTimeForLocale(feature.releasedAt, locale) : formatDateForLocale(feature.releasedAt, locale) }),
       versionLabel && /* @__PURE__ */ jsxs("span", { children: [
         "v",
         versionLabel
@@ -2652,6 +2983,7 @@ function ChangelogWidget({
   showMarkAll = true,
   emptyLabel,
   maxHeight = "400px",
+  dateFormat = "absolute",
   analytics,
   className,
   style,
@@ -2671,14 +3003,19 @@ function ChangelogWidget({
     markFeatureSeen,
     markFeatureClicked,
     trackAdoptionEvent,
+    locale,
+    direction,
+    animation,
     translations
   } = useFeatureDrop();
   const [isOpen, setIsOpen] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
   const [, setReactionVersion] = useState(0);
   const containerRef = useRef(null);
   const dialogRef = useRef(null);
   const triggerRef = useRef(null);
   const lastFocusedElementRef = useRef(null);
+  const closeTimerRef = useRef(null);
   const widgetIdRef = useRef(`featuredrop-widget-${Math.random().toString(36).slice(2, 10)}`);
   const themeVariables = useThemeVariables(theme);
   const resolvedTitle = title ?? translations.whatsNewTitle;
@@ -2687,7 +3024,27 @@ function ChangelogWidget({
   const resolvedEmptyLabel = emptyLabel ?? translations.allCaughtUp;
   const dialogId = `${widgetIdRef.current}-dialog`;
   const titleId = `${widgetIdRef.current}-title`;
+  const countLabel = translations.newFeatureCount(newCount);
+  const dialogEnterAnimation = useMemo(
+    () => getEnterAnimation(animation, variant),
+    [animation, variant]
+  );
+  const dialogExitAnimation = useMemo(
+    () => getExitAnimation(animation, variant),
+    [animation, variant]
+  );
+  useEffect(() => {
+    ensureFeatureDropAnimationStyles();
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
+  }, []);
   const open = useCallback(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    setIsClosing(false);
     if (typeof document !== "undefined" && document.activeElement instanceof HTMLElement) {
       lastFocusedElementRef.current = document.activeElement;
     }
@@ -2695,7 +3052,21 @@ function ChangelogWidget({
     analytics?.onWidgetOpened?.();
   }, [analytics]);
   const close = useCallback(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
     setIsOpen(false);
+    const exitDuration = getAnimationDurationMs(animation, variant);
+    if (exitDuration > 0) {
+      setIsClosing(true);
+      closeTimerRef.current = setTimeout(() => {
+        setIsClosing(false);
+        closeTimerRef.current = null;
+      }, exitDuration);
+    } else {
+      setIsClosing(false);
+    }
     analytics?.onWidgetClosed?.();
     const returnTarget = triggerRef.current ?? lastFocusedElementRef.current;
     if (returnTarget) {
@@ -2707,7 +3078,7 @@ function ChangelogWidget({
         returnTarget.focus();
       }
     }
-  }, [analytics]);
+  }, [animation, analytics, variant]);
   const toggle = useCallback(() => {
     if (isOpen) {
       close();
@@ -2844,6 +3215,7 @@ function ChangelogWidget({
       "data-featuredrop-widget": true,
       className,
       style: widgetRootStyle,
+      dir: direction,
       children: [
         renderTrigger ? renderTrigger({ count: newCount, onClick: toggle }) : /* @__PURE__ */ jsxs(
           "button",
@@ -2852,7 +3224,7 @@ function ChangelogWidget({
             onClick: toggle,
             style: triggerButtonStyles,
             "data-featuredrop-trigger": true,
-            "aria-label": `${resolvedTriggerLabel}${newCount > 0 ? ` \u2014 ${newCount} new` : ""}`,
+            "aria-label": `${resolvedTriggerLabel}${newCount > 0 ? ` \u2014 ${countLabel}` : ""}`,
             "aria-haspopup": "dialog",
             "aria-expanded": isOpen,
             "aria-controls": dialogId,
@@ -2862,8 +3234,8 @@ function ChangelogWidget({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("span", { style: srOnlyStyles, "aria-live": "polite", "aria-atomic": "true", children: newCount > 0 ? `${newCount} new feature${newCount === 1 ? "" : "s"}` : "No new features" }),
-        isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { style: srOnlyStyles, "aria-live": "polite", "aria-atomic": "true", children: countLabel }),
+        (isOpen || isClosing) && /* @__PURE__ */ jsxs(Fragment, { children: [
           variant !== "popover" && /* @__PURE__ */ jsx(
             "div",
             {
@@ -2878,7 +3250,10 @@ function ChangelogWidget({
             {
               id: dialogId,
               ref: dialogRef,
-              style: dialogContainerStyles,
+              style: {
+                ...dialogContainerStyles,
+                animation: isClosing ? dialogExitAnimation : dialogEnterAnimation
+              },
               "data-featuredrop-container": variant,
               role: "dialog",
               "aria-labelledby": titleId,
@@ -2917,6 +3292,8 @@ function ChangelogWidget({
                       feature,
                       dismiss: () => handleDismiss(feature.id),
                       onFeatureClick: () => handleFeatureClick(feature),
+                      locale,
+                      dateFormat,
                       reactions: showReactions ? getReactionCounts(feature.id, reactions) : void 0,
                       userReaction: showReactions ? getUserReaction(feature.id) : null,
                       canReact: showReactions ? !getUserReaction(feature.id) : void 0,
@@ -2954,8 +3331,7 @@ var beaconPulseStyles = {
   inset: "-4px",
   borderRadius: "50%",
   border: "2px solid var(--featuredrop-beacon-color, #f59e0b)",
-  opacity: 0.6,
-  animation: "featuredrop-spotlight-pulse 2s ease-in-out infinite"
+  opacity: 0.6
 };
 var tooltipStyles = {
   position: "absolute",
@@ -2991,29 +3367,6 @@ var tooltipDismissStyles = {
   backgroundColor: "var(--featuredrop-tooltip-dismiss-bg, #f3f4f6)",
   color: "var(--featuredrop-tooltip-dismiss-color, #374151)"
 };
-var injectedKeyframes = false;
-function injectKeyframes() {
-  if (injectedKeyframes || typeof document === "undefined") return;
-  injectedKeyframes = true;
-  const style = document.createElement("style");
-  style.textContent = `
-    @keyframes featuredrop-spotlight-pulse {
-      0%, 100% { transform: scale(1); opacity: 0.6; }
-      50% { transform: scale(1.6); opacity: 0; }
-    }
-    @keyframes featuredrop-pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-  `;
-  document.head.appendChild(style);
-}
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    return false;
-  }
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
 function Spotlight({
   featureId,
   targetRef,
@@ -3033,7 +3386,9 @@ function Spotlight({
     markFeatureSeen,
     acquireSpotlightSlot,
     releaseSpotlightSlot,
-    activeSpotlightCount
+    activeSpotlightCount,
+    animation,
+    translations
   } = useFeatureDrop();
   const feature = newFeatures.find((f) => f.id === featureId);
   const [isTooltipOpen, setTooltipOpen] = useState(false);
@@ -3042,13 +3397,20 @@ function Spotlight({
   const timerRef = useRef(null);
   const beaconRef = useRef(null);
   const instanceIdRef = useRef(`featuredrop-spotlight-${Math.random().toString(36).slice(2, 10)}`);
-  const reduceMotion = useMemo(() => prefersReducedMotion(), []);
+  const beaconPulseAnimation = useMemo(
+    () => getPulseAnimation(animation, "beacon"),
+    [animation]
+  );
+  const tooltipEnterAnimation = useMemo(
+    () => getEnterAnimation(animation, "popover"),
+    [animation]
+  );
   const isActive = !!feature;
   const tooltipId = `${instanceIdRef.current}-tooltip`;
   const tooltipTitleId = `${instanceIdRef.current}-title`;
   const tooltipDescId = `${instanceIdRef.current}-description`;
   useEffect(() => {
-    injectKeyframes();
+    ensureFeatureDropAnimationStyles();
   }, []);
   useEffect(() => {
     if (!isActive) {
@@ -3205,7 +3567,7 @@ function Spotlight({
           {
             style: {
               ...beaconPulseStyles,
-              animation: reduceMotion ? "none" : beaconPulseStyles.animation
+              animation: beaconPulseAnimation ?? "none"
             }
           }
         )
@@ -3215,7 +3577,12 @@ function Spotlight({
       "div",
       {
         id: tooltipId,
-        style: { ...tooltipStyles, position: "fixed", ...tooltipPosition },
+        style: {
+          ...tooltipStyles,
+          position: "fixed",
+          ...tooltipPosition,
+          animation: tooltipEnterAnimation
+        },
         "data-featuredrop-tooltip": true,
         role: "dialog",
         "aria-modal": "false",
@@ -3237,7 +3604,7 @@ function Spotlight({
               type: "button",
               onClick: handleDismiss,
               style: tooltipDismissStyles,
-              children: "Got it"
+              children: translations.gotIt
             }
           )
         ] })
@@ -3438,8 +3805,7 @@ var toastStyles = {
   border: "1px solid var(--featuredrop-toast-border, #e5e7eb)",
   width: "var(--featuredrop-toast-width, 340px)",
   maxWidth: "calc(100vw - 32px)",
-  fontFamily: "var(--featuredrop-font-family, inherit)",
-  animation: "featuredrop-toast-enter 0.3s ease-out"
+  fontFamily: "var(--featuredrop-font-family, inherit)"
 };
 var toastBodyStyles = {
   flex: 1,
@@ -3486,25 +3852,6 @@ var TYPE_INDICATORS = {
   fix: { color: "#f59e0b", icon: "\u{1F527}" },
   breaking: { color: "#ef4444", icon: "\u26A0\uFE0F" }
 };
-var injectedToastKeyframes = false;
-function injectToastKeyframes() {
-  if (injectedToastKeyframes || typeof document === "undefined") return;
-  injectedToastKeyframes = true;
-  const style = document.createElement("style");
-  style.textContent = `
-    @keyframes featuredrop-toast-enter {
-      from { opacity: 0; transform: translateY(8px) scale(0.96); }
-      to { opacity: 1; transform: translateY(0) scale(1); }
-    }
-  `;
-  document.head.appendChild(style);
-}
-function prefersReducedMotion2() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    return false;
-  }
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
 function Toast({
   featureIds,
   maxVisible = 3,
@@ -3523,14 +3870,21 @@ function Toast({
     markFeatureClicked,
     trackAdoptionEvent,
     getRemainingToastSlots,
-    markToastsShown
+    markToastsShown,
+    animation
   } = useFeatureDrop();
   const [localDismissed, setLocalDismissed] = useState(/* @__PURE__ */ new Set());
+  const [closingIds, setClosingIds] = useState(/* @__PURE__ */ new Set());
   const timersRef = useRef(/* @__PURE__ */ new Map());
   const shownIdsRef = useRef(/* @__PURE__ */ new Set());
-  const reduceMotion = useMemo(() => prefersReducedMotion2(), []);
+  const toastEnterAnimation = useMemo(() => getEnterAnimation(animation, "toast"), [animation]);
+  const toastExitAnimation = useMemo(() => getExitAnimation(animation, "toast"), [animation]);
+  const toastExitDuration = useMemo(
+    () => getAnimationDurationMs(animation, "toast"),
+    [animation]
+  );
   useEffect(() => {
-    injectToastKeyframes();
+    ensureFeatureDropAnimationStyles();
   }, []);
   const toastFeatures = newFeaturesSorted.filter((f) => {
     if (localDismissed.has(f.id)) return false;
@@ -3550,8 +3904,14 @@ function Toast({
       return true;
     });
   }, [baseVisible, remainingSlots]);
-  const handleDismiss = useCallback(
+  const finalizeDismiss = useCallback(
     (id) => {
+      setClosingIds((previous) => {
+        if (!previous.has(id)) return previous;
+        const next = new Set(previous);
+        next.delete(id);
+        return next;
+      });
       setLocalDismissed((prev) => new Set(prev).add(id));
       dismiss(id);
       const feature = newFeaturesSorted.find((f) => f.id === id);
@@ -3561,9 +3921,40 @@ function Toast({
         clearTimeout(timer);
         timersRef.current.delete(id);
       }
+      const exitTimer = timersRef.current.get(`exit:${id}`);
+      if (exitTimer) {
+        clearTimeout(exitTimer);
+        timersRef.current.delete(`exit:${id}`);
+      }
     },
     [dismiss, newFeaturesSorted, analytics]
   );
+  const handleDismiss = useCallback((id) => {
+    if (closingIds.has(id)) return;
+    if (toastExitDuration > 0 && toastExitAnimation) {
+      const existingAutoTimer = timersRef.current.get(id);
+      if (existingAutoTimer) {
+        clearTimeout(existingAutoTimer);
+        timersRef.current.delete(id);
+      }
+      setClosingIds((previous) => {
+        if (previous.has(id)) return previous;
+        const next = new Set(previous);
+        next.add(id);
+        return next;
+      });
+      const existing = timersRef.current.get(`exit:${id}`);
+      if (existing) clearTimeout(existing);
+      timersRef.current.set(
+        `exit:${id}`,
+        setTimeout(() => {
+          finalizeDismiss(id);
+        }, toastExitDuration)
+      );
+      return;
+    }
+    finalizeDismiss(id);
+  }, [closingIds, finalizeDismiss, toastExitAnimation, toastExitDuration]);
   const handleDismissAllLocal = useCallback(() => {
     for (const f of visibleToasts) {
       handleDismiss(f.id);
@@ -3572,14 +3963,14 @@ function Toast({
   useEffect(() => {
     if (autoDismissMs <= 0) return;
     for (const f of visibleToasts) {
-      if (!timersRef.current.has(f.id)) {
+      if (!timersRef.current.has(f.id) && !closingIds.has(f.id)) {
         timersRef.current.set(
           f.id,
           setTimeout(() => handleDismiss(f.id), autoDismissMs)
         );
       }
     }
-  }, [visibleToasts, autoDismissMs, handleDismiss]);
+  }, [visibleToasts, autoDismissMs, closingIds, handleDismiss]);
   useEffect(() => {
     const newlyShownIds = [];
     for (const feature of visibleToasts) {
@@ -3635,7 +4026,7 @@ function Toast({
             "data-featuredrop-toast": feature.id,
             style: {
               ...toastStyles,
-              animation: reduceMotion ? "none" : toastStyles.animation
+              animation: closingIds.has(feature.id) ? toastExitAnimation : toastEnterAnimation
             },
             role: "status",
             children: [
@@ -3774,17 +4165,12 @@ var reactionButtonStyles2 = {
   cursor: "pointer",
   fontSize: "12px"
 };
-function defaultFormatDate(date) {
-  const d = new Date(date);
-  return d.toLocaleDateString(void 0, {
-    month: "short",
-    day: "numeric",
-    year: "numeric"
-  });
+function defaultFormatDate(date, locale) {
+  return formatDateForLocale(date, locale);
 }
 function EntryCard({
   entry,
-  formatDate: formatDate2,
+  formatDate,
   basePath,
   shareLabel,
   showReactions,
@@ -3840,7 +4226,7 @@ function EntryCard({
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { style: metaRowStyles, children: [
-          /* @__PURE__ */ jsx("span", { children: formatDate2(entry.releasedAt) }),
+          /* @__PURE__ */ jsx("span", { children: formatDate(entry.releasedAt) }),
           entry.version && /* @__PURE__ */ jsxs("span", { children: [
             "v",
             typeof entry.version === "string" ? entry.version : entry.version.introduced ?? entry.version.showNewUntil ?? ""
@@ -3907,7 +4293,8 @@ function ChangelogPage({
   categories,
   emptyState,
   renderEntry,
-  formatDate: formatDate2 = defaultFormatDate,
+  formatDate,
+  dateFormat = "absolute",
   basePath,
   manifest: manifestProp,
   className,
@@ -3917,7 +4304,7 @@ function ChangelogPage({
   reactions = [...DEFAULT_REACTIONS],
   onReaction
 }) {
-  const { manifest: contextManifest, translations } = useFeatureDrop();
+  const { manifest: contextManifest, locale, direction, translations } = useFeatureDrop();
   const themeVariables = useThemeVariables(theme);
   const manifest = useMemo(
     () => manifestProp ?? contextManifest ?? [],
@@ -3981,6 +4368,10 @@ function ChangelogPage({
     if (typeof window !== "undefined") return window.location.pathname;
     return "";
   }, [basePath]);
+  const resolvedFormatDate = useMemo(
+    () => formatDate ?? ((value) => dateFormat === "relative" ? formatRelativeTimeForLocale(value, locale) : defaultFormatDate(value, locale)),
+    [dateFormat, formatDate, locale]
+  );
   useEffect(() => {
     if (typeof window === "undefined") return;
     const hash = window.location.hash;
@@ -4014,7 +4405,7 @@ function ChangelogPage({
       EntryCard,
       {
         entry,
-        formatDate: formatDate2,
+        formatDate: resolvedFormatDate,
         basePath: resolvedBasePath,
         showReactions,
         shareLabel: translations.share,
@@ -4059,60 +4450,69 @@ function ChangelogPage({
     () => ({ ...themeVariables ?? {}, ...pageStyles, ...style ?? {} }),
     [themeVariables, style]
   );
-  return /* @__PURE__ */ jsxs("div", { "data-featuredrop-changelog-page": true, className, style: containerStyles2, children: [
-    /* @__PURE__ */ jsx("a", { href: `#${listId}`, style: skipLinkStyles, children: translations.skipToEntries }),
-    /* @__PURE__ */ jsxs("div", { style: headerStyles2, children: [
-      /* @__PURE__ */ jsx("h2", { style: { margin: 0 }, children: translations.changelogTitle }),
-      showSearch && /* @__PURE__ */ jsx(
-        "input",
-        {
-          style: searchStyles,
-          type: "search",
-          placeholder: translations.searchPlaceholder,
-          value: query,
-          onChange: (e) => setQuery(e.target.value),
-          "aria-label": "Search changelog updates"
-        }
-      )
-    ] }),
-    showFilters && /* @__PURE__ */ jsxs("div", { style: filterBarStyles, children: [
-      allCategories.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            style: activeCategory ? pillStyles2 : pillActiveStyles,
-            onClick: () => setActiveCategory(null),
-            children: translations.allCategories
-          }
-        ),
-        allCategories.map((cat) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            style: activeCategory === cat ? pillActiveStyles : pillStyles2,
-            onClick: () => setActiveCategory(cat),
-            children: cat
-          },
-          cat
-        ))
-      ] }),
-      ["feature", "improvement", "fix", "breaking"].map((t) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          style: activeType === t ? pillActiveStyles : pillStyles2,
-          onClick: () => setActiveType((prev) => prev === t ? null : t),
-          children: t
-        },
-        t
-      ))
-    ] }),
-    visible.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "32px 0", textAlign: "center", color: "#6b7280" }, children: emptyState ?? translations.noUpdatesYet }) : /* @__PURE__ */ jsxs("div", { id: listId, onKeyDown: handleListKeyDown, children: [
-      renderList(),
-      paginationControls()
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-featuredrop-changelog-page": true,
+      className,
+      style: containerStyles2,
+      dir: direction,
+      children: [
+        /* @__PURE__ */ jsx("a", { href: `#${listId}`, style: skipLinkStyles, children: translations.skipToEntries }),
+        /* @__PURE__ */ jsxs("div", { style: headerStyles2, children: [
+          /* @__PURE__ */ jsx("h2", { style: { margin: 0 }, children: translations.changelogTitle }),
+          showSearch && /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: searchStyles,
+              type: "search",
+              placeholder: translations.searchPlaceholder,
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              "aria-label": "Search changelog updates"
+            }
+          )
+        ] }),
+        showFilters && /* @__PURE__ */ jsxs("div", { style: filterBarStyles, children: [
+          allCategories.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: activeCategory ? pillStyles2 : pillActiveStyles,
+                onClick: () => setActiveCategory(null),
+                children: translations.allCategories
+              }
+            ),
+            allCategories.map((cat) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: activeCategory === cat ? pillActiveStyles : pillStyles2,
+                onClick: () => setActiveCategory(cat),
+                children: cat
+              },
+              cat
+            ))
+          ] }),
+          ["feature", "improvement", "fix", "breaking"].map((t) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: activeType === t ? pillActiveStyles : pillStyles2,
+              onClick: () => setActiveType((prev) => prev === t ? null : t),
+              children: t
+            },
+            t
+          ))
+        ] }),
+        visible.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "32px 0", textAlign: "center", color: "#6b7280" }, children: emptyState ?? translations.noUpdatesYet }) : /* @__PURE__ */ jsxs("div", { id: listId, onKeyDown: handleListKeyDown, children: [
+          renderList(),
+          paginationControls()
+        ] })
+      ]
+    }
+  );
 }
 var tourBoxStyles = {
   position: "fixed",
@@ -4235,6 +4635,10 @@ function Tour({
   children
 }) {
   const context = useContext(FeatureDropContext);
+  const dialogAnimation = useMemo(
+    () => getEnterAnimation(context?.animation ?? "normal", "popover"),
+    [context?.animation]
+  );
   const [isActive, setIsActive] = useState(false);
   const [stepIndex, setStepIndex] = useState(-1);
   const [targetRect, setTargetRect] = useState(null);
@@ -4347,6 +4751,9 @@ function Tour({
     void openStep(next);
     context?.markTourShown();
   }, [context, findValidStep, id, openStep, persistence]);
+  useEffect(() => {
+    ensureFeatureDropAnimationStyles();
+  }, []);
   useEffect(() => {
     if (!isActive || !step) return;
     const updateRect = () => {
@@ -4500,9 +4907,11 @@ function Tour({
         "aria-labelledby": titleId,
         "aria-describedby": showProgress ? `${contentId} ${progressId}` : contentId,
         "data-featuredrop-tour": id,
+        dir: context?.direction,
         tabIndex: -1,
         style: {
           ...tourBoxStyles,
+          animation: dialogAnimation,
           top: tooltipPos.top,
           left: tooltipPos.left
         },
@@ -4960,6 +5369,7 @@ function Hotspot({
   frequency = "once",
   children
 }) {
+  const featureDrop = useContext(FeatureDropContext);
   const group = useContext(TooltipGroupContext);
   const [open, setOpen] = useState(false);
   const [dismissed, setDismissed] = useState(false);
@@ -4967,6 +5377,23 @@ function Hotspot({
   const hoverTimer = useRef(null);
   const beaconRef = useRef(null);
   const instanceIdRef = useRef(`featuredrop-hotspot-${Math.random().toString(36).slice(2, 10)}`);
+  const animation = useMemo(
+    () => resolveAnimationPreset(featureDrop?.animation ?? "normal", {
+      reducedMotion: prefersReducedMotion()
+    }),
+    [featureDrop?.animation]
+  );
+  const beaconPulseAnimation = useMemo(
+    () => getPulseAnimation(animation, "dot"),
+    [animation]
+  );
+  const tooltipEnterAnimation = useMemo(
+    () => getEnterAnimation(animation, "popover"),
+    [animation]
+  );
+  useEffect(() => {
+    ensureFeatureDropAnimationStyles();
+  }, []);
   useEffect(() => {
     if (frequency === "once" && isDismissedOnce(id)) {
       setDismissed(true);
@@ -5075,6 +5502,7 @@ function Hotspot({
           boxShadow: "0 0 0 2px rgba(17,24,39,0.1)",
           cursor: "pointer",
           zIndex: "var(--featuredrop-hotspot-beacon-z-index, 10000)",
+          animation: beaconPulseAnimation ?? "none",
           ...beaconTypeStyles[type]
         }
       }
@@ -5086,7 +5514,12 @@ function Hotspot({
         role: "dialog",
         "aria-modal": "false",
         "data-featuredrop-hotspot-tooltip": id,
-        style: { ...tooltipStyles2, top: tooltipTop, left: tooltipLeft },
+        style: {
+          ...tooltipStyles2,
+          top: tooltipTop,
+          left: tooltipLeft,
+          animation: tooltipEnterAnimation
+        },
         onMouseLeave: closeTooltip,
         children: [
           /* @__PURE__ */ jsx("div", { style: { fontSize: "13px", color: "#374151", lineHeight: 1.5 }, children }),
@@ -5172,7 +5605,7 @@ function FeedbackWidget({
   style,
   children
 }) {
-  const { trackAdoptionEvent, translations } = useFeatureDrop();
+  const { trackAdoptionEvent, direction, animation, translations } = useFeatureDrop();
   const [isOpen, setIsOpen] = useState(false);
   const [text, setText] = useState("");
   const [category, setCategory] = useState(categories[0] ?? "other");
@@ -5186,6 +5619,7 @@ function FeedbackWidget({
   const lastFocusedElementRef = useRef(null);
   const instanceIdRef = useRef(`featuredrop-feedback-${Math.random().toString(36).slice(2, 10)}`);
   const rateLimitKey = useMemo(() => getRateLimitKey(featureId), [featureId]);
+  const panelAnimation = useMemo(() => getEnterAnimation(animation, "popover"), [animation]);
   const resolvedTriggerLabel = triggerLabel ?? translations.feedbackTrigger;
   const resolvedTitle = title ?? translations.feedbackTitle;
   const isRateLimited = useMemo(() => {
@@ -5222,6 +5656,9 @@ function FeedbackWidget({
       window.removeEventListener("keydown", onKeyDown);
     };
   }, [close, isOpen]);
+  useEffect(() => {
+    ensureFeatureDropAnimationStyles();
+  }, []);
   const captureScreenshot = useCallback(async () => {
     if (!showScreenshot) return;
     try {
@@ -5341,10 +5778,11 @@ function FeedbackWidget({
       id: `${instanceIdRef.current}-panel`,
       "data-featuredrop-feedback-widget": true,
       className,
-      style: { ...panelStyles, ...style },
+      style: { ...panelStyles, animation: panelAnimation, ...style },
       role: "dialog",
       "aria-modal": "false",
       "aria-labelledby": titleId,
+      dir: direction,
       children: [
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: "8px" }, children: [
           /* @__PURE__ */ jsx("strong", { id: titleId, children: resolvedTitle }),
@@ -5354,7 +5792,7 @@ function FeedbackWidget({
               type: "button",
               onClick: close,
               style: { border: "none", background: "transparent", cursor: "pointer" },
-              "aria-label": "Close feedback",
+              "aria-label": translations.close,
               children: "x"
             }
           )
@@ -5586,6 +6024,7 @@ function AnnouncementModal({
 }) {
   const context = useContext(FeatureDropContext);
   const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [isClosing, setIsClosing] = useState(false);
   const [slideIndex, setSlideIndex] = useState(0);
   const [blockedByFrequency, setBlockedByFrequency] = useState(false);
   const [isMobile, setIsMobile] = useState(
@@ -5593,6 +6032,7 @@ function AnnouncementModal({
   );
   const modalRef = useRef(null);
   const lastFocusedElementRef = useRef(null);
+  const closeTimerRef = useRef(null);
   const instanceIdRef = useRef(`featuredrop-announcement-${Math.random().toString(36).slice(2, 10)}`);
   const resolvedFeature = useMemo(() => {
     if (feature) return feature;
@@ -5608,8 +6048,15 @@ function AnnouncementModal({
   );
   const currentSlide = resolvedSlides[slideIndex] ?? null;
   const t = context?.translations;
+  const enterAnimation = getEnterAnimation(context?.animation ?? "normal", "modal");
+  const exitAnimation = getExitAnimation(context?.animation ?? "normal", "modal");
   const open = useCallback(() => {
     if (blockedByFrequency || resolvedSlides.length === 0) return;
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    setIsClosing(false);
     if (typeof document !== "undefined" && document.activeElement instanceof HTMLElement) {
       lastFocusedElementRef.current = document.activeElement;
     }
@@ -5632,7 +6079,22 @@ function AnnouncementModal({
     open();
   }, [defaultOpen, open]);
   const close = useCallback(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
     setIsOpen(false);
+    const animationPreset = context?.animation ?? "normal";
+    const exitDuration = getAnimationDurationMs(animationPreset, "modal");
+    if (exitDuration > 0) {
+      setIsClosing(true);
+      closeTimerRef.current = setTimeout(() => {
+        setIsClosing(false);
+        closeTimerRef.current = null;
+      }, exitDuration);
+    } else {
+      setIsClosing(false);
+    }
     const returnTarget = lastFocusedElementRef.current;
     if (returnTarget) {
       if (typeof requestAnimationFrame === "function") {
@@ -5641,10 +6103,10 @@ function AnnouncementModal({
         returnTarget.focus();
       }
     }
-  }, []);
+  }, [context?.animation]);
   const dismiss = useCallback(() => {
-    close();
     setBlockedByFrequency(true);
+    close();
     if (frequency === "once") {
       setDismissedOnce2(modalId);
     } else if (frequency === "every-session") {
@@ -5677,12 +6139,17 @@ function AnnouncementModal({
   }, [frequency, modalId]);
   useEffect(() => {
     if (trigger !== "auto") return;
-    if (blockedByFrequency || isOpen || resolvedSlides.length === 0) return;
+    if (blockedByFrequency || isOpen || isClosing || resolvedSlides.length === 0) return;
+    if (frequency === "once" && isDismissedOnce2(modalId)) return;
+    if (frequency === "every-session" && sessionDismissed2.has(modalId)) return;
     if (resolvedFeature && resolvedFeature.priority !== "critical") return;
     open();
   }, [
+    frequency,
     blockedByFrequency,
+    isClosing,
     isOpen,
+    modalId,
     open,
     resolvedFeature,
     resolvedSlides.length,
@@ -5699,6 +6166,12 @@ function AnnouncementModal({
       window.removeEventListener("resize", updateViewportMode);
     };
   }, [mobileBreakpoint]);
+  useEffect(() => {
+    ensureFeatureDropAnimationStyles();
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
+  }, []);
   useEffect(() => {
     if (!isOpen) return;
     const modalEl = modalRef.current;
@@ -5766,7 +6239,7 @@ function AnnouncementModal({
   if (children) {
     return /* @__PURE__ */ jsx(Fragment, { children: children(renderProps) });
   }
-  if (!isOpen || !currentSlide || blockedByFrequency) return null;
+  if (!(isOpen || isClosing) || !currentSlide) return null;
   const embeddedVideo = toEmbedUrl(currentSlide.videoUrl);
   const descriptionHtml = currentSlide.description ? parseDescription(currentSlide.description) : null;
   const totalSlides = resolvedSlides.length;
@@ -5792,9 +6265,11 @@ function AnnouncementModal({
         "aria-describedby": currentSlide.description ? descriptionId : void 0,
         "data-featuredrop-announcement-modal": modalId,
         className,
+        dir: context?.direction,
         tabIndex: -1,
         style: {
           ...isMobile ? mobileModalStyles : desktopModalStyles,
+          animation: isClosing ? exitAnimation : enterAnimation,
           ...style
         },
         children: /* @__PURE__ */ jsxs("div", { style: { padding: isMobile ? "16px" : "20px" }, children: [
@@ -5964,8 +6439,7 @@ var beaconStyles2 = {
   border: "2px solid #fff",
   background: "#f59e0b",
   boxShadow: "0 0 0 2px rgba(17,24,39,0.12)",
-  zIndex: "var(--featuredrop-spotlight-chain-beacon-z-index, 10010)",
-  animation: "featuredrop-chain-pulse 1.8s ease-in-out infinite"
+  zIndex: "var(--featuredrop-spotlight-chain-beacon-z-index, 10010)"
 };
 var tooltipStyles3 = {
   position: "fixed",
@@ -5977,25 +6451,6 @@ var tooltipStyles3 = {
   boxShadow: "0 10px 30px rgba(0,0,0,0.16)",
   width: "min(90vw, 320px)"
 };
-var injectedKeyframes2 = false;
-function injectKeyframes2() {
-  if (injectedKeyframes2 || typeof document === "undefined") return;
-  injectedKeyframes2 = true;
-  const style = document.createElement("style");
-  style.textContent = `
-    @keyframes featuredrop-chain-pulse {
-      0%, 100% { transform: scale(1); opacity: 1; }
-      50% { transform: scale(1.35); opacity: 0.65; }
-    }
-  `;
-  document.head.appendChild(style);
-}
-function prefersReducedMotion3() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    return false;
-  }
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
 function getFocusableElements4(container) {
   const nodes = container.querySelectorAll(
     [
@@ -6024,12 +6479,26 @@ function SpotlightChain({
   onSkip,
   children
 }) {
+  const featureDrop = useContext(FeatureDropContext);
   const [isActive, setIsActive] = useState(false);
   const [stepIndex, setStepIndex] = useState(-1);
   const [rect, setRect] = useState(null);
   const autoTimerRef = useRef(null);
   const dialogRef = useRef(null);
-  const reduceMotion = useMemo(() => prefersReducedMotion3(), []);
+  const animation = useMemo(
+    () => resolveAnimationPreset(featureDrop?.animation ?? "normal", {
+      reducedMotion: prefersReducedMotion()
+    }),
+    [featureDrop?.animation]
+  );
+  const beaconPulseAnimation = useMemo(
+    () => getPulseAnimation(animation, "beacon"),
+    [animation]
+  );
+  const tooltipEnterAnimation = useMemo(
+    () => getEnterAnimation(animation, "popover"),
+    [animation]
+  );
   const instanceIdRef = useRef(`featuredrop-spotlight-chain-${Math.random().toString(36).slice(2, 10)}`);
   const step = stepIndex >= 0 ? steps[stepIndex] ?? null : null;
   const findValidStep = useCallback((start2) => {
@@ -6079,7 +6548,7 @@ function SpotlightChain({
     setRect(null);
   }, [onSkip, step, stepIndex]);
   useEffect(() => {
-    injectKeyframes2();
+    ensureFeatureDropAnimationStyles();
   }, []);
   useEffect(() => {
     if (!startOnMount) return;
@@ -6186,7 +6655,7 @@ function SpotlightChain({
         "data-featuredrop-spotlight-chain-beacon": step.id ?? stepIndex,
         style: {
           ...beaconStyles2,
-          animation: reduceMotion ? "none" : beaconStyles2.animation,
+          animation: beaconPulseAnimation ?? "none",
           top: rect.top - 7,
           left: rect.right - 7
         }
@@ -6202,7 +6671,12 @@ function SpotlightChain({
         "aria-describedby": contentId,
         "data-featuredrop-spotlight-chain": step.id ?? stepIndex,
         tabIndex: -1,
-        style: { ...tooltipStyles3, top: tooltipTop, left: tooltipLeft },
+        style: {
+          ...tooltipStyles3,
+          top: tooltipTop,
+          left: tooltipLeft,
+          animation: tooltipEnterAnimation
+        },
         children: [
           step.title && /* @__PURE__ */ jsx("p", { id: titleId, style: { margin: "0 0 6px", fontWeight: 700, fontSize: "15px" }, children: step.title }),
           /* @__PURE__ */ jsx("div", { id: contentId, style: { margin: "0 0 10px", fontSize: "14px", color: "#4b5563" }, children: step.content }),
@@ -6219,7 +6693,7 @@ function SpotlightChain({
                   padding: "6px 10px",
                   cursor: "pointer"
                 },
-                children: "Skip"
+                children: featureDrop?.translations.skip ?? "Skip"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -6235,7 +6709,7 @@ function SpotlightChain({
                   padding: "6px 10px",
                   cursor: "pointer"
                 },
-                children: stepIndex >= steps.length - 1 ? "Got it" : "Next"
+                children: stepIndex >= steps.length - 1 ? featureDrop?.translations.gotIt ?? "Got it" : featureDrop?.translations.next ?? "Next"
               }
             )
           ] })
@@ -6422,6 +6896,11 @@ function Survey({
   const askLaterCooldownDays = triggerRules?.askLaterCooldownDays ?? DEFAULT_ASK_LATER_DAYS;
   const scale = useMemo(() => resolveScale(type), [type]);
   const translations = context?.translations;
+  const direction = context?.direction ?? "ltr";
+  const panelAnimation = useMemo(
+    () => getEnterAnimation(context?.animation ?? "normal", "modal"),
+    [context?.animation]
+  );
   const canShow = useMemo(() => {
     const now = Date.now();
     const cooldownUntil = parseIsoTime(readStorageValue3(cooldownStorageKey(id)));
@@ -6511,6 +6990,9 @@ function Survey({
     if (!defaultOpen) return;
     show({ force: true });
   }, [defaultOpen, show]);
+  useEffect(() => {
+    ensureFeatureDropAnimationStyles();
+  }, []);
   useEffect(() => {
     if (!isOpen) return;
     const panel = panelRef.current;
@@ -6686,12 +7168,13 @@ function Survey({
       ref: panelRef,
       "data-featuredrop-survey": id,
       className,
-      style: { ...panelStyles2, ...style },
+      style: { ...panelStyles2, animation: panelAnimation, ...style },
       role: "dialog",
       "aria-modal": "false",
       "aria-labelledby": surveyTitleId,
       "aria-describedby": prompt ? surveyDescriptionId : void 0,
       tabIndex: -1,
+      dir: direction,
       children: [
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: "8px" }, children: [
           /* @__PURE__ */ jsx("strong", { id: surveyTitleId, children: surveyTitle }),
@@ -7255,6 +7738,24 @@ function FeatureRequestForm({
   );
 }
 
-export { AnnouncementModal, Banner, ChangelogPage, ChangelogWidget, Checklist, FeatureDropContext, FeatureDropProvider, FeatureRequestButton, FeatureRequestForm, FeedbackWidget, Hotspot, NewBadge, Spotlight, SpotlightChain, Survey, ThemeProvider, Toast, TooltipGroup, Tour, useAdoptionAnalytics, useChecklist, useFeatureDrop, useNewCount, useNewFeature, useSurvey, useTabNotification, useTour, useTourSequencer };
+// src/react/index.ts
+var NewBadge2 = withFeatureDropBoundary(NewBadge, "NewBadge");
+var ChangelogWidget2 = withFeatureDropBoundary(ChangelogWidget, "ChangelogWidget");
+var Spotlight2 = withFeatureDropBoundary(Spotlight, "Spotlight");
+var Banner2 = withFeatureDropBoundary(Banner, "Banner");
+var Toast2 = withFeatureDropBoundary(Toast, "Toast");
+var ChangelogPage2 = withFeatureDropBoundary(ChangelogPage, "ChangelogPage");
+var Tour2 = withFeatureDropBoundary(Tour, "Tour");
+var Checklist2 = withFeatureDropBoundary(Checklist, "Checklist");
+var Hotspot2 = withFeatureDropBoundary(Hotspot, "Hotspot");
+var TooltipGroup2 = withFeatureDropBoundary(TooltipGroup, "TooltipGroup");
+var FeedbackWidget2 = withFeatureDropBoundary(FeedbackWidget, "FeedbackWidget");
+var AnnouncementModal2 = withFeatureDropBoundary(AnnouncementModal, "AnnouncementModal");
+var SpotlightChain2 = withFeatureDropBoundary(SpotlightChain, "SpotlightChain");
+var Survey2 = withFeatureDropBoundary(Survey, "Survey");
+var FeatureRequestButton2 = withFeatureDropBoundary(FeatureRequestButton, "FeatureRequestButton");
+var FeatureRequestForm2 = withFeatureDropBoundary(FeatureRequestForm, "FeatureRequestForm");
+
+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 };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map