@momo-kits/foundation 0.169.4-beta.7 → 0.169.4-beta.8

package/Application/BottomSheet.tsx

@@ -18,6 +18,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import { DUO_ORIENTATIONS, styles } from './BottomSheet.styles';
+import { AdoptionProbe } from './KitAdoption';
 import {
   useBottomSheetLayout,
   useDuoKeyboardLift,
@@ -173,11 +174,16 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 
   const screen = (
-    <Screen
-      {...props}
-      {...props.route.params}
-      onRequestClose={onRequestClose}
-    />
+    <AdoptionProbe
+      screenName={Screen?.name || 'Invalid'}
+      navigation={props.navigation}
+    >
+      <Screen
+        {...props}
+        {...props.route.params}
+        onRequestClose={onRequestClose}
+      />
+    </AdoptionProbe>
   );
 
   return (

package/Application/BottomTab/BottomTabBar.styles.ts

@@ -46,9 +46,6 @@ export const styles = StyleSheet.create({
     width: TabBarMetrics.ctaSize,
     height: TabBarMetrics.ctaSize,
     borderRadius: TabBarMetrics.ctaSize / 2,
-    // Figma Icon Button border: white 60% hairline
-    borderWidth: 1,
-    borderColor: `rgba(255, 255, 255, ${TabBarMetrics.ctaBorderOpacity})`,
     alignItems: 'center',
     justifyContent: 'center',
   },

package/Application/BottomTab/BottomTabBar.tsx

@@ -17,7 +17,7 @@ import { CurvedContainer } from './CurvedContainer';
 import { ActiveIndicator } from './ActiveIndicator';
 import { getHorizontalBarWidth, TabBarMetrics, TabBarMotion } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { CappedScaleText } from './TabBarIcon';
+import { FixedScaleText } from './TabBarIcon';
 import { styles } from './BottomTabBar.styles';
 
 type Props = BottomTabBarProps & {
@@ -114,7 +114,7 @@ const CenterAction: React.FC<{
         </Animated.View>
         <View style={styles.ctaLabel}>
           {fixedFontScale ? (
-            <CappedScaleText>{labelText}</CappedScaleText>
+            <FixedScaleText>{labelText}</FixedScaleText>
           ) : (
             labelText
           )}
@@ -194,17 +194,21 @@ const HorizontalTabBar: React.FC<{
     return renderItems(items);
   };
 
+  const customContainer = withCta && floatingButton?.container;
+
   return (
     <View
       style={[styles.container, { width }]}
       accessibilityLabel={'bottom_tab_bar'}
     >
-      <CurvedContainer
-        width={width}
-        height={TabBarMetrics.height}
-        radius={TabBarMetrics.height / 2}
-        notchCenterX={withCta ? width / 2 : undefined}
-      />
+      {customContainer || (
+        <CurvedContainer
+          width={width}
+          height={TabBarMetrics.height}
+          radius={TabBarMetrics.height / 2}
+          notchCenterX={withCta ? width / 2 : undefined}
+        />
+      )}
       <View style={styles.content}>
         <ActiveIndicator
           axis={'x'}
@@ -237,8 +241,6 @@ export default function BottomTabBar(props: Props) {
     window.height,
     insets.left,
     insets.right,
-    state.routes.length,
-    withCta,
   );
 
   return (
@@ -256,7 +258,6 @@ export default function BottomTabBar(props: Props) {
       ]}
     >
       <HorizontalTabBar
-        fixedFontScale
         items={getTabItems(props)}
         width={width}
         floatingButton={floatingButton}

package/Application/BottomTab/CurvedContainer.tsx

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import Svg, { Defs, FeGaussianBlur, Filter, Path } from 'react-native-svg';
 import { Colors } from '../../Consts';
 import { ApplicationContext } from '../../Context';
-import { NOTCH_CURVES, NOTCH_HALF_WIDTH, TabBarMetrics } from './metrics';
+import { NOTCH_CURVES, NOTCH_HALF_WIDTH } from './metrics';
 
 type Props = {
   width: number;
@@ -137,13 +137,7 @@ const CurvedContainer: React.FC<Props> = ({
           filter={'url(#keyShadow)'}
         />
       )}
-      <Path
-        d={path}
-        fill={theme.colors.background.surface}
-        fillOpacity={TabBarMetrics.backgroundOpacity}
-        stroke={theme.colors.border.default}
-        strokeWidth={1}
-      />
+      <Path d={path} fill={theme.colors.background.surface} />
     </Svg>
   );
 };

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -10,10 +10,10 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { CappedScaleText, TabBarIcon } from './TabBarIcon';
+import { FixedScaleText, TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 import { MiniAppContext } from '../../Context';
-import { Colors } from '../../Consts';
+import { Colors, Spacing } from '../../Consts';
 import { TabBarMetrics, TabBarMotion } from './metrics';
 
 type IconRenderer = (props: {
@@ -98,7 +98,7 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
         />
       </View>
       {!hideLabel &&
-        (fixedFontScale ? <CappedScaleText>{text}</CappedScaleText> : text)}
+        (fixedFontScale ? <FixedScaleText>{text}</FixedScaleText> : text)}
     </>
   );
 };
@@ -147,7 +147,7 @@ const styles = StyleSheet.create({
     minWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: TabBarMetrics.itemIconLabelGap,
+    gap: Spacing.XXS,
   },
   slot: {
     height: TabBarMetrics.indicatorHeight,
@@ -166,11 +166,6 @@ const styles = StyleSheet.create({
   },
   labelBox: {
     alignSelf: 'stretch',
-    // fixed to the design line height so a capped-scale label overflows downward and the
-    // icon above it stays put
-    height: TabBarMetrics.labelHeight,
-    justifyContent: 'flex-start',
-    overflow: 'visible',
   },
   label: {
     textAlign: 'center',

package/Application/BottomTab/DuoRailTabBar.tsx

@@ -13,7 +13,7 @@ import { TabItemContent } from './CustomBottomTabItem';
 import { CurvedContainer } from './CurvedContainer';
 import { TabBarMetrics } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { CappedScaleText } from './TabBarIcon';
+import { FixedScaleText } from './TabBarIcon';
 import { usePressLift } from './usePressLift';
 import { ActiveIndicator } from './ActiveIndicator';
 import {
@@ -116,7 +116,7 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
         <CtaIcon icon={floatingButton.icon} />
       </Animated.View>
       <View style={styles.railCtaLabel}>
-        <CappedScaleText>
+        <FixedScaleText>
           <Text
             numberOfLines={1}
             typography={'label_xs_medium'}
@@ -124,7 +124,7 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
           >
             {floatingButton.label}
           </Text>
-        </CappedScaleText>
+        </FixedScaleText>
         {floatingButton.labelContent && (
           <View pointerEvents={'none'} style={styles.railCtaLabelOverlay}>
             {floatingButton.labelContent}

package/Application/BottomTab/DuoTabBar.tsx

@@ -3,11 +3,7 @@ import React from 'react';
 import { useWindowDimensions, View } from 'react-native';
 import { useScreenLayout } from '../../Layout/utils';
 import { FloatingButtonProps } from '../types';
-import {
-  getSystemIndicatorHeight,
-  hasCenterAction,
-  HorizontalTabBar,
-} from './BottomTabBar';
+import { getSystemIndicatorHeight, HorizontalTabBar } from './BottomTabBar';
 import { getHorizontalBarWidth, TabBarMetrics } from './metrics';
 import { getTabItems } from './tabItems';
 import { DuoRailTabBar } from './DuoRailTabBar';
@@ -38,7 +34,6 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
   const { insets } = useScreenLayout();
   const { width, height } = useWindowDimensions();
   const { floatingButton, activeTintColor, inactiveTintColor } = props;
-  const tabItems = getTabItems(props);
 
   return (
     <View
@@ -50,15 +45,8 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
     >
       <HorizontalTabBar
         fixedFontScale
-        items={tabItems}
-        width={getHorizontalBarWidth(
-          width,
-          height,
-          insets.left,
-          insets.right,
-          tabItems.length,
-          hasCenterAction(floatingButton, tabItems.length),
-        )}
+        items={getTabItems(props)}
+        width={getHorizontalBarWidth(width, height, insets.left, insets.right)}
         floatingButton={floatingButton}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}

package/Application/BottomTab/TabBarIcon.tsx

@@ -71,30 +71,6 @@ export const FixedScaleText: React.FC<{ children: React.ReactNode }> = ({
   );
 };
 
-// the tab labels follow the OS/host font scale but never grow past this, so the fixed-height
-// container and the notch stay aligned
-const TAB_LABEL_MAX_SCALE = 1.2;
-
-/**
- * caps the label scale at `TAB_LABEL_MAX_SCALE`: it keeps following the host/OS font scale but
- * stops growing past 1.2× so it fits the fixed bar geometry
- */
-export const CappedScaleText: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const context = useContext<any>(MiniAppContext);
-  return (
-    <MiniAppContext.Provider
-      value={{
-        ...context,
-        fontScale: { ...context?.fontScale, maxScaleRate: TAB_LABEL_MAX_SCALE },
-      }}
-    >
-      {children}
-    </MiniAppContext.Provider>
-  );
-};
-
 /**
  * numbers use the error color, text the warning color (Figma Badge round numeric / text)
  */

package/Application/BottomTab/metrics.ts

@@ -9,36 +9,23 @@ import { Colors, Radius, Spacing } from '../../Consts';
  * - vertical: iPhone Duo rail, center action under the container
  */
 const TabBarMetrics = {
-  height: 60,
+  height: 68,
   margin: Spacing.S,
-  paddingVertical: Spacing.XS,
+  paddingVertical: Spacing.S,
   paddingHorizontal: Spacing.M,
-  itemGap: 1,
-  // gap between the icon slot and the label inside a tab (Figma: none)
-  itemIconLabelGap: 0,
-  // .Nav/Background: no backdrop blur, so use the Figma Blur=Off spec (opacity 95%, no blur) plus the 1px
-  // border — nearly solid, matching the frosted sample; surface keeps dark-mode support
-  backgroundOpacity: 0.95,
-  // white 60% hairline around the center action button (Figma Icon Button border)
-  ctaBorderOpacity: 0.6,
+  itemGap: Spacing.XS,
   iconSize: 24,
   // active indicator behind the icon: 24 icon + XS·M padding
   indicatorPaddingVertical: Spacing.XS,
   indicatorPaddingHorizontal: Spacing.M,
   indicatorRadius: Radius.XL,
   indicatorHeight: 32,
-  // label_s_medium line height: the label box keeps this height so a scaled label grows
-  // downward instead of pushing the icon up
-  labelHeight: 18,
   // home indicator / gesture bar area under the container
   systemIndicatorHeight: 24,
   // unfolded foldables (short side from 600, the smallest in the spec) use 65% of the short
   // side, centered; phones and folded outer displays fill the window
   foldableMinShortSide: 600,
   foldableWidthRatio: 0.65,
-  // a 2-tab bar doesn't stretch to the full width: each item is this fixed width and the bar is
-  // sized to its content, centered (Figma Navigation · 2 Tab: item 100, bar ~225)
-  twoTabItemWidth: 100,
   ctaSlotWidth: 92,
   ctaSize: 48,
   // the icon sits 10 inside the 48 button (prototype .cta: 28 icon), 12 inside the 52 rail one
@@ -149,17 +136,7 @@ const getHorizontalBarWidth = (
   height: number,
   insetLeft: number,
   insetRight: number,
-  itemCount: number,
-  hasCta: boolean,
 ) => {
-  // 2 tabs (no center action) stay content-sized and centered instead of filling the window
-  if (itemCount === 2 && !hasCta) {
-    return (
-      TabBarMetrics.twoTabItemWidth * 2 +
-      TabBarMetrics.paddingHorizontal * 2 +
-      TabBarMetrics.itemGap
-    );
-  }
   const shortSide = Math.min(width, height);
   if (shortSide >= TabBarMetrics.foldableMinShortSide) {
     return shortSide * TabBarMetrics.foldableWidthRatio;

package/Application/KitAdoption/AdoptionBadge.tsx

@@ -0,0 +1,119 @@
+import React, { useState, useSyncExternalStore } from 'react';
+import { Share, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Colors, Spacing } from '../../Consts';
+import { Text } from '../../Text';
+import { adoptionStore } from './AdoptionStore';
+import { styles } from './styles';
+import type { ScreenSnapshot } from './types';
+
+/** Subscribes a React listener to the adoption store. Stable identity for useSyncExternalStore. */
+const subscribeToStore = (listener: () => void): (() => void) =>
+  adoptionStore.subscribe(listener);
+
+const getLatestSnapshot = (): ScreenSnapshot | undefined =>
+  adoptionStore.getLatest();
+
+const getScreenCount = (): number => adoptionStore.getAll().length;
+
+/** Share of classified nodes that are app-authored kit: K / (K + R + O). */
+const getAdoptionRate = (snapshot: ScreenSnapshot): number => {
+  const { K, R, O } = snapshot.counts;
+  const total = K + R + O;
+  return total === 0 ? 0 : K / total;
+};
+
+const formatSummary = (snapshot: ScreenSnapshot | undefined): string => {
+  if (!snapshot) return 'Kit adoption: chưa có dữ liệu';
+  const { K, R, O } = snapshot.counts;
+  const percent = Math.round(getAdoptionRate(snapshot) * 100);
+  return `Kit ${percent}% · K${K} R${R} O${O}`;
+};
+
+const handleRemeasure = (): void => {
+  adoptionStore.remeasureActive();
+};
+
+const handleShare = (): void => {
+  Share.share({ message: JSON.stringify(adoptionStore.getAll()) }).catch(
+    () => undefined,
+  );
+};
+
+const handleClear = (): void => {
+  adoptionStore.clear();
+};
+
+/**
+ * Dev-only floating badge showing the latest screen's kit adoption. Tap to
+ * expand actions (re-measure, share JSON, clear). Renders nothing in release builds.
+ */
+const AdoptionBadge: React.FC = () => {
+  const insets = useSafeAreaInsets();
+  const [isExpanded, setExpanded] = useState(false);
+  const latest = useSyncExternalStore(subscribeToStore, getLatestSnapshot);
+  const screenCount = useSyncExternalStore(subscribeToStore, getScreenCount);
+
+  if (!__DEV__) return null;
+
+  const handleToggle = (): void => setExpanded(prev => !prev);
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[styles.wrapper, { top: insets.top + Spacing.S }]}
+    >
+      <TouchableOpacity
+        accessibilityRole="button"
+        onPress={handleToggle}
+        style={styles.badge}
+      >
+        <Text typography="label_xs_medium" color={Colors.black_01}>
+          {formatSummary(latest)}
+        </Text>
+        {latest ? (
+          <Text typography="description_xs_regular" color={Colors.black_01}>
+            {latest.screen_name}
+          </Text>
+        ) : null}
+      </TouchableOpacity>
+      {isExpanded ? (
+        <View style={styles.panel}>
+          <Text typography="label_xs_medium" color={Colors.black_17}>
+            {`Đã đo ${screenCount} màn hình`}
+          </Text>
+          <TouchableOpacity
+            accessibilityRole="button"
+            onPress={handleRemeasure}
+            style={styles.action}
+          >
+            <Text typography="label_xs_medium" color={Colors.blue_03}>
+              Đo lại
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            accessibilityRole="button"
+            onPress={handleShare}
+            style={styles.action}
+          >
+            <Text typography="label_xs_medium" color={Colors.blue_03}>
+              Share JSON
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            accessibilityRole="button"
+            onPress={handleClear}
+            style={styles.actionOutline}
+          >
+            <Text typography="label_xs_medium" color={Colors.black_17}>
+              Xoá
+            </Text>
+          </TouchableOpacity>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+export { AdoptionBadge };

package/Application/KitAdoption/AdoptionProbe.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { InteractionManager, Platform } from 'react-native';
+
+import { MiniAppContext } from '../../Context';
+import { adoptionStore } from './AdoptionStore';
+import { SETTLE_MS } from './constants';
+import type {
+  FiberLike,
+  KitRegistries,
+  ScreenSnapshot,
+  WalkResult,
+} from './types';
+import {
+  createRegistries,
+  getAppId,
+  getCurrentFiber,
+  walkScreen,
+} from './utils';
+
+type NavigationLike = {
+  addListener?: (event: string, callback: () => void) => () => void;
+};
+
+type ProbeProps = {
+  screenName: string;
+  navigation?: NavigationLike;
+  children: React.ReactNode;
+};
+
+let registriesCache: KitRegistries | undefined;
+
+/**
+ * Kit and RN identity sets, built on first use. Lazy require breaks the cycle
+ * between the foundation index and the Application screens that render this probe.
+ */
+const getRegistries = (): KitRegistries => {
+  if (!registriesCache) {
+    const kitModule = require('../../index') as Record<string, unknown>;
+    const rnModule = require('react-native') as Record<string, unknown>;
+    registriesCache = createRegistries([kitModule], rnModule);
+  }
+  return registriesCache;
+};
+
+/** Foundation version from its package.json, or undefined if it cannot be read. */
+const readFoundationVersion = (): string | undefined => {
+  try {
+    const pkg = require('../../package.json') as { version?: string };
+    return pkg.version;
+  } catch {
+    return undefined;
+  }
+};
+
+const createErrorResult = (): WalkResult => ({
+  counts: { K: 0, R: 0, O: 0 },
+  kit: {},
+  rn: {},
+  other: {},
+  top_transparent: [],
+  fibers: 0,
+  truncated: false,
+  status: 'error',
+});
+
+/** Stops the walk at nested probes so each screen is measured on its own. */
+const isProbeFiber = (fiber: FiberLike): boolean =>
+  fiber.type === AdoptionProbeDev;
+
+/** Passes children through with no measurement. Used in release builds. */
+const PassThrough = (props: ProbeProps): React.JSX.Element => (
+  <>{props.children}</>
+);
+
+/**
+ * Dev-only wrapper around a screen. Measures the screen's fiber tree after
+ * the first interactions settle, and again on focus. Release builds use PassThrough.
+ */
+class AdoptionProbeDev extends React.Component<ProbeProps> {
+  static contextType = MiniAppContext;
+
+  private timer: ReturnType<typeof setTimeout> | undefined;
+  private interaction: { cancel: () => void } | undefined;
+  private unsubscribeFocus: (() => void) | undefined;
+
+  componentDidMount(): void {
+    adoptionStore.setActive(this.measure);
+    this.unsubscribeFocus = this.props.navigation?.addListener?.(
+      'focus',
+      this.handleFocus,
+    );
+    this.interaction = InteractionManager.runAfterInteractions(() => {
+      this.timer = setTimeout(this.measure, SETTLE_MS);
+    });
+  }
+
+  componentWillUnmount(): void {
+    if (this.timer !== undefined) clearTimeout(this.timer);
+    this.interaction?.cancel();
+    this.unsubscribeFocus?.();
+    adoptionStore.clearActive(this.measure);
+  }
+
+  render(): React.ReactNode {
+    return this.props.children;
+  }
+
+  private handleFocus = (): void => {
+    adoptionStore.setActive(this.measure);
+  };
+
+  private measure = (): void => {
+    const startedAt = Date.now();
+    let result: WalkResult;
+    try {
+      const self = getCurrentFiber(
+        (this as unknown as { _reactInternals: FiberLike })._reactInternals,
+      );
+      const root = self.child;
+      if (!root) return;
+      result = walkScreen(root, getRegistries(), isProbeFiber);
+    } catch {
+      result = createErrorResult();
+    }
+    this.save(result, startedAt);
+  };
+
+  private save(result: WalkResult, startedAt: number): void {
+    const snapshot: ScreenSnapshot = {
+      ...result,
+      app_id: getAppId(this.context),
+      screen_name: this.props.screenName,
+      foundation_version: readFoundationVersion(),
+      platform: Platform.OS,
+      ts: Date.now(),
+      walk_ms: Date.now() - startedAt,
+    };
+    adoptionStore.save(snapshot);
+  }
+}
+
+const AdoptionProbe = __DEV__ ? AdoptionProbeDev : PassThrough;
+
+export type { NavigationLike, ProbeProps };
+export { AdoptionProbe, AdoptionProbeDev };

package/Application/KitAdoption/AdoptionStore.ts

@@ -0,0 +1,80 @@
+import type { ScreenSnapshot } from './types';
+
+type Listener = () => void;
+type Measure = () => void;
+
+/** Total classified nodes in a snapshot, used to keep the richer measurement. */
+const getTotal = (snapshot: ScreenSnapshot): number =>
+  snapshot.counts.K + snapshot.counts.R + snapshot.counts.O;
+
+const getKey = (snapshot: ScreenSnapshot): string =>
+  `${snapshot.app_id}/${snapshot.screen_name}`;
+
+/**
+ * In-memory, dev-only store of per-screen snapshots. Keeps one snapshot per
+ * app and screen (the one with the most nodes) and holds the active measurer.
+ */
+class AdoptionStore {
+  private snapshots = new Map<string, ScreenSnapshot>();
+  private listeners = new Set<Listener>();
+  private latestKey: string | undefined;
+  private activeMeasure: Measure | undefined;
+
+  /** Stores a snapshot unless the stored one for the same screen is larger. */
+  save(snapshot: ScreenSnapshot): void {
+    const key = getKey(snapshot);
+    const existing = this.snapshots.get(key);
+    if (!existing || getTotal(existing) <= getTotal(snapshot)) {
+      this.snapshots.set(key, snapshot);
+    }
+    this.latestKey = key;
+    this.notify();
+  }
+
+  getAll(): ScreenSnapshot[] {
+    return Array.from(this.snapshots.values());
+  }
+
+  /** The screen saved most recently, or undefined when nothing is saved. */
+  getLatest(): ScreenSnapshot | undefined {
+    return this.latestKey === undefined
+      ? undefined
+      : this.snapshots.get(this.latestKey);
+  }
+
+  clear(): void {
+    this.snapshots.clear();
+    this.latestKey = undefined;
+    this.notify();
+  }
+
+  /** Registers a change listener and returns its unsubscribe function. */
+  subscribe(listener: Listener): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  setActive(measure: Measure): void {
+    this.activeMeasure = measure;
+  }
+
+  /** Clears the active measurer only if it is still the given one. */
+  clearActive(measure: Measure): void {
+    if (this.activeMeasure === measure) this.activeMeasure = undefined;
+  }
+
+  remeasureActive(): void {
+    this.activeMeasure?.();
+  }
+
+  private notify(): void {
+    this.listeners.forEach(listener => listener());
+  }
+}
+
+const adoptionStore = new AdoptionStore();
+
+export type { Listener, Measure };
+export { AdoptionStore, adoptionStore };