fix: header fixed positioning, content spacing, and dynamic height tracking

- Change 'fixed' behavior to use 'fixed' instead of 'sticky' for reliable screen pinning.
- Add dynamic --header-height CSS variable synced via ResizeObserver.
- Add automatic content padding in AppShell based on header height.
- Fix PanelTop import in fixed-header example.
- Update unit tests to reflect positioning changes.

Author: fyalavuz

packages/react/__tests__/Header.test.tsx

@@ -76,10 +76,10 @@ describe("Header", () => {
       expect(header?.className).not.toContain("sticky");
     });
 
-    it("renders fixed header with sticky", () => {
+    it("renders fixed header with fixed positioning", () => {
       const { container } = renderHeader({ behavior: "fixed" });
       const header = container.querySelector("header");
-      expect(header?.className).toContain("sticky");
+      expect(header?.className).toContain("fixed");
     });
   });
 

packages/react/src/AppShell.tsx

@@ -38,7 +38,10 @@ function AppShellInner({ safeArea = false, className, children }: AppShellProps)
   });
 
   return (
-    <div className={cn("flex min-h-dvh flex-col relative", className)}>
+    <div 
+      className={cn("flex min-h-dvh flex-col relative", className)}
+      style={{ paddingTop: "var(--header-height, 0px)" }}
+    >
       {header}
       <SafeArea edges={["bottom"]} className="flex flex-col flex-1">
         {otherChildren}

packages/react/src/Header.tsx

@@ -266,11 +266,10 @@ export const Header = memo(function Header({
       <header
         ref={ghostRef}
         className={cn(
-          "w-full sticky top-0 z-50 transition-colors duration-300",
+          "w-full fixed top-0 left-0 right-0 z-50 transition-colors duration-300",
           t.wrapper,
           className
         )}
-        style={{ paddingTop: "env(safe-area-inset-top, 0px)" }}
       >
         <HeaderProvider value={{ theme }}>
           {renderNavRow()}