melta-app 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melta-app",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "melta for APP — melta デザインシステムの React Native UI kit。melta-contracts（デザイン契約）を single source of truth に RN 実装でその契約を満たす。アプリ本体ではなくライブラリ。",
   "license": "MIT",
   "homepage": "https://app.melta.tsubotax.com",
@@ -37,8 +37,16 @@
       "import": "./lib/module/safe-area/index.js",
       "default": "./lib/module/safe-area/index.js"
     },
-    "./eslint-plugin": "./eslint-rules/melta.mjs",
-    "./eslint-rules/melta.mjs": "./eslint-rules/melta.mjs",
+    "./eslint-plugin": {
+      "types": "./eslint-rules/melta.d.mts",
+      "import": "./eslint-rules/melta.mjs",
+      "default": "./eslint-rules/melta.mjs"
+    },
+    "./eslint-rules/melta.mjs": {
+      "types": "./eslint-rules/melta.d.mts",
+      "import": "./eslint-rules/melta.mjs",
+      "default": "./eslint-rules/melta.mjs"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -55,8 +63,8 @@
     "example"
   ],
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
+    "react": ">=18.2.0",
+    "react-native": ">=0.71.0",
     "react-native-safe-area-context": ">=4",
     "react-native-svg": ">=15"
   },
@@ -69,6 +77,7 @@
     }
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "0.18.5",
     "@jest/globals": "^29.7.0",
     "@react-native/babel-preset": "^0.85.3",
     "@react-native/jest-preset": "^0.85.3",
@@ -77,7 +86,7 @@
     "@types/react": "~19.2.2",
     "eslint": "^10.4.1",
     "jest": "^29.7.0",
-    "melta-contracts": "^0.6.0",
+    "melta-contracts": "^0.7.0",
     "react": "19.2.3",
     "react-native": "0.85.3",
     "react-native-builder-bob": "^0.40.13",
@@ -117,7 +126,10 @@
     ],
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.test.tsx"
-    ]
+    ],
+    "moduleNameMapper": {
+      "^(\\.{1,2}/.*)\\.js$": "$1"
+    }
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -136,5 +148,8 @@
         }
       ]
     ]
+  },
+  "engines": {
+    "node": ">=22"
   }
 }

package/src/a11y/tap-target.ts

@@ -0,0 +1,38 @@
+/**
+ * tap-target — 実効タップ標的 44pt（横断方針）の数値 SSOT。
+ *
+ * 正本は melta-contracts の `A11Y_MIN_TAP_TARGET_44`（rules.json）:
+ * 「すべての操作要素は実効タップ標的 44pt を下回らない。視覚寸法は契約どおり据え置き、
+ * 当たり判定だけを広げる。app は視覚 24pt + hitSlop 10 の正典パターンか minHeight で下限を保証する
+ * （height 固定は fontScale でクリップするので使わない）」。
+ *
+ * ここは「44」という数と正典パターンの寸法を**一箇所**に置くための pure module。
+ * 各コンポーネントの hitSlop 値そのものは **literal で各 `*.styles.ts` に置く**（ここから
+ * 自動導出しない）。導出にすると視覚寸法が変わったとき hitSlop も一緒に動いてしまい、
+ * conformance テスト（scripts/lib/tap-target-conformance.test.ts）が構造的に fail-open になるため。
+ *
+ * react-native を import しない純粋モジュール（`*.styles.ts` と同じ規約）。
+ */
+
+/** 実効タップ標的の下限（pt）。WCAG 2.2 SC 2.5.5（AAA）水準を melta の横断方針として採る。 */
+export const MIN_TAP_TARGET = 44;
+
+/**
+ * 正典パターン: 視覚 24pt の箱 + hitSlop 10 → 実効 44pt。
+ * 背景を持たない小さな操作要素（Tag removable の × / Toast の × / Alert の × / Modal の ×）はこれ。
+ */
+export const CANONICAL_TAP_TARGET = {
+  minWidth: 24,
+  minHeight: 24,
+  hitSlop: 10,
+} as const;
+
+/**
+ * 視覚寸法 `visual` を実効 44pt に届かせるのに必要な**片側** hitSlop（切り上げ ＝ 安全側）。
+ *
+ * ⚠️ 実装の hitSlop 値をこの関数で計算しないこと（上のコメント参照）。
+ * 使うのは (a) 値を決めるときの検算、(b) conformance テストの期待値算出。
+ */
+export function requiredHitSlop(visual: number): number {
+  return Math.max(0, Math.ceil((MIN_TAP_TARGET - visual) / 2));
+}

package/src/components/ActionSheet.tsx

@@ -9,22 +9,27 @@
  *   色だけでなくラベル文言でも破壊的操作と分かる文言にするのは呼び出し側の責務（contract a11y）。
  * - 先頭 action の borderTop は title が無い場合は消す（title がある時だけ区切りとして意味を持つ）。
  * - action の onPress 後は onClose も呼ぶ（選択 = シートを閉じる）。
- * - sheet 群は SafeAreaView で包み下余白（ホームインジケータ）を確保（recipe description 参照）。
+ * - 下余白（ホームインジケータ）は SafeArea で確保する（recipe description 参照）。位置は
+ *   **最下部の面である cancel ブロックの内側**（BottomSheet と同じ「内側」方針に統一）。
+ *   0.5.x までは sheet 群の外側に置いていたため、iOS では inset 帯に overlay の黒が見えていた。
+ *   内側に移したことで inset 帯まで bg-surface で塗られる代わり、cancel ブロックは
+ *   inset のぶん背が高くなる（ラベルは上寄りに見える）＝意図した見た目の変更。
+ *   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（action-sheet.styles.ts）に分離 — recipe との機械照合対象。
  */
 
 import { useMemo } 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 { resolveActionSheetStyle, type ActionSheetStyle } from "./action-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 { resolveActionSheetStyle, type ActionSheetStyle } from "./action-sheet.styles.js";
+import { resolveSafeAreaView, type SafeAreaEdge } from "./safe-area-registry.js";
+
+/** シートは画面下端に密着するので top inset は不要。 */
+const SHEET_EDGES: readonly SafeAreaEdge[] = ["bottom", "left", "right"];
 
 export interface ActionSheetAction {
   label: string;
@@ -61,6 +66,8 @@ export function ActionSheet({
     [theme, mode],
   );
 
+  const SafeArea = resolveSafeAreaView(SHEET_EDGES);
+
   return (
     <RNModal
       visible={visible}
@@ -70,8 +77,8 @@ export function ActionSheet({
       statusBarTranslucent
     >
       <Pressable style={styles.overlayStyle} onPress={onClose} accessible={false}>
-        {/* sheet 群（sheet + cancel）: SafeArea で下余白を確保し、touch を claim して overlay へ流さない */}
-        <SafeAreaView
+        {/* sheet 群（sheet + cancel）: touch を claim して overlay へ流さない */}
+        <View
           accessibilityViewIsModal
           onStartShouldSetResponder={() => true}
           testID={testID}
@@ -101,9 +108,12 @@ export function ActionSheet({
             ))}
           </View>
           <Pressable accessibilityRole="button" onPress={onClose} style={styles.cancelStyle}>
-            <RNText style={styles.cancelTextStyle}>{cancelLabel}</RNText>
+            {/* SafeArea は最下部の面（cancel）の内側 = inset 帯を overlay の黒でなく bg-surface で塗る */}
+            <SafeArea>
+              <RNText style={styles.cancelTextStyle}>{cancelLabel}</RNText>
+            </SafeArea>
           </Pressable>
-        </SafeAreaView>
+        </View>
       </Pressable>
     </RNModal>
   );

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;