@seed-design/lynx-react 0.7.1 → 0.9.0

package/src/components/AppBar/AppBar.test.tsx

@@ -2,6 +2,7 @@ import "@testing-library/jest-dom";
 import * as React from "@lynx-js/react";
 import type { MainThread } from "@lynx-js/types";
 import type { LynxIconElementProps } from "../../types";
+import { Fragment, useEffect } from "@lynx-js/react";
 import {
   act,
   fireEvent,
@@ -21,7 +22,9 @@ interface TestLynxGlobal {
   lynx?: {
     __globalProps?: {
       safeAreaInsetTop?: number;
+      safeAreaInsetRight?: number;
       safeAreaInsetBottom?: number;
+      safeAreaInsetLeft?: number;
     };
   };
   lynxTestingEnv?: {
@@ -152,11 +155,22 @@ describe("AppBar", () => {
     render(<AppBar.Root theme="cupertino" />);
 
     expectStyle(getAppBarRoot().style, {
-      height: "calc(91px)",
+      height: "calc(103px)",
       "padding-top": "47px",
     });
   });
 
+  it("adds left and right safe area insets to the root padding", () => {
+    setGlobalProps({ safeAreaInsetRight: 0, safeAreaInsetLeft: 59 });
+
+    render(<AppBar.Root theme="cupertino" />);
+
+    expectStyle(getAppBarRoot().style, {
+      "padding-left": "calc(75px)",
+      "padding-right": "calc(16px)",
+    });
+  });
+
   it("does not read the safe area CSS variable override as the JS layout source", () => {
     setGlobalProps({ safeAreaInsetTop: 47 });
 
@@ -168,7 +182,7 @@ describe("AppBar", () => {
     );
 
     expectStyle(getAppBarRoot().style, {
-      height: "calc(91px)",
+      height: "calc(103px)",
       "padding-top": "47px",
     });
   });
@@ -239,6 +253,8 @@ describe("AppBar", () => {
   });
 
   it("updates centered title padding from left and right layout widths", async () => {
+    setGlobalProps({ safeAreaInsetRight: 0, safeAreaInsetLeft: 59 });
+
     render(
       <AppBar.Root>
         <AppBar.Left>
@@ -268,9 +284,242 @@ describe("AppBar", () => {
     });
 
     await waitFor(() => {
-      expect(main).toHaveStyle({ paddingLeft: "72px", paddingRight: "72px" });
+      expect(main).toHaveStyle({
+        paddingLeft: "calc(59px + 88px)",
+        paddingRight: "calc(0px + 88px)",
+      });
     });
   });
+
+  it.each([
+    "left",
+    "right",
+  ] as const)("bleeds both sides of a single button in the %s slot", (side) => {
+    const Slot = side === "left" ? AppBar.Left : AppBar.Right;
+    render(
+      <AppBar.Root>
+        <Slot>
+          <AppBar.IconButton accessibility-label="Back" />
+        </Slot>
+      </AppBar.Root>,
+    );
+    const button = getAppBarRoot().querySelector(".seed-app-bar__iconButton");
+    expect(button).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(button).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+  });
+
+  it.each([
+    "left",
+    "right",
+  ] as const)("bleeds only the outer sides of buttons in the %s slot", (side) => {
+    const Slot = side === "left" ? AppBar.Left : AppBar.Right;
+    render(
+      <AppBar.Root>
+        <Slot>
+          <AppBar.IconButton accessibility-label="Search" />
+          <AppBar.IconButton accessibility-label="Share" />
+          <AppBar.IconButton accessibility-label="Close" />
+        </Slot>
+      </AppBar.Root>,
+    );
+    const buttons = getAppBarRoot().querySelectorAll(".seed-app-bar__iconButton");
+    expect(buttons).toHaveLength(3);
+    expect(buttons[0]).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(buttons[0]).not.toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    expect(buttons[1]).not.toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(buttons[1]).not.toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    expect(buttons[2]).not.toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(buttons[2]).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+  });
+
+  it("updates both edges when a conditional sibling changes without remounting the button", () => {
+    const mount = vi.fn();
+    function WrappedButton() {
+      useEffect(() => {
+        mount();
+      }, []);
+      return <AppBar.IconButton accessibility-label="Back" />;
+    }
+    function Example({ showCustom }: { showCustom: boolean }) {
+      return (
+        <AppBar.Root>
+          <AppBar.Left>
+            <WrappedButton />
+            {showCustom && (
+              <AppBar.Slot>
+                <text>Done</text>
+              </AppBar.Slot>
+            )}
+          </AppBar.Left>
+        </AppBar.Root>
+      );
+    }
+    const { rerender } = render(<Example showCustom={false} />);
+    const button = () => getAppBarRoot().querySelector(".seed-app-bar__iconButton");
+    expect(button()).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(button()).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    rerender(<Example showCustom />);
+    expect(button()).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(button()).not.toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    rerender(<Example showCustom={false} />);
+    expect(button()).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    expect(mount).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not bleed a custom slot sitting at the slot edge", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Right>
+          <AppBar.Slot>
+            <text>Done</text>
+          </AppBar.Slot>
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+
+    const custom = getAppBarRoot().querySelector<HTMLElement>(".seed-app-bar__custom");
+    expect(custom).toBeInTheDocument();
+    expect(custom!.style.getPropertyValue("margin-left")).toBe("");
+    expect(custom!.style.getPropertyValue("margin-right")).toBe("");
+  });
+
+  it("bleeds the trailing icon button but not a preceding custom slot", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Right>
+          <AppBar.Slot>
+            <text>Done</text>
+          </AppBar.Slot>
+          <AppBar.IconButton accessibility-label="Close" />
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+
+    const root = getAppBarRoot();
+    const custom = root.querySelector<HTMLElement>(".seed-app-bar__custom");
+    const iconButton = root.querySelector<HTMLElement>(".seed-app-bar__iconButton");
+    expect(custom!.style.getPropertyValue("margin-right")).toBe("");
+    expect(iconButton).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+  });
+
+  it.each([
+    "leading",
+    "trailing",
+    "both",
+  ] as const)("respects explicit edge=%s over automatic edges", (edge) => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <AppBar.IconButton accessibility-label="Back" edge={edge} />
+        </AppBar.Left>
+      </AppBar.Root>,
+    );
+    const button = getAppBarRoot().querySelector(".seed-app-bar__iconButton");
+    expect(button?.classList.contains("seed-app-bar__icon-button-edge-leading")).toBe(
+      edge !== "trailing",
+    );
+    expect(button?.classList.contains("seed-app-bar__icon-button-edge-trailing")).toBe(
+      edge !== "leading",
+    );
+  });
+
+  it("preserves caller styles when automatic edge compensation applies", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <AppBar.IconButton
+            accessibility-label="Back"
+            {...{ style: { width: "60px", opacity: 0.5 } }}
+          />
+        </AppBar.Left>
+      </AppBar.Root>,
+    );
+    const button = getAppBarRoot().querySelector<HTMLElement>(".seed-app-bar__iconButton");
+    expect(button).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expectStyle(button!.style, { width: "60px", opacity: "0.5" });
+  });
+
+  it("finds the physical edge through nested fragments and conditional children", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Right>
+          <Fragment>
+            {false && <AppBar.IconButton accessibility-label="Hidden" />}
+            <AppBar.IconButton accessibility-label="Search" />
+            <Fragment key="actions">
+              <AppBar.IconButton accessibility-label="Close" />
+              {null}
+              <Fragment />
+            </Fragment>
+          </Fragment>
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+    const buttons = getAppBarRoot().querySelectorAll<HTMLElement>(".seed-app-bar__iconButton");
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0]).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(buttons[0]).not.toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    expect(buttons[1]).not.toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(buttons[1]).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+  });
+
+  it("does not leak edge to native children or bleed buttons inside custom layout boxes", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <view id="native-edge">
+            <AppBar.IconButton accessibility-label="Nested" />
+          </view>
+        </AppBar.Left>
+        <AppBar.Right>
+          <AppBar.Slot>
+            <AppBar.IconButton accessibility-label="Custom" />
+          </AppBar.Slot>
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+    const root = getAppBarRoot();
+    expect(root.querySelector("#native-edge")).not.toHaveAttribute("edge");
+    expect(root.querySelector("[edge]")).toBeNull();
+    for (const button of root.querySelectorAll(".seed-app-bar__iconButton")) {
+      expect(button).not.toHaveClass("seed-app-bar__icon-button-edge-leading");
+      expect(button).not.toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    }
+  });
+
+  it("passes edge through wrapper components without changing their props or remounting", () => {
+    const mount = vi.fn();
+    const received = vi.fn();
+    function WrappedButton(props: { edge?: "leading" | "trailing" }) {
+      received(props);
+      useEffect(() => {
+        mount();
+      }, []);
+      return <AppBar.IconButton accessibility-label="Wrapped" {...props} />;
+    }
+    const { rerender } = render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <WrappedButton />
+        </AppBar.Left>
+      </AppBar.Root>,
+    );
+    expect(getAppBarRoot().querySelector(".seed-app-bar__iconButton")).toHaveClass(
+      "seed-app-bar__icon-button-edge-leading",
+    );
+    expect(received.mock.lastCall?.[0]).not.toHaveProperty("edge");
+    rerender(
+      <AppBar.Root>
+        <AppBar.Left>
+          <WrappedButton edge="trailing" />
+        </AppBar.Left>
+      </AppBar.Root>,
+    );
+    expect(getAppBarRoot().querySelector(".seed-app-bar__iconButton")).toHaveClass(
+      "seed-app-bar__icon-button-edge-trailing",
+    );
+    expect(mount).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe("AppBar icon recipe ownership", () => {

package/src/components/AppBar/AppBar.tsx

@@ -21,6 +21,7 @@ import { IconSlotProvider } from "../Icon/Icon";
 import { AppBarProvider, useAppBarContext } from "./context";
 import { getLayoutWidth, getMainLayoutStyle, useAppBar } from "./useAppBar";
 import { mergeProps } from "../../utils/merge-props";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
 
 type AppBarClassNames = ReturnType<typeof appBar>;
 type AppBarMainClassNames = ReturnType<typeof appBarMain>;
@@ -49,6 +50,66 @@ function useAppBarMainClassNames(consumer: string): AppBarMainClassNames {
   }
 }
 
+/**
+ * 아이콘 버튼의 bleed 보정 방향. `leading`은 왼쪽, `trailing`은 오른쪽, `both`는 양쪽.
+ */
+export type AppBarEdge = "leading" | "trailing" | "both";
+
+const AppBarEdgeContext = React.createContext<AppBarEdge | undefined>(undefined);
+
+/** Fragments and arrays do not create layout boxes; retain their keys and nesting. */
+function countEdgeChildren(children: React.ReactNode): number {
+  if (children == null || children === "" || typeof children === "boolean") return 0;
+  if (Array.isArray(children))
+    return children.reduce((count, child) => count + countEdgeChildren(child), 0);
+  if (
+    React.isValidElement<{ children?: React.ReactNode }>(children) &&
+    children.type === React.Fragment
+  ) {
+    return countEdgeChildren(children.props.children);
+  }
+  return 1;
+}
+
+// Lynx lacks :first-child/:last-child; pass both slot edges through Context to match
+// web spacing without shrinking the icon button's touch target.
+function provideEdgeToChildren(children: React.ReactNode): React.ReactNode {
+  const lastIndex = countEdgeChildren(children) - 1;
+  let index = 0;
+
+  function visit(child: React.ReactNode): React.ReactNode {
+    if (child == null || child === "" || typeof child === "boolean") return child;
+    if (Array.isArray(child)) return child.map(visit);
+    if (
+      React.isValidElement<{ children?: React.ReactNode }>(child) &&
+      child.type === React.Fragment
+    ) {
+      return React.cloneElement(child, { children: visit(child.props.children) });
+    }
+
+    const childIndex = index++;
+    const edge =
+      childIndex === 0
+        ? childIndex === lastIndex
+          ? "both"
+          : "leading"
+        : childIndex === lastIndex
+          ? "trailing"
+          : undefined;
+    if (!React.isValidElement(child)) return child;
+    // Native boxes and custom slots own their layout; do not pass an automatic edge into them.
+    const automaticEdge =
+      typeof child.type !== "string" && child.type !== AppBarSlot ? edge : undefined;
+    return (
+      <AppBarEdgeContext.Provider key={child.key} value={automaticEdge}>
+        {child}
+      </AppBarEdgeContext.Provider>
+    );
+  }
+
+  return visit(children);
+}
+
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface AppBarRootProps extends AppBarVariantProps, LynxStyledElementProps {}
@@ -67,7 +128,7 @@ export const AppBarRoot = React.forwardRef<unknown, AppBarRootProps>((props, ref
           className={clsx(classNames.root, className)}
           style={
             {
-              "--seed-safe-area-top": contextValue.safeAreaInsetTop,
+              "--seed-safe-area-top": contextValue.safeArea.safeAreaInsetTop,
               "--centered-title-padding-x": contextValue.centeredTitlePaddingX,
               ...rootLayoutStyle,
               ...style,
@@ -114,7 +175,7 @@ export const AppBarLeft = React.forwardRef<unknown, AppBarLeftProps>((props, ref
       )}
       className={clsx(classNames.left, className)}
     >
-      {children}
+      {provideEdgeToChildren(children)}
     </view>
   );
 });
@@ -149,7 +210,7 @@ export const AppBarRight = React.forwardRef<unknown, AppBarRightProps>((props, r
       )}
       className={clsx(classNames.right, className)}
     >
-      {children}
+      {provideEdgeToChildren(children)}
     </view>
   );
 });
@@ -160,8 +221,7 @@ AppBarRight.displayName = "AppBarRight";
 export interface AppBarMainProps extends AppBarMainVariantProps, LynxStyledElementProps {}
 
 export const AppBarMain = React.forwardRef<unknown, AppBarMainProps>((props, ref) => {
-  const { centeredTitlePaddingX, safeAreaInsetTop, sharedVariantProps } =
-    useAppBarContext("AppBarMain");
+  const { centeredTitlePaddingX, safeArea, sharedVariantProps } = useAppBarContext("AppBarMain");
   const [variantProps, otherProps] = appBarMain.splitVariantProps({
     ...sharedVariantProps,
     ...props,
@@ -169,13 +229,6 @@ export const AppBarMain = React.forwardRef<unknown, AppBarMainProps>((props, ref
   const resolvedTheme = variantProps.theme ?? "cupertino";
   const classNames = appBarMain(variantProps);
   const { children, className, style, ...nativeProps } = otherProps;
-  const centeredTitleStyle =
-    variantProps.theme === "cupertino"
-      ? {
-          paddingLeft: centeredTitlePaddingX,
-          paddingRight: centeredTitlePaddingX,
-        }
-      : undefined;
 
   return (
     <AppBarMainClassNamesProvider value={classNames}>
@@ -184,8 +237,7 @@ export const AppBarMain = React.forwardRef<unknown, AppBarMainProps>((props, ref
         className={clsx(classNames.root, className)}
         style={
           {
-            ...centeredTitleStyle,
-            ...getMainLayoutStyle(resolvedTheme, safeAreaInsetTop),
+            ...getMainLayoutStyle(resolvedTheme, safeArea, centeredTitlePaddingX),
             ...style,
           } as LynxViewProps["style"]
         }
@@ -233,11 +285,18 @@ AppBarSubtitle.displayName = "AppBarSubtitle";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface AppBarIconButtonProps extends LynxElementProps, LynxPressableProps {
+export interface AppBarIconButtonProps
+  extends Omit<LynxElementProps, "flatten">,
+    LynxPressableProps {
   icon?: React.ReactElement<LynxIconElementProps>;
   "accessibility-label"?: LynxViewProps["accessibility-label"];
   "accessibility-element"?: LynxViewProps["accessibility-element"];
   "accessibility-traits"?: LynxViewProps["accessibility-traits"];
+  /**
+   * 슬롯의 첫·마지막 자식이 아이콘 버튼이면 해당 방향을, 유일한 자식이면 양쪽을 자동 보정한다.
+   * 명시하면 `AppBarLeft` / `AppBarRight`에서 감지한 자동 보정 방향을 덮어쓴다.
+   */
+  edge?: AppBarEdge;
 }
 
 export const AppBarIconButton = React.forwardRef<unknown, AppBarIconButtonProps>((props, ref) => {
@@ -245,12 +304,16 @@ export const AppBarIconButton = React.forwardRef<unknown, AppBarIconButtonProps>
     children,
     className,
     icon,
+    edge,
     "accessibility-element": accessibilityElement = true,
     "accessibility-label": accessibilityLabel,
     "accessibility-traits": accessibilityTraits = "button",
     ...nativeProps
   } = props;
   const classNames = useAppBarClassNames("AppBarIconButton");
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback();
+  const automaticEdge = React.useContext(AppBarEdgeContext);
+  const resolvedEdge = edge ?? automaticEdge;
 
   if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) {
     console.warn("AppBarIconButton requires `accessibility-label` for accessibility.");
@@ -258,11 +321,24 @@ export const AppBarIconButton = React.forwardRef<unknown, AppBarIconButtonProps>
 
   return (
     <view
-      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
+      {...mergeProps(
+        ref ? { ref: ref as LynxViewRef } : {},
+        scaleFeedbackTriggerProps,
+        scaleFeedbackTargetProps,
+        nativeProps,
+      )}
+      flatten={false}
       accessibility-element={accessibilityElement}
       accessibility-label={accessibilityLabel}
       accessibility-traits={accessibilityTraits}
-      className={clsx(classNames.iconButton, className)}
+      className={clsx(
+        classNames.iconButton,
+        (resolvedEdge === "leading" || resolvedEdge === "both") &&
+          "seed-app-bar__icon-button-edge-leading",
+        (resolvedEdge === "trailing" || resolvedEdge === "both") &&
+          "seed-app-bar__icon-button-edge-trailing",
+        className,
+      )}
     >
       <IconSlotProvider value={{ classNames: { icon: classNames.icon }, deps: [classNames.icon] }}>
         {icon ? <Icon icon={icon} /> : children}
@@ -272,19 +348,26 @@ export const AppBarIconButton = React.forwardRef<unknown, AppBarIconButtonProps>
 });
 AppBarIconButton.displayName = "AppBarIconButton";
 
-export interface AppBarSlotProps extends LynxStyledElementProps {}
+export interface AppBarSlotProps extends LynxStyledElementProps {
+  /**
+   * @internal 커스텀 슬롯에서는 bleed 보정을 적용하지 않는다. 전달된 값은 native 속성에서 제외한다.
+   */
+  edge?: AppBarEdge;
+}
 
 export const AppBarSlot = React.forwardRef<unknown, AppBarSlotProps>((props, ref) => {
-  const { children, className, ...nativeProps } = props;
+  const { children, className, edge: _edge, ...nativeProps } = props;
   const classNames = useAppBarClassNames("AppBarSlot");
 
   return (
-    <view
-      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
-      className={clsx(classNames.custom, className)}
-    >
-      {children}
-    </view>
+    <AppBarEdgeContext.Provider value={undefined}>
+      <view
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
+        className={clsx(classNames.custom, className)}
+      >
+        {children}
+      </view>
+    </AppBarEdgeContext.Provider>
   );
 });
 AppBarSlot.displayName = "AppBarSlot";

package/src/components/AppBar/context.ts

@@ -1,6 +1,8 @@
 import { type AppBarMainVariantProps } from "@seed-design/lynx-css/recipes/app-bar-main";
 import * as React from "@lynx-js/react";
 
+import type { UseSafeAreaReturn } from "../../hooks/useSafeArea";
+
 export type SharedAppBarVariantProps = Pick<
   AppBarMainVariantProps,
   "theme" | "tone" | "transitionStyle"
@@ -8,7 +10,7 @@ export type SharedAppBarVariantProps = Pick<
 
 export interface AppBarContextValue {
   centeredTitlePaddingX: string;
-  safeAreaInsetTop: string;
+  safeArea: UseSafeAreaReturn;
   sharedVariantProps: SharedAppBarVariantProps;
   setLeftWidth: (width: number) => void;
   setRightWidth: (width: number) => void;

package/src/components/AppBar/index.ts

@@ -7,6 +7,7 @@ export {
   AppBarSlot,
   AppBarSubtitle,
   AppBarTitle,
+  type AppBarEdge,
   type AppBarIconButtonProps,
   type AppBarLeftProps,
   type AppBarMainProps,

package/src/components/AppBar/useAppBar.ts

@@ -1,8 +1,9 @@
 import type { AppBarVariantProps } from "@seed-design/lynx-css/recipes/app-bar";
 import type { AppBarMainVariantProps } from "@seed-design/lynx-css/recipes/app-bar-main";
+import { topNavigation as topNavigationVars } from "@seed-design/lynx-css/vars/component";
 import * as React from "@lynx-js/react";
 
-import { useSafeArea } from "../../hooks/useSafeArea";
+import { type UseSafeAreaReturn, useSafeArea } from "../../hooks/useSafeArea";
 import type { LynxViewProps } from "../../types";
 import type { AppBarContextValue, SharedAppBarVariantProps } from "./context";
 
@@ -14,10 +15,8 @@ type AppBarTheme = NonNullable<AppBarVariantProps["theme"]>;
 type LayoutChangeHandler = NonNullable<LynxViewProps["bindlayoutchange"]>;
 type AppBarStyleObject = Record<string, string | number>;
 
-const APP_BAR_HEIGHT_BY_THEME: Record<AppBarTheme, string> = {
-  cupertino: "44px",
-  android: "56px",
-};
+// Mirrors the recipe's `dimension.x4` as a literal: Lynx drops an inline `calc()` that contains `var()`.
+const ROOT_PADDING_X = 16;
 
 function getDefaultAppBarTheme(): AppBarTheme {
   const globalSystemInfo = (globalThis as typeof globalThis & { SystemInfo?: LynxSystemInfo })
@@ -38,31 +37,38 @@ export function getLayoutWidth(event: Parameters<LayoutChangeHandler>[0]): numbe
   return Math.max(0, nextWidth);
 }
 
+// The left/right areas sit inside the root padding, so the title clears that padding plus the wider area.
 function getCenteredTitlePadding(leftWidth: number, rightWidth: number): string {
-  return `${Math.max(leftWidth, rightWidth)}px`;
+  return `${ROOT_PADDING_X + Math.max(leftWidth, rightWidth)}px`;
 }
 
-function getRootLayoutStyle(theme: AppBarTheme, safeAreaInsetTop: string): AppBarStyleObject {
+function getRootLayoutStyle(safeArea: UseSafeAreaReturn): AppBarStyleObject {
   return {
-    height: `calc(${APP_BAR_HEIGHT_BY_THEME[theme]} + ${safeAreaInsetTop})`,
-    paddingTop: safeAreaInsetTop,
+    height: `calc(${topNavigationVars.base.enabled.root.height} + ${safeArea.safeAreaInsetTop})`,
+    paddingTop: safeArea.safeAreaInsetTop,
+    paddingLeft: `calc(${ROOT_PADDING_X}px + ${safeArea.safeAreaInsetLeft})`,
+    paddingRight: `calc(${ROOT_PADDING_X}px + ${safeArea.safeAreaInsetRight})`,
   };
 }
 
+// The title clears the same distance past each side's inset, so it stays centered in the safe area.
 export function getMainLayoutStyle(
   theme: AppBarMainVariantProps["theme"],
-  safeAreaInsetTop: string,
+  safeArea: UseSafeAreaReturn,
+  centeredTitlePaddingX: string,
 ): AppBarStyleObject | undefined {
   if (theme !== "cupertino") return undefined;
 
   return {
-    top: safeAreaInsetTop,
+    top: safeArea.safeAreaInsetTop,
     bottom: "0px",
+    paddingLeft: `calc(${safeArea.safeAreaInsetLeft} + ${centeredTitlePaddingX})`,
+    paddingRight: `calc(${safeArea.safeAreaInsetRight} + ${centeredTitlePaddingX})`,
   };
 }
 
 export function useAppBar(variantProps: AppBarVariantProps) {
-  const { safeAreaInsetTop } = useSafeArea();
+  const safeArea = useSafeArea();
   const [leftWidth, setLeftWidth] = React.useState(0);
   const [rightWidth, setRightWidth] = React.useState(0);
   const resolvedTheme = variantProps.theme ?? getDefaultAppBarTheme();
@@ -72,7 +78,7 @@ export function useAppBar(variantProps: AppBarVariantProps) {
     theme: resolvedTheme,
   };
   const centeredTitlePaddingX = getCenteredTitlePadding(leftWidth, rightWidth);
-  const rootLayoutStyle = getRootLayoutStyle(resolvedTheme, safeAreaInsetTop);
+  const rootLayoutStyle = getRootLayoutStyle(safeArea);
   const sharedVariantProps = React.useMemo<SharedAppBarVariantProps>(
     () => ({
       theme: resolvedVariantProps.theme,
@@ -84,12 +90,12 @@ export function useAppBar(variantProps: AppBarVariantProps) {
   const contextValue = React.useMemo<AppBarContextValue>(
     () => ({
       centeredTitlePaddingX,
-      safeAreaInsetTop,
+      safeArea,
       sharedVariantProps,
       setLeftWidth,
       setRightWidth,
     }),
-    [centeredTitlePaddingX, safeAreaInsetTop, sharedVariantProps],
+    [centeredTitlePaddingX, safeArea, sharedVariantProps],
   );
 
   return {