fix: static header scrolling and improve AppShell layout orchestration

- Update AppShell to keep 'static' headers inside the main scrollable SafeArea.
- Automatically pass forceSafeAreaTop=true to 'fixed/sticky/reveal' headers.
- Refactor Header to conditionally handle top safe area based on behavior and props.
- This ensures static headers scroll away correctly while fixed ones stay pinned.

Author: fyalavuz

packages/react/src/AppShell.tsx

@@ -16,30 +16,47 @@ function AppShellInner({ safeArea = false, className, children }: AppShellProps)
     );
   }
 
-  // When safeArea is true, we want to ensure the Header can be sticky correctly.
-  // Sticky elements don't work well when their parent has padding-top.
-  // So we split Header from other children.
   let header: ReactNode = null;
+  let headerBehavior: string = "fixed";
   const otherChildren: ReactNode[] = [];
 
   Children.forEach(children, (child) => {
     if (isValidElement(child)) {
-      // Check for Header component by type or displayName
       const isHeader = child.type === Header || 
                       (child.type as any).displayName === "Header" ||
                       (child.type as any).name === "Header";
 
       if (isHeader) {
         header = child;
+        headerBehavior = (child.props as any).behavior || "fixed";
       } else {
         otherChildren.push(child);
       }
     }
   });
 
+  const isStatic = headerBehavior === "static";
+
+  // For static behavior, the header MUST be part of the same scroll container 
+  // as the content to scroll away.
+  if (isStatic) {
+    return (
+      <SafeArea edges={["top", "bottom"]} className={cn("flex min-h-dvh flex-col relative", className)}>
+        {header}
+        <div className="flex flex-col flex-1">
+          {otherChildren}
+        </div>
+      </SafeArea>
+    );
+  }
+
+  // For fixed/sticky/reveal behaviors, the header handles its own top safe area 
+  // and stays pinned or manages its own animation.
   return (
     <div className={cn("flex min-h-dvh flex-col relative", className)}>
-      {header}
+      {header && isValidElement(header) 
+        ? Object.assign({}, header, { props: { ...header.props, forceSafeAreaTop: true } }) 
+        : header}
       <SafeArea edges={["bottom"]} className="flex flex-col flex-1">
         {otherChildren}
       </SafeArea>

packages/react/src/Header.tsx

@@ -62,6 +62,7 @@ export const Header = memo(function Header({
   speed = "normal",
   mobileMenu,
   onVisibilityChange,
+  forceSafeAreaTop = false,
   className,
 }: HeaderProps) {
   const { motion, AnimatePresence } = useMotion();
@@ -119,7 +120,7 @@ export const Header = memo(function Header({
   const [isPastThreshold, setIsPastThreshold] = useState(false);
 
   useEffect(() => {
-    if (behavior === "static" || behavior === "fixed") return;
+    if (behavior === "static" || behavior === "fixed" || behavior === "sticky") return;
 
     const onScroll = () => {
       setIsPastThreshold(window.scrollY > threshold + 10);
@@ -134,7 +135,7 @@ export const Header = memo(function Header({
     hasRevealEffect && scrollDirection === "up" && isPastThreshold;
 
   useEffect(() => {
-    onVisibilityChange?.(behavior === "fixed" || !hasRevealEffect || isOverlayVisible);
+    onVisibilityChange?.(behavior === "fixed" || behavior === "sticky" || !hasRevealEffect || isOverlayVisible);
   }, [isOverlayVisible, behavior, hasRevealEffect, onVisibilityChange]);
 
   const shouldShowInOverlay = useCallback(
@@ -252,7 +253,7 @@ export const Header = memo(function Header({
 
   const renderContent = () => (
     <HeaderProvider value={{ theme }}>
-      {renderNavRow(behavior !== "static" && behavior !== "fixed")}
+      {renderNavRow(behavior !== "static" && behavior !== "fixed" && behavior !== "sticky")}
       {renderContextRow()}
       {renderSearchRow()}
       {renderMobileMenuPanel()}
@@ -291,7 +292,7 @@ export const Header = memo(function Header({
           t.wrapper,
           className
         )}
-        style={{ paddingTop: "env(safe-area-inset-top, 0px)" }}
+        style={{ paddingTop: forceSafeAreaTop ? "env(safe-area-inset-top, 0px)" : undefined }}
       >
         {renderContent()}
       </header>

packages/react/src/types.ts

@@ -46,6 +46,7 @@ export interface HeaderProps {
   speed?: AnimationSpeed;
   mobileMenu?: ReactNode;
   onVisibilityChange?: (visible: boolean) => void;
+  forceSafeAreaTop?: boolean;
   className?: string;
 }