melta-app 0.1.0

package/src/components/Card.tsx

@@ -0,0 +1,102 @@
+/**
+ * Card — コンテンツコンテナ component（設計書 §1）。contract: card。
+ *
+ * - 土台の解決（bg/radius/elevation/border/padding）は pure resolver（card.styles.ts の
+ *   resolveCardShape）に一元化し、非インタラクティブ(View)・インタラクティブ(Pressable) の
+ *   両分岐で共有する（DRY、形状二重定義を防ぐ）。recipe との機械照合は
+ *   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）。
+ * - 型で action/link は onPress 必須を強制（§4 の DU 精神。無言で非対話に落ちる事故を防ぐ）。
+ * - Card は Image/Metric に依存しない（§1）。media/header/footer/children に呼び出し側が差し込む。
+ *   ツー活カードは D2I が slot に Image+Metric を compose する。
+ * - media variant は overflow:hidden で角丸に画像をクリップし、body だけにパディング（contract と整合）。
+ */
+
+import type { ReactNode } from "react";
+import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
+import { useTheme } from "../theme";
+import { useFocusRing, FocusRing } from "../primitives/_internal/focus-ring";
+import { CONTRACTS } from "../contracts/contract-types";
+import { CARD_INTERACTIVE, resolveCardShape, resolveCardBodyStyle } from "./card.styles";
+
+interface CardBase {
+  header?: ReactNode;
+  footer?: ReactNode;
+  media?: ReactNode;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  /** body。 */
+  children: ReactNode;
+}
+
+// action/link（インタラクティブ）は onPress 必須、basic/media は onPress を取らない（§4 DU 精神）。
+type CardProps = CardBase &
+  (
+    | { variant?: "basic" | "media"; onPress?: never }
+    | { variant: "action" | "link"; onPress: () => void }
+  );
+
+export function Card({
+  variant = "basic",
+  header,
+  footer,
+  media,
+  onPress,
+  accessibilityLabel,
+  style,
+  testID,
+  children,
+}: CardProps) {
+  const { theme, mode } = useTheme();
+  const { focused, focusHandlers } = useFocusRing();
+  const interactive = CARD_INTERACTIVE[variant] && onPress != null;
+  const isMedia = variant === "media";
+
+  const inner = (
+    <>
+      {media != null && <View>{media}</View>}
+      <View style={resolveCardBodyStyle(theme, variant)}>
+        {header}
+        {children}
+        {footer}
+      </View>
+    </>
+  );
+
+  // media は内側 clip View で角丸クリップ（外枠の影を消さないため overflow は内側だけに置く、M-1）。
+  // borderRadius は外枠 radius.lg から border 分を引かず同値でクリップ（視覚差は実機で微調整可）。
+  const content = isMedia ? (
+    <View style={{ borderRadius: theme.radius.lg, overflow: "hidden" }}>{inner}</View>
+  ) : (
+    inner
+  );
+
+  if (!interactive) {
+    return (
+      <View testID={testID} style={[resolveCardShape(theme, mode, variant), style]}>
+        {content}
+      </View>
+    );
+  }
+
+  // action/link: pressed 時 elevation.sm→md、focus 時 ring overlay。
+  return (
+    <Pressable
+      {...focusHandlers}
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      style={({ pressed }) => [resolveCardShape(theme, mode, variant, pressed), style]}
+    >
+      {content}
+      <FocusRing visible={focused} radius={theme.radius.lg} />
+    </Pressable>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Card.__contract = CONTRACTS.card;

package/src/components/Checkbox.tsx

@@ -0,0 +1,107 @@
+/**
+ * Checkbox — 複数選択フォームコントロール（form-input 第1弾）。contract: checkbox。
+ *
+ * - RN にネイティブ checkbox が無いため Pressable（行全体タップ）+ 描画で実装する。
+ *   checkmark は rotate した View の L 字 border、indeterminate は横棒
+ *   （react-native-svg 非依存 = 本体エントリの依存ゼロ維持。recipe description 参照）。
+ * - box は 20px（web の 16px より大きいのはタッチ前提）。実タッチ領域は hitSlop 12 で
+ *   44pt（20 + 12×2）を確保する。
+ * - 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 差分なし）。
+ * - 色・寸法の決定は 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";
+
+/** checkmark / 横棒の幾何値（recipe に token 化されていない描画トリック側の定数）。 */
+const CHECKMARK = { width: 10, height: 6, borderWidth: 2, offsetY: -1 } as const;
+const INDETERMINATE_BAR = { width: 10, height: 2 } as const;
+
+export interface CheckboxProps {
+  /** ラベル（必須。FORM_NO_LABEL_OMIT）。 */
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  /** true で不確定状態（親子関係の一部選択）。mark は横棒、a11y は "mixed"。 */
+  indeterminate?: boolean;
+  disabled?: boolean;
+  /** バリデーションエラー（box の borderColor が danger になる）。 */
+  error?: boolean;
+  testID?: string;
+}
+
+export function Checkbox({
+  label,
+  checked,
+  onChange,
+  indeterminate = false,
+  disabled = false,
+  error = false,
+  testID,
+}: CheckboxProps) {
+  const { theme, mode } = useTheme();
+  const resolved = useMemo(
+    () => resolveCheckboxStyle(theme, mode, { checked, indeterminate, error }),
+    [theme, mode, checked, indeterminate, error],
+  );
+
+  return (
+    <Pressable
+      onPress={() => onChange(!checked)}
+      disabled={disabled}
+      hitSlop={CHECKBOX_SPEC.hitSlop}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: indeterminate ? "mixed" : checked, disabled }}
+      accessibilityLabel={label}
+      testID={testID}
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        gap: resolved.gap,
+        opacity: disabled ? CHECKBOX_SPEC.disabledOpacity : 1,
+      }}
+    >
+      <View style={[resolved.boxStyle, { alignItems: "center", justifyContent: "center" }]}>
+        {indeterminate ? (
+          // 横棒（一部選択）。markColor = text-on-accent（states.checked.markColor と同源）。
+          <View
+            style={{
+              width: INDETERMINATE_BAR.width,
+              height: INDETERMINATE_BAR.height,
+              backgroundColor: resolved.markColor,
+            }}
+          />
+        ) : checked ? (
+          // L 字 border を -45deg 回転させた checkmark（svg 非依存の描画トリック）。
+          <View
+            style={{
+              width: CHECKMARK.width,
+              height: CHECKMARK.height,
+              borderLeftWidth: CHECKMARK.borderWidth,
+              borderBottomWidth: CHECKMARK.borderWidth,
+              borderColor: resolved.markColor,
+              marginTop: CHECKMARK.offsetY,
+              transform: [{ rotate: "-45deg" }],
+            }}
+          />
+        ) : null}
+      </View>
+      <Text variant="base" color="text-default">
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Checkbox.__contract = CONTRACTS.checkbox;

package/src/components/EmptyState.tsx

@@ -0,0 +1,64 @@
+/**
+ * EmptyState — データ無し時のプレースホルダー（設計書 §1）。contract: empty-state。
+ * Text + Button の compose（§1）。icon + title + description + 任意の action。
+ *
+ * - title は見出しとして読み上げ（Text role="heading"）。
+ * - action は Button(contained) を内部 compose。
+ * - 中央寄せレイアウト。色は token（title=text-heading, description=text-muted）。
+ * - 色・寸法の決定は pure resolver（empty-state.styles.ts）に分離。Text へ渡すキーも
+ *   EMPTY_STATE_SPEC（同ファイル）を SSOT として共有し、
+ *   recipes/app/empty-state.recipe.json との機械照合は scripts/lib/empty-state-conformance.test.ts が行う。
+ */
+
+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";
+
+interface EmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: { label: string; onPress: () => void };
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function EmptyState({ icon, title, description, action, style, testID }: EmptyStateProps) {
+  const { theme, mode } = useTheme();
+  const styles = useMemo(() => resolveEmptyStateStyles(theme, mode), [theme, mode]);
+  return (
+    <View testID={testID} style={[styles.style, style]}>
+      {icon != null && <View>{icon}</View>}
+      <Text
+        variant={EMPTY_STATE_SPEC.titleFont}
+        role="heading"
+        weight={EMPTY_STATE_SPEC.titleWeight}
+        color={EMPTY_STATE_SPEC.titleColor}
+        style={{ textAlign: styles.titleStyle.textAlign }}
+      >
+        {title}
+      </Text>
+      {description != null && (
+        <Text
+          variant={EMPTY_STATE_SPEC.descriptionFont}
+          color={EMPTY_STATE_SPEC.descriptionColor}
+          style={{ textAlign: styles.descriptionStyle.textAlign }}
+        >
+          {description}
+        </Text>
+      )}
+      {action != null && (
+        <View style={styles.actionStyle}>
+          <Button variant="contained" label={action.label} onPress={action.onPress} />
+        </View>
+      )}
+    </View>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+EmptyState.__contract = CONTRACTS.emptyState;

package/src/components/Header.tsx

@@ -0,0 +1,51 @@
+/**
+ * Header — 画面ヘッダー primitive（title + leading? / trailing? slot + 下 border）。
+ * contract: header（app 先行定義、melta-contracts）。dogfood 不足-3 の解消。
+ * Screen の header slot に差して使う想定（単体でも使える）。
+ *
+ * - title は melta の Text（xl / bold / text-heading / heading role）で描画し、
+ *   heading として読み上げられる（contract a11y required）。
+ * - titleWrapStyle の flex:1 で title が余白を占有し trailing を右端へ押す。
+ * - 決定ロジックは pure resolver（header.styles.ts）に分離 — recipe との機械照合対象。
+ */
+
+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";
+
+interface HeaderProps {
+  /** 画面タイトル（heading として読み上げ）。 */
+  title: string;
+  /** title の左の slot（戻るボタン等）。 */
+  leading?: ReactNode;
+  /** 右端の slot（アクション等）。 */
+  trailing?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function Header({ title, leading, trailing, style, testID }: HeaderProps) {
+  const { theme, mode } = useTheme();
+
+  const { containerStyle, titleWrapStyle } = useMemo<HeaderStyle>(
+    () => resolveHeaderStyle(theme, mode),
+    [theme, mode],
+  );
+
+  return (
+    <View style={[containerStyle, style]} testID={testID}>
+      {leading}
+      <View style={titleWrapStyle}>
+        <Text variant="xl" weight="bold" color="text-heading" role="heading" numberOfLines={1}>
+          {title}
+        </Text>
+      </View>
+      {trailing}
+    </View>
+  );
+}
+
+Header.__contract = CONTRACTS.header;

package/src/components/Image.tsx

@@ -0,0 +1,89 @@
+/**
+ * Image — 画像表示 component（設計書 §1）。contract: image（app 先行定義）。
+ *
+ * - Phase 1 は RN コア Image。expo-image は Phase 2（blurhash / 高度 cache 要件化時）。
+ *   差し替えコスト最小化のためここで包む（呼び出し側は melta-app の Image だけ見る）。
+ * - contentFit("cover"|"contain") → RN の resizeMode に変換。
+ * - onError 時に fallback（ReactNode）を表示。fallback 未指定なら何も出さない。
+ * - radius は token キーのみ（生数値不可、§5）。shape の解決は pure resolver
+ *   （image.styles.ts）に分離。recipes/app/image.recipe.json との機械照合は
+ *   scripts/lib/image-conformance.test.ts が行う。
+ */
+
+import { useState, type ReactNode } from "react";
+import {
+  Image as RNImage,
+  View,
+  type ImageSourcePropType,
+  type ImageStyle,
+  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";
+
+type ContentFit = "cover" | "contain";
+
+interface ImageProps {
+  source: { uri: string } | number;
+  /** 縦横比（width:height）。指定すると width 基準で高さが決まる。 */
+  aspectRatio?: number;
+  radius?: RadiusKey;
+  contentFit?: ContentFit;
+  /** 読み込み失敗時に表示する代替（onError）。 */
+  fallback?: ReactNode;
+  accessibilityLabel?: string;
+  style?: StyleProp<ImageStyle>;
+  testID?: string;
+}
+
+export function Image({
+  source,
+  aspectRatio,
+  radius,
+  contentFit = "cover",
+  fallback,
+  accessibilityLabel,
+  style,
+  testID,
+}: ImageProps) {
+  const { theme } = useTheme();
+  const [errored, setErrored] = useState(false);
+
+  // shape は ImageStyle / ViewStyle 双方に有効な共通サブセット（resolver 参照）なので、
+  // RNImage と fallback View で同じ値を共用できる。
+  const shape = resolveImageShape(theme, { aspectRatio, radius });
+
+  if (errored && fallback != null) {
+    // caller の style(width/height/flex 等の layout)を fallback にも反映する（通常画像と同寸法）。
+    // ImageStyle ⊃ ViewStyle ではないが layout プロパティは共通なので cast で流す
+    // （overflow:"scroll" 等 Image 固有値を caller が入れた稀ケースのみ無視される）。
+    return (
+      <View
+        style={[shape, style as unknown as StyleProp<ViewStyle>]}
+        testID={testID}
+        accessible={accessibilityLabel != null}
+        accessibilityLabel={accessibilityLabel}
+      >
+        {fallback}
+      </View>
+    );
+  }
+
+  return (
+    <RNImage
+      testID={testID}
+      source={source as ImageSourcePropType}
+      resizeMode={contentFit}
+      onError={() => setErrored(true)}
+      accessible={accessibilityLabel != null}
+      accessibilityLabel={accessibilityLabel}
+      style={[shape, style]}
+    />
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Image.__contract = CONTRACTS.image;

package/src/components/Modal.tsx

@@ -0,0 +1,113 @@
+/**
+ * Modal — フォーカストラップとバックドロップを備えたモーダルダイアログ。
+ * contract: modal（feedback）。RN core Modal（transparent + fade）に overlay + panel を載せる。
+ *
+ * - variant（confirmation/form/alert）は意味分類で style は共通（contract / recipe と同じ）。
+ * - size は panel の maxWidth（タブレット以上で効く。モバイルは width 100% - overlay padding が先）。
+ * - 契約の対応物: focus trap → accessibilityViewIsModal（iOS のフォーカス閉じ込め）、
+ *   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 は melta の Text ではなく titleStyle 直（recipe が typography を持つ）。
+ * - style の決定は pure resolver（modal.styles.ts）に分離 — recipe との機械照合対象。
+ *   title 行の row layout と × の見た目は recipe 外の構造 glue（token 経由で解決）。
+ */
+
+import { useMemo, type ReactNode } from "react";
+import {
+  Modal as RNModal,
+  Pressable,
+  Text as RNText,
+  View,
+} from "react-native";
+import { useTheme } from "../theme";
+import { CONTRACTS } from "../contracts/contract-types";
+import {
+  resolveModalStyle,
+  type ModalSize,
+  type ModalStyle,
+  type ModalVariant,
+} from "./modal.styles";
+
+interface ModalProps {
+  /** 表示制御（契約の open state に対応。閉じるアニメは RN Modal に委譲）。 */
+  visible: boolean;
+  /** 閉じ要求（overlay tap / × / Android back の全経路で呼ばれる）。 */
+  onClose: () => void;
+  /** タイトル（契約 aria-labelledby 相当、必須）。 */
+  title: string;
+  /** 意味分類（style は 3 つとも同一）。default "confirmation"。 */
+  variant?: ModalVariant;
+  /** panel の maxWidth 段階。default "medium"。 */
+  size?: ModalSize;
+  /** アクション群（任意）。footerStyle の row に載る。 */
+  footer?: ReactNode;
+  testID?: string;
+  /** body。 */
+  children: ReactNode;
+}
+
+export function Modal({
+  visible,
+  onClose,
+  title,
+  variant = "confirmation",
+  size = "medium",
+  footer,
+  testID,
+  children,
+}: ModalProps) {
+  const { theme, mode, colors } = useTheme();
+
+  const styles = useMemo<ModalStyle>(
+    () => resolveModalStyle(theme, mode, { variant, size }),
+    [theme, mode, variant, size],
+  );
+
+  return (
+    <RNModal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      {/* overlay: tap で閉じる。a11y 要素にはしない（閉じ導線は × と Android back が担う） */}
+      <Pressable style={styles.overlayStyle} onPress={onClose} accessible={false}>
+        <View
+          style={[styles.panelStyle, styles.panelElevation]}
+          accessibilityViewIsModal
+          onStartShouldSetResponder={() => true}
+          testID={testID}
+        >
+          {/* title 行: title が余白を占有し × を右端へ押す（recipe 外の構造 glue） */}
+          <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
+            <RNText style={[styles.titleStyle, { flex: 1 }]} accessibilityRole="header">
+              {title}
+            </RNText>
+            <Pressable
+              onPress={onClose}
+              accessibilityRole="button"
+              accessibilityLabel="閉じる"
+              hitSlop={theme.spacing["2"]}
+            >
+              <RNText
+                style={{
+                  fontSize: theme.typography.fontSize.xl.fontSize,
+                  color: colors["text-muted"],
+                }}
+              >
+                ×
+              </RNText>
+            </Pressable>
+          </View>
+          <View style={styles.bodyStyle}>{children}</View>
+          {footer != null && <View style={styles.footerStyle}>{footer}</View>}
+        </View>
+      </Pressable>
+    </RNModal>
+  );
+}
+
+Modal.__contract = CONTRACTS.modal;

package/src/components/Progress.tsx

@@ -0,0 +1,124 @@
+/**
+ * Progress — リニアプログレスバー（feedback）。contract: progress。
+ * track の中を fill が value%（determinate）または往復アニメ（indeterminate variant）で埋める。
+ *
+ * - variant: primary / success（determinate、value 0〜100 を clamp）/ indeterminate（幅 40% の fill を
+ *   Animated.loop の translateX 往復で流す。duration は theme.motion.duration.slow 基準）。
+ * - MOTION_REDUCED_MOTION_REQUIRED（contract rule）: AccessibilityInfo.isReduceMotionEnabled() を
+ *   初期読取り + reduceMotionChanged 購読で追従し、reduce motion 時は indeterminate のアニメを
+ *   止めて静止 40% にする。translateX は 0 初期化なので同期起動でも一瞬動く事故は無い
+ *   （Skeleton の順序ハザード対策と同趣旨）。
+ * - a11y: accessibilityRole="progressbar" + accessibilityValue {min:0, max:100, now}
+ *   （indeterminate は now を渡さない）+ accessibilityLabel=label（契約 required）。
+ * - 色・寸法の決定は pure resolver（progress.styles.ts）に分離。track の semantic 色は dark 側解決。
+ *   recipes/app/progress.recipe.json との機械照合は scripts/lib/progress-conformance.test.ts が行う。
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  AccessibilityInfo,
+  Animated,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { useTheme } from "../theme";
+import { CONTRACTS } from "../contracts/contract-types";
+import {
+  PROGRESS_INDETERMINATE_FILL_RATIO,
+  clampProgressValue,
+  resolveProgressStyles,
+  type ProgressVariant,
+} from "./progress.styles";
+
+interface ProgressProps {
+  /** 進捗タイプ（contract variant）。default "primary"。 */
+  variant?: ProgressVariant;
+  /** 進捗値 0〜100（determinate 用。範囲外は clamp）。 */
+  value?: number;
+  /** 読み上げラベル（accessibilityLabel。契約 required）。 */
+  label: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function Progress({ variant = "primary", value, label, style, testID }: ProgressProps) {
+  const { theme, mode } = useTheme();
+  const styles = useMemo(() => resolveProgressStyles(theme, mode, variant), [theme, mode, variant]);
+  const indeterminate = variant === "indeterminate";
+  const clamped = clampProgressValue(value ?? 0);
+
+  // indeterminate の往復アニメ: 0〜1 の進行値を track 実測幅で translateX に interpolate する。
+  const progress = useRef(new Animated.Value(0)).current;
+  const [trackWidth, setTrackWidth] = useState(0);
+  const [reduceMotion, setReduceMotion] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+      if (!cancelled) setReduceMotion(enabled);
+    });
+    const sub = AccessibilityInfo.addEventListener("reduceMotionChanged", setReduceMotion);
+    return () => {
+      cancelled = true;
+      sub.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    // reduce motion ON / determinate / 幅未計測 → アニメ無し（fill は左端 40% で静止）。
+    if (!indeterminate || reduceMotion || trackWidth <= 0) {
+      progress.setValue(0);
+      return;
+    }
+    const duration = theme.motion.duration.slow;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(progress, { toValue: 1, duration, useNativeDriver: true }),
+        Animated.timing(progress, { toValue: 0, duration, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [indeterminate, reduceMotion, trackWidth, progress, theme]);
+
+  const onLayout = indeterminate
+    ? (e: LayoutChangeEvent) => setTrackWidth(e.nativeEvent.layout.width)
+    : undefined;
+
+  // fill(40%) が track 内を左端 → 右端で往復する移動量。
+  const translateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, Math.max(0, trackWidth * (1 - PROGRESS_INDETERMINATE_FILL_RATIO))],
+  });
+
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityValue={indeterminate ? { min: 0, max: 100 } : { min: 0, max: 100, now: clamped }}
+      accessibilityLabel={label}
+      testID={testID}
+      onLayout={onLayout}
+      style={[styles.trackStyle, style]}
+    >
+      {indeterminate ? (
+        <Animated.View
+          style={[
+            styles.fillStyle,
+            {
+              width: `${PROGRESS_INDETERMINATE_FILL_RATIO * 100}%`,
+              transform: [{ translateX }],
+            },
+          ]}
+        />
+      ) : (
+        <View style={[styles.fillStyle, { width: `${clamped}%` }]} />
+      )}
+    </View>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Progress.__contract = CONTRACTS.progress;