melta-app 0.6.0 → 0.7.0

package/src/components/Radio.tsx

@@ -7,10 +7,11 @@
  * - variant はレイアウト: vertical（標準）/ horizontal（wrap する横並び）/ card-style
  *   （各 option を枠付きカードにする。web の grid 2col は RN では縦積みに読み替え）。
  * - RN にネイティブ radio が無いため各 option は Pressable + 描画（circle + 内側 dot）。
+ *   option 行は minHeight 44pt（RADIO_SPEC.optionMinHeight）で実効タップ標的を確保する。
  * - states（contract → prop の写像）: selected/unselected → value との一致、
  *   error → error?: string（circle の borderColor 差分 + errorText 表示。selected と併用時は
  *   error を優先 = 契約 stateSpecs）、disabled → グループ全体 or option 個別（opacity 0.5 + 非活性）。
- *   focus は Phase1 非対応（recipe にも focus 差分なし）。
+ *   focus は非対応（recipe にも focus 差分なし）。
  * - a11y: グループに accessibilityRole="radiogroup"、各 option に "radio" +
  *   accessibilityState={{ checked, disabled }}。
  * - 色・寸法の決定は pure resolver（radio.styles.ts）に分離。
@@ -19,15 +20,15 @@
 
 import { useMemo } from "react";
 import { Pressable, View } from "react-native";
-import { Text } from "../primitives/Text";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
+import { Text } from "../primitives/Text.js";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
 import {
   RADIO_SPEC,
   resolveRadioCircleStyle,
   resolveRadioGroupStyle,
   type RadioVariant,
-} from "./radio.styles";
+} from "./radio.styles.js";
 
 export interface RadioOption {
   label: string;
@@ -99,6 +100,9 @@ export function Radio({
               accessibilityState={{ checked: selected, disabled: optionDisabled }}
               accessibilityLabel={option.label}
               style={[
+                // 実効タップ標的 44pt（A11Y_MIN_TAP_TARGET_44）。option 行は背景を持たないので
+                // minHeight で下げ止める（視覚不変・隣接 option と当たり判定が重ならない）。
+                { minHeight: RADIO_SPEC.optionMinHeight, justifyContent: "center" },
                 variant === "card-style"
                   ? [group.cardStyle, selected ? group.cardSelectedStyle : null]
                   : null,
@@ -150,5 +154,6 @@ export function Radio({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Radio.__contract = CONTRACTS.radio;

package/src/components/Screen.tsx

@@ -13,22 +13,54 @@
  * react-native-safe-area-context 利用者は subpath "melta-app/safe-area" の
  * enableSafeAreaContext() で context hook + View adapter に差し替えられる
  * （rally-nav dogfood 由来、RN 0.85 Fabric/Android の初回 inset flash 対応）。
+ * 適用する edge は `edges` prop（省略時は enableSafeAreaContext の既定）。
  */
 
-import { useMemo, type ReactNode } from "react";
-import { ScrollView, View, type StyleProp, type ViewStyle } from "react-native";
-import { resolveSafeAreaView } from "./safe-area-registry";
-import { useTheme } from "../theme";
-import { CONTRACTS, type VariantOf } from "../contracts/contract-types";
-import { resolveScreenStyle, type ScreenPadding, type ScreenStyle } from "./screen.styles";
+import { useEffect, useMemo, type ReactNode, type Ref } from "react";
+import {
+  ScrollView,
+  View,
+  type ScrollViewProps,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { resolveSafeAreaView, type SafeAreaEdge } from "./safe-area-registry.js";
+import { isDev } from "../theme/define-theme.js";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS, type VariantOf } from "../contracts/contract-types.js";
+import { resolveScreenStyle, type ScreenPadding, type ScreenStyle } from "./screen.styles.js";
+
+/** dev 警告の重複抑止（inline object の scrollViewProps で毎 render 鳴らさない）。 */
+const warned = new Set<string>();
 
 interface ScreenProps {
   /** 画面の骨格（contract variant）。default "scroll"。 */
   variant?: VariantOf<"screen">;
   /** content の padding（spacing token キー限定 | "none"）。default "4"。 */
   padding?: ScreenPadding;
+  /**
+   * safe-area を適用する辺。省略時は enableSafeAreaContext({ edges }) の既定。
+   * タブバーが bottom を自前処理する画面は `["top"]` のように絞る。
+   *
+   * ⚠️ adapter 未登録（RN core SafeAreaView）では**無視される**（core は辺を選べない）。
+   */
+  edges?: readonly SafeAreaEdge[];
   /** scroll 外（SafeArea 直下）に固定されるヘッダー slot（Header を差す想定）。 */
   header?: ReactNode;
+  /**
+   * 内部 ScrollView への passthrough（variant="scroll" のみ）。children は Screen が持つ。
+   *
+   * - `contentContainerStyle` は DS の padding と**配列合成**される（渡した側が後勝ち。
+   *   意図的な非常口 — DS の padding を残したい場合は padding 系を書かないこと）。
+   * - `contentInsetAdjustmentBehavior` は**型で遮断**（safe-area は Screen 側が持つので
+   *   iOS の自動 inset と必ず二重になる。正当な用途が無いため Omit）。
+   */
+  scrollViewProps?: Omit<ScrollViewProps, "children" | "contentInsetAdjustmentBehavior">;
+  /**
+   * 内部 ScrollView の ref（scrollTo / scrollToEnd 用、variant="scroll" のみ）。
+   * Screen 自体は `__contract` 静的プロパティを持つため forwardRef 化せず別 prop にしている。
+   */
+  scrollViewRef?: Ref<ScrollView>;
   style?: StyleProp<ViewStyle>;
   testID?: string;
   children: ReactNode;
@@ -37,7 +69,10 @@ interface ScreenProps {
 export function Screen({
   variant = "scroll",
   padding = "4",
+  edges,
   header,
+  scrollViewProps,
+  scrollViewRef,
   style,
   testID,
   children,
@@ -49,13 +84,36 @@ export function Screen({
     [theme, mode, variant, padding],
   );
 
-  const SafeArea = resolveSafeAreaView();
+  // fixed には内部 ScrollView が無い＝渡された prop は黙って捨てられる。dev で気づけるようにする。
+  const ignoresScrollProps =
+    variant === "fixed" && (scrollViewProps != null || scrollViewRef != null);
+  useEffect(() => {
+    if (!isDev || !ignoresScrollProps) return;
+    const message =
+      'melta: Screen variant="fixed" では scrollViewProps / scrollViewRef は適用されない' +
+      "（内部 ScrollView が無いため）。variant=\"scroll\" にするか prop を外すこと。";
+    if (warned.has(message)) return;
+    warned.add(message);
+    console.warn(message);
+  }, [ignoresScrollProps]);
+
+  const SafeArea = resolveSafeAreaView(edges);
 
   return (
     <SafeArea style={[safeAreaStyle, style]} testID={testID}>
       {header}
       {variant === "scroll" ? (
-        <ScrollView contentContainerStyle={contentStyle}>{children}</ScrollView>
+        <ScrollView
+          ref={scrollViewRef}
+          // iOS の既定 0 は onScroll が 1 ドラッグ 1 発しか来ない（スクロール連動ヘッダが動かない）。
+          // spread より前に置いて消費者が上書きできるようにする。
+          scrollEventThrottle={16}
+          {...scrollViewProps}
+          // contentContainerStyle は素の spread だと DS の padding ごと消えるため配列合成（後勝ち）。
+          contentContainerStyle={[contentStyle, scrollViewProps?.contentContainerStyle]}
+        >
+          {children}
+        </ScrollView>
       ) : (
         <View style={contentStyle}>{children}</View>
       )}

package/src/components/Skeleton.tsx

@@ -22,9 +22,9 @@ import {
   type StyleProp,
   type ViewStyle,
 } from "react-native";
-import { Surface } from "./Surface";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
+import { Surface } from "./Surface.js";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
 import {
   CARD_SURFACE_SPEC,
   PULSE_OPACITY,
@@ -32,7 +32,7 @@ import {
   resolveSkeletonStates,
   resolveSkeletonVariants,
   type SkeletonVariant,
-} from "./skeleton.styles";
+} from "./skeleton.styles.js";
 
 interface SkeletonProps {
   variant?: SkeletonVariant;
@@ -150,5 +150,6 @@ export function Skeleton({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Skeleton.__contract = CONTRACTS.skeleton;

package/src/components/Surface.tsx

@@ -13,9 +13,9 @@
 
 import type { ReactNode } from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
-import { resolveSurfaceStyle, type SurfaceStyleProps } from "./surface.styles";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import { resolveSurfaceStyle, type SurfaceStyleProps } from "./surface.styles.js";
 
 export interface SurfaceProps extends SurfaceStyleProps {
   style?: StyleProp<ViewStyle>;
@@ -33,5 +33,6 @@ export function Surface({ bg, radius, elevation, padding, style, testID, childre
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Surface.__contract = CONTRACTS.surface;

package/src/components/TextField.tsx

@@ -6,7 +6,8 @@
  *   editable=false + accessibilityState.disabled を併せて適用する（recipe description の規約）。
  * - error 時は errorText を必ずテキストで表示する（FORM_NO_COLOR_ONLY_ERROR = 色だけで伝えない）。
  *   RN には aria-describedby 相当が無いため、(a) errorText を input の accessibilityLabel に合成
- *   （再フォーカス時に読み上げ）、(b) errorText 側に accessibilityLiveRegion="polite"（Android は
+ *   （再フォーカス時に読み上げ。合成文は formatErrorAccessibilityLabel で差し替え可能 = i18n フック。
+ *   既定は日本語）、(b) errorText 側に accessibilityLiveRegion="polite"（Android は
  *   出現時に通知。iOS の即時通知が要る画面は submit 時に announceForAccessibility を併用する —
  *   docs/patterns.md 参照）。
  * - focus は内部 state（onFocus/onBlur）で recipe states.focus の inputStyle 差分
@@ -32,16 +33,16 @@ import {
   type TextStyle,
   type ViewStyle,
 } from "react-native";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
 import {
   resolveTextFieldStyle,
   resolveTextFieldFocusStyle,
   type TextFieldSize,
-} from "./textfield.styles";
+} from "./textfield.styles.js";
 
 /**
- * Android の EditText は固定 height と組み合わさると既定の縦 padding で文字が
+ * Android の EditText は高さ下限（minHeight）と組み合わさると既定の縦 padding で文字が
  * 上寄り・下端切れになるため、縦 padding を殺して縦センターに揃える。
  * textAlignVertical は Android 専用、paddingVertical: 0 は iOS の見た目を変えない
  * （iOS の単一行入力は元々縦センター）。
@@ -65,6 +66,15 @@ export function resolveInputVerticalFix(os: typeof Platform.OS): TextStyle {
 
 const INPUT_VERTICAL_FIX = resolveInputVerticalFix(Platform.OS);
 
+/**
+ * error 時の accessibilityLabel 合成の既定（日本語）。
+ * props で差し替え可能（formatErrorAccessibilityLabel）。既定値を変えると
+ * 既存アプリの VoiceOver 読み上げが変わるので、既定は日本語のまま据え置く。
+ */
+function defaultErrorAccessibilityLabel(label: string, errorText: string): string {
+  return `${label}。エラー: ${errorText}`;
+}
+
 interface TextFieldProps {
   /** ラベル（必須。placeholder だけの入力欄を作らせない = FORM_NO_LABEL_OMIT）。 */
   label: string;
@@ -80,6 +90,12 @@ interface TextFieldProps {
   helperText?: string;
   /** variant="error" 時に表示するエラーメッセージ（色だけでなくテキストで伝える）。 */
   errorText?: string;
+  /**
+   * error 時に input の accessibilityLabel へ合成する文字列の組み立て（i18n フック）。
+   * 既定は日本語の `${label}。エラー: ${errorText}`（既存アプリの読み上げを変えないため据え置き）。
+   * 英語アプリなどでは `(label, error) => \`${label}. Error: ${error}\`` を渡す。
+   */
+  formatErrorAccessibilityLabel?: (label: string, errorText: string) => string;
   /** キーボード種別（RN TextInput へ透過）。 */
   keyboardType?: KeyboardTypeOptions;
   autoCapitalize?: "none" | "sentences" | "words" | "characters";
@@ -104,6 +120,7 @@ export function TextField({
   size = "medium",
   helperText,
   errorText,
+  formatErrorAccessibilityLabel = defaultErrorAccessibilityLabel,
   keyboardType,
   autoCapitalize,
   autoCorrect,
@@ -143,7 +160,7 @@ export function TextField({
         maxLength={maxLength}
         returnKeyType={returnKeyType}
         onSubmitEditing={onSubmitEditing}
-        accessibilityLabel={showError ? `${label}。エラー: ${errorText}` : label}
+        accessibilityLabel={showError ? formatErrorAccessibilityLabel(label, errorText) : label}
         accessibilityState={{ disabled }}
         onFocus={(e) => {
           if (!disabled) setFocused(true);
@@ -167,5 +184,6 @@ export function TextField({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 TextField.__contract = CONTRACTS.textfield;

package/src/components/Toast.tsx

@@ -5,7 +5,9 @@
  * - presentational component。表示位置・キュー・自動消滅はアプリ層の責務
  *   （entering/visible/dismissing のアニメ state は Phase 外、recipe description）。
  * - closeButton は契約 anatomy で必須 → onClose を required prop にして型で強制。
- *   Pressable + テキスト ×（accessibilityLabel="閉じる" 必須）。
+ *   Pressable + テキスト ×（accessibilityLabel は既定 "閉じる"、closeAccessibilityLabel で差し替え可能）。
+ * - action と × は隣接する 2 つの操作要素。当たり判定が重なると押し違いが起きるので、
+ *   横 hitSlop を gap の 1/2 に絞る（toast.styles.ts の TOAST_TAP_TARGET）。
  * - a11y（§2 web→RN mapping）: web の role=status + aria-live=polite を
  *   accessibilityLiveRegion="polite"（Android のみ有効）に落とす。
  * - elevation は theme.elevation.sm（iOS shadow* + Android elevation の複合値）を container に
@@ -17,10 +19,15 @@
 
 import { useMemo } from "react";
 import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
-import { Text } from "../primitives/Text";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
-import { TOAST_SPEC, resolveToastStyles, type ToastVariant } from "./toast.styles";
+import { Text } from "../primitives/Text.js";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import {
+  TOAST_SPEC,
+  TOAST_TAP_TARGET,
+  resolveToastStyles,
+  type ToastVariant,
+} from "./toast.styles.js";
 
 interface ToastProps {
   /** 通知タイプ（contract variant）。 */
@@ -34,6 +41,11 @@ interface ToastProps {
   /** あれば message の後にアクションテキスト（onAction とセットで有効）。 */
   actionLabel?: string;
   onAction?: () => void;
+  /**
+   * × ボタンの accessibilityLabel（i18n フック）。既定は日本語 "閉じる"
+   * （既存アプリの読み上げを変えないため据え置き）。
+   */
+  closeAccessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
@@ -45,6 +57,7 @@ export function Toast({
   onClose,
   actionLabel,
   onAction,
+  closeAccessibilityLabel = "閉じる",
   style,
   testID,
 }: ToastProps) {
@@ -73,7 +86,9 @@ export function Toast({
         )}
       </View>
       {actionLabel != null && onAction != null && (
-        <Pressable onPress={onAction} accessibilityRole="button" hitSlop={10}>
+        // 横 hitSlop は gap/2（= 6）まで。10 のままだと隣の × と当たり判定が 8pt 重なり、
+        // 手前に描かれる × が勝って「元に戻す」が押せない（toast.styles.ts の TOAST_TAP_TARGET 参照）。
+        <Pressable onPress={onAction} accessibilityRole="button" hitSlop={TOAST_TAP_TARGET.hitSlop}>
           <Text
             variant={TOAST_SPEC.messageFont}
             weight={TOAST_SPEC.messageWeight}
@@ -83,13 +98,19 @@ export function Toast({
           </Text>
         </Pressable>
       )}
-      {/* 最小タップターゲット確保: min 24 + hitSlop（Tag removable と同じ手当て）。 */}
+      {/* 最小タップターゲット確保: 横 hitSlop を gap/2 に絞るぶん箱を 32pt に広げて 32+6×2 = 44pt。
+          縦は 24 + 10×2 = 44pt（正典パターン）。 */}
       <Pressable
         onPress={onClose}
         accessibilityRole="button"
-        accessibilityLabel="閉じる"
-        hitSlop={10}
-        style={{ minWidth: 24, minHeight: 24, alignItems: "center", justifyContent: "center" }}
+        accessibilityLabel={closeAccessibilityLabel}
+        hitSlop={TOAST_TAP_TARGET.hitSlop}
+        style={{
+          minWidth: TOAST_TAP_TARGET.closeMinWidth,
+          minHeight: TOAST_TAP_TARGET.closeMinHeight,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
       >
         <Text variant="xs" style={{ color: styles.messageStyle.color }}>
           ×
@@ -99,5 +120,6 @@ export function Toast({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Toast.__contract = CONTRACTS.toast;

package/src/components/Toggle.tsx

@@ -8,22 +8,24 @@
  *   flex-start / flex-end を切り替える（アニメは Phase 外）。
  * - disabled: recipe states.disabled の opacity + accessibilityState.disabled + onPress 無効。
  * - a11y: accessibilityRole="switch" + accessibilityState.checked。label があれば右に表示し、
- *   Pressable 全体がタップ領域 + accessibilityLabel になる。
+ *   Pressable 全体がタップ領域 + accessibilityLabel になる。実効タップ標的 44pt は
+ *   縦 hitSlop で確保する（TOGGLE_VERTICAL_HIT_SLOP、A11Y_MIN_TAP_TARGET_44）。
  * - 色・寸法の決定は pure resolver（toggle.styles.ts）に分離。
  *   recipes/app/toggle.recipe.json との機械照合は scripts/lib/toggle-conformance.test.ts が行う。
  */
 
 import { useMemo } from "react";
 import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
-import { Text } from "../primitives/Text";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
+import { Text } from "../primitives/Text.js";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
 import {
   resolveToggleStyle,
   TOGGLE_DISABLED_OPACITY,
+  TOGGLE_VERTICAL_HIT_SLOP,
   type ToggleSize,
   type ToggleVariant,
-} from "./toggle.styles";
+} from "./toggle.styles.js";
 
 interface ToggleProps {
   /** 現在値（true=on / false=off。variant はここから暗黙決定）。 */
@@ -61,6 +63,12 @@ export function Toggle({
       accessibilityRole="switch"
       accessibilityState={{ checked: value, disabled }}
       accessibilityLabel={label}
+      // track（24/28pt）も label 付きの行（36pt）も 44pt に届かないので縦 hitSlop で補う。
+      // 値の根拠は toggle.styles.ts の TOGGLE_VERTICAL_HIT_SLOP。
+      hitSlop={{
+        top: TOGGLE_VERTICAL_HIT_SLOP[size],
+        bottom: TOGGLE_VERTICAL_HIT_SLOP[size],
+      }}
       testID={testID}
       style={[
         {
@@ -90,5 +98,6 @@ export function Toggle({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Toggle.__contract = CONTRACTS.toggle;

package/src/components/action-sheet.styles.ts

@@ -13,7 +13,7 @@
  * - sheet の下余白（SafeArea）は実装（ActionSheet.tsx）が SafeAreaView で加算する。
  */
 
-import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme/index.js";
 
 /** overlay の黒 50%（token 外 literal。modal と同値）。 */
 // eslint-disable-next-line melta/no-raw-color -- overlay の黒 50% は契約上 token 外の literal（recipe description / web の bg-black/50 と同値）

package/src/components/alert.styles.ts

@@ -7,8 +7,7 @@
  *
  * - RN では border を持たず bg subtle + text 色で表現する（status token に border 用の中間色が
  *   無いため。COLOR_ONLY_FORBIDDEN は title/message のテキストと icon slot で担保、recipe description）。
- * - dark mode は status.*.subtleDark / textDark 側を解決する。info variant のみ primary 固定
- *   （dark token が無い既知の割り切り、web と同じ）。
+ * - status 色（mode ごとの subtle / text、info の primary 固定）の解決は status-colors.ts が SSOT。
  */
 
 import type {
@@ -19,14 +18,23 @@ import type {
   RadiusKey,
   SpacingKey,
   ThemeMode,
-} from "../theme";
+} from "../theme/index.js";
+import { resolveStatusVariantColors, type StatusVariant } from "./status-colors.js";
+import { CANONICAL_TAP_TARGET } from "../a11y/tap-target.js";
 
-export type AlertVariant = "info" | "success" | "warning" | "error";
+/** alert.contract の variant 語彙（status 共通語彙と 1:1）。 */
+export type AlertVariant = StatusVariant;
 
 /**
  * 構成キー（token キー）。component は Text にこのキーをそのまま渡し、resolver は同じキーから
  * style 値を解決する（component と resolver が別々のキーを持って drift する事故を防ぐ SSOT）。
  */
+/**
+ * × の当たり判定（正典パターン: 視覚 24pt + hitSlop 10 = 実効 44pt）。
+ * Alert の × は右端に単独で立つ（Toast と違い隣接する操作要素が無い）ので横も 10 のままでよい。
+ */
+export const ALERT_CLOSE_TAP_TARGET = CANONICAL_TAP_TARGET;
+
 export const ALERT_SPEC = {
   padding: "4",
   gap: "3",
@@ -66,33 +74,13 @@ export interface AlertStyles {
   };
 }
 
-/**
- * variant → bg / text 色の解決。
- * - info: primary.50 / primary.800 固定（mode 非依存）。
- * - success / warning / error: status token（error は status キー上は danger）。
- *   light は subtleLight / textLight、dark は subtleDark / textDark（recipe description の写像）。
- */
-export function resolveAlertColors(
-  theme: NativeTheme,
-  mode: ThemeMode,
-  variant: AlertVariant,
-): { bg: string; text: string } {
-  if (variant === "info") {
-    return { bg: theme.color.primary["50"], text: theme.color.primary["800"] };
-  }
-  const status = theme.color.status[variant === "error" ? "danger" : variant];
-  return mode === "dark"
-    ? { bg: status.subtleDark, text: status.textDark }
-    : { bg: status.subtleLight, text: status.textLight };
-}
-
 /** variant → 全 slot の style 解決（alert.recipe styleRefs の 1:1 写像）。 */
 export function resolveAlertStyles(
   theme: NativeTheme,
   mode: ThemeMode,
   variant: AlertVariant,
 ): AlertStyles {
-  const { bg, text } = resolveAlertColors(theme, mode, variant);
+  const { bg, text } = resolveStatusVariantColors(theme, mode, variant);
   return {
     containerStyle: {
       backgroundColor: bg,

package/src/components/avatar.styles.ts

@@ -6,13 +6,13 @@
  * 機械照合は scripts/lib/avatar-conformance.test.ts が行う。
  */
 
-import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme/index.js";
 
 export type AvatarSize = "small" | "medium" | "large";
 export type AvatarStatus = "online" | "away" | "offline";
 
 /** サイズ軸（contract sizes の height と 1:1。recipe sizes の width/height/dotSize/fontSize に対応）。 */
-const SIZE_TABLE = {
+export const AVATAR_SIZE_SPEC = {
   small: { box: 32, dot: 8, fontSize: "xs" },
   medium: { box: 40, dot: 10, fontSize: "sm" },
   large: { box: 48, dot: 12, fontSize: "base" },
@@ -21,6 +21,28 @@ const SIZE_TABLE = {
 /** group の重なり（-spacing.2 相当。負値 token が無いため recipe と同じ literal）。 */
 export const AVATAR_GROUP_OVERLAP = -8;
 
+/**
+ * initials の文字サイズ倍率の上限（size 別）。
+ *
+ * Avatar の器は **width = height の円**（recipe sizes の box）で、fontScale で伸びるのは
+ * 中身の文字だけ。器は伸びないので、上限を掛けないと OS の文字サイズ拡大で文字が円から
+ * はみ出す（円が楕円に見える / 文字が切れる）。
+ *
+ * 導出は「box ÷ その size が使う fontSize token の lineHeight」を**小数第1位で切り捨て**（安全側）:
+ *   small  32 ÷ 19（xs   の lineHeight） = 1.68… → 1.6
+ *   medium 40 ÷ 26（sm   の lineHeight） = 1.53… → 1.5
+ *   large  48 ÷ 36（base の lineHeight） = 1.33… → 1.3
+ *
+ * lineHeight（fontSize ではなく）を分母に採るのは、RN が確保する行ボックスの高さが
+ * 溢れの実体だから。theme を差し替えても壊れないよう、この導出そのものは
+ * avatar-conformance.test.ts が実 theme の値で再検算する。
+ */
+export const AVATAR_INITIALS_MAX_FONT_SCALE: Record<AvatarSize, number> = {
+  small: 1.6,
+  medium: 1.5,
+  large: 1.3,
+};
+
 /**
  * group variant（avatar.recipe の group.style / group.overlapStyle の 1:1 写像）。
  * container は横並び、2枚目以降の子に overlap（負 margin）を適用する。
@@ -61,7 +83,7 @@ export function resolveAvatarStyle(
   variant: "image" | "initials",
   size: AvatarSize,
 ): AvatarStyleResult {
-  const s = SIZE_TABLE[size];
+  const s = AVATAR_SIZE_SPEC[size];
   return {
     container: {
       width: s.box,

package/src/components/bottom-sheet.styles.ts

@@ -13,7 +13,7 @@
  * - sheet の下余白（SafeArea）は実装（BottomSheet.tsx）が SafeAreaView で加算する。
  */
 
-import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme/index.js";
 
 /** overlay の黒 50%（token 外 literal。modal と同値）。 */
 // eslint-disable-next-line melta/no-raw-color -- overlay の黒 50% は契約上 token 外の literal（recipe description / web の bg-black/50 と同値）

package/src/components/card.styles.ts

@@ -7,7 +7,7 @@
  */
 
 import type { ViewStyle } from "react-native";
-import type { NativeTheme, ThemeMode, ElevationKey } from "../theme";
+import type { NativeTheme, ThemeMode, ElevationKey } from "../theme/index.js";
 
 export type CardVariant = "basic" | "media" | "action" | "link";
 

package/src/components/card.validate.ts

@@ -10,8 +10,8 @@
  */
 
 import { isValidElement } from "react";
-import type { CardVariant } from "./card.styles";
-import { CARD_INTERACTIVE } from "./card.styles";
+import type { CardVariant } from "./card.styles.js";
+import { CARD_INTERACTIVE } from "./card.styles.js";
 
 export interface CardPropsForValidation {
   variant: CardVariant;

package/src/components/checkbox.styles.ts

@@ -6,18 +6,21 @@
  * 機械照合は scripts/lib/checkbox-conformance.test.ts が行う。
  */
 
-import type { NativeTheme, ThemeMode } from "../theme";
+import type { NativeTheme, ThemeMode } from "../theme/index.js";
 
 /**
  * recipe 由来の literal 値テーブル（token 化されていない数値。conformance が recipe と照合する）。
  * - box は 20px（web の 16px より大きいのはタッチ前提、recipe description）
- * - hitSlop は (44 - box 20) / 2 = 12。行全体 Pressable に足して実タッチ領域 44pt を確保
+ * - 実効タップ標的 44pt は行の minHeight で確保（A11Y_MIN_TAP_TARGET_44。規約 10-(b):
+ *   背景を持たない行は hitSlop でなく寸法で満たす — 旧実装の四方 hitSlop 12 は行全体
+ *   Pressable に効くため、縦積みの隣接 Checkbox と当たり判定が最大 24pt 重なっていた
+ *   （Codex レビュー指摘）。Radio の option 行と同じ手当てに統一）
  */
 export const CHECKBOX_SPEC = {
   boxSize: 20,
   boxBorderWidth: 2,
   disabledOpacity: 0.5,
-  hitSlop: 12,
+  rowMinHeight: 44,
 } as const;
 
 /** 見た目（色）に効く状態入力。disabled は opacity のみで色を変えないため含めない。 */

package/src/components/empty-state.styles.ts

@@ -15,7 +15,7 @@ import type {
   SemanticColors,
   SpacingKey,
   ThemeMode,
-} from "../theme";
+} from "../theme/index.js";
 
 /**
  * default variant の構成キー（token キー）。

package/src/components/header.styles.ts

@@ -6,7 +6,7 @@
  * 機械照合は scripts/lib/header-conformance.test.ts が行う。
  */
 
-import type { NativeTheme, ThemeMode } from "../theme";
+import type { NativeTheme, ThemeMode } from "../theme/index.js";
 
 export interface HeaderStyle {
   containerStyle: {