melta-app 0.1.0

package/src/components/Radio.tsx

@@ -0,0 +1,151 @@
+/**
+ * Radio — 単一選択フォームコントロール。contract: radio。
+ *
+ * - 契約どおり fieldset 相当の RadioGroup として実装する（コンポーネント名は Radio、
+ *   recipe description 参照）。groupLabel（= legend 相当の label prop）必須
+ *   （FORM_FIELDSET_LEGEND_REQUIRED を props 型で強制）。
+ * - variant はレイアウト: vertical（標準）/ horizontal（wrap する横並び）/ card-style
+ *   （各 option を枠付きカードにする。web の grid 2col は RN では縦積みに読み替え）。
+ * - RN にネイティブ radio が無いため各 option は Pressable + 描画（circle + 内側 dot）。
+ * - 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 差分なし）。
+ * - a11y: グループに accessibilityRole="radiogroup"、各 option に "radio" +
+ *   accessibilityState={{ checked, disabled }}。
+ * - 色・寸法の決定は pure resolver（radio.styles.ts）に分離。
+ *   recipes/app/radio.recipe.json との機械照合は scripts/lib/radio-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 {
+  RADIO_SPEC,
+  resolveRadioCircleStyle,
+  resolveRadioGroupStyle,
+  type RadioVariant,
+} from "./radio.styles";
+
+export interface RadioOption {
+  label: string;
+  value: string;
+  /** label の下に出す補足（text-muted の小テキスト。card-style で使う想定）。 */
+  description?: string;
+  /** この option だけ操作不可にする。 */
+  disabled?: boolean;
+}
+
+export interface RadioProps {
+  /** グループラベル（fieldset の legend 相当。必須 = FORM_FIELDSET_LEGEND_REQUIRED）。 */
+  label: string;
+  options: RadioOption[];
+  /** 選択中の option の value（未選択は undefined）。 */
+  value: string | undefined;
+  onChange: (value: string) => void;
+  variant?: RadioVariant;
+  /** エラーメッセージ。指定時は circle が danger 枠になりメッセージを表示する。 */
+  error?: string;
+  /** グループ全体を操作不可にする。 */
+  disabled?: boolean;
+  testID?: string;
+}
+
+export function Radio({
+  label,
+  options,
+  value,
+  onChange,
+  variant = "vertical",
+  error,
+  disabled = false,
+  testID,
+}: RadioProps) {
+  const { theme, mode } = useTheme();
+  const hasError = error != null && error !== "";
+  const group = useMemo(() => resolveRadioGroupStyle(theme, mode, variant), [theme, mode, variant]);
+  // circle は selected × error の 2 値。option ごとに再計算しないよう両方を先に解決しておく。
+  const circles = useMemo(
+    () => ({
+      unselected: resolveRadioCircleStyle(theme, mode, { selected: false, error: hasError }),
+      selected: resolveRadioCircleStyle(theme, mode, { selected: true, error: hasError }),
+    }),
+    [theme, mode, hasError],
+  );
+
+  return (
+    <View testID={testID} style={disabled ? { opacity: RADIO_SPEC.disabledOpacity } : undefined}>
+      {/* groupLabel（sm/medium/text-heading = recipe groupLabelStyle と同値）。 */}
+      <Text
+        variant="sm"
+        weight="medium"
+        color="text-heading"
+        style={{ marginBottom: group.groupLabelStyle.marginBottom }}
+      >
+        {label}
+      </Text>
+      <View accessibilityRole="radiogroup" style={group.containerStyle}>
+        {options.map((option) => {
+          const selected = option.value === value;
+          const optionDisabled = disabled || option.disabled === true;
+          return (
+            <Pressable
+              key={option.value}
+              onPress={() => onChange(option.value)}
+              disabled={optionDisabled}
+              accessibilityRole="radio"
+              accessibilityState={{ checked: selected, disabled: optionDisabled }}
+              accessibilityLabel={option.label}
+              style={[
+                variant === "card-style"
+                  ? [group.cardStyle, selected ? group.cardSelectedStyle : null]
+                  : null,
+                // グループ disabled は外側 View の opacity で表現済み。二重にしない。
+                option.disabled === true && !disabled
+                  ? { opacity: RADIO_SPEC.disabledOpacity }
+                  : null,
+              ]}
+            >
+              <View
+                style={{
+                  flexDirection: "row",
+                  // description 付きは複数行になるので circle を先頭行に寄せる。
+                  alignItems: option.description != null ? "flex-start" : "center",
+                  gap: group.optionGap,
+                }}
+              >
+                <View style={selected ? circles.selected : circles.unselected}>
+                  {selected ? <View style={group.dotStyle} /> : null}
+                </View>
+                <View style={{ flexShrink: 1 }}>
+                  <Text variant="base" color="text-default">
+                    {option.label}
+                  </Text>
+                  {option.description != null ? (
+                    <Text variant="sm" color="text-muted">
+                      {option.description}
+                    </Text>
+                  ) : null}
+                </View>
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+      {hasError ? (
+        // danger.text-light は SemanticColors 外なので style で上書き（Button の textColor と同じ扱い）。
+        <Text
+          variant="xs"
+          style={{ color: group.errorTextStyle.color, marginTop: group.errorTextStyle.marginTop }}
+        >
+          {error}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Radio.__contract = CONTRACTS.radio;

package/src/components/Screen.tsx

@@ -0,0 +1,62 @@
+/**
+ * Screen — 画面骨格 primitive（SafeArea + bg-page + content padding）。
+ * contract: screen（app 先行定義、melta-contracts）。dogfood 不足-3（SafeAreaView + ScrollView +
+ * ヘッダーの毎画面手書き）の解消。
+ *
+ * - variant="scroll"（default）は content を ScrollView に、"fixed" は flex:1 の View に載せる。
+ * - header slot は scroll の外（SafeArea 直下）に固定する。
+ * - padding は spacing token キー限定 | "none"（default "4"）。
+ * - 決定ロジックは pure resolver（screen.styles.ts）に分離 — recipe との機械照合対象。
+ *
+ * ⚠️ SafeArea は RN core の SafeAreaView（deprecated / iOS のみの最小対応）を意図的に使う。
+ * 依存ゼロ方針（P1）を安全域の精度より優先した判断。Android の edge-to-edge や notch 精度が
+ * 必要になったら react-native-safe-area-context への adapter 化を再検討する（optional peer の
+ * 前例は Icon × react-native-svg）。
+ */
+
+import { useMemo, type ReactNode } from "react";
+import { SafeAreaView, ScrollView, View, type StyleProp, type ViewStyle } from "react-native";
+import { useTheme } from "../theme";
+import { CONTRACTS, type VariantOf } from "../contracts/contract-types";
+import { resolveScreenStyle, type ScreenPadding, type ScreenStyle } from "./screen.styles";
+
+interface ScreenProps {
+  /** 画面の骨格（contract variant）。default "scroll"。 */
+  variant?: VariantOf<"screen">;
+  /** content の padding（spacing token キー限定 | "none"）。default "4"。 */
+  padding?: ScreenPadding;
+  /** scroll 外（SafeArea 直下）に固定されるヘッダー slot（Header を差す想定）。 */
+  header?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  children: ReactNode;
+}
+
+export function Screen({
+  variant = "scroll",
+  padding = "4",
+  header,
+  style,
+  testID,
+  children,
+}: ScreenProps) {
+  const { theme, mode } = useTheme();
+
+  const { safeAreaStyle, contentStyle } = useMemo<ScreenStyle>(
+    () => resolveScreenStyle(theme, mode, { variant, padding }),
+    [theme, mode, variant, padding],
+  );
+
+  return (
+    <SafeAreaView style={[safeAreaStyle, style]} testID={testID}>
+      {header}
+      {variant === "scroll" ? (
+        <ScrollView contentContainerStyle={contentStyle}>{children}</ScrollView>
+      ) : (
+        <View style={contentStyle}>{children}</View>
+      )}
+    </SafeAreaView>
+  );
+}
+
+Screen.__contract = CONTRACTS.screen;

package/src/components/Skeleton.tsx

@@ -0,0 +1,154 @@
+/**
+ * Skeleton — ローディングプレースホルダー（設計書 §1）。contract: skeleton。
+ *
+ * - variant: text（行バー）/ circle（アバター）/ card（Surface 土台 + 中にバー）。
+ * - a11y: accessibilityState={{busy:true}} + accessibilityLabel（default "読み込み中"）。
+ * - 色・寸法の決定は pure resolver（skeleton.styles.ts）に分離。card の Surface props も
+ *   CARD_SURFACE_SPEC（同ファイル）を SSOT として共有し、
+ *   recipes/app/skeleton.recipe.json との機械照合は scripts/lib/skeleton-conformance.test.ts が行う。
+ * - bg: text/circle は border-default。card は Surface 土台（bg-surface+border+elevation.sm）
+ *   の上に border-default のバーを置く（contract に忠実、§1 Agent m2）。
+ * - pulse の reduce-motion 順序ハザード（§1）: Animated.Value を opacityFrom（= 非アニメ状態）で
+ *   初期化し、effect 内で AccessibilityInfo.isReduceMotionEnabled() を await した後にのみ loop 開始する。
+ *   同期的に loop を start すると reduce-motion ON でも一瞬光るため。ON 時は pulse 完全停止 + busy 維持。
+ */
+
+import { useEffect, useMemo, useRef } from "react";
+import {
+  AccessibilityInfo,
+  Animated,
+  View,
+  type DimensionValue,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { Surface } from "./Surface";
+import { useTheme } from "../theme";
+import { CONTRACTS } from "../contracts/contract-types";
+import {
+  CARD_SURFACE_SPEC,
+  PULSE_OPACITY,
+  SKELETON_METRICS,
+  resolveSkeletonStates,
+  resolveSkeletonVariants,
+  type SkeletonVariant,
+} from "./skeleton.styles";
+
+interface SkeletonProps {
+  variant?: SkeletonVariant;
+  width?: DimensionValue;
+  /** text variant の行数。 */
+  lines?: number;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function Skeleton({
+  variant = "text",
+  width = "100%",
+  lines = 1,
+  accessibilityLabel = "読み込み中",
+  style,
+  testID,
+}: SkeletonProps) {
+  const { theme, mode } = useTheme();
+  const styles = useMemo(() => resolveSkeletonVariants(theme, mode), [theme, mode]);
+  // 初期値 opacityFrom = 非アニメ（reduce-motion でも光らない）。reduce-motion OFF を確認後にのみ loop で揺らす。
+  const opacity = useRef(new Animated.Value(PULSE_OPACITY.from)).current;
+
+  useEffect(() => {
+    let cancelled = false;
+    let loop: Animated.CompositeAnimation | null = null;
+    // pulse の値（opacity 振れ幅 / duration）は resolver 側が SSOT（recipe states.loading と照合される）。
+    const anim = resolveSkeletonStates(theme).loading.animation;
+    AccessibilityInfo.isReduceMotionEnabled().then((reduce) => {
+      if (cancelled || reduce) return;
+      loop = Animated.loop(
+        Animated.sequence([
+          Animated.timing(opacity, {
+            toValue: anim.opacityTo,
+            duration: anim.duration,
+            useNativeDriver: true,
+          }),
+          Animated.timing(opacity, {
+            toValue: anim.opacityFrom,
+            duration: anim.duration,
+            useNativeDriver: true,
+          }),
+        ]),
+      );
+      loop.start();
+    });
+    return () => {
+      cancelled = true;
+      loop?.stop();
+    };
+  }, [opacity, theme]);
+
+  // contract a11y role は web の "status"。RN の accessibilityRole に status は無いため、
+  // busy state + label で status 相当を表現する（§2 web→RN mapping、skeleton は busy で扱う）。
+  const a11y = {
+    accessible: true,
+    accessibilityState: { busy: true },
+    accessibilityLabel,
+  };
+
+  if (variant === "circle") {
+    return (
+      <Animated.View {...a11y} testID={testID} style={[styles.circle.style, { opacity }, style]} />
+    );
+  }
+
+  if (variant === "card") {
+    const { barStyle } = styles.card;
+    const { borderWidth, borderColor } = styles.card.style;
+    return (
+      <Surface
+        {...CARD_SURFACE_SPEC}
+        // contract skeleton.card は border-default を要求（Surface は border を出さないので Skeleton で付与）。
+        style={[{ borderWidth, borderColor }, style]}
+        testID={testID}
+      >
+        <Animated.View {...a11y} style={{ opacity, gap: theme.spacing["3"] }}>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing["3"] }}>
+            <View
+              style={{
+                width: SKELETON_METRICS.circleSize,
+                height: SKELETON_METRICS.circleSize,
+                borderRadius: theme.radius.full,
+                backgroundColor: barStyle.backgroundColor,
+              }}
+            />
+            <View style={{ flex: 1, gap: theme.spacing["2"] }}>
+              <View style={[barStyle, { width: "60%" }]} />
+              <View style={[barStyle, { width: "40%" }]} />
+            </View>
+          </View>
+          <View style={barStyle} />
+          <View style={[barStyle, { width: "80%" }]} />
+        </Animated.View>
+      </Surface>
+    );
+  }
+
+  // text（行バー）: recipe は 1 slot（style）に行バー + 行間 gap を併記 → gap はコンテナへ分離。
+  const { gap, ...textBar } = styles.text.style;
+  return (
+    <Animated.View {...a11y} testID={testID} style={[{ gap, opacity }, style]}>
+      {Array.from({ length: lines }, (_unused, i) => (
+        <View
+          key={i}
+          style={[
+            textBar,
+            // 最終行だけ短く（自然な見た目）。
+            { width: lines > 1 && i === lines - 1 ? "70%" : width },
+          ]}
+        />
+      ))}
+    </Animated.View>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Skeleton.__contract = CONTRACTS.skeleton;

package/src/components/Surface.tsx

@@ -0,0 +1,37 @@
+/**
+ * Surface — Card / Skeleton / EmptyState の共通土台となる「箱」（設計書 §1）。
+ * contract: surface（app 先行定義）。
+ *
+ * - 公開 P1 で正式 export に昇格（契約 surface.contract.json + recipe を持つ implemented のため）。
+ *   セマンティクスを持つ箱が必要なら Card を優先し、Surface は素の土台が要る時だけ使う。
+ * - elevation[key] は iOS shadow* + Android elevation を 1 ViewStyle に同居させた値なので
+ *   そのまま spread すれば両 OS に効く（types.ts ElevationStyle）。
+ * - 色・寸法の決定は pure resolver（surface.styles.ts）に分離。デフォルト値
+ *   （bg=bg-surface / radius=lg / elevation=none）も resolver 側が持ち、
+ *   recipes/app/surface.recipe.json との機械照合は scripts/lib/surface-conformance.test.ts が行う。
+ */
+
+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";
+
+export interface SurfaceProps extends SurfaceStyleProps {
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  children?: ReactNode;
+}
+
+export function Surface({ bg, radius, elevation, padding, style, testID, children }: SurfaceProps) {
+  const { theme, mode } = useTheme();
+  const resolved = resolveSurfaceStyle(theme, mode, { bg, radius, elevation, padding });
+  return (
+    <View testID={testID} style={[resolved.base, resolved.elevation, style]}>
+      {children}
+    </View>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Surface.__contract = CONTRACTS.surface;

package/src/components/TextField.tsx

@@ -0,0 +1,102 @@
+/**
+ * TextField — テキスト入力フィールド（contract: textfield）。RN TextInput の薄いラッパ。
+ *
+ * - label 必須（FORM_NO_LABEL_OMIT）。label（labelStyle）→ input → helperText / errorText の縦構成。
+ * - variant は検証状態（default/error/success）。disabled=true で variant を "disabled" に上書きし、
+ *   editable=false + accessibilityState.disabled を併せて適用する（recipe description の規約）。
+ * - error 時は errorText を必ずテキストで表示する（FORM_NO_COLOR_ONLY_ERROR = 色だけで伝えない）。
+ *   RN には aria-describedby 相当が無いため、accessibilityState ではなく Text の実表示で伝える。
+ * - focus は内部 state（onFocus/onBlur）で recipe states.focus の inputStyle 差分
+ *   （borderColor=primary.500）を重ねる。disabled 時は focus させない。
+ * - 色・寸法の決定は pure resolver（textfield.styles.ts）に分離。
+ *   recipes/app/textfield.recipe.json との機械照合は scripts/lib/textfield-conformance.test.ts が行う。
+ */
+
+import { useMemo, useState } from "react";
+import {
+  TextInput,
+  View,
+  Text as RNText,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { useTheme } from "../theme";
+import { CONTRACTS } from "../contracts/contract-types";
+import {
+  resolveTextFieldStyle,
+  resolveTextFieldFocusStyle,
+  type TextFieldSize,
+} from "./textfield.styles";
+
+interface TextFieldProps {
+  /** ラベル（必須。placeholder だけの入力欄を作らせない = FORM_NO_LABEL_OMIT）。 */
+  label: string;
+  value: string;
+  onChangeText?: (text: string) => void;
+  placeholder?: string;
+  /** 検証状態。disabled は prop（下の disabled）で表現するため variant には含めない。 */
+  variant?: "default" | "error" | "success";
+  /** true で variant を "disabled" に上書き + editable=false + accessibilityState.disabled。 */
+  disabled?: boolean;
+  size?: TextFieldSize;
+  /** 補足テキスト（error 表示中は errorText を優先して非表示）。 */
+  helperText?: string;
+  /** variant="error" 時に表示するエラーメッセージ（色だけでなくテキストで伝える）。 */
+  errorText?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function TextField({
+  label,
+  value,
+  onChangeText,
+  placeholder,
+  variant = "default",
+  disabled = false,
+  size = "medium",
+  helperText,
+  errorText,
+  style,
+  testID,
+}: TextFieldProps) {
+  const { theme, mode, colors } = useTheme();
+  const [focused, setFocused] = useState(false);
+
+  // disabled prop が variant を上書き（契約の variant 語彙 "disabled" への写像）。
+  const effectiveVariant = disabled ? "disabled" : variant;
+  const resolved = useMemo(
+    () => resolveTextFieldStyle(theme, mode, { variant: effectiveVariant, size }),
+    [theme, mode, effectiveVariant, size],
+  );
+  const focusStyle = useMemo(() => resolveTextFieldFocusStyle(theme), [theme]);
+
+  const showError = effectiveVariant === "error" && errorText != null;
+
+  return (
+    <View style={style} testID={testID}>
+      <RNText style={resolved.label}>{label}</RNText>
+      <TextInput
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={colors["text-muted"]}
+        editable={!disabled}
+        accessibilityLabel={label}
+        accessibilityState={{ disabled }}
+        onFocus={() => {
+          if (!disabled) setFocused(true);
+        }}
+        onBlur={() => setFocused(false)}
+        style={[resolved.input, focused && !disabled ? focusStyle : null]}
+      />
+      {helperText != null && !showError && (
+        <RNText style={resolved.helperText}>{helperText}</RNText>
+      )}
+      {showError && <RNText style={resolved.errorText}>{errorText}</RNText>}
+    </View>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+TextField.__contract = CONTRACTS.textfield;

package/src/components/Toast.tsx

@@ -0,0 +1,103 @@
+/**
+ * Toast — 一時的な通知メッセージ（feedback）。contract: toast。
+ * 4タイプ（success/error/warning/info）。Alert と同系の bg subtle + text 色に elevation.sm を重ねる。
+ *
+ * - presentational component。表示位置・キュー・自動消滅はアプリ層の責務
+ *   （entering/visible/dismissing のアニメ state は Phase 外、recipe description）。
+ * - closeButton は契約 anatomy で必須 → onClose を required prop にして型で強制。
+ *   Pressable + テキスト ×（accessibilityLabel="閉じる" 必須）。
+ * - a11y（§2 web→RN mapping）: web の role=status + aria-live=polite を
+ *   accessibilityLiveRegion="polite"（Android のみ有効）に落とす。
+ * - elevation は theme.elevation.sm（iOS shadow* + Android elevation の複合値）を container に
+ *   spread（Surface と同じ扱い）。
+ * - 色・寸法の決定は pure resolver（toast.styles.ts）に分離。dark mode は resolver が
+ *   status.*.subtleDark / textDark を解決（info のみ primary 固定）。
+ *   recipes/app/toast.recipe.json との機械照合は scripts/lib/toast-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 { TOAST_SPEC, resolveToastStyles, type ToastVariant } from "./toast.styles";
+
+interface ToastProps {
+  /** 通知タイプ（contract variant）。 */
+  variant: ToastVariant;
+  /** 本文（必須）。 */
+  message: string;
+  /** 補足説明（任意。message の下に縦積み）。 */
+  description?: string;
+  /** 閉じるボタン（契約 anatomy で必須）。 */
+  onClose: () => void;
+  /** あれば message の後にアクションテキスト（onAction とセットで有効）。 */
+  actionLabel?: string;
+  onAction?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function Toast({
+  variant,
+  message,
+  description,
+  onClose,
+  actionLabel,
+  onAction,
+  style,
+  testID,
+}: ToastProps) {
+  const { theme, mode } = useTheme();
+  const styles = useMemo(() => resolveToastStyles(theme, mode, variant), [theme, mode, variant]);
+
+  return (
+    <View
+      accessibilityLiveRegion="polite"
+      testID={testID}
+      style={[styles.containerStyle, styles.elevation, style]}
+    >
+      <View style={{ flex: 1, gap: theme.spacing["1"] }}>
+        <Text
+          variant={TOAST_SPEC.messageFont}
+          weight={TOAST_SPEC.messageWeight}
+          style={{ color: styles.messageStyle.color }}
+        >
+          {message}
+        </Text>
+        {description != null && (
+          // description の style は recipe 外（anatomy の description? slot）。message と同色・同サイズ、weight 無し。
+          <Text variant={TOAST_SPEC.messageFont} style={{ color: styles.messageStyle.color }}>
+            {description}
+          </Text>
+        )}
+      </View>
+      {actionLabel != null && onAction != null && (
+        <Pressable onPress={onAction} accessibilityRole="button" hitSlop={10}>
+          <Text
+            variant={TOAST_SPEC.messageFont}
+            weight={TOAST_SPEC.messageWeight}
+            style={{ color: styles.messageStyle.color, textDecorationLine: "underline" }}
+          >
+            {actionLabel}
+          </Text>
+        </Pressable>
+      )}
+      {/* 最小タップターゲット確保: min 24 + hitSlop（Tag removable と同じ手当て）。 */}
+      <Pressable
+        onPress={onClose}
+        accessibilityRole="button"
+        accessibilityLabel="閉じる"
+        hitSlop={10}
+        style={{ minWidth: 24, minHeight: 24, alignItems: "center", justifyContent: "center" }}
+      >
+        <Text variant="xs" style={{ color: styles.messageStyle.color }}>
+          ×
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Toast.__contract = CONTRACTS.toast;