melta-app 0.2.0 → 0.2.1

package/lib/module/components/Screen.js

@@ -13,8 +13,8 @@
  * SafeArea は registry（safe-area-registry.ts）で解決する。default は RN core の
  * SafeAreaView（deprecated / iOS のみの最小対応）で依存ゼロを維持しつつ、
  * react-native-safe-area-context 利用者は subpath "melta-app/safe-area" の
- * enableSafeAreaContext() で差し替えられる（rally-nav dogfood 由来、RN 0.85 の
- * core SafeAreaView deprecation 警告対応）。
+ * enableSafeAreaContext() で context hook + View adapter に差し替えられる
+ * （rally-nav dogfood 由来、RN 0.85 Fabric/Android の初回 inset flash 対応）。
  */
 
 import { useMemo } from "react";

package/lib/module/components/safe-area-registry.js

@@ -6,8 +6,9 @@
  * 本体エントリは依存ゼロ方針（P1）のため、default は RN core の SafeAreaView
  * （deprecated / iOS のみの最小対応）。react-native-safe-area-context を使う利用者は
  * subpath "melta-app/safe-area" の enableSafeAreaContext() をアプリ起動時に一度呼ぶと
- * Screen の SafeArea が差し替わる（optional peer の前例 = Icon × react-native-svg。
- * ただし Screen は本体エントリ所属のため subpath 分離ではなく registry で切り替える）。
+ * Screen の SafeArea が context hook + View adapter に差し替わる（optional peer の前例 =
+ * Icon × react-native-svg。ただし Screen は本体エントリ所属のため subpath 分離ではなく
+ * registry で切り替える）。
  *
  * ⚠️ RN 0.85 は react-native の SafeAreaView プロパティへの getter アクセス時点で
  * deprecation 警告を出す。adapter 登録済みの利用者に警告を出さないため、core への

package/lib/module/components/safe-area-registry.js.map

@@ -1 +1 @@
-{"version":3,"names":["ReactNative","registered","setSafeAreaView","component","resolveSafeAreaView","SafeAreaView"],"sourceRoot":"../../../src","sources":["components/safe-area-registry.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,OAAO,KAAKA,WAAW,MAAM,cAAc;;AAE3C;;AASA,IAAIC,UAAmC,GAAG,IAAI;;AAE9C;AACA,OAAO,SAASC,eAAeA,CAACC,SAA2B,EAAQ;EACjEF,UAAU,GAAGE,SAAS;AACxB;;AAEA;AACA,OAAO,SAASC,mBAAmBA,CAAA,EAAqB;EACtD,OAAOH,UAAU,IAAKD,WAAW,CAACK,YAAiC;AACrE","ignoreList":[]}
+{"version":3,"names":["ReactNative","registered","setSafeAreaView","component","resolveSafeAreaView","SafeAreaView"],"sourceRoot":"../../../src","sources":["components/safe-area-registry.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,OAAO,KAAKA,WAAW,MAAM,cAAc;;AAE3C;;AASA,IAAIC,UAAmC,GAAG,IAAI;;AAE9C;AACA,OAAO,SAASC,eAAeA,CAACC,SAA2B,EAAQ;EACjEF,UAAU,GAAGE,SAAS;AACxB;;AAEA;AACA,OAAO,SAASC,mBAAmBA,CAAA,EAAqB;EACtD,OAAOH,UAAU,IAAKD,WAAW,CAACK,YAAiC;AACrE","ignoreList":[]}

package/lib/module/safe-area/index.js

@@ -13,15 +13,65 @@
  *   import { enableSafeAreaContext } from "melta-app/safe-area";
  *   enableSafeAreaContext();
  *
- * これで Screen の SafeArea が react-native-safe-area-context の SafeAreaView に
- * 切り替わり、RN core SafeAreaView の deprecation 警告（RN 0.85+）も出なくなる。
+ * これで Screen の SafeArea が useSafeAreaInsets() + View の adapter に切り替わる。
+ * Provider の context 値を render 中に同期参照して padding を付けるため、native
+ * SafeAreaView の layout/state 更新を待たず、初回 render から inset が反映される。
+ *
+ * ⚠️ 前提: アプリの root に SafeAreaProvider が必要。初回 render から正しい inset を
+ * 使うには Provider に initialMetrics も渡す。React Navigation / Expo Router 利用時は
+ * Provider が設置済みのことが多い。
  */
 
-import { SafeAreaView } from "react-native-safe-area-context";
+import { createElement, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { setSafeAreaView } from "../components/safe-area-registry.js";
+const ALL_EDGES = ["top", "right", "bottom", "left"];
+
+/** enableSafeAreaContext() の設定。edges 省略時は従来相当の全 edge。 */
+
+function additivePadding(style, insets, edges) {
+  const flat = StyleSheet.flatten(style) ?? {};
+  const base = edge => {
+    const edgeValue = flat[`padding${edge[0].toUpperCase()}${edge.slice(1)}`];
+    const axisValue = edge === "top" || edge === "bottom" ? flat.paddingVertical : flat.paddingHorizontal;
+    const value = edgeValue ?? axisValue ?? flat.padding;
+    return typeof value === "number" ? value : 0;
+  };
+  return {
+    ...(edges.has("top") ? {
+      paddingTop: base("top") + insets.top
+    } : null),
+    ...(edges.has("right") ? {
+      paddingRight: base("right") + insets.right
+    } : null),
+    ...(edges.has("bottom") ? {
+      paddingBottom: base("bottom") + insets.bottom
+    } : null),
+    ...(edges.has("left") ? {
+      paddingLeft: base("left") + insets.left
+    } : null)
+  };
+}
+function createContextSafeAreaView(selectedEdges) {
+  const edges = new Set(selectedEdges);
+  function ContextSafeAreaView({
+    style,
+    ...props
+  }) {
+    const insets = useSafeAreaInsets();
+    const paddingStyle = useMemo(() => additivePadding(style, insets, edges), [style, insets.top, insets.right, insets.bottom, insets.left]);
+    return /*#__PURE__*/createElement(View, {
+      ...props,
+      style: [style, paddingStyle]
+    });
+  }
+  ContextSafeAreaView.displayName = "MeltaContextSafeAreaView";
+  return ContextSafeAreaView;
+}
 
-/** Screen の SafeArea を react-native-safe-area-context に切り替える。 */
-export function enableSafeAreaContext() {
-  setSafeAreaView(SafeAreaView);
+/** Screen の SafeArea を context 同期参照の View adapter に切り替える。 */
+export function enableSafeAreaContext(options = {}) {
+  setSafeAreaView(createContextSafeAreaView(options.edges ?? ALL_EDGES));
 }
 //# sourceMappingURL=index.js.map

package/lib/module/safe-area/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["SafeAreaView","setSafeAreaView","enableSafeAreaContext"],"sourceRoot":"../../../src","sources":["safe-area/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,eAAe,QAAQ,qCAAkC;;AAElE;AACA,OAAO,SAASC,qBAAqBA,CAAA,EAAS;EAC5CD,eAAe,CAACD,YAAY,CAAC;AAC/B","ignoreList":[]}
+{"version":3,"names":["createElement","useMemo","StyleSheet","View","useSafeAreaInsets","setSafeAreaView","ALL_EDGES","additivePadding","style","insets","edges","flat","flatten","base","edge","edgeValue","toUpperCase","slice","axisValue","paddingVertical","paddingHorizontal","value","padding","has","paddingTop","top","paddingRight","right","paddingBottom","bottom","paddingLeft","left","createContextSafeAreaView","selectedEdges","Set","ContextSafeAreaView","props","paddingStyle","displayName","enableSafeAreaContext","options"],"sourceRoot":"../../../src","sources":["safe-area/index.ts"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/Screen.d.ts

@@ -11,8 +11,8 @@
  * SafeArea は registry（safe-area-registry.ts）で解決する。default は RN core の
  * SafeAreaView（deprecated / iOS のみの最小対応）で依存ゼロを維持しつつ、
  * react-native-safe-area-context 利用者は subpath "melta-app/safe-area" の
- * enableSafeAreaContext() で差し替えられる（rally-nav dogfood 由来、RN 0.85 の
- * core SafeAreaView deprecation 警告対応）。
+ * enableSafeAreaContext() で context hook + View adapter に差し替えられる
+ * （rally-nav dogfood 由来、RN 0.85 Fabric/Android の初回 inset flash 対応）。
  */
 import { type ReactNode } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";

package/lib/typescript/src/components/safe-area-registry.d.ts

@@ -4,8 +4,9 @@
  * 本体エントリは依存ゼロ方針（P1）のため、default は RN core の SafeAreaView
  * （deprecated / iOS のみの最小対応）。react-native-safe-area-context を使う利用者は
  * subpath "melta-app/safe-area" の enableSafeAreaContext() をアプリ起動時に一度呼ぶと
- * Screen の SafeArea が差し替わる（optional peer の前例 = Icon × react-native-svg。
- * ただし Screen は本体エントリ所属のため subpath 分離ではなく registry で切り替える）。
+ * Screen の SafeArea が context hook + View adapter に差し替わる（optional peer の前例 =
+ * Icon × react-native-svg。ただし Screen は本体エントリ所属のため subpath 分離ではなく
+ * registry で切り替える）。
  *
  * ⚠️ RN 0.85 は react-native の SafeAreaView プロパティへの getter アクセス時点で
  * deprecation 警告を出す。adapter 登録済みの利用者に警告を出さないため、core への

package/lib/typescript/src/components/safe-area-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"safe-area-registry.d.ts","sourceRoot":"","sources":["../../../../src/components/safe-area-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,uEAAuE;AACvE,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC,qBAAqB,CAAC,CAAC;AAIpE,kDAAkD;AAClD,wBAAgB,eAAe,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAEjE;AAED,4DAA4D;AAC5D,wBAAgB,mBAAmB,IAAI,gBAAgB,CAEtD"}
+{"version":3,"file":"safe-area-registry.d.ts","sourceRoot":"","sources":["../../../../src/components/safe-area-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,uEAAuE;AACvE,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC,qBAAqB,CAAC,CAAC;AAIpE,kDAAkD;AAClD,wBAAgB,eAAe,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAEjE;AAED,4DAA4D;AAC5D,wBAAgB,mBAAmB,IAAI,gBAAgB,CAEtD"}

package/lib/typescript/src/safe-area/index.d.ts

@@ -11,9 +11,20 @@
  *   import { enableSafeAreaContext } from "melta-app/safe-area";
  *   enableSafeAreaContext();
  *
- * これで Screen の SafeArea が react-native-safe-area-context の SafeAreaView に
- * 切り替わり、RN core SafeAreaView の deprecation 警告（RN 0.85+）も出なくなる。
+ * これで Screen の SafeArea が useSafeAreaInsets() + View の adapter に切り替わる。
+ * Provider の context 値を render 中に同期参照して padding を付けるため、native
+ * SafeAreaView の layout/state 更新を待たず、初回 render から inset が反映される。
+ *
+ * ⚠️ 前提: アプリの root に SafeAreaProvider が必要。初回 render から正しい inset を
+ * 使うには Provider に initialMetrics も渡す。React Navigation / Expo Router 利用時は
+ * Provider が設置済みのことが多い。
  */
-/** Screen の SafeArea を react-native-safe-area-context に切り替える。 */
-export declare function enableSafeAreaContext(): void;
+import { type Edge } from "react-native-safe-area-context";
+/** enableSafeAreaContext() の設定。edges 省略時は従来相当の全 edge。 */
+export interface EnableSafeAreaContextOptions {
+    /** Screen に適用する edge。tab bar 等が担当する edge は除外する。 */
+    edges?: readonly Edge[];
+}
+/** Screen の SafeArea を context 同期参照の View adapter に切り替える。 */
+export declare function enableSafeAreaContext(options?: EnableSafeAreaContextOptions): void;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/safe-area/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/safe-area/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAKH,iEAAiE;AACjE,wBAAgB,qBAAqB,IAAI,IAAI,CAE5C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/safe-area/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,OAAO,EAEL,KAAK,IAAI,EAEV,MAAM,gCAAgC,CAAC;AASxC,yDAAyD;AACzD,MAAM,WAAW,4BAA4B;IAC3C,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;CACzB;AA0CD,6DAA6D;AAC7D,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,4BAAiC,GAAG,IAAI,CAEtF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melta-app",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "melta for APP — melta デザインシステムの React Native UI kit。melta-contracts（デザイン契約）を single source of truth に RN 実装でその契約を満たす。アプリ本体ではなくライブラリ。",
   "license": "MIT",
   "homepage": "https://app.melta.tsubotax.com",

package/src/components/Screen.tsx

@@ -11,8 +11,8 @@
  * SafeArea は registry（safe-area-registry.ts）で解決する。default は RN core の
  * SafeAreaView（deprecated / iOS のみの最小対応）で依存ゼロを維持しつつ、
  * react-native-safe-area-context 利用者は subpath "melta-app/safe-area" の
- * enableSafeAreaContext() で差し替えられる（rally-nav dogfood 由来、RN 0.85 の
- * core SafeAreaView deprecation 警告対応）。
+ * enableSafeAreaContext() で context hook + View adapter に差し替えられる
+ * （rally-nav dogfood 由来、RN 0.85 Fabric/Android の初回 inset flash 対応）。
  */
 
 import { useMemo, type ReactNode } from "react";

package/src/components/safe-area-registry.ts

@@ -4,8 +4,9 @@
  * 本体エントリは依存ゼロ方針（P1）のため、default は RN core の SafeAreaView
  * （deprecated / iOS のみの最小対応）。react-native-safe-area-context を使う利用者は
  * subpath "melta-app/safe-area" の enableSafeAreaContext() をアプリ起動時に一度呼ぶと
- * Screen の SafeArea が差し替わる（optional peer の前例 = Icon × react-native-svg。
- * ただし Screen は本体エントリ所属のため subpath 分離ではなく registry で切り替える）。
+ * Screen の SafeArea が context hook + View adapter に差し替わる（optional peer の前例 =
+ * Icon × react-native-svg。ただし Screen は本体エントリ所属のため subpath 分離ではなく
+ * registry で切り替える）。
  *
  * ⚠️ RN 0.85 は react-native の SafeAreaView プロパティへの getter アクセス時点で
  * deprecation 警告を出す。adapter 登録済みの利用者に警告を出さないため、core への

package/src/safe-area/index.ts

@@ -11,18 +11,77 @@
  *   import { enableSafeAreaContext } from "melta-app/safe-area";
  *   enableSafeAreaContext();
  *
- * これで Screen の SafeArea が react-native-safe-area-context の SafeAreaView に
- * 切り替わり、RN core SafeAreaView の deprecation 警告（RN 0.85+）も出なくなる。
+ * これで Screen の SafeArea が useSafeAreaInsets() + View の adapter に切り替わる。
+ * Provider の context 値を render 中に同期参照して padding を付けるため、native
+ * SafeAreaView の layout/state 更新を待たず、初回 render から inset が反映される。
  *
- * ⚠️ 前提: アプリの root に SafeAreaProvider が必要（context 版 SafeAreaView は
- * nearest provider から inset を取る。無いと inset が効かない）。React Navigation /
- * Expo Router 利用時は設置済みのことが多い。
+ * ⚠️ 前提: アプリの root に SafeAreaProvider が必要。初回 render から正しい inset を
+ * 使うには Provider に initialMetrics も渡す。React Navigation / Expo Router 利用時は
+ * Provider が設置済みのことが多い。
  */
 
-import { SafeAreaView } from "react-native-safe-area-context";
-import { setSafeAreaView } from "../components/safe-area-registry";
+import { createElement, useMemo } from "react";
+import { StyleSheet, View, type ViewStyle } from "react-native";
+import {
+  useSafeAreaInsets,
+  type Edge,
+  type EdgeInsets,
+} from "react-native-safe-area-context";
+import {
+  setSafeAreaView,
+  type SafeAreaViewLike,
+  type SafeAreaViewLikeProps,
+} from "../components/safe-area-registry";
 
-/** Screen の SafeArea を react-native-safe-area-context に切り替える。 */
-export function enableSafeAreaContext(): void {
-  setSafeAreaView(SafeAreaView);
+const ALL_EDGES = ["top", "right", "bottom", "left"] as const satisfies readonly Edge[];
+
+/** enableSafeAreaContext() の設定。edges 省略時は従来相当の全 edge。 */
+export interface EnableSafeAreaContextOptions {
+  /** Screen に適用する edge。tab bar 等が担当する edge は除外する。 */
+  edges?: readonly Edge[];
+}
+
+function additivePadding(
+  style: SafeAreaViewLikeProps["style"],
+  insets: EdgeInsets,
+  edges: ReadonlySet<Edge>,
+): ViewStyle {
+  const flat = StyleSheet.flatten(style) ?? {};
+
+  const base = (edge: Edge): number => {
+    const edgeValue = flat[`padding${edge[0].toUpperCase()}${edge.slice(1)}` as keyof ViewStyle];
+    const axisValue =
+      edge === "top" || edge === "bottom" ? flat.paddingVertical : flat.paddingHorizontal;
+    const value = edgeValue ?? axisValue ?? flat.padding;
+    return typeof value === "number" ? value : 0;
+  };
+
+  return {
+    ...(edges.has("top") ? { paddingTop: base("top") + insets.top } : null),
+    ...(edges.has("right") ? { paddingRight: base("right") + insets.right } : null),
+    ...(edges.has("bottom") ? { paddingBottom: base("bottom") + insets.bottom } : null),
+    ...(edges.has("left") ? { paddingLeft: base("left") + insets.left } : null),
+  };
+}
+
+function createContextSafeAreaView(selectedEdges: readonly Edge[]): SafeAreaViewLike {
+  const edges = new Set(selectedEdges);
+
+  function ContextSafeAreaView({ style, ...props }: SafeAreaViewLikeProps) {
+    const insets = useSafeAreaInsets();
+    const paddingStyle = useMemo(
+      () => additivePadding(style, insets, edges),
+      [style, insets.top, insets.right, insets.bottom, insets.left],
+    );
+
+    return createElement(View, { ...props, style: [style, paddingStyle] });
+  }
+
+  ContextSafeAreaView.displayName = "MeltaContextSafeAreaView";
+  return ContextSafeAreaView;
+}
+
+/** Screen の SafeArea を context 同期参照の View adapter に切り替える。 */
+export function enableSafeAreaContext(options: EnableSafeAreaContextOptions = {}): void {
+  setSafeAreaView(createContextSafeAreaView(options.edges ?? ALL_EDGES));
 }