@seed-design/lynx-react 0.2.0-alpha.2 → 0.2.0

package/src/components/Switch/Switch.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from "@lynx-js/react";
 import clsx from "clsx";
 
 import { switchStyle } from "@seed-design/lynx-css/recipes/switch";
@@ -7,8 +7,9 @@ import { switchmark } from "@seed-design/lynx-css/recipes/switchmark";
 import type { SwitchmarkVariantProps } from "@seed-design/lynx-css/recipes/switchmark";
 
 import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
-import { useControllableState } from "../../hooks/use-controllable-state";
-import { usePressTap } from "../../hooks/use-press-tap";
+import { useControllableState } from "../../hooks/useControllableState";
+import { usePressTap } from "../../hooks/usePressTap";
+import type { LynxStyledElementProps, LynxTextRef, LynxViewRef } from "../../types";
 
 /**
  * @platform Lynx
@@ -23,14 +24,12 @@ import { usePressTap } from "../../hooks/use-press-tap";
  *   switchmark recipe 와 Switch 컴포넌트에 boolean variant 로 노출.
  */
 
-type SwitchSize = NonNullable<SwitchVariantProps["size"]>;
-type SwitchTone = NonNullable<SwitchmarkVariantProps["tone"]>;
-
 interface SwitchContextValue {
   checked: boolean;
   disabled: boolean;
-  size: SwitchSize;
-  tone: SwitchTone;
+  switchVariantProps: SwitchVariantProps;
+  switchmarkVariantProps: SwitchmarkVariantProps;
+  toggle: () => void;
 }
 
 const SwitchContext = React.createContext<SwitchContextValue | null>(null);
@@ -43,10 +42,15 @@ function useSwitchContext(consumer: string): SwitchContextValue {
   return ctx;
 }
 
-const SwitchmarkThumbClassContext = React.createContext<string | null>(null);
+interface SwitchmarkControlContextValue {
+  thumbClassName: string;
+  switchmarkVariantProps: SwitchmarkVariantProps;
+}
+
+const SwitchmarkControlContext = React.createContext<SwitchmarkControlContextValue | null>(null);
 
-function useSwitchmarkThumbClass(consumer: string): string {
-  const ctx = React.useContext(SwitchmarkThumbClassContext);
+function useSwitchmarkControlContext(consumer: string): SwitchmarkControlContextValue {
+  const ctx = React.useContext(SwitchmarkControlContext);
   if (!ctx) {
     throw new Error(`<${consumer}/> must be rendered inside <SwitchControl/>.`);
   }
@@ -55,9 +59,10 @@ function useSwitchmarkThumbClass(consumer: string): string {
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface SwitchRootProps extends SwitchVariantProps, Omit<SwitchmarkVariantProps, "size"> {
-  children?: React.ReactNode;
-  className?: string;
+export interface SwitchRootProps
+  extends SwitchVariantProps,
+    Omit<SwitchmarkVariantProps, "size">,
+    LynxStyledElementProps {
   checked?: boolean;
   defaultChecked?: boolean;
   disabled?: boolean;
@@ -76,8 +81,6 @@ export const SwitchRoot = React.forwardRef<unknown, SwitchRootProps>((props, ref
   } = props;
   const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, nativeProps] =
     splitMultipleVariantsProps(restProps, { switch: switchStyle, switchmark });
-  const size: SwitchSize = switchVariantProps.size ?? "32";
-  const tone: SwitchTone = switchmarkVariantProps.tone ?? "brand";
 
   const [checked, setChecked] = useControllableState({
     value: checkedProp,
@@ -85,22 +88,30 @@ export const SwitchRoot = React.forwardRef<unknown, SwitchRootProps>((props, ref
     onChange: onCheckedChange,
   });
 
+  const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
+
   const { pressed: _pressed, ...pressHandlers } = usePressTap({
     disabled,
-    onTap: () => setChecked(!checked),
+    onTap: toggle,
   });
 
-  const rootClassName = switchStyle({ size }).root;
-
-  const ctx = React.useMemo<SwitchContextValue>(
-    () => ({ checked, disabled, size, tone }),
-    [checked, disabled, size, tone],
+  const rootClassName = switchStyle({ ...switchVariantProps, disabled }).root;
+
+  const contextValue = React.useMemo<SwitchContextValue>(
+    () => ({
+      checked,
+      disabled,
+      switchVariantProps,
+      switchmarkVariantProps,
+      toggle,
+    }),
+    [checked, disabled, switchVariantProps, switchmarkVariantProps, toggle],
   );
 
   return (
-    <SwitchContext.Provider value={ctx}>
+    <SwitchContext.Provider value={contextValue}>
       <view
-        {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
         className={clsx(rootClassName, className)}
         {...pressHandlers}
         {...nativeProps}
@@ -114,51 +125,49 @@ SwitchRoot.displayName = "SwitchRoot";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface SwitchControlProps extends Pick<SwitchmarkVariantProps, "tone" | "size"> {
-  children?: React.ReactNode;
-  className?: string;
-}
+export interface SwitchControlProps
+  extends Pick<SwitchmarkVariantProps, "tone" | "size">,
+    LynxStyledElementProps {}
 
 export const SwitchControl = React.forwardRef<unknown, SwitchControlProps>((props, ref) => {
   const [variantProps, restProps] = switchmark.splitVariantProps(props);
   const { children, className, ...nativeProps } = restProps;
-  const { checked, disabled, tone: ctxTone, size: ctxSize } = useSwitchContext("SwitchControl");
-
-  const tone: SwitchTone = variantProps.tone ?? ctxTone;
-  const size: SwitchSize = variantProps.size ?? ctxSize;
-
-  const classes = React.useMemo(
-    () => switchmark({ tone, size, checked, disabled }),
-    [tone, size, checked, disabled],
-  );
+  const context = useSwitchContext("SwitchControl");
+  const switchmarkVariantProps: SwitchmarkVariantProps = {
+    ...context.switchmarkVariantProps,
+    ...variantProps,
+    checked: context.checked,
+    disabled: context.disabled,
+  };
+  const classes = switchmark(switchmarkVariantProps);
 
   return (
-    <SwitchmarkThumbClassContext.Provider value={classes.thumb}>
+    <SwitchmarkControlContext.Provider
+      value={{ thumbClassName: classes.thumb, switchmarkVariantProps }}
+    >
       <view
-        {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
         className={clsx(classes.root, className)}
         {...nativeProps}
       >
         {children}
       </view>
-    </SwitchmarkThumbClassContext.Provider>
+    </SwitchmarkControlContext.Provider>
   );
 });
 SwitchControl.displayName = "SwitchControl";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface SwitchThumbProps {
-  className?: string;
-}
+export interface SwitchThumbProps extends Pick<LynxStyledElementProps, "className" | "style"> {}
 
 export const SwitchThumb = React.forwardRef<unknown, SwitchThumbProps>((props, ref) => {
   const { className, ...nativeProps } = props;
-  const thumbClassName = useSwitchmarkThumbClass("SwitchThumb");
+  const { thumbClassName } = useSwitchmarkControlContext("SwitchThumb");
 
   return (
     <view
-      {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
       className={clsx(thumbClassName, className)}
       {...nativeProps}
     />
@@ -168,19 +177,19 @@ SwitchThumb.displayName = "SwitchThumb";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface SwitchLabelProps {
-  children?: React.ReactNode;
-  className?: string;
-}
+export interface SwitchLabelProps extends LynxStyledElementProps {}
 
 export const SwitchLabel = React.forwardRef<unknown, SwitchLabelProps>((props, ref) => {
   const { children, className, ...nativeProps } = props;
-  const { disabled, size } = useSwitchContext("SwitchLabel");
-  const labelClassName = switchStyle({ size, disabled }).label;
+  const context = useSwitchContext("SwitchLabel");
+  const labelClassName = switchStyle({
+    ...context.switchVariantProps,
+    disabled: context.disabled,
+  }).label;
 
   return (
     <text
-      {...(ref ? { ref: ref as React.Ref<SVGTextElement> } : {})}
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
       className={clsx(labelClassName, className)}
       {...nativeProps}
     >

package/src/components/TagGroup/TagGroup.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from "@lynx-js/react";
 import clsx from "clsx";
 import { tagGroup, type TagGroupVariantProps } from "@seed-design/lynx-css/recipes/tag-group";
 import {
@@ -6,12 +6,17 @@ import {
   type TagGroupItemVariantProps,
 } from "@seed-design/lynx-css/recipes/tag-group-item";
 
+import type { LynxStyledElementProps, LynxTextRef, LynxViewRef } from "../../types";
+import { toArray } from "../../utils/children";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
 import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
 
 const { PropsProvider, useProps, ClassNamesProvider, useClassNames } =
   createSlotRecipeContext(tagGroupItem);
 
+////////////////////////////////////////////////////////////////////////////////////
+
 /**
  * @platform Lynx
  *
@@ -19,12 +24,12 @@ const { PropsProvider, useProps, ClassNamesProvider, useClassNames } =
  * - `truncate` prop: Lynx flex 모델에서는 item 단위 wrap만 가능해 웹 수준의
  *   "한 줄 유지 + label ellipsis" 조합을 재현할 수 없음
  * - `asChild` prop: Lynx Slot 미지원
- * - `flexShrink` prop: CSS variable 동적 주입 제한
  * - 아이콘 slot: Lynx 3.7 SVG 지원 후 검토 (Tier B)
  */
-export interface TagGroupRootProps extends TagGroupVariantProps, TagGroupItemVariantProps {
-  children?: React.ReactNode;
-  className?: string;
+export interface TagGroupRootProps
+  extends TagGroupVariantProps,
+    TagGroupItemVariantProps,
+    LynxStyledElementProps {
   /**
    * children 사이에 삽입되는 구분자. 기본값 `" · "`.
    */
@@ -37,12 +42,12 @@ export const TagGroupRoot = React.forwardRef<unknown, TagGroupRootProps>((props,
   const { children, className, separator = " · ", ...nativeProps } = otherProps;
   const classes = tagGroup(tagGroupVariantProps);
 
-  const visibleChildren = React.Children.toArray(children);
+  const visibleChildren = toArray(children);
 
   return (
     <PropsProvider value={tagGroupItemVariantProps}>
       <view
-        {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
         className={clsx(classes.root, className)}
         {...nativeProps}
       >
@@ -54,12 +59,7 @@ export const TagGroupRoot = React.forwardRef<unknown, TagGroupRootProps>((props,
           return (
             <view
               key={(child as React.ReactElement).key ?? index}
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-                flexShrink: 0,
-              }}
+              className={classes.separatorWrapper}
             >
               <text className={classes.separator}>{separator}</text>
               {child}
@@ -72,29 +72,32 @@ export const TagGroupRoot = React.forwardRef<unknown, TagGroupRootProps>((props,
 });
 TagGroupRoot.displayName = "TagGroupRoot";
 
+////////////////////////////////////////////////////////////////////////////////////
+
 /**
  * @platform Lynx
  *
  * 웹 대비 미지원 기능:
  * - `asChild` prop: Lynx Slot 미지원
- * - `flexShrink` prop: CSS variable 동적 주입 제한
  */
-export interface TagGroupItemProps extends TagGroupItemVariantProps {
-  children?: React.ReactNode;
-  className?: string;
-}
+export interface TagGroupItemProps
+  extends TagGroupItemVariantProps,
+    Pick<StyleProps, "flexShrink">,
+    LynxStyledElementProps {}
 
 export const TagGroupItem = React.forwardRef<unknown, TagGroupItemProps>((props, ref) => {
   const parentVariantProps = useProps();
   const [localVariantProps, otherProps] = tagGroupItem.splitVariantProps(props);
   const classes = tagGroupItem({ ...parentVariantProps, ...localVariantProps });
-  const { children, className, ...nativeProps } = otherProps;
+  const { style, restProps } = useStyleProps(otherProps);
+  const { children, className, ...nativeProps } = restProps;
 
   return (
     <ClassNamesProvider value={classes}>
       <view
-        {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
         className={clsx(classes.root, className)}
+        style={style}
         {...nativeProps}
       >
         {children}
@@ -104,17 +107,16 @@ export const TagGroupItem = React.forwardRef<unknown, TagGroupItemProps>((props,
 });
 TagGroupItem.displayName = "TagGroupItem";
 
-export interface TagGroupItemLabelProps {
-  children?: React.ReactNode;
-  className?: string;
-}
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TagGroupItemLabelProps extends LynxStyledElementProps {}
 
 export const TagGroupItemLabel = React.forwardRef<unknown, TagGroupItemLabelProps>((props, ref) => {
   const classes = useClassNames();
   const { children, className, ...nativeProps } = props;
   return (
     <text
-      {...(ref ? { ref: ref as React.Ref<SVGTextElement> } : {})}
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
       className={clsx(classes.label, className)}
       {...nativeProps}
     >

package/src/components/Text/Text.tsx

@@ -0,0 +1,64 @@
+import { typography } from "@seed-design/lynx-css/vars/component";
+import type { CSSProperties } from "@lynx-js/types";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+
+import {
+  handleColor,
+  handleFontSize,
+  handleFontWeight,
+  handleLineHeight,
+  type TextStyle,
+  type TextStyleProps,
+} from "../../utils/styled";
+import type { LynxStyledElementProps, LynxTextRef } from "../../types";
+
+function capitalize<T extends string>(value: T): Capitalize<T> {
+  return (value.charAt(0).toUpperCase() + value.slice(1)) as Capitalize<T>;
+}
+
+function getTypographyStyle(textStyle: TextStyle | undefined) {
+  const key = `textStyle${capitalize(textStyle ?? "t5Regular")}`;
+  const value = typography[key as keyof typeof typography];
+  return value.enabled.root;
+}
+
+export interface TextProps extends TextStyleProps, LynxStyledElementProps {}
+
+export const Text = React.forwardRef<unknown, TextProps>((props, ref) => {
+  const {
+    color,
+    textStyle,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    align,
+    children,
+    className,
+    style,
+    ...nativeProps
+  } = props;
+  const typographyStyle = getTypographyStyle(textStyle);
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...nativeProps}
+      className={clsx(className)}
+      style={
+        {
+          color: handleColor(color),
+          fontSize: handleFontSize(fontSize) ?? typographyStyle.fontSize,
+          lineHeight: handleLineHeight(lineHeight ?? fontSize) ?? typographyStyle.lineHeight,
+          fontWeight: handleFontWeight(fontWeight) ?? typographyStyle.fontWeight,
+          textAlign: align,
+          ...style,
+        } as CSSProperties
+      }
+    >
+      {children}
+    </text>
+  );
+});
+
+Text.displayName = "Text";

package/src/components/Text/index.ts

@@ -0,0 +1 @@
+export { Text, type TextProps } from "./Text";

package/src/components/index.ts

@@ -1,7 +1,13 @@
 export * from "./ActionButton";
+export * from "./AppBar";
+export * from "./Badge";
+export * from "./Box";
 export * from "./BottomSheet";
 export * from "./Checkbox";
+export * from "./Icon";
 export * from "./ProgressCircle";
 export * from "./RadioGroup";
+export * from "./Stack";
 export * from "./Switch";
 export * from "./TagGroup";
+export * from "./Text";

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
-export * from "./use-controllable-state";
-export * from "./use-icon-color";
-export * from "./use-press-tap";
+export * from "./useControllableState";
+export * from "./useIconColor";
+export * from "./usePressTap";
+export * from "./useSafeArea";

package/src/hooks/{__tests__/use-controllable-state.test.ts → useControllableState.test.ts}

@@ -1,6 +1,6 @@
 import { act, renderHook } from "@lynx-js/react/testing-library";
 import { describe, expect, it, vi } from "vitest";
-import { useControllableState } from "../use-controllable-state";
+import { useControllableState } from "./useControllableState";
 
 describe("useControllableState", () => {
   describe("uncontrolled mode", () => {

package/src/hooks/useIconColor.test.ts

@@ -0,0 +1,13 @@
+import { renderHook } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { useIconColor } from "./useIconColor";
+
+describe("useIconColor", () => {
+  it("returns icon tint sync props", () => {
+    const { result } = renderHook(() => useIconColor([]));
+
+    expect(result.current).toHaveProperty("ref");
+    expect(result.current["main-thread:binduiappear"]).toBeDefined();
+  });
+});

package/src/hooks/useIconColor.ts

@@ -0,0 +1,67 @@
+import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
+import type { MainThread } from "@lynx-js/types";
+import type { DependencyList, RefObject } from "@lynx-js/react";
+
+type IconElement = MainThread.Element & {
+  getComputedStyleProperty?: (name: string) => string;
+  getComputedCssProperty?: (name: string) => string;
+};
+
+export interface UseIconColorOptions {
+  sourceRef?: RefObject<MainThread.Element>;
+}
+
+// Lynx `<image>` 의 `tint-color` attribute 에 CSS variable 문자열을 직접 넣는 경로는
+// 안정적으로 동작하지 않는다. CSS `color` 는 computed style 로 resolved color 를 읽을 수
+// 있으므로 main-thread 에서 한 번 읽어 `tint-color` 로 mirror 한다.
+function syncTintColor(targetRef: RefObject<IconElement>, sourceRef?: RefObject<IconElement>) {
+  "main thread";
+
+  const target = targetRef.current;
+  if (!target) return;
+
+  const source = sourceRef?.current ?? target;
+
+  let color: string | undefined;
+  if (typeof source.getComputedStyleProperty === "function") {
+    color = source.getComputedStyleProperty("color");
+  } else if (typeof source.getComputedCssProperty === "function") {
+    color = source.getComputedCssProperty("color");
+  }
+
+  if (color) {
+    target.setAttribute("tint-color", color);
+  }
+}
+
+/**
+ * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
+ * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
+ *
+ * ```tsx
+ * const iconColorProps = useIconColor([variant, disabled, loading]);
+ * return cloneElement(iconChild, iconColorProps);
+ * ```
+ */
+export function useIconColor(
+  deps: DependencyList,
+  options?: UseIconColorOptions,
+): {
+  ref: RefObject<MainThread.Element>;
+  "main-thread:binduiappear": () => void;
+} {
+  const ref = useMainThreadRef<IconElement>(null);
+  const sourceRef = options?.sourceRef as RefObject<IconElement> | undefined;
+
+  function syncOnUiAppear() {
+    "main thread";
+    syncTintColor(ref, sourceRef);
+  }
+
+  // deps 는 caller 가 책임.
+  useEffect(() => {
+    runOnMainThread(syncTintColor)(ref, sourceRef);
+  }, deps);
+
+  return { ref, "main-thread:binduiappear": syncOnUiAppear };
+}

package/src/hooks/{__tests__/use-press-tap.test.ts → usePressTap.test.ts}

@@ -1,6 +1,6 @@
 import { act, renderHook } from "@lynx-js/react/testing-library";
 import { describe, expect, it, vi } from "vitest";
-import { usePressTap } from "../use-press-tap";
+import { usePressTap } from "./usePressTap";
 
 const fakeEvent = {} as Parameters<ReturnType<typeof usePressTap>["bindtap"]>[0];
 

package/src/hooks/{use-press-tap.ts → usePressTap.ts}

@@ -1,20 +1,24 @@
 import { useState } from "@lynx-js/react";
-import type { TouchEvent } from "@lynx-js/types";
 import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
+import type { BaseTouchEvent, EventHandler, Target } from "@lynx-js/types";
+
+import type { LynxTouchProps } from "../types";
+
+type TouchHandler = EventHandler<BaseTouchEvent<Target>>;
 
 export interface UsePressTapOptions {
   disabled?: boolean;
-  onTap?: () => void;
-  mainThreadOnTap?: () => void;
+  onTap?: TouchHandler;
+  mainThreadOnTap?: LynxTouchProps["main-thread:bindtap"];
 }
 
 export interface UsePressTapReturn {
   pressed: boolean;
-  bindtap: (e: TouchEvent) => void;
-  bindtouchstart: (e: TouchEvent) => void;
-  bindtouchend: (e: TouchEvent) => void;
-  bindtouchcancel: (e: TouchEvent) => void;
-  "main-thread:bindtap"?: () => void;
+  bindtap: TouchHandler;
+  bindtouchstart: TouchHandler;
+  bindtouchend: TouchHandler;
+  bindtouchcancel: TouchHandler;
+  "main-thread:bindtap"?: LynxTouchProps["main-thread:bindtap"];
 }
 
 /**
@@ -38,9 +42,9 @@ export function usePressTap(options: UsePressTapOptions = {}): UsePressTapReturn
     setPressed(false);
   });
 
-  const handleTap = useMemoizedFn(() => {
+  const handleTap = useMemoizedFn((...args: Parameters<TouchHandler>) => {
     if (disabled) return;
-    onTap?.();
+    onTap?.(...args);
   });
 
   return {

package/src/hooks/useSafeArea.test.ts

@@ -0,0 +1,83 @@
+import { renderHook } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { useSafeArea } from "./useSafeArea";
+
+interface TestLynxGlobal {
+  lynx?: {
+    __globalProps?: {
+      safeAreaInsetTop?: number;
+      safeAreaInsetBottom?: number;
+    };
+  };
+  lynxTestingEnv?: {
+    backgroundThread: {
+      globalThis: TestLynxGlobal;
+    };
+    mainThread: {
+      globalThis: TestLynxGlobal;
+    };
+  };
+}
+
+function setGlobalProps(
+  globalProps: NonNullable<NonNullable<TestLynxGlobal["lynx"]>["__globalProps"]>,
+) {
+  const lynxTestingEnv = (globalThis as TestLynxGlobal).lynxTestingEnv;
+
+  if (!lynxTestingEnv) {
+    throw new Error("Expected Lynx testing environment globals to be available.");
+  }
+
+  const globals = [
+    globalThis as TestLynxGlobal,
+    lynxTestingEnv.backgroundThread.globalThis,
+    lynxTestingEnv.mainThread.globalThis,
+  ];
+
+  for (const global of globals) {
+    global.lynx = {
+      ...global.lynx,
+      __globalProps: globalProps,
+    };
+  }
+}
+
+describe("useSafeArea", () => {
+  it("falls back to Lynx env values when host flat global props are missing", () => {
+    const { result } = renderHook(() => useSafeArea());
+
+    expect(result.current).toEqual({
+      safeAreaInsetTop: "env(safe-area-inset-top)",
+      safeAreaInsetBottom: "env(safe-area-inset-bottom)",
+    });
+  });
+
+  it("uses flat globalProps values before env fallback", () => {
+    setGlobalProps({
+      safeAreaInsetTop: 48,
+      safeAreaInsetBottom: 35,
+    });
+
+    const { result } = renderHook(() => useSafeArea());
+
+    expect(result.current).toEqual({
+      safeAreaInsetTop: "48px",
+      safeAreaInsetBottom: "35px",
+    });
+  });
+
+  it("falls back to Lynx env values when host flat global props are zero", () => {
+    setGlobalProps({
+      safeAreaInsetTop: 0,
+      safeAreaInsetBottom: 0,
+    });
+
+    const { result } = renderHook(() => useSafeArea());
+
+    expect(result.current).toEqual({
+      safeAreaInsetTop: "env(safe-area-inset-top)",
+      safeAreaInsetBottom: "env(safe-area-inset-bottom)",
+    });
+  });
+});