melta-app 0.5.3 → 0.7.0

package/src/components/Alert.tsx

@@ -5,6 +5,8 @@
  * - RN では border を持たず bg subtle + text 色で表現（status token に border 用の中間色が無い、
  *   recipe description）。COLOR_ONLY_FORBIDDEN は title/message のテキストと icon slot で担保する設計。
  * - icon は ReactNode slot（EmptyState 前例。Icon を差すなら melta-app/icons を利用者が opt-in）。
+ * - × の accessibilityLabel は既定 "閉じる"（closeAccessibilityLabel で差し替え可能）。
+ *   当たり判定は正典パターン（24 + hitSlop 10 = 44pt）。
  * - a11y（§2 web→RN mapping）: web の role=alert(error/warning) / status(info/success) を、
  *   error/warning → accessibilityRole="alert"、info/success → accessibilityLiveRegion="polite"
  *   （Android のみ有効。RN に status role が無いための写像）に落とす。
@@ -15,10 +17,15 @@
 
 import { useMemo, type ReactNode } 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 { ALERT_SPEC, resolveAlertStyles, type AlertVariant } from "./alert.styles";
+import { Text } from "../primitives/Text.js";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import {
+  ALERT_CLOSE_TAP_TARGET,
+  ALERT_SPEC,
+  resolveAlertStyles,
+  type AlertVariant,
+} from "./alert.styles.js";
 
 interface AlertProps {
   /** 通知タイプ（contract variant）。 */
@@ -31,11 +38,25 @@ interface AlertProps {
   icon?: ReactNode;
   /** あれば右端に閉じるボタン（Pressable の ×）を出す。 */
   onClose?: () => void;
+  /**
+   * × ボタンの accessibilityLabel（i18n フック）。既定は日本語 "閉じる"
+   * （既存アプリの読み上げを変えないため据え置き）。
+   */
+  closeAccessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
-export function Alert({ variant, title, message, icon, onClose, style, testID }: AlertProps) {
+export function Alert({
+  variant,
+  title,
+  message,
+  icon,
+  onClose,
+  closeAccessibilityLabel = "閉じる",
+  style,
+  testID,
+}: AlertProps) {
   const { theme, mode } = useTheme();
   const styles = useMemo(() => resolveAlertStyles(theme, mode, variant), [theme, mode, variant]);
   const urgent = variant === "error" || variant === "warning";
@@ -63,13 +84,18 @@ export function Alert({ variant, title, message, icon, onClose, style, testID }:
         </Text>
       </View>
       {onClose != null && (
-        // 最小タップターゲット確保: min 24 + hitSlop（Tag removable と同じ手当て）。
+        // 最小タップターゲット確保: 正典パターン 24 + hitSlop 10 = 実効 44pt（Tag removable と同型）。
         <Pressable
           onPress={onClose}
           accessibilityRole="button"
-          accessibilityLabel="閉じる"
-          hitSlop={10}
-          style={{ minWidth: 24, minHeight: 24, alignItems: "center", justifyContent: "center" }}
+          accessibilityLabel={closeAccessibilityLabel}
+          hitSlop={ALERT_CLOSE_TAP_TARGET.hitSlop}
+          style={{
+            minWidth: ALERT_CLOSE_TAP_TARGET.minWidth,
+            minHeight: ALERT_CLOSE_TAP_TARGET.minHeight,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
         >
           <Text variant="xs" style={{ color: styles.messageStyle.color }}>
             ×
@@ -80,5 +106,6 @@ export function Alert({ variant, title, message, icon, onClose, style, testID }:
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Alert.__contract = CONTRACTS.alert;

package/src/components/Avatar.tsx

@@ -18,16 +18,17 @@ import {
   type StyleProp,
   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 {
+  AVATAR_INITIALS_MAX_FONT_SCALE,
   resolveAvatarGroupStyle,
   resolveAvatarStatusColor,
   resolveAvatarStyle,
   type AvatarSize,
   type AvatarStatus,
   type AvatarStyleResult,
-} from "./avatar.styles";
+} from "./avatar.styles.js";
 
 interface AvatarProps {
   /** 表示名（initials の生成元 + accessibilityLabel。contract a11y required）。 */
@@ -73,7 +74,14 @@ export function Avatar({ name, source, size = "medium", status, style, testID }:
         {source ? (
           <RNImage source={source} style={{ width: "100%", height: "100%" }} />
         ) : (
-          <RNText style={resolved.text}>{toInitials(name)}</RNText>
+          // 器（円）は fontScale で伸びないので、文字側に size 別の上限を掛けて溢れを防ぐ
+          // （根拠と導出は avatar.styles.ts の AVATAR_INITIALS_MAX_FONT_SCALE）。
+          <RNText
+            style={resolved.text}
+            maxFontSizeMultiplier={AVATAR_INITIALS_MAX_FONT_SCALE[size]}
+          >
+            {toInitials(name)}
+          </RNText>
         )}
       </View>
       {status ? (

package/src/components/BottomSheet.tsx

@@ -6,23 +6,24 @@
  * - grabber は装飾バー。a11y ツリーから除外する（importantForAccessibility="no" +
  *   accessibilityElementsHidden。recipe description 参照）。
  * - スワイプで閉じるジェスチャは実装しない（overlay tap + Android back で閉じる、Phase 外）。
- * - sheet は下端密着（bg-surface）のため、SafeAreaView を sheet の内側に置いて
+ * - sheet は下端密着（bg-surface）のため、SafeArea を sheet の内側に置いて
  *   下余白（ホームインジケータ）まで sheet 背景で覆いつつ content を安全域に収める。
+ *   edge は bottom + 左右のみ（top は overlay 側で、シートは上端に接しない）。
+ *   SafeArea 実装は registry 経由（safe-area-registry.ts）— "melta-app/safe-area" を
+ *   有効化したアプリでは Android でも inset が入る（RN core の SafeAreaView は Android で no-op）。
  * - sheet 側は onStartShouldSetResponder で touch を claim し、overlay tap でだけ閉じる。
  * - style の決定は pure resolver（bottom-sheet.styles.ts）に分離 — recipe との機械照合対象。
  */
 
 import { useMemo, type ReactNode } from "react";
-import {
-  Modal as RNModal,
-  Pressable,
-  SafeAreaView,
-  Text as RNText,
-  View,
-} from "react-native";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
-import { resolveBottomSheetStyle, type BottomSheetStyle } from "./bottom-sheet.styles";
+import { Modal as RNModal, Pressable, Text as RNText, View } from "react-native";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import { resolveBottomSheetStyle, type BottomSheetStyle } from "./bottom-sheet.styles.js";
+import { resolveSafeAreaView, type SafeAreaEdge } from "./safe-area-registry.js";
+
+/** シートは画面下端に密着するので top inset は不要。 */
+const SHEET_EDGES: readonly SafeAreaEdge[] = ["bottom", "left", "right"];
 
 interface BottomSheetProps {
   visible: boolean;
@@ -43,6 +44,8 @@ export function BottomSheet({ visible, onClose, title, testID, children }: Botto
     [theme, mode],
   );
 
+  const SafeArea = resolveSafeAreaView(SHEET_EDGES);
+
   return (
     <RNModal
       visible={visible}
@@ -58,7 +61,7 @@ export function BottomSheet({ visible, onClose, title, testID, children }: Botto
           onStartShouldSetResponder={() => true}
           testID={testID}
         >
-          <SafeAreaView>
+          <SafeArea>
             {/* grabber: 装飾のみ（スワイプ操作は持たないため a11y から隠す） */}
             <View
               style={styles.grabberStyle}
@@ -71,7 +74,7 @@ export function BottomSheet({ visible, onClose, title, testID, children }: Botto
               </RNText>
             )}
             <View style={styles.contentStyle}>{children}</View>
-          </SafeAreaView>
+          </SafeArea>
         </View>
       </Pressable>
     </RNModal>

package/src/components/Card.tsx

@@ -7,7 +7,7 @@
  *   scripts/lib/card-conformance.test.ts が行う。
  * - variant: basic/media は非インタラクティブ、action/link は Pressable。
  *   action/link は pressed 時 elevation.sm→md（§2 hover→pressed mapping）。
- *   focus-within は RN 非サポートとして Phase1 明示 drop（§2）。
+ *   focus-within は RN 非サポートとして明示 drop（§2）。
  * - 型で action/link は onPress 必須を強制（§4 の DU 精神。無言で非対話に落ちる事故を防ぐ）。
  * - **カード面自体は操作要素にしない**（contract 2.1.0 の a11y.required）。面の Pressable は
  *   `accessibilityRole` を名乗らず `accessible={false}`。理由は2つ:
@@ -21,7 +21,7 @@
  *   react-native-web では実際に `<article>` 要素になる）。accessibilityRole 系とは別系統。
  * - **focus ring は Card では描かない**。フォーカスを受けるのは `primaryAction` 側で、
  *   melta の Button は自前の ring を持つ。カードにも出すと1回のフォーカスで ring が二重に描かれる。
- *   contract の focus-within は RN 非サポートとして Phase1 で明示 drop 済み（app recipe に記録あり）で、
+ *   contract の focus-within は RN 非サポートとして明示 drop 済み（app recipe に記録あり）で、
  *   web だけ動く実装を残すとプラットフォーム非対称になるため、実装ごと持たない。
  * - `accessibilityLabel` は 0.5.0 で削除した。面が `accessible={false}` なので native では
  *   原理的に読まれず、web だけ `aria-label` として効く非対称な prop だった。
@@ -33,11 +33,11 @@
 
 import { useEffect, type ReactElement, type ReactNode } from "react";
 import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
-import { isDev } from "../theme/define-theme";
-import { CARD_INTERACTIVE, resolveCardShape, resolveCardBodyStyle } from "./card.styles";
-import { validateCardProps } from "./card.validate";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import { isDev } from "../theme/define-theme.js";
+import { CARD_INTERACTIVE, resolveCardShape, resolveCardBodyStyle } from "./card.styles.js";
+import { validateCardProps } from "./card.validate.js";
 
 /**
  * 同じ問題を毎レンダー報告しないためのラッチ。
@@ -144,5 +144,6 @@ export function Card({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Card.__contract = CONTRACTS.card;

package/src/components/Checkbox.tsx

@@ -4,24 +4,24 @@
  * - RN にネイティブ checkbox が無いため Pressable（行全体タップ）+ 描画で実装する。
  *   checkmark は rotate した View の L 字 border、indeterminate は横棒
  *   （react-native-svg 非依存 = 本体エントリの依存ゼロ維持。recipe description 参照）。
- * - box は 20px（web の 16px より大きいのはタッチ前提）。実タッチ領域は hitSlop 12 で
- *   44pt（20 + 12×2）を確保する。
+ * - box は 20px（web の 16px より大きいのはタッチ前提）。実効タップ標的は行の
+ *   minHeight 44 で確保する（規約 10-(b): 背景を持たない行は hitSlop でなく寸法）。
  * - label 必須（FORM_NO_LABEL_OMIT を props 型で強制）。label は Text primitive
  *   （base/text-default = recipe labelStyle と同値）。
  * - states（contract → prop の写像）: checked/unchecked → checked:boolean、
  *   indeterminate → indeterminate:boolean（variant "indeterminate"。a11y は "mixed"）、
  *   error → error:boolean（borderColor 差分、checked より優先）、disabled → prop
- *   （opacity 0.5 + 非活性）。focus は Phase1 非対応（recipe にも focus 差分なし）。
+ *   （opacity 0.5 + 非活性）。focus は非対応（recipe にも focus 差分なし）。
  * - 色・寸法の決定は pure resolver（checkbox.styles.ts）に分離。
  *   recipes/app/checkbox.recipe.json との機械照合は scripts/lib/checkbox-conformance.test.ts が行う。
  */
 
 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 { CHECKBOX_SPEC, resolveCheckboxStyle } from "./checkbox.styles";
+import { Text } from "../primitives/Text.js";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import { CHECKBOX_SPEC, resolveCheckboxStyle } from "./checkbox.styles.js";
 
 /** checkmark / 横棒の幾何値（recipe に token 化されていない描画トリック側の定数）。 */
 const CHECKMARK = { width: 10, height: 6, borderWidth: 2, offsetY: -1 } as const;
@@ -59,7 +59,6 @@ export function Checkbox({
     <Pressable
       onPress={() => onChange(!checked)}
       disabled={disabled}
-      hitSlop={CHECKBOX_SPEC.hitSlop}
       accessibilityRole="checkbox"
       accessibilityState={{ checked: indeterminate ? "mixed" : checked, disabled }}
       accessibilityLabel={label}
@@ -68,6 +67,9 @@ export function Checkbox({
         flexDirection: "row",
         alignItems: "center",
         gap: resolved.gap,
+        // 実効タップ標的 44pt。背景を持たない行なので hitSlop でなく minHeight（規約 10-(b)、
+        // 縦積みの隣接行と当たり判定が重ならない）
+        minHeight: CHECKBOX_SPEC.rowMinHeight,
         opacity: disabled ? CHECKBOX_SPEC.disabledOpacity : 1,
       }}
     >
@@ -103,5 +105,6 @@ export function Checkbox({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Checkbox.__contract = CONTRACTS.checkbox;

package/src/components/EmptyState.tsx

@@ -12,11 +12,11 @@
 
 import { useMemo, type ReactNode } from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
-import { Text } from "../primitives/Text";
-import { Button } from "../primitives/Button";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
-import { EMPTY_STATE_SPEC, resolveEmptyStateStyles } from "./empty-state.styles";
+import { Text } from "../primitives/Text.js";
+import { Button } from "../primitives/Button.js";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import { EMPTY_STATE_SPEC, resolveEmptyStateStyles } from "./empty-state.styles.js";
 
 interface EmptyStateProps {
   icon?: ReactNode;
@@ -60,5 +60,6 @@ export function EmptyState({ icon, title, description, action, style, testID }:
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 EmptyState.__contract = CONTRACTS.emptyState;

package/src/components/Header.tsx

@@ -11,10 +11,10 @@
 
 import { useMemo, type ReactNode } from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
-import { useTheme } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
-import { Text } from "../primitives/Text";
-import { resolveHeaderStyle, type HeaderStyle } from "./header.styles";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import { Text } from "../primitives/Text.js";
+import { resolveHeaderStyle, type HeaderStyle } from "./header.styles.js";
 
 interface HeaderProps {
   /** 画面タイトル（heading として読み上げ）。 */

package/src/components/Image.tsx

@@ -1,8 +1,9 @@
 /**
  * Image — 画像表示 component（設計書 §1）。contract: image（app 先行定義）。
  *
- * - Phase 1 は RN コア Image。expo-image は Phase 2（blurhash / 高度 cache 要件化時）。
- *   差し替えコスト最小化のためここで包む（呼び出し側は melta-app の Image だけ見る）。
+ * - 実装は RN コア Image（依存ゼロ維持）。expo-image への差し替えは blurhash / 高度 cache が
+ *   要件化してから（未着手）。差し替えコスト最小化のためここで包む（呼び出し側は melta-app の
+ *   Image だけ見る）。
  * - contentFit("cover"|"contain") → RN の resizeMode に変換。
  * - onError 時に fallback（ReactNode）を表示。fallback 未指定なら何も出さない。
  * - radius は token キーのみ（生数値不可、§5）。shape の解決は pure resolver
@@ -19,10 +20,10 @@ import {
   type StyleProp,
   type ViewStyle,
 } from "react-native";
-import { useTheme } from "../theme";
-import type { RadiusKey } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
-import { resolveImageShape } from "./image.styles";
+import { useTheme } from "../theme/index.js";
+import type { RadiusKey } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import { resolveImageShape } from "./image.styles.js";
 
 type ContentFit = "cover" | "contain";
 
@@ -85,5 +86,6 @@ export function Image({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Image.__contract = CONTRACTS.image;

package/src/components/Modal.tsx

@@ -8,7 +8,8 @@
  *   Escape → Android back（onRequestClose）、open/closing state → RN Modal の visible + animationType。
  * - overlay tap で閉じる（MODAL_OVERLAY_REQUIRED）。panel 側は onStartShouldSetResponder で
  *   touch を claim し、overlay への伝播を止める（panel 内 tap では閉じない）。
- * - title 行の右端に閉じるボタン「×」（MODAL_CLOSE_REQUIRED、accessibilityLabel="閉じる"）。
+ * - title 行の右端に閉じるボタン「×」（MODAL_CLOSE_REQUIRED、accessibilityLabel は既定 "閉じる"、
+ *   closeAccessibilityLabel で差し替え可能）。当たり判定は正典パターン（24 + hitSlop 10 = 44pt）。
  *   title は melta の Text ではなく titleStyle 直（recipe が typography を持つ）。
  * - style の決定は pure resolver（modal.styles.ts）に分離 — recipe との機械照合対象。
  *   title 行の row layout と × の見た目は recipe 外の構造 glue（token 経由で解決）。
@@ -21,14 +22,15 @@ import {
   Text as RNText,
   View,
 } 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 {
+  MODAL_CLOSE_TAP_TARGET,
   resolveModalStyle,
   type ModalSize,
   type ModalStyle,
   type ModalVariant,
-} from "./modal.styles";
+} from "./modal.styles.js";
 
 interface ModalProps {
   /** 表示制御（契約の open state に対応。閉じるアニメは RN Modal に委譲）。 */
@@ -43,6 +45,11 @@ interface ModalProps {
   size?: ModalSize;
   /** アクション群（任意）。footerStyle の row に載る。 */
   footer?: ReactNode;
+  /**
+   * × ボタンの accessibilityLabel（i18n フック）。既定は日本語 "閉じる"
+   * （既存アプリの読み上げを変えないため据え置き）。
+   */
+  closeAccessibilityLabel?: string;
   testID?: string;
   /** body。 */
   children: ReactNode;
@@ -55,6 +62,7 @@ export function Modal({
   variant = "confirmation",
   size = "medium",
   footer,
+  closeAccessibilityLabel = "閉じる",
   testID,
   children,
 }: ModalProps) {
@@ -86,11 +94,19 @@ export function Modal({
             <RNText style={[styles.titleStyle, { flex: 1 }]} accessibilityRole="header">
               {title}
             </RNText>
+            {/* 最小タップターゲット確保: 正典パターン（視覚 24 + hitSlop 10 = 実効 44）。
+                × のグリフは幅 13pt 前後しかないので、箱の下限を持たせないと 44 に届かない。 */}
             <Pressable
               onPress={onClose}
               accessibilityRole="button"
-              accessibilityLabel="閉じる"
-              hitSlop={theme.spacing["2"]}
+              accessibilityLabel={closeAccessibilityLabel}
+              hitSlop={MODAL_CLOSE_TAP_TARGET.hitSlop}
+              style={{
+                minWidth: MODAL_CLOSE_TAP_TARGET.minWidth,
+                minHeight: MODAL_CLOSE_TAP_TARGET.minHeight,
+                alignItems: "center",
+                justifyContent: "center",
+              }}
             >
               <RNText
                 style={{

package/src/components/Progress.tsx

@@ -23,14 +23,14 @@ import {
   type StyleProp,
   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 {
   PROGRESS_INDETERMINATE_FILL_RATIO,
   clampProgressValue,
   resolveProgressStyles,
   type ProgressVariant,
-} from "./progress.styles";
+} from "./progress.styles.js";
 
 interface ProgressProps {
   /** 進捗タイプ（contract variant）。default "primary"。 */
@@ -120,5 +120,6 @@ export function Progress({ variant = "primary", value, label, style, testID }: P
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Progress.__contract = CONTRACTS.progress;

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;