@unif/react-native-design 0.20.0 → 0.21.0

package/src/theme/useThemedStyles.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 import type { ColorTokens } from './colors';
+import { normalizeFontScale, scaleFontMetric } from './fontScale';
 import type { ShadowTokens } from './shadow';
 import { useTheme } from './useTheme';
 
@@ -27,12 +28,14 @@ function scaleTextStyle(style: TextStyle, factor: number): TextStyle {
   }
   return {
     ...style,
-    ...(typeof fontSize === 'number' ? { fontSize: fontSize * factor } : null),
+    ...(typeof fontSize === 'number'
+      ? { fontSize: scaleFontMetric(fontSize, factor) }
+      : null),
     ...(typeof lineHeight === 'number'
-      ? { lineHeight: lineHeight * factor }
+      ? { lineHeight: scaleFontMetric(lineHeight, factor) }
       : null),
     ...(typeof letterSpacing === 'number'
-      ? { letterSpacing: letterSpacing * factor }
+      ? { letterSpacing: scaleFontMetric(letterSpacing, factor) }
       : null),
   };
 }
@@ -42,9 +45,10 @@ function scaleTextStyle(style: TextStyle, factor: number): TextStyle {
  *  导出仅供单测,不进 barrel。 */
 export function scaleNamedStyles<S extends NamedStyles<S>>(
   styles: S,
-  factor: number
+  factor: unknown
 ): S {
-  if (factor === 1) return styles;
+  const fontScale = normalizeFontScale(factor);
+  if (fontScale === 1) return styles;
   const out: Record<string, ViewStyle | TextStyle | ImageStyle> = {};
   for (const [key, style] of Object.entries(
     styles as Record<string, ViewStyle | TextStyle | ImageStyle>
@@ -52,7 +56,7 @@ export function scaleNamedStyles<S extends NamedStyles<S>>(
     // ViewStyle / ImageStyle 无字号三属性,按 TextStyle 探测后恒等返回原引用。
     out[key] =
       style && typeof style === 'object'
-        ? scaleTextStyle(style as TextStyle, factor)
+        ? scaleTextStyle(style as TextStyle, fontScale)
         : style;
   }
   return out as S;
@@ -70,7 +74,8 @@ export function scaleNamedStyles<S extends NamedStyles<S>>(
 export function useThemedStyles<S extends NamedStyles<S>>(
   maker: StylesMaker<S>
 ): S {
-  const { colors, shadow, fontScale } = useTheme();
+  const { colors, shadow, fontScale: rawFontScale } = useTheme();
+  const fontScale = normalizeFontScale(rawFontScale);
   return useMemo(
     () => scaleNamedStyles(maker(colors, shadow), fontScale),
     [colors, shadow, fontScale, maker]

package/src/utils/imageSource.ts

@@ -0,0 +1,303 @@
+import type { ImageSourcePropType } from 'react-native';
+
+interface SnapshotObject {
+  readonly [key: string]: SnapshotValue;
+}
+
+interface SnapshotArray extends ReadonlyArray<SnapshotValue> {}
+
+type SnapshotValue =
+  | undefined
+  | null
+  | string
+  | number
+  | boolean
+  | SnapshotObject
+  | SnapshotArray;
+
+type SnapshotResult =
+  | {
+      valid: true;
+      snapshot: SnapshotValue;
+      canonical: string;
+    }
+  | {
+      valid: false;
+      canonical: string;
+    };
+
+type ResolvedImageSource = Readonly<{
+  source: ImageSourcePropType;
+  key: string;
+}>;
+
+const hasOwn = (value: object, key: PropertyKey): boolean =>
+  Object.prototype.hasOwnProperty.call(value, key);
+
+function valid(snapshot: SnapshotValue, canonical: string): SnapshotResult {
+  return { valid: true, snapshot, canonical };
+}
+
+function invalid(kind: string): SnapshotResult {
+  return { valid: false, canonical: `invalid:${kind}` };
+}
+
+function visitArray(
+  value: object,
+  keys: readonly string[],
+  seen: WeakSet<object>
+): SnapshotResult {
+  if (!keys.includes('length')) return invalid('descriptor');
+
+  const lengthDescriptor = Reflect.getOwnPropertyDescriptor(value, 'length');
+  if (
+    lengthDescriptor === undefined ||
+    lengthDescriptor.enumerable ||
+    !hasOwn(lengthDescriptor, 'value') ||
+    typeof lengthDescriptor.value !== 'number' ||
+    !Number.isInteger(lengthDescriptor.value) ||
+    lengthDescriptor.value < 0
+  ) {
+    return invalid('descriptor');
+  }
+
+  const length = lengthDescriptor.value;
+  if (keys.length !== length + 1) return invalid('descriptor');
+
+  const keySet = new Set(keys);
+  const parts: string[] = [];
+  const snapshot: SnapshotValue[] = [];
+  let allValid = true;
+
+  for (let index = 0; index < length; index += 1) {
+    const key = String(index);
+    if (!keySet.has(key)) return invalid('descriptor');
+
+    const descriptor = Reflect.getOwnPropertyDescriptor(value, key);
+    if (
+      descriptor === undefined ||
+      !descriptor.enumerable ||
+      !hasOwn(descriptor, 'value')
+    ) {
+      return invalid('descriptor');
+    }
+
+    const item = visit(descriptor.value, seen);
+    parts.push(item.canonical);
+    if (item.valid) {
+      snapshot.push(item.snapshot);
+    } else {
+      allValid = false;
+    }
+  }
+
+  const canonical = `array:[${parts.join(',')}]`;
+  return allValid
+    ? valid(Object.freeze(snapshot), canonical)
+    : { valid: false, canonical };
+}
+
+function visitObject(
+  value: object,
+  keys: readonly string[],
+  seen: WeakSet<object>
+): SnapshotResult {
+  const snapshot: Record<string, SnapshotValue> = {};
+  const parts: string[] = [];
+  let allValid = true;
+
+  for (const key of [...keys].sort()) {
+    const descriptor = Reflect.getOwnPropertyDescriptor(value, key);
+    if (descriptor === undefined) return invalid('descriptor');
+    if (!descriptor.enumerable) return invalid('non-enumerable');
+    if (!hasOwn(descriptor, 'value')) return invalid('accessor');
+
+    const item = visit(descriptor.value, seen);
+    parts.push(`${JSON.stringify(key)}:${item.canonical}`);
+    if (item.valid) {
+      Object.defineProperty(snapshot, key, {
+        configurable: false,
+        enumerable: true,
+        value: item.snapshot,
+        writable: false,
+      });
+    } else {
+      allValid = false;
+    }
+  }
+
+  const canonical = `object:{${parts.join(',')}}`;
+  return allValid
+    ? valid(Object.freeze(snapshot), canonical)
+    : { valid: false, canonical };
+}
+
+/**
+ * 只从 own data descriptor 读取一次，绝不执行 getter。snapshot 与 canonical
+ * key 因而来自同一份值；任何 descriptor / Proxy 异常都失败关闭。
+ */
+function visit(value: unknown, seen: WeakSet<object>): SnapshotResult {
+  if (value === undefined) return valid(undefined, 'undefined:');
+  if (value === null) return valid(null, 'null:');
+
+  switch (typeof value) {
+    case 'string':
+      return valid(value, `string:${JSON.stringify(value)}`);
+    case 'number':
+      return Number.isFinite(value)
+        ? valid(value, `number:${value}`)
+        : invalid('number');
+    case 'boolean':
+      return valid(value, `boolean:${String(value)}`);
+    case 'function':
+    case 'symbol':
+    case 'bigint':
+      return invalid(typeof value);
+    case 'object':
+      break;
+    case 'undefined':
+      return valid(undefined, 'undefined:');
+  }
+
+  try {
+    if (seen.has(value)) return invalid('cycle');
+
+    const isArray = Array.isArray(value);
+    const ownKeys = Reflect.ownKeys(value);
+    const keys: string[] = [];
+    for (const key of ownKeys) {
+      if (typeof key === 'symbol') return invalid('symbol-key');
+      keys.push(key);
+    }
+
+    seen.add(value);
+    try {
+      return isArray
+        ? visitArray(value, keys, seen)
+        : visitObject(value, keys, seen);
+    } finally {
+      seen.delete(value);
+    }
+  } catch {
+    return invalid('exception');
+  }
+}
+
+function snapshotValue(value: unknown): SnapshotResult {
+  try {
+    return visit(value, new WeakSet<object>());
+  } catch {
+    return invalid('exception');
+  }
+}
+
+export function canonicalSourceValue(value: unknown): string {
+  return snapshotValue(value).canonical;
+}
+
+const URI_STRING_FIELDS = ['bundle', 'method', 'body'] as const;
+const CACHE_POLICIES = new Set([
+  'default',
+  'reload',
+  'force-cache',
+  'only-if-cached',
+]);
+
+function isSnapshotObject(value: SnapshotValue): value is SnapshotObject {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function isValidHeaders(value: SnapshotValue): boolean {
+  if (value === undefined) return true;
+  if (!isSnapshotObject(value)) return false;
+  return Object.keys(value).every((key) => typeof value[key] === 'string');
+}
+
+function isValidUriSource(value: SnapshotValue): boolean {
+  if (!isSnapshotObject(value) || !hasOwn(value, 'uri')) return false;
+
+  const uri = value.uri;
+  if (typeof uri !== 'string' || uri.trim().length === 0) return false;
+
+  for (const field of URI_STRING_FIELDS) {
+    const fieldValue = value[field];
+    if (fieldValue !== undefined && typeof fieldValue !== 'string') {
+      return false;
+    }
+  }
+
+  if (!isValidHeaders(value.headers)) return false;
+
+  const cache = value.cache;
+  if (cache !== undefined && !CACHE_POLICIES.has(cache as string)) return false;
+
+  for (const field of ['width', 'height', 'scale'] as const) {
+    const fieldValue = value[field];
+    if (
+      fieldValue !== undefined &&
+      (typeof fieldValue !== 'number' || !Number.isFinite(fieldValue))
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function asImageSource(
+  snapshot: SnapshotValue
+): ImageSourcePropType | undefined {
+  if (typeof snapshot === 'number') {
+    return Number.isFinite(snapshot) &&
+      snapshot > 0 &&
+      Number.isInteger(snapshot)
+      ? snapshot
+      : undefined;
+  }
+
+  if (Array.isArray(snapshot)) {
+    return snapshot.length > 0 && snapshot.every(isValidUriSource)
+      ? (snapshot as ImageSourcePropType)
+      : undefined;
+  }
+
+  return isValidUriSource(snapshot)
+    ? (snapshot as ImageSourcePropType)
+    : undefined;
+}
+
+/**
+ * 组件唯一入口：一次读取完成 runtime validation、deep-frozen plain snapshot
+ * 与 semantic key。调用方必须把同一返回值里的 source / key 一起交给 attempt。
+ */
+export function resolveImageSource(
+  source: unknown
+): ResolvedImageSource | undefined {
+  const result = snapshotValue(source);
+  if (!result.valid) return undefined;
+
+  const snapshot = asImageSource(result.snapshot);
+  if (snapshot === undefined) return undefined;
+
+  return Object.freeze({
+    source: snapshot,
+    key: `image-source:${result.canonical}`,
+  });
+}
+
+export function imageSourceKey(
+  source: ImageSourcePropType | undefined
+): string {
+  return `image-source:${snapshotValue(source).canonical}`;
+}
+
+/**
+ * JS 消费者可能绕过类型系统。只有能安全 snapshot 的 asset id、URI object 或
+ * URI object 数组能进入 Image；accessor、异常 descriptor 与非法 nested value
+ * 一律失败关闭。
+ */
+export function isValidImageSource(
+  source: unknown
+): source is ImageSourcePropType {
+  return resolveImageSource(source) !== undefined;
+}

package/lib/module/components/ui/PasswordInput/styles.js

@@ -1,12 +0,0 @@
-"use strict";
-
-import { StyleSheet } from 'react-native';
-import { space } from "../../../theme/index.js";
-
-/** eye Pressable hit area 微间距 4px。 */
-export const styles = StyleSheet.create({
-  eyeBtn: {
-    paddingHorizontal: space['1']
-  }
-});
-//# sourceMappingURL=styles.js.map

package/lib/module/components/ui/PasswordInput/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["StyleSheet","space","styles","create","eyeBtn","paddingHorizontal"],"sourceRoot":"../../../../../src","sources":["components/ui/PasswordInput/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,KAAK,QAAQ,yBAAgB;;AAEtC;AACA,OAAO,MAAMC,MAAM,GAAGF,UAAU,CAACG,MAAM,CAAC;EACtCC,MAAM,EAAE;IAAEC,iBAAiB,EAAEJ,KAAK,CAAC,GAAG;EAAE;AAC1C,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/ui/Pulse/usePulse.web.js

@@ -1,76 +0,0 @@
-"use strict";
-
-import { useEffect, useState } from 'react';
-import { usePrefersReducedMotion } from "../../../theme/index.js";
-/**
- * Web 端 usePulse —— RN-Web 上 reanimated 4 + worklets 0.9.x 的 useAnimatedStyle
- * 链路会抛 `Object.keys(undefined)` TypeError(animation frame 每帧打印),pulse 卡死
- * 在初始值。
- *
- * native 端走 usePulse.ts(reanimated worklet) 不动。
- *
- * [M-19] 实现方案 —— CSS transition 降级(零 rAF JS 帧):
- *   rnw 0.21 的 animationKeyframes 字段类型侧尚未稳定暴露;
- *   且 <style> 注入在 Spinner.web.tsx 已有安全注释(不拼外部输入)——为保持
- *   一致性,Pulse 侧不再注入第二处 <style> 标签,故采用 CSS transition 降级:
- *
- *   - 返回 { opacity, transition } 作为 RN style(RN-Web 把 transition 透传 DOM)
- *   - setInterval 每隔 `duration` ms 在 from/to 两档切换 opacity ——
- *     setState 频率从原来的 ~60fps 降到 1 次/duration ms(参 ToastHost.web.tsx)
- *   - CSS transition 负责两档之间的视觉补间,JS 侧零插值
- *   - reduce-motion:静止于 `to`(完全显示),骨架/圆点静态呈现
- */
-export function usePulse({
-  from = 0.6,
-  to = 1,
-  duration = 700,
-  delay = 0
-} = {}) {
-  const reduced = usePrefersReducedMotion();
-  const [opacity, setOpacity] = useState(from);
-  useEffect(() => {
-    // reduce-motion:不脉冲,直接停在完全显示(to),骨架/圆点静态呈现。
-    if (reduced) {
-      setOpacity(to);
-      return;
-    }
-
-    // CSS transition 模式:setInterval 只负责在 from/to 两档翻转(1 次/duration ms),
-    // 浏览器 CSS transition 负责补间 —— 与原方案 rAF 每帧 setState 相比
-    // setState 频率从 ~60fps 降到 1/(duration/1000) fps,无 JS 插值开销。
-    let timer = null;
-    let current = from;
-    const start = () => {
-      timer = setInterval(() => {
-        current = current === from ? to : from;
-        setOpacity(current);
-      }, duration);
-    };
-    if (delay > 0) {
-      const delayTimer = setTimeout(start, delay);
-      return () => {
-        clearTimeout(delayTimer);
-        if (timer != null) clearInterval(timer);
-      };
-    }
-    start();
-    return () => {
-      if (timer != null) clearInterval(timer);
-    };
-  }, [from, to, duration, delay, reduced]);
-  if (reduced) {
-    return {
-      opacity: to
-    };
-  }
-
-  // RN-Web 把 transition 字段透传到 DOM style,实现 CSS 级平滑过渡。
-  // RN style typedef 无 transition 字段,cast any 绕过 TS strict
-  // (实际只在 web bundle 命中,DOM div 原样接受该字段)。
-
-  return {
-    opacity,
-    transition: `opacity ${duration}ms ease-in-out`
-  };
-}
-//# sourceMappingURL=usePulse.web.js.map

package/lib/module/components/ui/Pulse/usePulse.web.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","useState","usePrefersReducedMotion","usePulse","from","to","duration","delay","reduced","opacity","setOpacity","timer","current","start","setInterval","delayTimer","setTimeout","clearTimeout","clearInterval","transition"],"sourceRoot":"../../../../../src","sources":["components/ui/Pulse/usePulse.web.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,uBAAuB,QAAQ,yBAAgB;AAGxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAC;EACvBC,IAAI,GAAG,GAAG;EACVC,EAAE,GAAG,CAAC;EACNC,QAAQ,GAAG,GAAG;EACdC,KAAK,GAAG;AACI,CAAC,GAAG,CAAC,CAAC,EAAE;EACpB,MAAMC,OAAO,GAAGN,uBAAuB,CAAC,CAAC;EACzC,MAAM,CAACO,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAACG,IAAI,CAAC;EAE5CJ,SAAS,CAAC,MAAM;IACd;IACA,IAAIQ,OAAO,EAAE;MACXE,UAAU,CAACL,EAAE,CAAC;MACd;IACF;;IAEA;IACA;IACA;IACA,IAAIM,KAA4C,GAAG,IAAI;IACvD,IAAIC,OAAO,GAAGR,IAAI;IAElB,MAAMS,KAAK,GAAGA,CAAA,KAAM;MAClBF,KAAK,GAAGG,WAAW,CAAC,MAAM;QACxBF,OAAO,GAAGA,OAAO,KAAKR,IAAI,GAAGC,EAAE,GAAGD,IAAI;QACtCM,UAAU,CAACE,OAAO,CAAC;MACrB,CAAC,EAAEN,QAAQ,CAAC;IACd,CAAC;IAED,IAAIC,KAAK,GAAG,CAAC,EAAE;MACb,MAAMQ,UAAU,GAAGC,UAAU,CAACH,KAAK,EAAEN,KAAK,CAAC;MAC3C,OAAO,MAAM;QACXU,YAAY,CAACF,UAAU,CAAC;QACxB,IAAIJ,KAAK,IAAI,IAAI,EAAEO,aAAa,CAACP,KAAK,CAAC;MACzC,CAAC;IACH;IACAE,KAAK,CAAC,CAAC;IACP,OAAO,MAAM;MACX,IAAIF,KAAK,IAAI,IAAI,EAAEO,aAAa,CAACP,KAAK,CAAC;IACzC,CAAC;EACH,CAAC,EAAE,CAACP,IAAI,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,CAAC,CAAC;EAExC,IAAIA,OAAO,EAAE;IACX,OAAO;MAAEC,OAAO,EAAEJ;IAAG,CAAC;EACxB;;EAEA;EACA;EACA;;EAEA,OAAO;IAAEI,OAAO;IAAEU,UAAU,EAAE,WAAWb,QAAQ;EAAiB,CAAC;AACrE","ignoreList":[]}

package/lib/typescript/src/components/ui/PasswordInput/styles.d.ts

@@ -1,7 +0,0 @@
-/** eye Pressable hit area 微间距 4px。 */
-export declare const styles: Readonly<{
-    eyeBtn: {
-        paddingHorizontal: number;
-    };
-}>;
-//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/ui/PasswordInput/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/PasswordInput/styles.ts"],"names":[],"mappings":"AAGA,sCAAsC;AACtC,eAAO,MAAM,MAAM;;;;EAEjB,CAAC"}

package/lib/typescript/src/components/ui/Pulse/usePulse.web.d.ts

@@ -1,21 +0,0 @@
-import type { PulseOptions } from './types';
-/**
- * Web 端 usePulse —— RN-Web 上 reanimated 4 + worklets 0.9.x 的 useAnimatedStyle
- * 链路会抛 `Object.keys(undefined)` TypeError(animation frame 每帧打印),pulse 卡死
- * 在初始值。
- *
- * native 端走 usePulse.ts(reanimated worklet) 不动。
- *
- * [M-19] 实现方案 —— CSS transition 降级(零 rAF JS 帧):
- *   rnw 0.21 的 animationKeyframes 字段类型侧尚未稳定暴露;
- *   且 <style> 注入在 Spinner.web.tsx 已有安全注释(不拼外部输入)——为保持
- *   一致性,Pulse 侧不再注入第二处 <style> 标签,故采用 CSS transition 降级:
- *
- *   - 返回 { opacity, transition } 作为 RN style(RN-Web 把 transition 透传 DOM)
- *   - setInterval 每隔 `duration` ms 在 from/to 两档切换 opacity ——
- *     setState 频率从原来的 ~60fps 降到 1 次/duration ms(参 ToastHost.web.tsx)
- *   - CSS transition 负责两档之间的视觉补间,JS 侧零插值
- *   - reduce-motion:静止于 `to`(完全显示),骨架/圆点静态呈现
- */
-export declare function usePulse({ from, to, duration, delay, }?: PulseOptions): any;
-//# sourceMappingURL=usePulse.web.d.ts.map

package/lib/typescript/src/components/ui/Pulse/usePulse.web.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePulse.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Pulse/usePulse.web.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAU,EACV,EAAM,EACN,QAAc,EACd,KAAS,GACV,GAAE,YAAiB,OA8CnB"}

package/src/components/ui/PasswordInput/styles.ts

@@ -1,7 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { space } from '../../../theme';
-
-/** eye Pressable hit area 微间距 4px。 */
-export const styles = StyleSheet.create({
-  eyeBtn: { paddingHorizontal: space['1'] },
-});

package/src/components/ui/Pulse/usePulse.web.ts

@@ -1,74 +0,0 @@
-import { useEffect, useState } from 'react';
-import { usePrefersReducedMotion } from '../../../theme';
-import type { PulseOptions } from './types';
-
-/**
- * Web 端 usePulse —— RN-Web 上 reanimated 4 + worklets 0.9.x 的 useAnimatedStyle
- * 链路会抛 `Object.keys(undefined)` TypeError(animation frame 每帧打印),pulse 卡死
- * 在初始值。
- *
- * native 端走 usePulse.ts(reanimated worklet) 不动。
- *
- * [M-19] 实现方案 —— CSS transition 降级(零 rAF JS 帧):
- *   rnw 0.21 的 animationKeyframes 字段类型侧尚未稳定暴露;
- *   且 <style> 注入在 Spinner.web.tsx 已有安全注释(不拼外部输入)——为保持
- *   一致性,Pulse 侧不再注入第二处 <style> 标签,故采用 CSS transition 降级:
- *
- *   - 返回 { opacity, transition } 作为 RN style(RN-Web 把 transition 透传 DOM)
- *   - setInterval 每隔 `duration` ms 在 from/to 两档切换 opacity ——
- *     setState 频率从原来的 ~60fps 降到 1 次/duration ms(参 ToastHost.web.tsx)
- *   - CSS transition 负责两档之间的视觉补间,JS 侧零插值
- *   - reduce-motion:静止于 `to`(完全显示),骨架/圆点静态呈现
- */
-export function usePulse({
-  from = 0.6,
-  to = 1,
-  duration = 700,
-  delay = 0,
-}: PulseOptions = {}) {
-  const reduced = usePrefersReducedMotion();
-  const [opacity, setOpacity] = useState(from);
-
-  useEffect(() => {
-    // reduce-motion:不脉冲,直接停在完全显示(to),骨架/圆点静态呈现。
-    if (reduced) {
-      setOpacity(to);
-      return;
-    }
-
-    // CSS transition 模式:setInterval 只负责在 from/to 两档翻转(1 次/duration ms),
-    // 浏览器 CSS transition 负责补间 —— 与原方案 rAF 每帧 setState 相比
-    // setState 频率从 ~60fps 降到 1/(duration/1000) fps,无 JS 插值开销。
-    let timer: ReturnType<typeof setInterval> | null = null;
-    let current = from;
-
-    const start = () => {
-      timer = setInterval(() => {
-        current = current === from ? to : from;
-        setOpacity(current);
-      }, duration);
-    };
-
-    if (delay > 0) {
-      const delayTimer = setTimeout(start, delay);
-      return () => {
-        clearTimeout(delayTimer);
-        if (timer != null) clearInterval(timer);
-      };
-    }
-    start();
-    return () => {
-      if (timer != null) clearInterval(timer);
-    };
-  }, [from, to, duration, delay, reduced]);
-
-  if (reduced) {
-    return { opacity: to } as any;
-  }
-
-  // RN-Web 把 transition 字段透传到 DOM style,实现 CSS 级平滑过渡。
-  // RN style typedef 无 transition 字段,cast any 绕过 TS strict
-  // (实际只在 web bundle 命中,DOM div 原样接受该字段)。
-
-  return { opacity, transition: `opacity ${duration}ms ease-in-out` } as any;
-}