@wireai/activation 0.1.0

package/dist/showcase/index.mjs

@@ -0,0 +1,651 @@
+import Onboarding from '@blazejkustra/react-native-onboarding';
+import React, { createContext, useEffect, useMemo, useRef, useCallback, useState, useContext } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useSharedValue, useReducedMotion, withRepeat, withSequence, withTiming, withDelay, useAnimatedStyle } from 'react-native-reanimated';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/showcase/FeatureShowcase.tsx
+var SWIPE_MS = 700;
+var TAP_MS = 320;
+var SPREAD_MS = 620;
+var GLYPH_ROTATION = {
+  swipe_up: "0deg",
+  swipe_down: "180deg",
+  swipe_left: "-90deg",
+  swipe_right: "90deg"
+};
+var FingerPair = ({ size, color }) => {
+  const { row, index, middle } = useMemo(() => {
+    const w = size * 0.2;
+    const r = w / 2;
+    return {
+      row: { flexDirection: "row", alignItems: "flex-end", gap: size * 0.08 },
+      index: { width: w, height: size * 0.54, borderRadius: r, backgroundColor: color },
+      middle: { width: w, height: size * 0.44, borderRadius: r, backgroundColor: color }
+    };
+  }, [size, color]);
+  return /* @__PURE__ */ jsxs(View, { style: row, pointerEvents: "none", children: [
+    /* @__PURE__ */ jsx(View, { style: index }),
+    /* @__PURE__ */ jsx(View, { style: middle })
+  ] });
+};
+var MotionTrack = ({ size, color }) => {
+  const { wrap, tick0, tick1 } = useMemo(() => {
+    const h = Math.max(2, size * 0.05);
+    return {
+      wrap: { alignItems: "center", marginTop: size * 0.1, gap: size * 0.06 },
+      tick0: {
+        width: size * 0.3,
+        height: h,
+        borderRadius: h / 2,
+        backgroundColor: color,
+        opacity: 0.4
+      },
+      tick1: {
+        width: size * 0.18,
+        height: h,
+        borderRadius: h / 2,
+        backgroundColor: color,
+        opacity: 0.16
+      }
+    };
+  }, [size, color]);
+  return /* @__PURE__ */ jsxs(View, { style: wrap, pointerEvents: "none", children: [
+    /* @__PURE__ */ jsx(View, { style: tick0 }),
+    /* @__PURE__ */ jsx(View, { style: tick1 })
+  ] });
+};
+var GestureHintComponent = ({
+  type,
+  size = 34,
+  color = "white",
+  renderHand
+}) => {
+  var _a;
+  const translate = useSharedValue(0);
+  const opacity = useSharedValue(1);
+  const pulse = useSharedValue(1);
+  const spread = useSharedValue(0);
+  const reduced = useReducedMotion();
+  const isSwipe = type === "swipe_up" || type === "swipe_down" || type === "swipe_left" || type === "swipe_right";
+  const isSpread = type === "pinch" || type === "zoom";
+  const isTap = type === "tap" || type === "double_tap";
+  useEffect(() => {
+    if (type === "none" || reduced) return void 0;
+    if (isTap) {
+      pulse.value = withRepeat(
+        withSequence(
+          withTiming(0.82, { duration: TAP_MS }),
+          withTiming(1, { duration: TAP_MS })
+        ),
+        -1,
+        false
+      );
+      opacity.value = withRepeat(
+        withSequence(
+          withTiming(0.55, { duration: TAP_MS }),
+          withTiming(1, { duration: TAP_MS })
+        ),
+        -1,
+        false
+      );
+      return void 0;
+    }
+    if (isSpread) {
+      spread.value = withRepeat(
+        withSequence(
+          withTiming(size * 0.26, { duration: SPREAD_MS }),
+          withTiming(0, { duration: SPREAD_MS })
+        ),
+        -1,
+        false
+      );
+      return void 0;
+    }
+    translate.value = withRepeat(
+      withSequence(
+        withTiming(0, { duration: 0 }),
+        withTiming(-26, { duration: SWIPE_MS }),
+        withDelay(140, withTiming(0, { duration: 0 }))
+      ),
+      -1,
+      false
+    );
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: SWIPE_MS / 2 }),
+        withTiming(0, { duration: SWIPE_MS / 2 }),
+        withDelay(140, withTiming(1, { duration: 0 }))
+      ),
+      -1,
+      false
+    );
+    return void 0;
+  }, [type, reduced, isTap, isSpread, translate, opacity, pulse, spread, size]);
+  const swipeAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translate.value }]
+  }));
+  const tapAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ scale: pulse.value }]
+  }));
+  const spreadLeftStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: -spread.value }]
+  }));
+  const spreadRightStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: spread.value }]
+  }));
+  if (type === "none") return null;
+  const customGlyph = renderHand ? renderHand({ size, color }) : null;
+  if (isSwipe) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: { transform: [{ rotate: (_a = GLYPH_ROTATION[type]) != null ? _a : "0deg" }] },
+        pointerEvents: "none",
+        children: /* @__PURE__ */ jsxs(View, { style: styles.swipeStack, children: [
+          /* @__PURE__ */ jsx(Animated.View, { style: swipeAnimatedStyle, pointerEvents: "none", children: customGlyph != null ? customGlyph : /* @__PURE__ */ jsx(FingerPair, { size, color }) }),
+          /* @__PURE__ */ jsx(MotionTrack, { size, color })
+        ] })
+      }
+    );
+  }
+  if (isSpread) {
+    const w = size * 0.2;
+    const capsule = {
+      width: w,
+      height: size * 0.5,
+      borderRadius: w / 2,
+      backgroundColor: color
+    };
+    return /* @__PURE__ */ jsxs(View, { style: [styles.spreadRow, { gap: size * 0.12 }], pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx(Animated.View, { style: spreadLeftStyle, children: /* @__PURE__ */ jsx(View, { style: capsule }) }),
+      /* @__PURE__ */ jsx(Animated.View, { style: spreadRightStyle, children: /* @__PURE__ */ jsx(View, { style: capsule }) })
+    ] });
+  }
+  const ringSize = size * 0.86;
+  const ringBorder = Math.max(2, size * 0.08);
+  const dotSize = size * 0.32;
+  return /* @__PURE__ */ jsx(View, { style: [styles.tapWrap, { width: size, height: size }], pointerEvents: "none", children: customGlyph ? /* @__PURE__ */ jsx(Animated.View, { style: tapAnimatedStyle, pointerEvents: "none", children: customGlyph }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          styles.tapRing,
+          {
+            width: ringSize,
+            height: ringSize,
+            borderRadius: ringSize / 2,
+            borderWidth: ringBorder,
+            borderColor: color
+          },
+          tapAnimatedStyle
+        ],
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          position: "absolute",
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: color
+        }
+      }
+    )
+  ] }) });
+};
+var styles = StyleSheet.create({
+  swipeStack: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  spreadRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tapWrap: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tapRing: {
+    backgroundColor: "transparent"
+  }
+});
+var GestureHint = React.memo(GestureHintComponent);
+GestureHint.displayName = "GestureHint";
+
+// src/coachmarks/runtime.ts
+var storageSingleton = null;
+var testing = false;
+var showcaseGateKey = (showcaseId) => `wire_showcase_${showcaseId}_seen`;
+var SEEN_VALUE = "1";
+var hasSeenGate = (key, storageOverride, testingOverride) => {
+  if (testingOverride != null ? testingOverride : testing) return false;
+  const storage = storageOverride != null ? storageOverride : storageSingleton;
+  if (!storage) return false;
+  try {
+    return storage.getItem(key) === SEEN_VALUE;
+  } catch {
+    return false;
+  }
+};
+var markSeenGate = (key, storageOverride, testingOverride) => {
+  if (testingOverride != null ? testingOverride : testing) return;
+  const storage = storageOverride != null ? storageOverride : storageSingleton;
+  if (!storage) return;
+  try {
+    storage.setItem(key, SEEN_VALUE);
+  } catch {
+  }
+};
+
+// src/features/defaults.ts
+var defaultWireFeatures = Object.freeze({
+  coachmarks: Object.freeze({ enabled: true }),
+  showcase: Object.freeze({ enabled: true }),
+  onboarding: Object.freeze({ mode: "ai" }),
+  review: Object.freeze({ enabled: true }),
+  questionnaire: Object.freeze({ enabled: true }),
+  announcements: Object.freeze({ enabled: true })
+});
+var VALID_MODES = ["ai", "static", "off"];
+var readEnabled = (raw) => {
+  if (raw && typeof raw === "object" && typeof raw.enabled === "boolean") {
+    return { enabled: raw.enabled };
+  }
+  return { enabled: true };
+};
+var parseWireFeatures = (raw) => {
+  var _a;
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) return defaultWireFeatures;
+  const src = raw;
+  const modeRaw = (_a = src.onboarding) == null ? void 0 : _a.mode;
+  const mode = typeof modeRaw === "string" && VALID_MODES.includes(modeRaw) ? modeRaw : "ai";
+  return {
+    coachmarks: readEnabled(src.coachmarks),
+    showcase: readEnabled(src.showcase),
+    onboarding: { mode },
+    review: readEnabled(src.review),
+    questionnaire: readEnabled(src.questionnaire),
+    announcements: readEnabled(src.announcements)
+  };
+};
+var featuresEqual = (a, b) => a === b || a.coachmarks.enabled === b.coachmarks.enabled && a.showcase.enabled === b.showcase.enabled && a.onboarding.mode === b.onboarding.mode && a.review.enabled === b.review.enabled && a.questionnaire.enabled === b.questionnaire.enabled && a.announcements.enabled === b.announcements.enabled;
+
+// src/features/cache.ts
+var READ_TIMEOUT_MS = 1500;
+var featuresCacheKey = (appId) => `wireai:features:${appId && appId.length > 0 ? appId : "default"}`;
+var withTimeout = (p, ms) => {
+  let timer;
+  const timeout = new Promise((resolve) => {
+    timer = setTimeout(() => resolve(void 0), ms);
+  });
+  return Promise.race([p, timeout]).finally(() => clearTimeout(timer));
+};
+var readCachedFeatures = async (storage, key) => {
+  let raw;
+  try {
+    raw = await withTimeout(storage.getItem(key), READ_TIMEOUT_MS);
+  } catch {
+    return void 0;
+  }
+  if (!raw) return void 0;
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object" && typeof parsed.ts === "number") {
+      const ts = parsed.ts;
+      return {
+        features: parseWireFeatures(parsed.features),
+        ageMs: Date.now() - ts
+      };
+    }
+  } catch {
+  }
+  return void 0;
+};
+var writeCachedFeatures = (storage, key, features) => {
+  try {
+    void storage.setItem(key, JSON.stringify({ features, ts: Date.now() })).catch(() => {
+    });
+  } catch {
+  }
+};
+
+// src/features/fetchWireFeatures.ts
+var DEFAULT_TIMEOUT_MS = 4e3;
+var failOpen = async (storage, key) => {
+  var _a;
+  if (!storage) return defaultWireFeatures;
+  const cached = await readCachedFeatures(storage, key);
+  return (_a = cached == null ? void 0 : cached.features) != null ? _a : defaultWireFeatures;
+};
+var fetchWithTimeout = async (url, apiKey, timeoutMs) => {
+  const controller = typeof AbortController !== "undefined" ? new AbortController() : void 0;
+  const timer = setTimeout(() => controller == null ? void 0 : controller.abort(), timeoutMs);
+  try {
+    return await fetch(url, {
+      method: "GET",
+      headers: { Accept: "application/json", Authorization: `Bearer ${apiKey}` },
+      signal: controller == null ? void 0 : controller.signal
+    });
+  } finally {
+    clearTimeout(timer);
+  }
+};
+var fetchWireFeatures = async (config) => {
+  const key = featuresCacheKey(config == null ? void 0 : config.appId);
+  const storage = config == null ? void 0 : config.storage;
+  if (!(config == null ? void 0 : config.serverUrl) || !(config == null ? void 0 : config.apiKey)) return failOpen(storage, key);
+  const url = `${config.serverUrl.replace(/\/$/, "")}/v1/features`;
+  const timeoutMs = config.timeoutMs && config.timeoutMs > 0 ? config.timeoutMs : DEFAULT_TIMEOUT_MS;
+  try {
+    const res = await fetchWithTimeout(url, config.apiKey, timeoutMs);
+    if (!res || !res.ok) return failOpen(storage, key);
+    const json = await res.json();
+    const features = parseWireFeatures(json);
+    if (storage) writeCachedFeatures(storage, key, features);
+    return features;
+  } catch {
+    return failOpen(storage, key);
+  }
+};
+
+// src/features/useWireFeatures.ts
+var useStableValue = (value, isEqual) => {
+  const ref = useRef(value);
+  if (!isEqual(ref.current, value)) ref.current = value;
+  return ref.current;
+};
+var sameFetchKey = (a, b) => (a == null ? void 0 : a.serverUrl) === (b == null ? void 0 : b.serverUrl) && (a == null ? void 0 : a.apiKey) === (b == null ? void 0 : b.apiKey) && (a == null ? void 0 : a.appId) === (b == null ? void 0 : b.appId);
+var useWireFeatures = (config) => {
+  const stableConfig = useStableValue(config, sameFetchKey);
+  const [flags, setFlags] = useState(defaultWireFeatures);
+  const canFetch = !!(stableConfig == null ? void 0 : stableConfig.serverUrl) && !!(stableConfig == null ? void 0 : stableConfig.apiKey);
+  useEffect(() => {
+    if (!canFetch) {
+      setFlags((prev) => featuresEqual(prev, defaultWireFeatures) ? prev : defaultWireFeatures);
+      return;
+    }
+    let alive = true;
+    void fetchWireFeatures(stableConfig).then((next) => {
+      if (!alive) return;
+      setFlags((prev) => featuresEqual(prev, next) ? prev : next);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [canFetch, stableConfig]);
+  return flags;
+};
+var WireFeaturesContext = createContext(null);
+var useWireFeaturesContext = () => useContext(WireFeaturesContext);
+var useResolvedFeatures = (options) => {
+  var _a, _b, _c;
+  const ctx = useWireFeaturesContext();
+  const shouldFetch = !(options == null ? void 0 : options.flags) && ctx == null;
+  const fetched = useWireFeatures(shouldFetch ? options == null ? void 0 : options.config : void 0);
+  return (_c = (_b = (_a = options == null ? void 0 : options.flags) != null ? _a : ctx) != null ? _b : fetched) != null ? _c : defaultWireFeatures;
+};
+
+// src/theme/defaultTheme.ts
+var defaultOnboardingTheme = {
+  colors: {
+    background: "#FFFFFF",
+    surface: "#F7F7F8",
+    text: "#101114",
+    textMuted: "#6B7280",
+    primary: "#111111",
+    onPrimary: "#FFFFFF",
+    primarySoft: "rgba(17,17,17,0.06)",
+    border: "#E4E4E7",
+    borderStrong: "#C7C7CC",
+    disabled: "#EBEBEB",
+    success: "#16A34A",
+    warning: "#D97706",
+    error: "#DC2626",
+    info: "#2563EB"
+  },
+  fonts: {
+    regular: void 0,
+    medium: void 0,
+    bold: void 0,
+    baseSize: 16,
+    scale: 1
+  },
+  radius: {
+    sm: 8,
+    md: 12,
+    lg: 16,
+    full: 9999
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32
+  },
+  // Circled (pill) CTA by default; an app can pass `button: { radius: 12 }` for
+  // a rounded rectangle, or override height/paddingX to match its design system.
+  button: {
+    radius: 9999,
+    height: 52,
+    paddingX: 24
+  }
+};
+var mergeTheme = (override) => {
+  return defaultOnboardingTheme;
+};
+var OnboardingThemeContext = createContext(null);
+var useOnboardingTheme = () => {
+  const ctx = useContext(OnboardingThemeContext);
+  return ctx != null ? ctx : mergeTheme();
+};
+
+// src/showcase/showcaseColors.ts
+var showcaseColorsFromTheme = (t, accent) => ({
+  background: {
+    // Brand action color → primary button bg + intro highlight + image hero panel.
+    // (The hero panel is overridden to a calm surface via the package's
+    //  `background` render prop — see showcasePanelBackground — so in practice
+    //  this only paints the primary button + the intro highlight word.)
+    primary: accent,
+    // Neutral screen / modal / step-panel background.
+    secondary: t.colors.background,
+    // Step-label chip background (a soft wash of the brand).
+    label: t.colors.primarySoft,
+    // Secondary (outline) button border.
+    accent
+  },
+  text: {
+    primary: t.colors.text,
+    secondary: t.colors.textMuted,
+    // Primary button label — sits on `background.primary` (the accent).
+    contrast: t.colors.onPrimary
+  }
+});
+var SHOWCASE_PANEL_TINT_OPACITY = 0.1;
+var showcasePanelBackground = (t, accent) => ({
+  base: t.colors.surface,
+  tint: { color: accent, opacity: SHOWCASE_PANEL_TINT_OPACITY }
+});
+var TRANSPARENT_PX = {
+  uri: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+};
+var mergeThemeOver = (base, override) => {
+  if (!override) return base;
+  return {
+    colors: { ...base.colors, ...override.colors },
+    fonts: { ...base.fonts, ...override.fonts },
+    radius: { ...base.radius, ...override.radius },
+    spacing: { ...base.spacing, ...override.spacing },
+    button: { ...base.button, ...override.button }
+  };
+};
+var FeatureShowcase = ({
+  config,
+  onDone,
+  theme: themeOverride,
+  accentColor,
+  buttonLabel = "Next",
+  storage,
+  isTesting,
+  features,
+  featuresConfig
+}) => {
+  var _a;
+  const active = useOnboardingTheme();
+  const t = useMemo(
+    () => mergeThemeOver(active, themeOverride),
+    [active, themeOverride]
+  );
+  const accent = accentColor != null ? accentColor : t.colors.primary;
+  const flags = useResolvedFeatures({ flags: features, config: featuresConfig });
+  const disabled = !flags.showcase.enabled;
+  const gateKey = showcaseGateKey(config.id);
+  const seen = useMemo(
+    () => hasSeenGate(gateKey, storage, isTesting),
+    [gateKey, storage, isTesting]
+  );
+  const skip = seen || disabled;
+  const doneRef = useRef(false);
+  const finish = useCallback(() => {
+    if (doneRef.current) return;
+    doneRef.current = true;
+    markSeenGate(gateKey, storage, isTesting);
+    onDone();
+  }, [gateKey, storage, isTesting, onDone]);
+  useEffect(() => {
+    if (skip && !doneRef.current) {
+      doneRef.current = true;
+      onDone();
+    }
+  }, [skip, onDone]);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const steps = useMemo(
+    () => config.slides.map((slide) => {
+      var _a2, _b, _c;
+      return {
+        title: slide.title,
+        description: slide.description,
+        buttonLabel: (_a2 = slide.buttonLabel) != null ? _a2 : buttonLabel,
+        image: (_b = slide.image) != null ? _b : TRANSPARENT_PX,
+        position: (_c = slide.imagePosition) != null ? _c : "top"
+      };
+    }),
+    [config.slides, buttonLabel]
+  );
+  const introPanel = useMemo(
+    () => config.introPanel ? {
+      title: config.introPanel.title,
+      subtitle: config.introPanel.subtitle,
+      button: config.introPanel.button,
+      image: config.introPanel.image
+    } : { button: buttonLabel },
+    [config.introPanel, buttonLabel]
+  );
+  const colors = useMemo(
+    () => showcaseColorsFromTheme(t, accent),
+    [t, accent]
+  );
+  const panelBg = useMemo(() => showcasePanelBackground(t, accent), [t, accent]);
+  const renderPanelBackground = useCallback(
+    () => /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles2.panelBase,
+          { backgroundColor: panelBg.base, borderRadius: t.radius.md }
+        ],
+        children: /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              StyleSheet.absoluteFill,
+              {
+                backgroundColor: panelBg.tint.color,
+                opacity: panelBg.tint.opacity
+              }
+            ]
+          }
+        )
+      }
+    ),
+    [panelBg, t.radius.md]
+  );
+  const fonts = useMemo(
+    () => ({
+      introTitle: t.fonts.bold,
+      introSubtitle: t.fonts.regular,
+      introButton: t.fonts.bold,
+      stepLabel: t.fonts.medium,
+      stepTitle: t.fonts.bold,
+      stepDescription: t.fonts.regular,
+      stepButton: t.fonts.bold,
+      primaryButton: t.fonts.bold,
+      secondaryButton: t.fonts.medium
+    }),
+    [t]
+  );
+  if (skip) return null;
+  const activeGesture = (_a = config.slides[activeIndex]) == null ? void 0 : _a.gesture;
+  const showGesture = !!activeGesture && activeGesture !== "none" && activeGesture !== "tap" && activeGesture !== "double_tap";
+  return /* @__PURE__ */ jsxs(View, { style: styles2.fill, children: [
+    /* @__PURE__ */ jsx(
+      Onboarding,
+      {
+        introPanel,
+        steps,
+        colors,
+        fonts,
+        background: renderPanelBackground,
+        onComplete: finish,
+        onSkip: finish,
+        onStepChange: setActiveIndex
+      }
+    ),
+    showGesture && /* @__PURE__ */ jsx(View, { style: styles2.gestureLayer, pointerEvents: "none", children: /* @__PURE__ */ jsx(GestureHint, { type: activeGesture, color: accent }) })
+  ] });
+};
+FeatureShowcase.displayName = "FeatureShowcase";
+var styles2 = StyleSheet.create({
+  fill: { flex: 1 },
+  // Fills the package's animated background box; clips the accent tint to the
+  // rounded corners so the calm panel reads as a card, not a bleed.
+  panelBase: { flex: 1, overflow: "hidden" },
+  gestureLayer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: "center",
+    justifyContent: "flex-end",
+    paddingBottom: 140
+  }
+});
+
+// src/showcase/selectShowcaseSlides.ts
+var selectShowcaseSlides = (catalog, selection) => {
+  if (!selection) return catalog;
+  const byId = new Map(catalog.map((item) => [item.id, item]));
+  const seen = /* @__PURE__ */ new Set();
+  const ordered = [];
+  for (const id of selection) {
+    if (seen.has(id)) continue;
+    seen.add(id);
+    const item = byId.get(id);
+    if (item) ordered.push(item);
+  }
+  return ordered;
+};
+
+export { FeatureShowcase, selectShowcaseSlides };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map