@flamingo-stack/openframe-frontend-core 0.0.410-snapshot.20260711165901 → 0.0.410

package/src/components/navigation/mobile-burger-menu.tsx

@@ -1,10 +1,8 @@
 "use client"
 
-import React, { useCallback, useRef } from 'react'
-import { usePreventScroll } from '@react-aria/overlays'
+import React, { useCallback, useEffect } from 'react'
 import { NavigationSidebarConfig, NavigationSidebarItem } from '../../types/navigation'
 import { cn } from '../../utils'
-import { useFocusTrap } from '../../hooks/ui/use-focus-trap'
 import { Logout02Icon, PenEditIcon, UserSearchIcon } from '../icons-v2-generated'
 import { Button, SquareAvatar } from '../ui'
 import { OVERLAY_BACKDROP_CLASS } from '../ui/drawer'
@@ -49,12 +47,32 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
   onLogout,
   disabled = false,
 }: MobileBurgerMenuProps) {
-  const panelRef = useRef<HTMLDivElement>(null)
+  // Prevent body scroll when menu is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = 'unset'
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset'
+    }
+  }, [isOpen])
 
-  // Shared ref-counted, iOS-aware scroll lock (react-aria) while open.
-  usePreventScroll({ isDisabled: !isOpen })
-  // Initial focus, Tab containment, Escape-to-close, guarded focus restore.
-  useFocusTrap(panelRef, isOpen, { onEscape: onClose })
+  // Handle escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown)
+      return () => document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isOpen, onClose])
 
   const handleItemClick = useCallback((item: NavigationSidebarItem) => {
     if (item.onClick) {
@@ -147,7 +165,7 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
         className={cn(
           "absolute inset-0 z-[100] md:hidden",
           OVERLAY_BACKDROP_CLASS,
-          "transition-all duration-300 motion-reduce:transition-none",
+          "transition-all duration-300",
           isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
         )}
         style={{ top: HEADER_HEIGHT }}
@@ -158,12 +176,11 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
       {/* Menu Panel - positioned below header with slide-down animation. `absolute`
           for the same reason as the backdrop above (anchors below the topBar). */}
       <div
-        ref={panelRef}
         className={cn(
           "absolute left-0 right-0 z-[101] md:hidden",
           "flex flex-col",
           "bg-ods-bg border-b border-ods-border",
-          "transition-all duration-300 ease-out motion-reduce:transition-none",
+          "transition-all duration-300 ease-out",
           "overflow-hidden",
           isOpen
             ? "opacity-100 translate-y-0"
@@ -176,13 +193,9 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenu({
         role="dialog"
         aria-modal="true"
         aria-label="Mobile navigation menu"
-        tabIndex={-1}
-        // Stays mounted while hidden (opacity-0) — inert keeps its items out
-        // of the tab order when closed.
-        inert={!isOpen || undefined}
       >
         {/* Scrollable Content */}
-        <div className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain p-4 flex flex-col gap-4">
+        <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 flex flex-col gap-4">
           {/* User Card */}
           {user && (
             <div

package/src/components/navigation/mobile-nav-panel.tsx

@@ -1,18 +1,11 @@
 "use client"
 
-import React, { useRef } from 'react'
-import { usePreventScroll } from '@react-aria/overlays'
+import React, { useEffect, useRef } from 'react'
 import { cn } from '../../utils'
 import { MobileNavConfig, NavigationItem } from '../../types/navigation'
 import { Button } from '../ui/button'
-import { OVERLAY_BACKDROP_CLASS } from '../ui/drawer'
-import { useFocusTrap } from '../../hooks/ui/use-focus-trap'
-import { useHeaderHeight } from '../../hooks/ui/use-header-height'
 import { X } from 'lucide-react'
 
-/** DOM id of the panel — referenced by the header hamburger's `aria-controls`. */
-export const MOBILE_NAV_PANEL_ID = 'mobile-nav-panel'
-
 export interface MobileNavPanelProps {
   isOpen: boolean
   config: MobileNavConfig
@@ -21,13 +14,32 @@ export interface MobileNavPanelProps {
 export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
   const panelRef = useRef<HTMLDivElement>(null)
 
-  // Shared ref-counted, iOS-aware scroll lock (react-aria) — one counter with
-  // the modals and chat overlays, restores prior styles on release.
-  usePreventScroll({ isDisabled: !isOpen })
-  // Initial focus, Tab containment, Escape-to-close, guarded focus restore.
-  useFocusTrap(panelRef, isOpen, { onEscape: config.onClose })
-  // The panel is layout-mounted on every page — observers only while open.
-  const headerHeight = useHeaderHeight(64, { enabled: isOpen })
+  // Prevent body scroll when menu is open - using the original working approach
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = 'unset'
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset'
+    }
+  }, [isOpen])
+
+  // Handle escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        config.onClose?.()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown)
+      return () => document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isOpen, config])
 
   if (!isOpen) return null
 
@@ -87,30 +99,21 @@ export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
     <>
       {/* Backdrop - closes nav when clicked outside */}
       <div
-        className={cn("fixed inset-0 z-[9998]", OVERLAY_BACKDROP_CLASS)}
+        className="fixed inset-0 z-[9998] bg-black/50"
         onClick={config.onClose}
       />
 
-      {/* Navigation Panel - top-anchored floating card */}
+      {/* Navigation Panel - modal style like the original working version */}
       <div
         ref={panelRef}
-        id={MOBILE_NAV_PANEL_ID}
-        role="dialog"
-        aria-modal="true"
-        aria-label="Navigation menu"
-        tabIndex={-1}
-        style={{ '--mobile-nav-top': `${headerHeight + 16}px` } as React.CSSProperties}
         className={cn(
           "fixed z-[9999] rounded-lg shadow-xl",
           config.className ? "" : "bg-ods-card border border-ods-border",
-          // Responsive positioning and sizing
+          // Responsive positioning and sizing - matching original working version
           "right-2 left-2 md:left-auto",
           "md:right-6 md:w-[400px] md:max-w-[calc(100vw-3rem)]",
-          // Small-viewport (svh) sizing anchored below the measured header —
-          // 100vh overflowed under mobile browser chrome, leaving the bottom
-          // entries and footer unreachable while the body was scroll-locked.
-          "top-[var(--mobile-nav-top)]",
-          "max-h-[calc(100svh-var(--mobile-nav-top)-50px)] md:max-h-[calc(100svh-var(--mobile-nav-top)-8px)]",
+          // Height constraints with proper mobile spacing - increased top position
+          "top-20 max-h-[calc(100vh-130px)] md:max-h-[calc(100vh-88px)]",
           "flex flex-col",
           config.className || ""
         )}
@@ -129,7 +132,7 @@ export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
         </div>
 
         {/* Scrollable content area */}
-        <div className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-2 py-2">
+        <div className="flex-1 overflow-y-auto overflow-x-hidden px-2 py-2">
           <div className="flex flex-col space-y-1">
             {config.sections.map((section, index) => (
               <div key={index}>
@@ -146,9 +149,9 @@ export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
           </div>
         </div>
 
-        {/* Footer with action button - fixed at bottom, clears the iOS home indicator */}
+        {/* Footer with action button - fixed at bottom */}
         {config.footer && (
-          <div className="border-t border-ods-border p-4 pb-[max(1rem,env(safe-area-inset-bottom))] flex-shrink-0">
+          <div className="border-t border-ods-border p-4 flex-shrink-0">
             {config.footer}
           </div>
         )}

package/src/components/navigation/sliding-sidebar.tsx

@@ -1,14 +1,11 @@
 "use client"
 
-import React, { useState, useEffect, useRef } from 'react'
-import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
-import { usePreventScroll } from '@react-aria/overlays'
+import React, { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { cn } from '../../utils'
 import { useHeaderHeight } from '../../hooks/ui'
-import { useFocusTrap } from '../../hooks/ui/use-focus-trap'
 import { SlidingSidebarConfig, NavigationItem } from '../../types/navigation'
 import { Button } from '../ui/button'
-import { OVERLAY_BACKDROP_CLASS } from '../ui/drawer'
 
 export interface SlidingSidebarProps {
   config: SlidingSidebarConfig
@@ -18,15 +15,6 @@ export function SlidingSidebar({ config }: SlidingSidebarProps) {
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set())
   const [mounted, setMounted] = useState(false)
   const headerHeight = useHeaderHeight()
-  const asideRef = useRef<HTMLElement>(null)
-  const prefersReducedMotion = useReducedMotion()
-
-  // Shared ref-counted scroll lock (react-aria) while the drawer is open.
-  usePreventScroll({ isDisabled: !config.isOpen })
-  // Escape + initial focus + guarded restore. `contain: false`: the z-50
-  // header stays visible and clickable ABOVE the open drawer (see the z-tier
-  // comment below), so this is a NON-modal dialog — Tab may leave freely.
-  useFocusTrap(asideRef, config.isOpen, { onEscape: config.onClose, contain: false })
 
   useEffect(() => { setMounted(true) }, [])
 
@@ -182,7 +170,7 @@ export function SlidingSidebar({ config }: SlidingSidebarProps) {
               duration: 0.3, 
               ease: [0.4, 0, 0.2, 1]
             }}
-            className={cn("fixed inset-0 z-[45]", OVERLAY_BACKDROP_CLASS)}
+            className="fixed inset-0 bg-black/50 z-[45]"
             onClick={() => config.onClose()}
           />
         )}
@@ -190,26 +178,18 @@ export function SlidingSidebar({ config }: SlidingSidebarProps) {
 
       {/* Sliding Sidebar */}
       <motion.aside
-        ref={asideRef}
         initial={false}
         animate={{
           x: config.isOpen ? 0 : (config.position === 'right' ? "100%" : "-100%")
         }}
-        transition={prefersReducedMotion ? { duration: 0 } : {
-          type: "spring",
-          damping: 25,
+        transition={{ 
+          type: "spring", 
+          damping: 25, 
           stiffness: 300,
           mass: 0.8,
           restDelta: 0.01,
           velocity: config.isOpen ? 5 : -5
         }}
-        tabIndex={-1}
-        // Stays mounted translated off-screen — inert keeps its items out of
-        // the tab order while "closed". Non-modal dialog: no aria-modal (the
-        // header above remains reachable by design).
-        inert={!config.isOpen || undefined}
-        role={config.isOpen ? 'dialog' : undefined}
-        aria-label={config.isOpen ? 'Navigation sidebar' : undefined}
         className={cn(
           "fixed top-0 bottom-0 z-[46] w-72 bg-ods-card border-ods-border flex flex-col shadow-xl",
           config.position === 'right' ? "right-0 border-l" : "left-0 border-r",
@@ -220,13 +200,13 @@ export function SlidingSidebar({ config }: SlidingSidebarProps) {
         <div className="flex-shrink-0" style={{ height: `${headerHeight}px` }} />
         
         {/* Navigation */}
-        <nav className="flex-1 p-4 space-y-2 overflow-y-auto overscroll-contain">
+        <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
           {config.items.map(item => renderMenuItem(item))}
         </nav>
 
-        {/* Footer - bottom padding clears the iOS home indicator */}
+        {/* Footer */}
         {config.footer && (
-          <div className="p-4 pb-[max(1rem,env(safe-area-inset-bottom))] border-t border-ods-border">
+          <div className="p-4 border-t border-ods-border">
             {config.footer}
           </div>
         )}

package/src/components/ui/modal-v2.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import { useEffect, useState } from "react"
-import { usePreventScroll } from "@react-aria/overlays"
 import { XmarkIcon } from "../icons-v2-generated"
 import { cn } from "../../utils/cn"
 
@@ -53,11 +52,6 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       return () => clearTimeout(timeout)
     }, [isOpen])
 
-    // Shared ref-counted scroll lock (react-aria) — restores prior styles on
-    // release instead of clobbering to 'unset'.
-    usePreventScroll({ isDisabled: !isOpen })
-
-    // Escape key (document-level: top-of-stack semantics for modals)
     useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
         if (event.key === 'Escape') {
@@ -66,8 +60,13 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       }
 
       if (isOpen) {
+        document.body.style.overflow = 'hidden'
         document.addEventListener('keydown', handleKeyDown)
-        return () => document.removeEventListener('keydown', handleKeyDown)
+
+        return () => {
+          document.body.style.overflow = 'unset'
+          document.removeEventListener('keydown', handleKeyDown)
+        }
       }
     }, [isOpen, onClose])
 

package/src/components/ui/modal.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import { useEffect } from "react"
-import { usePreventScroll } from "@react-aria/overlays"
 import { cn } from "../../utils/cn"
 
 interface ModalProps {
@@ -35,11 +34,7 @@ interface ModalFooterProps {
 /** @deprecated Use ModalV2 from './modal-v2' instead. */
 const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
   ({ isOpen, onClose, children, className }, ref) => {
-    // Shared ref-counted scroll lock (react-aria) — restores prior styles on
-    // release instead of clobbering to 'unset'.
-    usePreventScroll({ isDisabled: !isOpen })
-
-    // Handle Escape key (document-level: top-of-stack semantics for modals)
+    // Handle Escape key and scroll blocking
     useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
         if (event.key === 'Escape') {
@@ -48,8 +43,15 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       }
 
       if (isOpen) {
+        // Block background scrolling
+        document.body.style.overflow = 'hidden'
         document.addEventListener('keydown', handleKeyDown)
-        return () => document.removeEventListener('keydown', handleKeyDown)
+        
+        return () => {
+          // Restore scrolling
+          document.body.style.overflow = 'unset'
+          document.removeEventListener('keydown', handleKeyDown)
+        }
       }
     }, [isOpen, onClose])
 

package/src/hooks/ui/index.ts

@@ -2,7 +2,6 @@
 export * from './use-auto-limit-tags'
 export * from './use-debounce'
 export * from './use-deferred-error'
-export * from './use-focus-trap'
 export * from './use-header-height'
 export * from './use-horizontal-scrollbar'
 export * from './use-image-edge-color'
@@ -15,8 +14,3 @@ export * from './use-search'
 export * from './use-table-pagination'
 export * from './use-throttle'
 export * from './use-window-size'
-
-// Shared ref-counted, iOS-aware body scroll lock (react-aria). Re-exported so
-// hub/app consumers have one import path; lib internals may import the
-// package directly (npm dedupes to one module instance either way).
-export { usePreventScroll } from '@react-aria/overlays'

package/src/hooks/ui/use-header-height.ts

@@ -8,25 +8,10 @@ import { useEffect, useState } from 'react'
  * Useful for offsetting fixed/absolute-positioned panels so they don't
  * overlap the header.
  */
-export function useHeaderHeight(
-  defaultHeight = 64,
-  options: {
-    /**
-     * When false, no observers are attached and the default height is
-     * returned — for consumers that stay mounted on every page but only need
-     * the measurement while an overlay is open (avoids an always-on
-     * document-wide MutationObserver + forced reflow).
-     * @default true
-     */
-    enabled?: boolean
-  } = {}
-): number {
-  const { enabled = true } = options
+export function useHeaderHeight(defaultHeight = 64): number {
   const [height, setHeight] = useState(defaultHeight)
 
   useEffect(() => {
-    if (!enabled) return
-
     const measure = () => {
       let total = 0
       const header = document.querySelector('header')
@@ -64,7 +49,7 @@ export function useHeaderHeight(
       resizeObserver.disconnect()
       mutationObserver.disconnect()
     }
-  }, [defaultHeight, enabled])
+  }, [defaultHeight])
 
   return height
 }