@wireai/activation 0.2.0 → 0.4.0

package/src/components/LoadingBlock.tsx

@@ -22,7 +22,6 @@ import {
   scaledMs,
 } from "../motion/motionSpec";
 import { useReducedMotion } from "../motion/useReducedMotion";
-import { useLoaderChrome } from "./loaderChrome";
 
 const STAGE_SIZE = 96;
 const ORBIT_DOT = 9;
@@ -104,11 +103,12 @@ const _LoadingBlock: React.FC<LoadingBlockProps> = ({
 }) => {
   const t = useOnboardingTheme();
   const reduced = useReducedMotion();
-  // When the loader renders inside the scaffold body it sits below the header; the scaffold
-  // publishes how far to shift UP so the loader centers in the full flow area, not the body.
-  // Standalone (no provider) → 0. A static transform (visual only): it never reflows the body,
-  // so the card underneath and the card↔loader handoff are unaffected.
-  const { offsetY } = useLoaderChrome();
+  // The loader fills its parent (flex:1) and centers in it. In the flow that parent is the
+  // scaffold BODY (the same content region the cards render into), so the loader lands at the
+  // content-area center — visually consistent with the cards it hands off to. Standalone
+  // (LoadingScreen / a playground CardFrame) it centers in whatever bounds it. No screen-inset
+  // math and no transform: it inherits the content area it is dropped into, so it is centered
+  // in every context by construction.
 
   // Skeleton lines are gated behind the 300ms window: a fast fetch never shows them.
   const [showSkeleton, setShowSkeleton] = useState(false);
@@ -118,34 +118,44 @@ const _LoadingBlock: React.FC<LoadingBlockProps> = ({
   }, []);
 
   return (
-    <View
-      style={[
-        styles.center,
-        { gap: t.spacing.md, padding: t.spacing.lg },
-        offsetY ? { transform: [{ translateY: offsetY }] } : null,
-      ]}
-    >
+    <View style={[styles.center, { padding: t.spacing.lg }]}>
+      {/*
+       * The stage is the ANCHOR: it's the only in-flow child, so `justifyContent:
+       * center` lands the icon at the true center of the flow area. Title, hint and
+       * the (300ms-gated) skeleton hang BELOW it in an absolutely-positioned column,
+       * so they never displace the icon — previously they lived in the same centered
+       * column, which re-balanced (and jumped the icon UP ~½ its height) the moment
+       * the skeleton lines mounted at 300ms.
+       */}
       <View style={styles.stage}>
         <View style={[styles.ring, { borderColor: t.colors.border, borderRadius: t.radius.full }]} />
         <OrbitDot color={t.colors.primary} reduced={reduced} />
         <AnimatedSparkle size={40} variant="pulse" />
       </View>
-      {title ? (
-        <Text style={[headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }]}>
-          {title}
-        </Text>
-      ) : null}
-      {hint ? (
-        <Text style={[bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }]}>
-          {hint}
-        </Text>
-      ) : null}
-      {showSkeleton ? (
-        <View style={[styles.skeleton, { gap: t.spacing.sm, marginTop: t.spacing.sm }]}>
-          <SkeletonLine width="80%" delay={0} color={t.colors.surface} reduced={reduced} />
-          <SkeletonLine width="60%" delay={200} color={t.colors.surface} reduced={reduced} />
-        </View>
-      ) : null}
+      <View
+        style={[
+          styles.labels,
+          { marginTop: STAGE_SIZE / 2 + t.spacing.lg, gap: t.spacing.md, paddingHorizontal: t.spacing.lg },
+        ]}
+        pointerEvents="none"
+      >
+        {title ? (
+          <Text style={[headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }]}>
+            {title}
+          </Text>
+        ) : null}
+        {hint ? (
+          <Text style={[bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }]}>
+            {hint}
+          </Text>
+        ) : null}
+        {showSkeleton ? (
+          <View style={[styles.skeleton, { gap: t.spacing.sm, marginTop: t.spacing.sm }]}>
+            <SkeletonLine width="80%" delay={0} color={t.colors.surface} reduced={reduced} />
+            <SkeletonLine width="60%" delay={200} color={t.colors.surface} reduced={reduced} />
+          </View>
+        ) : null}
+      </View>
     </View>
   );
 };
@@ -154,6 +164,11 @@ export const LoadingBlock = React.memo(_LoadingBlock);
 
 const styles = StyleSheet.create({
   center: { flex: 1, alignItems: "center", justifyContent: "center" },
+  // Absolutely-positioned label column, pinned just under the centered stage: its top
+  // edge starts at the flow center (top: 50%) and the inline marginTop (STAGE_SIZE/2 +
+  // a gap) drops it below the stage. Out of flow → it never moves the stage, so the
+  // 300ms skeleton reveal grows DOWNWARD only and the icon stays centered.
+  labels: { position: "absolute", top: "50%", left: 0, right: 0, alignItems: "center" },
   stage: {
     width: STAGE_SIZE,
     height: STAGE_SIZE,

package/src/components/LoadingScreen.tsx

@@ -7,8 +7,9 @@
  * WHY a dedicated frame: those slots used to return a bare <LoadingBlock/>, whose flex:1 only
  * fills whatever the host happened to give it — with no safe area and, if the host didn't
  * bound it, no height at all (top-anchored). This wraps them in the same SafeAreaView the flow
- * uses, so the standalone loaders center exactly like the between-turns loader (which centers
- * in the full flow area via the scaffold's loaderChrome offset). One consistent centered look.
+ * uses, so the standalone loaders center exactly like the between-turns loader (both fill their
+ * parent flex:1 region and center in it — here the SafeAreaView, in the flow the scaffold body).
+ * One consistent centered look.
  */
 import React from "react";
 import { StyleSheet } from "react-native";

package/src/components/OnboardingScaffold.tsx

@@ -15,16 +15,13 @@
  * RN core SafeAreaView is deprecated and iOS-only, so the kit takes the standard
  * Expo/RN peer instead of shipping cropped layouts on Android + notched devices.
  */
-import React from "react";
+import React, { useMemo } from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useOnboardingTheme } from "../theme/ThemeContext";
+import type { OnboardingTheme } from "../theme/types";
 import { bodyStyle } from "../theme/typography";
 import { StepProgress } from "./StepProgress";
-import { LoaderChromeProvider } from "./loaderChrome";
-
-// The header's fixed StepProgress bar height (design bar = 6px; see StepProgress styles).
-const PROGRESS_TRACK = 6;
 
 export type OnboardingScaffoldProps = {
   /** 1-based index of the current step; drives the (countless) progress bar. */
@@ -53,15 +50,9 @@ const _OnboardingScaffold: React.FC<OnboardingScaffoldProps> = ({
   children,
 }) => {
   const t = useOnboardingTheme();
+  const styles = useMemo(() => makeStyles(t), [t]);
   const hit = { top: 12, bottom: 12, left: 12, right: 12 };
 
-  // Top chrome above the body content = header (progress bar + its paddingTop) + the body's
-  // own paddingTop. A loader that fills the body centers half that distance too low; it reads
-  // this offset (via LoaderChromeProvider) and shifts UP by half the chrome to land at the true
-  // screen center. Cards ignore it, so their layout — and the card↔loader handoff — is untouched.
-  const topChrome = t.spacing.md + PROGRESS_TRACK + t.spacing.md;
-  const loaderOffsetY = -Math.round(topChrome / 2);
-
   return (
     <SafeAreaView
       edges={["top", "bottom"]}
@@ -72,15 +63,19 @@ const _OnboardingScaffold: React.FC<OnboardingScaffoldProps> = ({
           <StepProgress step={step} complete={complete} approxScreens={approxScreens} />
         </View>
         {onSkip ? (
-          <TouchableOpacity onPress={onSkip} hitSlop={hit} style={{ marginLeft: t.spacing.md }}>
+          <TouchableOpacity onPress={onSkip} hitSlop={hit} style={styles.skip}>
             <Text style={[bodyStyle(t.fonts), { color: t.colors.textMuted }]}>{skipLabel}</Text>
           </TouchableOpacity>
         ) : null}
       </View>
 
-      {/* Full-screen body: the card (via CardLayout) fills this and pins its own CTA. */}
-      <View style={[styles.body, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }]}>
-        <LoaderChromeProvider value={{ offsetY: loaderOffsetY }}>{children}</LoaderChromeProvider>
+      {/* Full-screen body (flex:1): the card (via CardLayout) fills this and pins its own CTA,
+          and the between-turns LoadingBlock fills+centers in this SAME region — so the loader
+          lands at the content-area center, consistent with the cards, not the full-screen center. */}
+      <View
+        style={[styles.body, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }]}
+      >
+        {children}
       </View>
 
       {onBack ? (
@@ -96,10 +91,13 @@ const _OnboardingScaffold: React.FC<OnboardingScaffoldProps> = ({
 
 export const OnboardingScaffold = React.memo(_OnboardingScaffold);
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  header: { flexDirection: "row", alignItems: "center" },
-  progressWrap: { flex: 1 },
-  body: { flex: 1 },
-  footer: { flexDirection: "row", justifyContent: "flex-start" },
-});
+function makeStyles(t: OnboardingTheme) {
+  return StyleSheet.create({
+    flex: { flex: 1 },
+    header: { flexDirection: "row", alignItems: "center" },
+    progressWrap: { flex: 1 },
+    body: { flex: 1 },
+    footer: { flexDirection: "row", justifyContent: "flex-start" },
+    skip: { marginLeft: t.spacing.md },
+  });
+}

package/src/features/WireFeaturesProvider.tsx

@@ -18,8 +18,13 @@ import { defaultWireFeatures } from "./defaults";
 import { useWireFeatures } from "./useWireFeatures";
 import type { WireFeatures, WireFeaturesConfig } from "./types";
 
-/** null = no provider mounted (the signal `useResolvedFeatures` uses to fall back). */
-const WireFeaturesContext = createContext<WireFeatures | null>(null);
+const CONTEXT_SYMBOL = Symbol.for("wireai.features.context");
+const globalObj = global as any;
+
+if (!globalObj[CONTEXT_SYMBOL]) {
+  globalObj[CONTEXT_SYMBOL] = createContext<WireFeatures | null>(null);
+}
+const WireFeaturesContext = globalObj[CONTEXT_SYMBOL];
 
 export interface WireFeaturesProviderProps {
   /** Tenant creds (+ optional storage) to fetch the flags once for the whole tree. */

package/src/questionnaire/QuestionnaireGate.tsx

@@ -43,7 +43,7 @@ const mergeThemeOver = (
 
 type Phase = "form" | "thanks";
 
-export const QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
+const _QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
   questionnaire,
   target,
   sessionId,
@@ -81,6 +81,14 @@ export const QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const resolveTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => {
+    return () => {
+      if (resolveTimer.current) clearTimeout(resolveTimer.current);
+    };
+  }, []);
+
   const resolve = useCallback(() => {
     onResolved?.();
   }, [onResolved]);
@@ -100,8 +108,11 @@ export const QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
     submitQuestionnaireResponse(target, id, submission);
     onEvent?.({ name: "questionnaire_submitted", id });
     setPhase("thanks");
-    resolve();
-  }, [canSend, opinion, improve, suggestions, sessionId, meta, target, id, onEvent, resolve]);
+    if (resolveTimer.current) clearTimeout(resolveTimer.current);
+    resolveTimer.current = setTimeout(() => {
+      modalRef.current?.close();
+    }, 1500);
+  }, [canSend, opinion, improve, suggestions, sessionId, meta, target, id, onEvent]);
 
   // The in-card "Not now"/"Skip" link plays the popup's exit animation (which resolves on
   // completion, the same path a backdrop tap takes). Emit the dismissed moment first.
@@ -225,6 +236,7 @@ export const QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
   );
 };
 
+export const QuestionnaireGate = React.memo(_QuestionnaireGate);
 QuestionnaireGate.displayName = "QuestionnaireGate";
 
 const styles = StyleSheet.create({

package/src/reviews/ReviewGate.tsx

@@ -52,7 +52,7 @@ const mergeThemeOver = (
 
 type Phase = "rating" | "feedback" | "thanks";
 
-export const ReviewGate: React.FC<ReviewGateProps> = ({
+const _ReviewGate: React.FC<ReviewGateProps> = ({
   appName,
   store,
   target,
@@ -94,10 +94,29 @@ export const ReviewGate: React.FC<ReviewGateProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const resolveTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => {
+    return () => {
+      if (resolveTimer.current) clearTimeout(resolveTimer.current);
+    };
+  }, []);
+
   const resolve = useCallback(() => {
     onResolved?.();
   }, [onResolved]);
 
+  const resolveWithDelay = useCallback(() => {
+    if (resolveTimer.current) clearTimeout(resolveTimer.current);
+    resolveTimer.current = setTimeout(() => {
+      if (mode === "modal") {
+        modalRef.current?.close();
+      } else {
+        onResolved?.();
+      }
+    }, 1500);
+  }, [mode, onResolved]);
+
   const pickRating = useCallback(
     async (value: number) => {
       setStars(value);
@@ -106,12 +125,12 @@ export const ReviewGate: React.FC<ReviewGateProps> = ({
         onEvent?.({ name: "store_review_requested", id, stars: value });
         await requestStoreReview(store);
         setPhase("thanks");
-        resolve();
+        resolveWithDelay();
       } else {
         setPhase("feedback");
       }
     },
-    [onEvent, id, store, resolve],
+    [onEvent, id, store, resolveWithDelay],
   );
 
   const sendFeedback = useCallback(() => {
@@ -127,13 +146,13 @@ export const ReviewGate: React.FC<ReviewGateProps> = ({
     submitReview(target, body);
     onEvent?.({ name: "review_feedback_submitted", id, stars });
     setPhase("thanks");
-    resolve();
-  }, [stars, feedback, suggestion, sessionId, meta, target, onEvent, id, resolve]);
+    resolveWithDelay();
+  }, [stars, feedback, suggestion, sessionId, meta, target, onEvent, id, resolveWithDelay]);
 
   const dismiss = useCallback(() => {
     setPhase("thanks");
-    resolve();
-  }, [resolve]);
+    resolveWithDelay();
+  }, [resolveWithDelay]);
 
   // The in-card "Not now"/"Skip" link. In modal mode it plays the popup's exit animation
   // (which resolves on completion, the same path a backdrop tap takes); inline keeps the
@@ -303,6 +322,7 @@ export const ReviewGate: React.FC<ReviewGateProps> = ({
   return <View style={[styles.card, surface]}>{content}</View>;
 };
 
+export const ReviewGate = React.memo(_ReviewGate);
 ReviewGate.displayName = "ReviewGate";
 
 const styles = StyleSheet.create({

package/src/reviews/ReviewModal.tsx

@@ -5,6 +5,10 @@
  * questionnaire module can reuse the same shell without importing reviews/. This file keeps the
  * reviews public API (`ReviewModal`, `ReviewModalHandle`, `ReviewModalProps`) pointing at the
  * exact same runtime object, so the reviews canary and every existing import stay valid.
+ *
+ * The exported shell is already `React.memo`-wrapped at its source (`components/CenteredModal.tsx`
+ * wraps `_CenteredModal` in `React.memo`), so `ReviewModal` satisfies the shell-memoization rule
+ * without a second wrapper here. Re-wrapping would change the runtime identity the canary asserts.
  */
 export { CenteredModal as ReviewModal, default } from "../components/CenteredModal";
 export type {

package/src/showcase/FeatureShowcase.tsx

@@ -48,7 +48,7 @@ const mergeThemeOver = (
  * When the gate says "seen", it renders nothing and calls `onDone` from an
  * effect (never during render).
  */
-export const FeatureShowcase: React.FC<FeatureShowcaseProps> = ({
+const _FeatureShowcase: React.FC<FeatureShowcaseProps> = ({
   config,
   onDone,
   theme: themeOverride,
@@ -211,6 +211,7 @@ export const FeatureShowcase: React.FC<FeatureShowcaseProps> = ({
   );
 };
 
+export const FeatureShowcase = React.memo(_FeatureShowcase);
 FeatureShowcase.displayName = "FeatureShowcase";
 
 const styles = StyleSheet.create({

package/src/components/loaderChrome.ts

@@ -1,28 +0,0 @@
-/**
- * loaderChrome — the seam that lets a loader center in the FULL flow area instead of
- * the header-offset body it happens to render into.
- *
- * The between-turns loader lives inside the OnboardingScaffold body (so the card↔loader
- * handoff stays one coordinated CardHandoff — see OnboardingFlow). But the body sits
- * BELOW the header (the StepProgress bar), so a loader that only fills the body centers
- * a little low — the "not centralized in the screen" device finding. The scaffold knows
- * its own top chrome, so it publishes a vertical offset here; LoadingBlock reads it and
- * shifts its centered content up by that much, landing it at the true screen center
- * WITHOUT moving the body (the card underneath is untouched, so the handoff never jumps).
- *
- * Default 0: a LoadingBlock rendered OUTSIDE a scaffold (the standalone LoadingScreen used
- * for cold-start / restoring / error) has no header above it, so it already centers in the
- * full area and needs no shift.
- */
-import { createContext, useContext } from "react";
-
-export type LoaderChrome = {
-  /** Vertical shift (px, usually negative = up) that re-centers a loader against the full flow area. */
-  offsetY: number;
-};
-
-const LoaderChromeContext = createContext<LoaderChrome>({ offsetY: 0 });
-
-export const LoaderChromeProvider = LoaderChromeContext.Provider;
-
-export const useLoaderChrome = (): LoaderChrome => useContext(LoaderChromeContext);