react-native-store-version 1.4.2 → 2.0.0-beta.1

package/dist/react/DefaultWarningSheet.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Warning（閉じられる警告）のデフォルト UI の中身。Warning の元のデザインの実測値で作る。
+// Modal の枠（戻るボタン・背景タップ・VoiceOver の escape で `dismiss`、幕、下寄せ、アニメーション）は StoreVersionModal.tsx が持ち、
+// ここは `components.Warning` が無いときにその中に描かれるシート。ハンドルは見た目だけ（ドラッグでは閉じない）
+import { Image, Platform, StyleSheet, Text, View } from 'react-native';
+import { ActionButton, BUTTON_TEXT_COLOR, MAX_CONTENT_WIDTH, messageStyle, titleStyle, usePalette, } from './defaultUi.js';
+/** デザインの幕 `rgba(0, 0, 0, 0.35)` */
+export const WARNING_OVERLAY_COLOR = 'rgba(0, 0, 0, 0.35)';
+/**
+ * シートの影（デザイン: `box-shadow: 0 -8px 32px rgba(0, 0, 0, .2)`）。iOS は shadow* にそのまま写し、
+ * Android は elevation に読み替える（影の y オフセットの大きさ 8 を elevation に。elevation は上向きの影を描けない）
+ */
+export const sheetShadow = Platform.select({
+    ios: {
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: -8 },
+        shadowOpacity: 0.2,
+        shadowRadius: 32,
+    },
+    android: { elevation: 8 },
+});
+/** デザインどおりのシート（`components.Warning` が無いときの中身）。`texts` は置き換え済み */
+export const WarningSheet = ({ texts, icon, openStore, dismiss, }) => {
+    const palette = usePalette();
+    return (_jsxs(View, { style: [styles.sheet, { backgroundColor: palette.card }], children: [_jsx(View, { style: [styles.handle, { backgroundColor: palette.handle }] }), icon === undefined ? null : (_jsx(Image, { source: icon, style: [styles.icon, { backgroundColor: palette.iconBg }] })), _jsx(Text, { accessibilityRole: "header", style: [titleStyle, { color: palette.text }], children: texts.title }), _jsx(Text, { style: [messageStyle, { color: palette.sub }], children: texts.message }), _jsxs(View, { style: styles.buttons, children: [_jsx(ActionButton, { label: texts.update, onPress: () => {
+                            // 開けたかどうかは使わない（失敗は onError に渡る。reject しない）
+                            void openStore();
+                        }, backgroundColor: palette.primary, color: BUTTON_TEXT_COLOR }), _jsx(ActionButton, { label: texts.later, onPress: dismiss, color: palette.secondaryText })] })] }));
+};
+const styles = StyleSheet.create({
+    // デザイン: radius 24px 24px 0 0・padding 12px 24px 40px・gap 14。
+    // 下の padding 40 でホームインジケータのセーフエリアも吸収する（react-native-safe-area-context には依存しない）。
+    // 幅は画面いっぱい（スマホ縦向きではデザインと同じ）で、最大 480 に抑えて中央に置く（意図的に変える点）
+    sheet: {
+        width: '100%',
+        maxWidth: MAX_CONTENT_WIDTH,
+        alignSelf: 'center',
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+        paddingTop: 12,
+        paddingHorizontal: 24,
+        paddingBottom: 40,
+        gap: 14,
+        ...sheetShadow,
+    },
+    // デザイン: 40×5・radius 3・align-self center・margin-bottom 10（gap 14 と合わせて次の要素まで 24）
+    handle: {
+        width: 40,
+        height: 5,
+        borderRadius: 3,
+        alignSelf: 'center',
+        marginBottom: 10,
+    },
+    // デザイン: 56×56・radius 13（左寄せ）
+    icon: {
+        width: 56,
+        height: 56,
+        borderRadius: 13,
+        alignSelf: 'flex-start',
+    },
+    // デザイン: ボタンは縦に並べ、ボタン同士 8・ボタンの前の margin-top 8
+    buttons: {
+        gap: 8,
+        marginTop: 8,
+    },
+});

package/dist/react/StoreVersionModal.d.ts

@@ -0,0 +1,52 @@
+import type { UseStoreVersionResult } from './useStoreVersion.ts';
+/** 出している UI の種類 */
+export type UiKind = 'force' | 'warning';
+/** 開閉のアニメーションの時間（ms） */
+export declare const ANIMATION_DURATION_MS = 250;
+/**
+ * iOS の Modal が対応する向き。RN の既定は portrait だけで、横向き専用のアプリでは Modal を出した瞬間に落ちる
+ * （"Supported orientations has no common orientation with the application"）ので、すべて渡す
+ */
+export declare const SUPPORTED_ORIENTATIONS: readonly ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'];
+/**
+ * 出すべき UI。force なら Force、warning で「あとで」が押されていなければ Warning、それ以外
+ * （none / 判定前 / skipped / error）は無し（失敗・タイムアウトでは UI を出さない）。
+ * 再チェック中も前回の `action` が残るので Force は消えない
+ */
+export declare const uiKindOf: (state: UseStoreVersionResult) => UiKind | null;
+/**
+ * 「視差効果を減らす」（iOS）/「アニメーションを無効化」（Android）の設定。変化も追い、`active` が false になったときと
+ * アンマウントで購読を外す。`active` が false の間は取得も購読もしない（Provider が `ui` かつ skipped でないときだけ true にする）。
+ * 取得できるまで・取れない環境では false（動かす）
+ */
+export declare const useReduceMotion: (active: boolean) => boolean;
+/**
+ * デフォルト UI の Modal。Provider が初めて出すものができたときにマウントし、以後はマウントしたまま
+ * （出すものが無い間は `visible={false}` で何も描かない。skipped や判定前はマウントもしない）。
+ * 「視差効果を減らす」は Provider が購読して props で受け取る（マウントと同じ commit で開くので、ここで取りに行くと初回に間に合わない）。
+ *
+ * - 中身の props（`local` / `remote` / `storeUrl` / 文言 / `openStore` / `dismiss`）は出している間に作ったものを保存し、
+ *   閉じるアニメーションの間は最後の値のまま描く（`enabled` を false にした経路では engine が `local` / `remote` / `storeUrl` を
+ *   null にするので、そのまま読むと閉じる途中で本文が変わり、`components` に `local: ''` が渡ってしまう）
+ *
+ * - 開くとき: 幕は opacity 0 → 1、Force のカードは opacity 0 → 1、Warning のシートは画面の高さ分下から translateY → 0（250ms、native driver）
+ * - 閉じるとき（`action` が force / warning でなくなる、Warning が dismiss される）: 逆のアニメーションを走らせ、終わってから `visible={false}`
+ * - Force ⇄ Warning の切り替えでは Modal を閉じず、中身だけを入れ替える（切り替え自体はアニメーションしない）
+ * - 「視差効果を減らす」が有効なら動かさず、すぐに開閉する
+ * - 中身は ScrollView に入れる（大きいフォントや横向きでもボタンまで届くように）。Warning は ScrollView の空いたところのタップでも `dismiss`
+ * - `components` で差し替えた中身にも同じアニメーションを外側のラッパーでかける
+ */
+export declare const StoreVersionModal: ({ reduceMotion, }: {
+    /** 「視差効果を減らす」の設定（Provider が {@link useReduceMotion} で購読した値）。true なら開閉を動かさない */
+    reduceMotion: boolean;
+}) => import("react").JSX.Element;
+/**
+ * 中身が画面より高くなったとき（大きいフォントなど）に、端をシステムの領域から外すための余白（Force は上下、Warning は上）。
+ * react-native-safe-area-context には依存しないので固定値にする。
+ * - 縦向き: 72。ステータスバー / ノッチ / Dynamic Island（上の領域は機種により 60pt 台）と Android の edge-to-edge の
+ *   ステータスバーを覆う
+ * - 横向き: 24。iPhone の横向きは上にステータスバーが無く、Android の横向きのステータスバー（24dp）だけを覆う
+ * 中身が「画面の高さ − 余白」に収まるときは、配置（Force は中央、Warning は下寄せ）の見た目は変わらない
+ */
+export declare const overflowInsetFor: (width: number, height: number) => number;
+//# sourceMappingURL=StoreVersionModal.d.ts.map

package/dist/react/StoreVersionModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreVersionModal.d.ts","sourceRoot":"","sources":["../../src/react/StoreVersionModal.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAGV,qBAAqB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,mBAAmB;AACnB,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEzC,wBAAwB;AACxB,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,sBAAsB,YACjC,UAAU,EACV,sBAAsB,EACtB,WAAW,EACX,gBAAgB,EAChB,iBAAiB,CACT,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,QAAQ,UAAW,qBAAqB,KAAG,MAAM,GAAG,IAWhE,CAAC;AAKF;;;;GAIG;AACH,eAAO,MAAM,eAAe,WAAY,OAAO,KAAG,OA2BjD,CAAC;AA8BF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,sBAE3B;IACD,+EAA+E;IAC/E,YAAY,EAAE,OAAO,CAAC;CACvB,gCA4KA,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,UAAW,MAAM,UAAU,MAAM,KAAG,MACvC,CAAC"}

package/dist/react/StoreVersionModal.js

@@ -0,0 +1,250 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// デフォルト UI の Modal の枠。Provider はこれを 1 つだけ描き、Force / Warning はこの中で中身だけが入れ替わる
+// （Force と Warning で別々の Modal を出すと、iOS では前の Modal の dismiss と次の present が重なって次が出ないことがある）。
+// ライブラリが持つもの: Modal、幕（オーバーレイ）とその色、中身の配置（Force は縦中央、Warning は下寄せ）、
+// 戻るボタン・背景タップ・VoiceOver の escape の扱い、a11y の属性、開閉のアニメーション。`components` で差し替えられるのは中身だけ
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Modal, Pressable, ScrollView, StyleSheet, useWindowDimensions, View, } from 'react-native';
+import { FORCE_OVERLAY_COLOR, ForceCard } from './DefaultForceModal.js';
+import { WARNING_OVERLAY_COLOR, WarningSheet } from './DefaultWarningSheet.js';
+import { normalizeIcon, useDefaultUiContext, } from './defaultUi.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+/** 開閉のアニメーションの時間（ms） */
+export const ANIMATION_DURATION_MS = 250;
+/**
+ * iOS の Modal が対応する向き。RN の既定は portrait だけで、横向き専用のアプリでは Modal を出した瞬間に落ちる
+ * （"Supported orientations has no common orientation with the application"）ので、すべて渡す
+ */
+export const SUPPORTED_ORIENTATIONS = [
+    'portrait',
+    'portrait-upside-down',
+    'landscape',
+    'landscape-left',
+    'landscape-right',
+];
+/**
+ * 出すべき UI。force なら Force、warning で「あとで」が押されていなければ Warning、それ以外
+ * （none / 判定前 / skipped / error）は無し（失敗・タイムアウトでは UI を出さない）。
+ * 再チェック中も前回の `action` が残るので Force は消えない
+ */
+export const uiKindOf = (state) => {
+    if (state.local === null) {
+        return null;
+    }
+    if (state.action === 'force') {
+        return 'force';
+    }
+    if (state.action === 'warning' && !state.dismissed) {
+        return 'warning';
+    }
+    return null;
+};
+// Android の戻るボタンでは閉じない（Force）
+const ignoreRequestClose = () => { };
+/**
+ * 「視差効果を減らす」（iOS）/「アニメーションを無効化」（Android）の設定。変化も追い、`active` が false になったときと
+ * アンマウントで購読を外す。`active` が false の間は取得も購読もしない（Provider が `ui` かつ skipped でないときだけ true にする）。
+ * 取得できるまで・取れない環境では false（動かす）
+ */
+export const useReduceMotion = (active) => {
+    const [reduceMotion, setReduceMotion] = useState(false);
+    useEffect(() => {
+        if (!active) {
+            return;
+        }
+        let live = true;
+        AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+            if (live) {
+                setReduceMotion(enabled);
+            }
+        }, () => {
+            // 取れない環境では動かす
+        });
+        const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);
+        return () => {
+            live = false;
+            subscription.remove();
+        };
+    }, [active]);
+    return reduceMotion;
+};
+/** 中身に渡す props を作る（`local` は出すものがあるときは必ずある） */
+const propsFor = ({ state, display, texts }, local) => {
+    const base = {
+        local,
+        remote: state.remote,
+        storeUrl: state.storeUrl,
+        releaseNotes: state.releaseNotes,
+        icon: normalizeIcon(display.icon),
+        openStore: state.openStore,
+    };
+    const force = { ...base, texts: texts.force };
+    const warning = {
+        ...base,
+        texts: texts.warning,
+        dismiss: state.dismiss,
+    };
+    return { force, warning };
+};
+/**
+ * デフォルト UI の Modal。Provider が初めて出すものができたときにマウントし、以後はマウントしたまま
+ * （出すものが無い間は `visible={false}` で何も描かない。skipped や判定前はマウントもしない）。
+ * 「視差効果を減らす」は Provider が購読して props で受け取る（マウントと同じ commit で開くので、ここで取りに行くと初回に間に合わない）。
+ *
+ * - 中身の props（`local` / `remote` / `storeUrl` / 文言 / `openStore` / `dismiss`）は出している間に作ったものを保存し、
+ *   閉じるアニメーションの間は最後の値のまま描く（`enabled` を false にした経路では engine が `local` / `remote` / `storeUrl` を
+ *   null にするので、そのまま読むと閉じる途中で本文が変わり、`components` に `local: ''` が渡ってしまう）
+ *
+ * - 開くとき: 幕は opacity 0 → 1、Force のカードは opacity 0 → 1、Warning のシートは画面の高さ分下から translateY → 0（250ms、native driver）
+ * - 閉じるとき（`action` が force / warning でなくなる、Warning が dismiss される）: 逆のアニメーションを走らせ、終わってから `visible={false}`
+ * - Force ⇄ Warning の切り替えでは Modal を閉じず、中身だけを入れ替える（切り替え自体はアニメーションしない）
+ * - 「視差効果を減らす」が有効なら動かさず、すぐに開閉する
+ * - 中身は ScrollView に入れる（大きいフォントや横向きでもボタンまで届くように）。Warning は ScrollView の空いたところのタップでも `dismiss`
+ * - `components` で差し替えた中身にも同じアニメーションを外側のラッパーでかける
+ */
+export const StoreVersionModal = ({ reduceMotion, }) => {
+    const context = useDefaultUiContext();
+    const { state, display } = context;
+    const kind = uiKindOf(state);
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const inset = overflowInsetFor(windowWidth, windowHeight);
+    // 描いている種類。閉じるアニメーションの間は、出すものが無くなった後も前の種類を描き続ける。
+    // 開くときは同じ描画で中身を出す（描画中の自分の setState。前の描画の値から導く React の書き方）
+    const [shown, setShown] = useState(kind);
+    if (kind !== null && kind !== shown) {
+        setShown(kind);
+    }
+    // 出している間の props は描画で作り、commit の後に最後の値として保存する（layout effect。描画中には ref に書かない）。
+    // 閉じている間（kind が null）は保存した最後の値で描く（描画中に ref を読むが、読むのは commit 済みの描画が書いた値だけ）
+    const current = kind !== null && state.local !== null
+        ? propsFor(context, state.local)
+        : null;
+    const lastRef = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        if (current !== null) {
+            lastRef.current = current;
+        }
+    });
+    const saved = current ?? lastRef.current;
+    // 幕と中身は 0 から始めて、マウント直後の effect で 1 へ動かす（Provider は初めて出すものができたときにマウントする）
+    const progress = useRef(new Animated.Value(0)).current;
+    const openRef = useRef(false);
+    // 設定は開閉のときに読むだけにする（表示中に設定が変わっても、走っているアニメーションを止めたりやり直したりしない）。
+    // この effect は下の開閉の effect より先に宣言してあるので、同じ commit では先に更新される
+    const reduceMotionRef = useRef(reduceMotion);
+    useEffect(() => {
+        reduceMotionRef.current = reduceMotion;
+    }, [reduceMotion]);
+    useEffect(() => {
+        if (kind !== null) {
+            openRef.current = true;
+            if (reduceMotionRef.current) {
+                progress.setValue(1);
+                return;
+            }
+            const animation = Animated.timing(progress, {
+                toValue: 1,
+                duration: ANIMATION_DURATION_MS,
+                useNativeDriver: true,
+            });
+            animation.start();
+            return () => animation.stop();
+        }
+        if (!openRef.current) {
+            return;
+        }
+        openRef.current = false;
+        if (reduceMotionRef.current) {
+            progress.setValue(0);
+            setShown(null);
+            return;
+        }
+        const animation = Animated.timing(progress, {
+            toValue: 0,
+            duration: ANIMATION_DURATION_MS,
+            useNativeDriver: true,
+        });
+        // 途中でまた開くことになったら stop され（finished: false）、閉じない
+        animation.start(({ finished }) => {
+            if (finished) {
+                setShown(null);
+            }
+        });
+        return () => animation.stop();
+    }, [kind, progress]);
+    // Warning のシートは画面の高さ分（シートの高さに関わらず画面の外になる値）下から出る
+    const slide = useMemo(() => ({
+        transform: [
+            {
+                translateY: progress.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [windowHeight, 0],
+                }),
+            },
+        ],
+    }), [progress, windowHeight]);
+    const isWarning = shown === 'warning';
+    // 閉じる途中の戻るボタン・背景タップ・escape も、保存した props の dismiss（engine の関数）のまま
+    const dismiss = saved?.warning.dismiss ?? ignoreRequestClose;
+    const Force = display.components?.Force;
+    const Warning = display.components?.Warning;
+    const content = shown === null || saved === null ? null : isWarning ? (Warning ? (_jsx(Warning, { ...saved.warning })) : (_jsx(WarningSheet, { ...saved.warning }))) : Force ? (_jsx(Force, { ...saved.force })) : (_jsx(ForceCard, { ...saved.force }));
+    return (_jsxs(Modal, { visible: shown !== null, transparent: true, 
+        // 幕と中身は自前でアニメーションするので Modal 自体は動かさない
+        animationType: "none", 
+        // Android の透過 Modal は既定でステータスバーの下まで広がらず、そこだけ暗くならない帯になるので広げる（iOS では無視される）
+        statusBarTranslucent: true, supportedOrientations: [...SUPPORTED_ORIENTATIONS], onRequestClose: isWarning ? dismiss : ignoreRequestClose, children: [_jsx(Animated.View, { pointerEvents: "none", style: [
+                    styles.overlay,
+                    {
+                        backgroundColor: isWarning
+                            ? WARNING_OVERLAY_COLOR
+                            : FORCE_OVERLAY_COLOR,
+                        opacity: progress,
+                    },
+                ], importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true }), _jsx(View, { style: styles.fill, accessibilityViewIsModal: true, onAccessibilityEscape: isWarning ? dismiss : undefined, children: _jsxs(ScrollView, { style: styles.fill, contentContainerStyle: [
+                        styles.content,
+                        isWarning
+                            ? [styles.bottom, { paddingTop: inset }]
+                            : [styles.center, { paddingVertical: inset }],
+                    ], bounces: false, keyboardShouldPersistTaps: "handled", children: [isWarning ? (_jsx(Pressable, { style: styles.overlay, onPress: dismiss, accessible: false, 
+                            // 読み上げから外すのと同じ理由で、キーボード / D-pad のフォーカスも受けない（Pressable の既定は focusable）
+                            focusable: false, importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true })) : null, _jsx(Animated.View, { style: isWarning ? slide : { opacity: progress }, children: content })] }) })] }));
+};
+/**
+ * 中身が画面より高くなったとき（大きいフォントなど）に、端をシステムの領域から外すための余白（Force は上下、Warning は上）。
+ * react-native-safe-area-context には依存しないので固定値にする。
+ * - 縦向き: 72。ステータスバー / ノッチ / Dynamic Island（上の領域は機種により 60pt 台）と Android の edge-to-edge の
+ *   ステータスバーを覆う
+ * - 横向き: 24。iPhone の横向きは上にステータスバーが無く、Android の横向きのステータスバー（24dp）だけを覆う
+ * 中身が「画面の高さ − 余白」に収まるときは、配置（Force は中央、Warning は下寄せ）の見た目は変わらない
+ */
+export const overflowInsetFor = (width, height) => width > height ? 24 : 72;
+const styles = StyleSheet.create({
+    fill: {
+        flex: 1,
+    },
+    // 画面いっぱい（StyleSheet.absoluteFill と同じ。RN 0.88 の型には absoluteFillObject が無いので書き下す）
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+    // 中身が画面より低いときは画面いっぱいに広げて配置し、高いときはスクロールする
+    content: {
+        flexGrow: 1,
+    },
+    // Force: 画面の縦中央（デザインの top 268px は 844pt の画面での値なので、中央寄せに読み替える）。
+    // カードの左右 24 はデザインの left / right 24（カード側ではなくここで取る）。上下の余白は overflowInsetFor
+    center: {
+        justifyContent: 'center',
+        paddingHorizontal: 24,
+    },
+    // Warning: 下寄せ。上の余白は overflowInsetFor。下はシートの padding 40 で、iOS のホームインジケータ（34pt）と
+    // Android のジェスチャーナビは吸収する。Android の 3 ボタンのナビゲーションバー（48dp）では「あとで」の押せる範囲の
+    // 下の端がバーに少し重なる（文字は見え、押せることを Android エミュレータで確認）
+    bottom: {
+        justifyContent: 'flex-end',
+    },
+});

package/dist/react/StoreVersionProvider.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+import type { ColorValue, ImageSourcePropType } from 'react-native';
+import { type StoreVersionCheckProps } from './engine.ts';
+import type { StoreVersionTexts } from './texts.ts';
+import { type StoreVersionComponents } from './useStoreVersion.ts';
+export type { StoreVersionCheckResult } from './engine.ts';
+export { DEFAULT_TIMEOUT_MS, defaultCountry } from './engine.ts';
+/** {@link StoreVersionProvider} の props */
+export type StoreVersionProviderProps = StoreVersionCheckProps & {
+    children?: ReactNode;
+    /**
+     * デフォルト UI の文言。`force` / `warning` ごとに、指定しなかったキーは英語の既定値で補完する。
+     * `{remote}`（最新バージョン）/ `{local}`（現在のバージョン）は表示時に置き換える。
+     * 日本語は `react-native-store-version/texts/ja`。変えると表示中のモーダルにも即座に反映する
+     */
+    texts?: StoreVersionTexts;
+    /** デフォルト UI に表示するアイコン（Force はタイトルの上に中央、Warning はシートの左上）。無ければ表示しない */
+    icon?: ImageSourcePropType;
+    /**
+     * デフォルト UI の中身の差し替え。差し替えられるのはカード（Force）/ シート（Warning）の中身だけで、
+     * Modal・幕の色・配置・戻るボタン / 背景タップの扱い・開閉のアニメーションはライブラリが持つ。
+     * 置かれ方: Force は左右 24 の余白の内側で画面の縦中央、Warning は画面幅で下寄せ。どちらも ScrollView の中。
+     * カード / シートの面（背景・角丸・影・最大幅 480）はライブラリは掛けないので、差し替えたコンポーネントが自分で描く
+     */
+    components?: StoreVersionComponents;
+    /**
+     * デフォルト UI のボタンの色。「更新」の塗りと「あとで」の文字に使う（「更新」の文字は白のまま）。
+     * 省略すると既定の配色（ライト #1D4ED8 / ダーク #2563EB、「あとで」はダークで #93C5FD）。
+     * ライト / ダークで同じ色になるので、モードで変えたいときは `useColorScheme()` で分けた値（iOS は `DynamicColorIOS` も可）を渡す。
+     * 白の文字と、ダークのシートの背景（#27272A）の上の「あとで」が読める色にすること。`components` で差し替えた中身には効かない
+     */
+    primaryColor?: ColorValue;
+    /** false ならデフォルト UI を出さない（hook だけ使う）。既定 true */
+    ui?: boolean;
+};
+/**
+ * ストアのバージョンを確認し、強制 / 警告アップデートを出す Provider。子は判定を待たずに描画する。
+ *
+ * - 確認するのはマウント時・`recheck()`・（`recheckOnForeground` のとき）バックグラウンドからの復帰時・`enabled` が true になったときだけ。
+ *   ほかの props（インラインで書いた `getLatestVersion` なども）が変わっても取り直さない。`policy` が変わったら `action` だけ計算し直す
+ * - 再チェックの間（`status: 'checking'`）も前回の判定の結果を見せ続け、再チェックが失敗したら前回の結果に戻す（エラーは `onError` へ）
+ * - 判定の途中でバックグラウンドになったら取り消し、復帰時に取り直す（`onError` には渡さない）。
+ *   バックグラウンドのままマウントされたら、active になるまで取得を始めない
+ * - 失敗・タイムアウトでは UI を出さず、エラーを `onError` に渡すだけ（1 回の判定で複数回呼ばれうる）
+ * - キャッシュ・永続化はしない。「あとで」（`dismiss`）もメモリだけ
+ * - StrictMode では開発時だけ、マウント時に `getLatestVersion` / `getMinimumVersion` が 2 回呼ばれうる（ストアへの fetch は 1 回にまとまる）
+ *
+ * 判定結果は配下の {@link useStoreVersion} で読める
+ */
+export declare const StoreVersionProvider: (props: StoreVersionProviderProps) => import("react").JSX.Element;
+//# sourceMappingURL=StoreVersionProvider.d.ts.map

package/dist/react/StoreVersionProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoreVersionProvider.d.ts","sourceRoot":"","sources":["../../src/react/StoreVersionProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,EAKL,KAAK,sBAAsB,EAE5B,MAAM,aAAa,CAAC;AAMrB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,EACL,KAAK,sBAAsB,EAI5B,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEjE,2CAA2C;AAC3C,MAAM,MAAM,yBAAyB,GAAG,sBAAsB,GAAG;IAC/D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,qEAAqE;IACrE,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,gDAAgD;IAChD,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,oBAAoB,UAAW,yBAAyB,gCA0EpE,CAAC"}

package/dist/react/StoreVersionProvider.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 判定を 1 つだけ持ち、Context で配下に配る Provider。ここは React の配線だけで、状態遷移と副作用は engine.ts。
+// 子は判定を待たずに描画する（アプリの起動を止めない）。キャッシュ・永続化はしない
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createEngine, IDLE, stateOf, } from './engine.js';
+import { StoreVersionModal, uiKindOf, useReduceMotion, } from './StoreVersionModal.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+import { StoreVersionDisplayContext, StoreVersionStateContext, } from './useStoreVersion.js';
+// テストから使う（パッケージの入口からは export しない）
+export { DEFAULT_TIMEOUT_MS, defaultCountry } from './engine.js';
+/**
+ * ストアのバージョンを確認し、強制 / 警告アップデートを出す Provider。子は判定を待たずに描画する。
+ *
+ * - 確認するのはマウント時・`recheck()`・（`recheckOnForeground` のとき）バックグラウンドからの復帰時・`enabled` が true になったときだけ。
+ *   ほかの props（インラインで書いた `getLatestVersion` なども）が変わっても取り直さない。`policy` が変わったら `action` だけ計算し直す
+ * - 再チェックの間（`status: 'checking'`）も前回の判定の結果を見せ続け、再チェックが失敗したら前回の結果に戻す（エラーは `onError` へ）
+ * - 判定の途中でバックグラウンドになったら取り消し、復帰時に取り直す（`onError` には渡さない）。
+ *   バックグラウンドのままマウントされたら、active になるまで取得を始めない
+ * - 失敗・タイムアウトでは UI を出さず、エラーを `onError` に渡すだけ（1 回の判定で複数回呼ばれうる）
+ * - キャッシュ・永続化はしない。「あとで」（`dismiss`）もメモリだけ
+ * - StrictMode では開発時だけ、マウント時に `getLatestVersion` / `getMinimumVersion` が 2 回呼ばれうる（ストアへの fetch は 1 回にまとまる）
+ *
+ * 判定結果は配下の {@link useStoreVersion} で読める
+ */
+export const StoreVersionProvider = (props) => {
+    const { children, policy, texts, icon, components, primaryColor, ui } = props;
+    const [model, setModel] = useState(IDLE);
+    const [dismissedRemote, setDismissedRemote] = useState(null);
+    // 判定は effect と非同期の続きの中で props を読むので、いつも最新の props を ref で渡す。
+    // 描画中には書かず、commit の後（layout effect。配下の passive effect より先）に書く
+    const propsRef = useRef(props);
+    useIsomorphicLayoutEffect(() => {
+        propsRef.current = props;
+    });
+    const engineRef = useRef(null);
+    if (engineRef.current === null) {
+        engineRef.current = createEngine(() => propsRef.current, setModel, setDismissedRemote);
+    }
+    const engine = engineRef.current;
+    useEffect(() => {
+        engine.mount();
+        return () => engine.unmount();
+    }, [engine]);
+    // enabled の切り替えだけは取り直す（false → true で始め、true → false で取り消して skipped）
+    const enabled = props.enabled !== false;
+    useEffect(() => {
+        engine.setEnabled(enabled);
+    }, [engine, enabled]);
+    useEffect(() => {
+        engine.applyPolicy(policy);
+    }, [engine, policy]);
+    const state = useMemo(() => stateOf(model, dismissedRemote, engine), [model, dismissedRemote, engine]);
+    // 表示の設定は別の Context に置く（インラインの texts などで Provider が描画し直しても、hook を使う側は描画し直さない）
+    const display = useMemo(() => ({ ui: ui ?? true, texts, icon, components, primaryColor }), [ui, texts, icon, components, primaryColor]);
+    // デフォルト UI は子の後ろに重ねる（Modal なので描画の位置はレイアウトに影響しない）。Modal は 1 つだけで、初めて出すものが
+    // できたとき（force / warning で未 dismiss）にマウントし、以後はマウントしたまま（閉じている間は visible={false}）。
+    // skipped（web / Expo Go / enabled false）や判定前はマウントもしない（描画中の自分の setState。前の描画の値から導く React の書き方）
+    const [uiMounted, setUiMounted] = useState(false);
+    if (!uiMounted && uiKindOf(state) !== null) {
+        setUiMounted(true);
+    }
+    // 「視差効果を減らす」の設定は Provider で購読する（Modal はマウントと同じ commit で開くので、Modal の中で取りに行くと
+    // 初回の表示に間に合わない。ストアへの取得を待つ間に終わる）。ただし、すぐ値を返す getLatestVersion や、出すものがある状態で
+    // ui を false → true にした場合は、最初の 1 回の表示に間に合わず動くことがある（既知の制限）。
+    // UI を出さない（ui={false}）・skipped の間は購読も取得もしない。
+    // idle（マウント直後。skipped かどうかは engine の mount で決まる / バックグラウンドで active を待つ間）も、まだ出すものが無いので取りに行かない
+    const reduceMotion = useReduceMotion(display.ui && state.status !== 'skipped' && state.status !== 'idle');
+    return (_jsx(StoreVersionStateContext.Provider, { value: state, children: _jsxs(StoreVersionDisplayContext.Provider, { value: display, children: [children, display.ui && uiMounted ? (_jsx(StoreVersionModal, { reduceMotion: reduceMotion })) : null] }) }));
+};

package/dist/react/defaultUi.d.ts

@@ -0,0 +1,72 @@
+import { type ColorValue, type ImageSourcePropType, type TextStyle } from 'react-native';
+import { type StoreVersionResolvedTexts } from './texts.ts';
+import { type StoreVersionDisplay, type UseStoreVersionResult } from './useStoreVersion.ts';
+/**
+ * デザインの配色の定義のうち、UI に使う色。実装から外したキー: appBg / block はデザインの背景のダミー画面の色、
+ * iconText はプレースホルダーの "icon" という文字の色（実装では `icon` の画像に置き換わるので当てる先が無い）
+ */
+export type Palette = {
+    /** カード / シートの背景 */
+    card: string;
+    /** タイトル */
+    text: string;
+    /** 本文 */
+    sub: string;
+    /** 塗りのボタンの背景（Provider の `primaryColor` で変えられる） */
+    primary: ColorValue;
+    /** `icon` の背景（画像の読み込み中・透過部分に見える） */
+    iconBg: string;
+    /** Warning のハンドル */
+    handle: string;
+    /** Warning の「あとで」の文字（Provider の `primaryColor` で変えられる） */
+    secondaryText: ColorValue;
+};
+/** ライト / ダークの配色（Force / Warning の配色の定義。両方のデザインで同じ値） */
+export declare const PALETTES: Record<'light' | 'dark', Palette>;
+/** 塗りのボタンの文字（デザインは `color: #FFFFFF` 固定。ライト / ダークで変わらない） */
+export declare const BUTTON_TEXT_COLOR = "#FFFFFF";
+/**
+ * カード / シートの最大幅（デザインから意図的に変える点）。タブレットや横向きで画面いっぱいに広がらないようにする。
+ * スマホの縦向き（幅 480 未満）では効かないので見た目は変わらない
+ */
+export declare const MAX_CONTENT_WIDTH = 480;
+/**
+ * 端末の配色に合わせた色（`useColorScheme`。null（未対応の環境）はライト）。
+ * Provider に `primaryColor` があれば、ボタンの塗りと「あとで」の文字をそれにする
+ */
+export declare const usePalette: () => Palette;
+/**
+ * `icon` を描くかどうかの正規化。JS からの利用で null / false を渡されても「無し」として扱う
+ * （`components` に渡す `icon` も undefined にそろえる）
+ */
+export declare const normalizeIcon: (icon: ImageSourcePropType | undefined) => ImageSourcePropType | undefined;
+/** デフォルト UI が Context から読む値。`texts` は既定値で補完し `{remote}` / `{local}` を置き換え済み */
+export type DefaultUiContext = {
+    state: UseStoreVersionResult;
+    display: StoreVersionDisplay;
+    texts: StoreVersionResolvedTexts;
+};
+/**
+ * 判定の状態と表示の設定を読み、文言を解決する。Provider の中でしか描画されないので Context は必ずある。
+ * 文言は `texts` / `local` / `remote` が変わったときだけ解決し直す（`texts` の変更は表示中のモーダルに即座に反映される）
+ */
+export declare const useDefaultUiContext: () => DefaultUiContext;
+/** {@link ActionButton} の props */
+export type ActionButtonProps = {
+    label: string;
+    onPress: () => void;
+    /** 塗りの色。無ければ文字だけのボタン（Warning の「あとで」） */
+    backgroundColor?: ColorValue;
+    /** 文字の色 */
+    color: ColorValue;
+};
+/**
+ * ボタン（デザイン: 高さ 50・radius 12・文字 16/600）。高さはフォントスケールで伸びるよう `minHeight` にする（デザインから意図的に変える点）。
+ * 押している間だけ `opacity: 0.7`（デザインに無いので決めた値）。`allowFontScaling` は切らない（既定 true）
+ */
+export declare const ActionButton: ({ label, onPress, backgroundColor, color, }: ActionButtonProps) => import("react").JSX.Element;
+/** タイトル（デザイン: 20/28 bold）。フォントはプラットフォーム標準（fontFamily は指定しない） */
+export declare const titleStyle: TextStyle;
+/** 本文（デザイン: 15/22） */
+export declare const messageStyle: TextStyle;
+//# sourceMappingURL=defaultUi.d.ts.map

package/dist/react/defaultUi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultUi.d.ts","sourceRoot":"","sources":["../../src/react/defaultUi.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,UAAU,EACf,KAAK,mBAAmB,EAIxB,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAgB,KAAK,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EACL,KAAK,mBAAmB,EAGxB,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAE9B;;;GAGG;AACH,MAAM,MAAM,OAAO,GAAG;IACpB,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS;IACT,GAAG,EAAE,MAAM,CAAC;IACZ,kDAAkD;IAClD,OAAO,EAAE,UAAU,CAAC;IACpB,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,aAAa,EAAE,UAAU,CAAC;CAC3B,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,EAAE,OAAO,CAmBtD,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAYrC;;;GAGG;AACH,eAAO,MAAM,UAAU,QAAO,OAU7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,SAClB,mBAAmB,GAAG,SAAS,KACpC,mBAAmB,GAAG,SAGxB,CAAC;AAEF,+EAA+E;AAC/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,qBAAqB,CAAC;IAC7B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,KAAK,EAAE,yBAAyB,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,QAAO,gBAgBtC,CAAC;AAEF,mCAAmC;AACnC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wCAAwC;IACxC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,WAAW;IACX,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,gDAKtB,iBAAiB,gCAYnB,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,UAAU,EAAE,SAIxB,CAAC;AAEF,sBAAsB;AACtB,eAAO,MAAM,YAAY,EAAE,SAG1B,CAAC"}