@unif/react-native-design 0.8.1 → 0.9.0

package/src/components/ui/Toast/ToastHost.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Text, View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, {
   cancelAnimation,
@@ -9,6 +9,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useColors, useThemedStyles, motion, space } from '../../../theme';
+import { childTestID } from '../../../utils/testID';
 import { dotColorFor, makeStyles } from './styles';
 import { _subs } from './toast';
 import type { Subscriber, ToastEntry, ToastHostProps } from './types';
@@ -42,8 +43,18 @@ export function ToastHost({
     };
   }, []);
 
+  // 退场完成只清「仍是自己」的 entry:withTiming 完成回调经 runOnJS 跨线程异步投递,
+  // 投递到执行之间若来了新 toast,无 id 守卫的 setEntry(null) 会把新 toast 瞬时清掉([M-14])。
+  const dismissIfCurrent = useCallback((id: number) => {
+    setEntry((cur) => (cur?.id === id ? null : cur));
+  }, []);
+
   useEffect(() => {
     if (!entry) return;
+    // [M-15] toast 出现时主动播报 —— 容器 pointerEvents="none" + 3s 自动消失,
+    // SR 用户对一闪而过的反馈本无任何感知通道。
+    AccessibilityInfo.announceForAccessibility(entry.message);
+    const id = entry.id;
     // 进入方向:top 从上(-8)滑入,bottom / center 从下(8)滑入
     const from = entry.position === 'top' ? -8 : 8;
     cancelAnimation(op);
@@ -56,7 +67,7 @@ export function ToastHost({
     dismissTimer.current = setTimeout(() => {
       op.value = withTiming(0, { duration: motion.base });
       ty.value = withTiming(from, { duration: motion.base }, (finished) => {
-        if (finished) runOnJS(setEntry)(null);
+        if (finished) runOnJS(dismissIfCurrent)(id);
       });
     }, entry.duration);
 
@@ -65,7 +76,7 @@ export function ToastHost({
       cancelAnimation(op);
       cancelAnimation(ty);
     };
-  }, [entry, op, ty]);
+  }, [entry, op, ty, dismissIfCurrent]);
 
   const animatedStyle = useAnimatedStyle(() => ({
     opacity: op.value,
@@ -90,10 +101,7 @@ export function ToastHost({
         {dotColor ? (
           <View style={[styles.dot, { backgroundColor: dotColor }]} />
         ) : null}
-        <Text
-          style={styles.text}
-          testID={testID ? `${testID}-text` : undefined}
-        >
+        <Text style={styles.text} testID={childTestID(testID, 'text')}>
           {entry.message}
         </Text>
       </Animated.View>

package/src/components/ui/Toast/ToastHost.web.tsx

@@ -1,6 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Text, View } from 'react-native';
-import { useColors, useThemedStyles, motion } from '../../../theme';
+import { AccessibilityInfo, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  motion,
+  space,
+  useColors,
+  usePrefersReducedMotion,
+  useThemedStyles,
+} from '../../../theme';
 import { dotColorFor, makeStyles } from './styles';
 import { _subs } from './toast';
 import type { Subscriber, ToastEntry, ToastHostProps } from './types';
@@ -20,6 +27,8 @@ export function ToastHost({
 }: ToastHostProps = {}): React.JSX.Element | null {
   const c = useColors();
   const styles = useThemedStyles(makeStyles);
+  const insets = useSafeAreaInsets();
+  const reduced = usePrefersReducedMotion();
   const [entry, setEntry] = useState<ToastEntry | null>(null);
   const [visible, setVisible] = useState(false);
   const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -39,6 +48,8 @@ export function ToastHost({
   useEffect(() => {
     // entry=null:上一轮 effect 的 cleanup 已清 timer/RAF,这里无需重复。
     if (!entry) return;
+    // [M-15] web 同样主动播报(RN-Web announceForAccessibility 注入 aria-live region)。
+    AccessibilityInfo.announceForAccessibility(entry.message);
 
     // cancelled 标志:entry 快速连续切换 / 组件卸载时,cleanup 置 true。RAF 与
     // timer 回调执行前都检查它 —— cancelAnimationFrame 在部分浏览器不保证取消
@@ -77,15 +88,26 @@ export function ToastHost({
 
   if (!entry) return null;
 
+  // 位置:top=顶部(safe-area + 间距)/ center=屏幕居中 / bottom=底部(默认),复刻 native 版。
+  // 此前 web 完全未注入定位,position 参数被静默忽略、垂直位置随挂载次序漂移([H-6])。
+  const posStyle =
+    entry.position === 'top'
+      ? { top: insets.top + space[10] }
+      : entry.position === 'center'
+        ? { top: 0, bottom: 0, justifyContent: 'center' as const }
+        : { bottom: insets.bottom + space[10] };
+
   const dotColor = dotColorFor(entry.kind, c);
   const animatedWebStyle: React.CSSProperties = {
     opacity: visible ? 1 : 0,
     transform: visible ? 'translateY(0px)' : 'translateY(8px)',
-    transition: `opacity ${motion.base}ms ease-out, transform ${motion.base}ms ease-out`,
+    transition: reduced
+      ? 'none'
+      : `opacity ${motion.base}ms ease-out, transform ${motion.base}ms ease-out`,
   };
 
   return (
-    <View style={styles.host} pointerEvents="none" testID={testID}>
+    <View style={[styles.host, posStyle]} pointerEvents="none" testID={testID}>
       <div style={animatedWebStyle}>
         <View style={styles.toast}>
           {dotColor ? (

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

@@ -14,6 +14,8 @@ export const makeStyles = (c: ColorTokens) =>
       // zIndex: toast 浮层 —— 盖在 Screen 内容之上(navigator / overlay 之下)。
       // 同级兄弟节点无 z 顺序需求,但作为 absolute 浮岛对其他屏内 absolute 节点
       // 需要显式 200 抢占,保留并锁数值。
+      // 注意:confirm() 的原生 Modal 是 window 级,永远盖在 toast 之上 —— confirm
+      // 打开期间到达的 toast 不可见,勿把 toast 当作 confirm 显示期间的反馈通道。
       zIndex: 200,
     },
     toast: {

package/src/components/ui/Toast/toast.ts

@@ -3,22 +3,55 @@
  *
  * 文件名故意小写 `toast.ts`,host 组件叫 `ToastHost.tsx`,避免 APFS 大小写冲突。
  */
+import { createLogger } from '../../../utils/logger';
 import type { Subscriber, ToastEntry, ToastInput, ToastKind } from './types';
 
+const log = createLogger('toast');
+
 let _id = 0;
 export const _subs = new Set<Subscriber>();
 
+const DEFAULT_DURATION = 3000;
+// [L-55] duration 合法域:[1, 2^31)。INT32_MAX = 2^31-1 = 2147483647,
+// setTimeout 内部用 int32 存储,超出会溢出变成 0 立即触发。
+const MAX_DURATION = 2147483647;
+
+/** [L-55] 钳制 duration 到 [1, 2^31),域外回落 DEFAULT_DURATION 并 dev warn。 */
+function clampDuration(raw: number | undefined): number {
+  if (raw == null) return DEFAULT_DURATION;
+  if (!Number.isFinite(raw) || raw < 1 || raw >= MAX_DURATION) {
+    log.warn(
+      `toast duration(${raw}) 超出合法域 [1, 2^31),已回落 ${DEFAULT_DURATION}ms。`
+    );
+    return DEFAULT_DURATION;
+  }
+  return Math.trunc(raw);
+}
+
 function emit(input: ToastInput, kind: ToastKind = 'info') {
   const entry: ToastEntry =
     typeof input === 'string'
-      ? { id: ++_id, message: input, kind, duration: 3000, position: 'bottom' }
+      ? {
+          id: ++_id,
+          message: input,
+          kind,
+          duration: DEFAULT_DURATION,
+          position: 'bottom',
+        }
       : {
           id: ++_id,
           message: input.message,
           kind: input.kind ?? kind,
-          duration: input.duration ?? 3000,
+          duration: clampDuration(input.duration),
           position: input.position ?? 'bottom',
         };
+  // 未挂 <ToastHost />:消息无人接收,告警提示集成漏挂(对照 confirm 重入告警的纪律)。
+  if (_subs.size === 0) {
+    log.warn(
+      'toast() 调用时未挂载 <ToastHost />,消息被丢弃。请在 app 根附近挂一次 <ToastHost />。'
+    );
+    return;
+  }
   _subs.forEach((s) => s(entry));
 }
 

package/src/components/ui/Toast/types.ts

@@ -23,7 +23,7 @@ export type ToastInput =
     };
 
 export type ToastEntry = {
-  /** 唯一 id（自增），用于动画切换识别 */
+  /** 唯一 id（自增）—— 退场守卫用:ToastHost 只清「仍是当前」的 toast,避免清掉竞态期到达的新 toast */
   id: number;
   /** 消息文本 */
   message: string;

package/src/components/ui/shared/badgeStyles.ts

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+import {
+  fw,
+  r,
+  radius,
+  space,
+  type as t,
+  type ColorTokens,
+} from '../../../theme';
+
+/**
+ * 角标样式工厂 —— Grid/TabBar 等组件图标右上角小红点共用。
+ * @param c   颜色 token
+ * @param top 角标纵向偏移(不同场景基点不同:Grid 图标 r(-6) / TabBar 图标 r(-3))
+ */
+export const badgeStyles = (c: ColorTokens, top: number) =>
+  StyleSheet.create({
+    badge: {
+      position: 'absolute',
+      top,
+      right: r(-10),
+      minWidth: r(16),
+      height: r(16),
+      borderRadius: radius.md,
+      backgroundColor: c.error,
+      paddingHorizontal: space[1],
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    badgeText: {
+      color: c.onError,
+      fontSize: t.nano,
+      fontWeight: fw.bold,
+      lineHeight: 12,
+    },
+  });

package/src/icons/data.ts

@@ -166,6 +166,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 16.3,
         r: 0.95,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -235,6 +236,7 @@ export const ICONS: Record<IconName, IconDef> = {
       {
         kind: 'path',
         d: 'M6 10v4M10 10v4M14 10v4M18 10v4',
+        opacity: 0.55,
       },
     ],
   },
@@ -252,6 +254,7 @@ export const ICONS: Record<IconName, IconDef> = {
       {
         kind: 'path',
         d: 'M8 10v4M12 10v4M16 10v4',
+        opacity: 0.55,
       },
     ],
   },
@@ -459,6 +462,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 13,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'circle',
@@ -466,6 +470,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 13,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'circle',
@@ -473,6 +478,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 13,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'circle',
@@ -480,6 +486,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 17,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'circle',
@@ -487,6 +494,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 17,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'circle',
@@ -494,6 +502,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 17,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -880,6 +889,7 @@ export const ICONS: Record<IconName, IconDef> = {
         kind: 'path',
         d: 'M8.8 11.4v1.2l3.4 1.3V10.1z',
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'path',
@@ -910,6 +920,7 @@ export const ICONS: Record<IconName, IconDef> = {
         kind: 'path',
         d: 'M12 8.5l1.2 2.42 2.68.39-1.94 1.89.46 2.67L12 14.61l-2.4 1.26.46-2.67L8.12 11.31l2.68-.39z',
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -983,6 +994,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 20,
         r: 0.7,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -1789,6 +1801,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 17.6,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'path',
@@ -1939,6 +1952,7 @@ export const ICONS: Record<IconName, IconDef> = {
         height: 8,
         rx: 2,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -1957,6 +1971,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 12,
         r: 6,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -2059,6 +2074,8 @@ export const ICONS: Record<IconName, IconDef> = {
         width: 12,
         height: 12,
         rx: 1.5,
+        fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -2091,6 +2108,7 @@ export const ICONS: Record<IconName, IconDef> = {
         kind: 'path',
         d: 'M19.2 2.5l.55 1.55 1.55.55-1.55.55-.55 1.55-.55-1.55-1.55-.55 1.55-.55z',
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -2175,6 +2193,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 16.5,
         r: 0.75,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -2274,6 +2293,14 @@ export const ICONS: Record<IconName, IconDef> = {
         kind: 'path',
         d: 'M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13',
       },
+      {
+        kind: 'path',
+        d: 'M10 11v6',
+      },
+      {
+        kind: 'path',
+        d: 'M14 11v6',
+      },
     ],
   },
   'undo': {

package/src/icons/types.ts

@@ -1,19 +1,34 @@
-/** 图标清单的稳定类型；path 数据由脚本生成。 */
+/** 图标清单的稳定类型;几何与样式数据由 scripts/build-icons.js 生成。 */
+
+/** 元素共享的可选样式属性(脚本从 svg 抽取,Icon 渲染端透传)。 */
+type IconElementStyle = {
+  /** `currentColor` → 渲染时换成主题 stroke 色;缺省则继承 Svg 根的 `fill="none"`。 */
+  readonly fill?: string;
+  /** 元素不透明度(svg `opacity`),用于次要笔画(如格线 .55)。 */
+  readonly opacity?: number;
+  /** `'none'` = 该元素不描边(纯 fill 的圆点/方块),覆盖 Svg 根的 stroke 继承。 */
+  readonly stroke?: 'none';
+};
+
+// readonly 防止消费端原地改 ICONS 的元素数据污染模块级单例。
 export type IconElement =
-  | { kind: 'path'; d: string; fill?: string }
-  | { kind: 'circle'; cx: number; cy: number; r: number; fill?: string }
-  | {
+  | (Readonly<{ kind: 'path'; d: string }> & IconElementStyle)
+  | (Readonly<{ kind: 'circle'; cx: number; cy: number; r: number }> &
+      IconElementStyle)
+  | (Readonly<{
       kind: 'rect';
       x: number;
       y: number;
       width: number;
       height: number;
+      // ry 未被 build-icons.js 抽取(脚本只取 rx),不在生成物中 —— 此处不声明,
+      // 保持类型与生成端契约一致,防渲染端出现永远不可达的 ry 分支。
       rx?: number;
-      ry?: number;
-      fill?: string;
-    };
+    }> &
+      IconElementStyle);
 
-export type IconDef = {
+export type IconDef = Readonly<{
   strokeWidth: number;
-  elements: IconElement[];
-};
+  // readonly 数组:防止消费端 push/splice ICONS 的 elements 污染单例。
+  elements: readonly IconElement[];
+}>;

package/src/theme/colors.ts

@@ -1,8 +1,12 @@
 // Role-based color tokens —— role 名固定,亮/暗主题切的是 role 指向哪个 hex。
 
+/** 品牌橙 hex —— 跨文件(colors 亮/暗 primary、glassActiveFg、avatarGradient、shadow BRAND)
+ *  共用同一来源,改品牌色只改这一处。 */
+export const BRAND_ORANGE = '#EB6E00';
+
 export const lightColors = {
   // Brand
-  primary: '#EB6E00',
+  primary: BRAND_ORANGE,
   primaryPressed: '#D06200',
   primaryContainer: '#FFF5EB',
   primaryContainerSubtle: '#FFF8F0',
@@ -48,6 +52,7 @@ export const lightColors = {
   inverseOnSurface: '#FFFFFF',
 
   // Misc
+  /** 亮色 0.5:标准遮挡强度,背景内容隐退但保留可感知轮廓,符合 iOS/MD 规范建议。 */
   scrim: 'rgba(0,0,0,0.5)',
   /** Sheet backdrop —— sheet 之下浅灰 tint,合规态高对比度让 sheet 焦点突出。
    *  跟通用 scrim(黑半透"普通遮挡")区分:这是"焦点引导"。 */
@@ -57,11 +62,11 @@ export const lightColors = {
   /** 玻璃容器内部分隔线 —— 暗色翻成对应低透白,保证暗底可见。 */
   glassSeparator: 'rgba(0,0,0,0.08)',
   /** 浮动玻璃胶囊外区 tint(TabBar 滚动玻璃门)。
-   *  数值配合 blurAmount=25 让"玻璃门外区滚动内容透过模糊显示"达成。
+   *  数值配合 blur.strong(blurAmount=40) 让"玻璃门外区滚动内容透过模糊显示"达成。
    *  跟 glassTintLight 区分:此 token 给"玻璃门外区"语义。 */
   glassSurface: 'rgba(255,255,255,0.20)',
   /** TabBar 玻璃门 tint —— 跟 glassSurface 区分,真机实测 0.20 太厚看不清滚动内容,
-   *  TabBar 场景配合 blurAmount=15 主导,语义不同不可复用同一个 alpha。 */
+   *  TabBar 场景配合 blur.soft(blurAmount=10) 主导,语义不同不可复用同一个 alpha。 */
   tabBarGlassTint: 'rgba(255,255,255,0.10)',
   /** 玻璃胶囊边框(亮 0.18 / 暗 0.14 白透)。 */
   glassBorder: 'rgba(255,255,255,0.18)',
@@ -72,7 +77,7 @@ export const lightColors = {
   glassStatsHighlight: 'rgba(255,255,255,0.65)',
   /** 玻璃胶囊 active 段文字 / icon 色。亮色同 primary;暗色 #FFB068
    *  更浅一档的橙,在半透深灰玻璃上分量更轻。 */
-  glassActiveFg: '#EB6E00',
+  glassActiveFg: BRAND_ORANGE,
   /** 品牌橙 active 容器底 —— TabBar active 段比 brandTint10 多 2% 视觉权重。 */
   brandTint12: 'rgba(235,110,0,0.12)',
 
@@ -89,7 +94,10 @@ export const lightColors = {
   /** Me 屏 QR / 扫码按钮背景 —— scanBtn 要在 hero 上"凸起被看到"。 */
   qrBg: 'rgba(255,255,255,0.55)',
 
-  // Hero gradient stops —— Me 屏顶部暖橙 → 浅黄 → background 三段渐变
+  // Hero gradient stops —— Me 屏顶部暖橙 → 浅黄 → background 三段渐变。
+  // 历史驻留:渐变序列按约定应进 palettes.ts,但 heroGradient 驻 ColorTokens 可随主题
+  // 自动切换(消费方无需手动 scheme 分支);迁 palettes 会让消费方须手写 scheme 判断,
+  // 属人体工程学回退。新渐变序列一律进 palettes.ts,不要往 colors.ts 追加。
   /** Hero 渐变第 1 段:暖橙起色。 */
   heroGradient0: '#FFE3C8',
   /** Hero 渐变第 2 段(0.55 offset):浅黄过渡。 */
@@ -108,7 +116,7 @@ export type ColorTokens = { [K in keyof typeof lightColors]: string };
 
 export const darkColors: ColorTokens = {
   // Brand
-  primary: '#EB6E00',
+  primary: BRAND_ORANGE,
   primaryPressed: '#D06200',
   primaryContainer: '#3D1F00',
   primaryContainerSubtle: '#2A1500',
@@ -153,6 +161,8 @@ export const darkColors: ColorTokens = {
   inverseOnSurface: '#000000',
 
   // Misc
+  /** 暗色加深至 0.7(亮色 0.5):暗色环境底图对比度低、亮部元素更"抢眼",
+   *  scrim 需更重才能有效压住背景,让前景 sheet / modal 焦点突出。 */
   scrim: 'rgba(0,0,0,0.7)',
   /** Sheet backdrop 暗色:沿用亮色同值,合规态保持浅 tint(打破暗色默认深底)让焦点
    *  聚焦在协议 sheet 上。 */
@@ -160,15 +170,21 @@ export const darkColors: ColorTokens = {
   // 暗色 0.06 白透,凸起感由 glassBar 暗色黑 0.35 shadow 补
   glassTintLight: 'rgba(255,255,255,0.06)',
   glassSeparator: 'rgba(255,255,255,0.10)',
-  // 深灰半透 0.30,配合 blurAmount=25 让"玻璃门"语义达成
+  // 深灰半透 0.30,配合 blur.strong(blurAmount=40) 让"玻璃门"语义达成
   glassSurface: 'rgba(28,28,30,0.30)',
-  // 配合 blurAmount=15 让内容透过模糊带 alpha 染色
+  // 配合 blur.soft(blurAmount=10) 让内容透过模糊带 alpha 染色
   tabBarGlassTint: 'rgba(28,28,30,0.18)',
   glassBorder: 'rgba(255,255,255,0.14)',
   glassHighlight: 'rgba(255,255,255,0.24)',
+  // 暗色降至 0.10(亮色 0.65):暗色 BlurView 背景本身已深,顶部高光过强会破坏玻璃质感
+  // 的"透视感"——0.10 轻轻描出上沿即足以传达"凸起"层级。
+  // 注:亮色"比 glassHighlight 更强(0.65>0.28)"在暗色刻意反转(0.10<0.24),
+  // 两端各自以视觉效果为准,非笔误。
   glassStatsHighlight: 'rgba(255,255,255,0.10)',
   // 浅橙,半透深灰玻璃上品牌色更亮起,视觉重量比纯品牌橙轻一档
   glassActiveFg: '#FFB068',
+  // 暗色 brandTint12 与 brandTint14 同值(0.22):亮色 10/12/14 三档在暗底视觉差微弱,
+  // 两档合一后对比度差异仍可感知;若后续设计需要恢复阶梯可将 brandTint12 改为 0.18-0.20。
   brandTint12: 'rgba(235,110,0,0.22)',
 
   // Icon faint —— 暗底反相成白色 alpha,数值跟亮色一致
@@ -183,6 +199,7 @@ export const darkColors: ColorTokens = {
 
   // Hero gradient stops —— 品牌橙 alpha 渐变。
   // react-native-svg <Stop stopColor> 支持 rgba 字符串,最终 alpha = rgba.a × stopOpacity。
+  // 历史驻留(同亮色注释):新渐变序列一律进 palettes.ts。
   heroGradient0: 'rgba(235,110,0,0.18)',
   heroGradient1: 'rgba(235,110,0,0.06)',
   heroGradient2: '#0A0A0A',
@@ -192,5 +209,7 @@ export const darkColors: ColorTokens = {
   glassPillBorder: 'rgba(255,255,255,0.12)',
 };
 
-/** 头像品牌渐变 —— 浅橙 → 主品牌橙,135° 对角线渐变。亮 / 暗共用。 */
-export const avatarGradient = ['#F49443', '#EB6E00'] as const;
+/** 头像品牌渐变 —— 浅橙 → 主品牌橙,135° 对角线渐变。亮 / 暗共用。
+ *  历史驻留:渐变序列按约定应进 palettes.ts,但亮/暗共用无需 scheme 分支且消费面稳定,
+ *  迁移无收益。新渐变序列一律进 palettes.ts。 */
+export const avatarGradient = ['#F49443', BRAND_ORANGE] as const;

package/src/theme/index.ts

@@ -1,4 +1,9 @@
-export { lightColors, darkColors, avatarGradient } from './colors';
+export {
+  lightColors,
+  darkColors,
+  avatarGradient,
+  BRAND_ORANGE,
+} from './colors';
 export type { ColorTokens } from './colors';
 
 export { warmOrangePalette } from './palettes';
@@ -8,10 +13,13 @@ export type { ShadowTokens } from './shadow';
 
 export { ThemeProvider, ThemeContext } from './ThemeProvider';
 export type { ColorScheme, ThemeContextValue } from './ThemeProvider';
+// ThemeContext 为内部用途导出:若需子树强制主题,优先用 <ThemeProvider forceScheme> 嵌套。
+// 直接自挂 Provider 须保证 value 引用稳定(每渲染新对象会打穿 useThemedStyles 缓存)。
 
 export { useTheme, useColors, useShadow } from './useTheme';
 export { useThemedStyles } from './useThemedStyles';
 export type { StylesMaker } from './useThemedStyles';
+export { usePrefersReducedMotion } from './usePrefersReducedMotion';
 
 export {
   fontMono,
@@ -25,6 +33,7 @@ export {
   dim,
   fixed,
   motion,
+  pressedOpacity,
 } from './tokens';
 
 export { blur } from './blur';

package/src/theme/scale.ts

@@ -7,10 +7,14 @@ const DESIGN_WIDTH = 402;
  *  0.3 对中文字号最友好(避免大屏字过大、小屏字过小)。 */
 const FONT_FACTOR = 0.3;
 
+// 取短边而非宽度:横屏/iPad 启动时 width 会是长边(iPhone 17 Pro 874pt),
+// 导致所有 r() 尺寸约翻倍。Math.min(w, h) 使竖屏行为完全不变,
+// 同时收口横屏启动与 iPad Split View(window 宽可能小于 DESIGN_WIDTH)两个场景。
+const { width: _w, height: _h } = Dimensions.get('window');
 const w =
   Platform.OS === 'web'
     ? DESIGN_WIDTH
-    : Dimensions.get('window').width || DESIGN_WIDTH;
+    : Math.min(_w || DESIGN_WIDTH, _h || DESIGN_WIDTH) || DESIGN_WIDTH;
 
 /** 实际缩放比。 */
 const ratio = w / DESIGN_WIDTH;