@flamingo-stack/openframe-frontend-core 0.0.263 → 0.0.264

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

@@ -3,6 +3,7 @@
 import React, { useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { cn } from '../../utils'
+import { useHeaderHeight } from '../../hooks/ui'
 import { SlidingSidebarConfig, NavigationItem } from '../../types/navigation'
 import { Button } from '../ui/button'
 
@@ -13,89 +14,9 @@ export interface SlidingSidebarProps {
 export function SlidingSidebar({ config }: SlidingSidebarProps) {
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set())
   const [mounted, setMounted] = useState(false)
-  const [headerHeight, setHeaderHeight] = useState(64) // Default to 64px
+  const headerHeight = useHeaderHeight()
 
-  useEffect(() => {
-    setMounted(true)
-    
-    // Function to calculate total header height
-    const calculateHeaderHeight = () => {
-      let totalHeight = 0
-      
-      // Find and measure the header
-      const header = document.querySelector('header')
-      if (header) {
-        totalHeight += header.offsetHeight
-      }
-      
-      // Find and measure the announcement bar (if exists)
-      const announcementBar = document.querySelector('[data-announcement-bar]')
-      if (announcementBar && announcementBar instanceof HTMLElement) {
-        totalHeight += announcementBar.offsetHeight
-      }
-      
-      // Update the header height if we found elements
-      if (totalHeight > 0) {
-        setHeaderHeight(totalHeight)
-      } else {
-        // If no header found, default to 64px
-        setHeaderHeight(64)
-      }
-    }
-    
-    // Calculate initial height with a small delay to ensure elements are rendered
-    setTimeout(calculateHeaderHeight, 100)
-    
-    // Also calculate immediately in case elements are already there
-    calculateHeaderHeight()
-    
-    // Recalculate on window resize
-    window.addEventListener('resize', calculateHeaderHeight)
-    
-    // Use ResizeObserver to detect header size changes
-    const resizeObserver = new ResizeObserver(calculateHeaderHeight)
-    
-    // Observe header
-    const header = document.querySelector('header')
-    if (header) {
-      resizeObserver.observe(header)
-    }
-    
-    // Observe announcement bar
-    const announcementBar = document.querySelector('[data-announcement-bar]')
-    if (announcementBar) {
-      resizeObserver.observe(announcementBar)
-    }
-    
-    // Use MutationObserver to detect when announcement bar is added/removed
-    const mutationObserver = new MutationObserver((mutations) => {
-      // Check if announcement bar was added or removed
-      for (const mutation of mutations) {
-        if (mutation.type === 'childList') {
-          // Recalculate height when DOM changes
-          calculateHeaderHeight()
-          
-          // If announcement bar was added, start observing it
-          const newAnnouncementBar = document.querySelector('[data-announcement-bar]')
-          if (newAnnouncementBar) {
-            resizeObserver.observe(newAnnouncementBar)
-          }
-        }
-      }
-    })
-    
-    // Observe the body for changes (announcement bar might be added/removed)
-    mutationObserver.observe(document.body, {
-      childList: true,
-      subtree: true
-    })
-    
-    return () => {
-      window.removeEventListener('resize', calculateHeaderHeight)
-      resizeObserver.disconnect()
-      mutationObserver.disconnect()
-    }
-  }, [])
+  useEffect(() => { setMounted(true) }, [])
 
   const toggleExpanded = (itemId: string) => {
     const newExpanded = new Set(expandedItems)

package/src/components/ui/drawer.tsx

@@ -6,6 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { X } from "lucide-react"
 
 import { cn } from "../../utils/cn"
+import { useHeaderHeight } from "../../hooks/ui/use-header-height"
 
 const Drawer = DialogPrimitive.Root
 
@@ -354,6 +355,9 @@ interface DrawerContentProps
   panelStyle?: React.CSSProperties
   /** Optional className applied to the inner panel. (Alias for `className`.) */
   panelClassName?: string
+  /** Offset the drawer's top edge below the app header + announcement bar.
+   *  Measured live via ResizeObserver so it tracks height changes. */
+  offsetHeader?: boolean
 }
 
 const DrawerContent = React.forwardRef<
@@ -376,6 +380,7 @@ const DrawerContent = React.forwardRef<
       style,
       panelStyle,
       panelClassName,
+      offsetHeader = false,
       children,
       ...props
     },
@@ -385,6 +390,8 @@ const DrawerContent = React.forwardRef<
     const isHorizontal = HORIZONTAL_SIDES.has(resolvedSide)
     const initialSize = defaultSize ?? (isHorizontal ? 560 : 480)
 
+    const headerHeight = useHeaderHeight()
+
     const [isMobile, setIsMobile] = React.useState(false)
     React.useEffect(() => {
       if (typeof window === "undefined") return
@@ -417,7 +424,7 @@ const DrawerContent = React.forwardRef<
         <DialogPrimitive.Content
           ref={ref}
           className={cn(drawerVariants({ side, flush }))}
-          style={style}
+          style={{ ...(offsetHeader ? { top: headerHeight } : {}), ...style }}
           {...props}
         >
           {/* Resize handle is a sibling of the panel — outside the panel's
@@ -468,12 +475,14 @@ interface DrawerTitleProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
   /** Optional header actions rendered between the title and the close button. */
   actions?: React.ReactNode
+  /** Hide the close (X) button. */
+  hideClose?: boolean
 }
 
 const DrawerTitle = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Title>,
   DrawerTitleProps
->(({ className, children, actions, ...props }, ref) => (
+>(({ className, children, actions, hideClose, ...props }, ref) => (
   <div className="flex items-start gap-4">
     <DialogPrimitive.Title
       ref={ref}
@@ -486,10 +495,12 @@ const DrawerTitle = React.forwardRef<
       {children}
     </DialogPrimitive.Title>
     {actions}
-    <DialogPrimitive.Close className="shrink-0 rounded-sm text-ods-text-secondary transition-colors hover:text-ods-text-primary outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0">
-      <X className="size-6" />
-      <span className="sr-only">Close</span>
-    </DialogPrimitive.Close>
+    {!hideClose && (
+      <DialogPrimitive.Close className="shrink-0 rounded-sm text-ods-text-secondary transition-colors hover:text-ods-text-primary outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0">
+        <X className="size-6" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    )}
   </div>
 ))
 DrawerTitle.displayName = "DrawerTitle"

package/src/hooks/ui/index.ts

@@ -1,13 +1,15 @@
 // UI Hooks exports
+export * from './use-auto-limit-tags'
 export * from './use-debounce'
+export * from './use-header-height'
+export * from './use-horizontal-scrollbar'
+export * from './use-image-edge-color'
 export * from './use-local-storage'
 export * from './use-media-query'
 export * from './use-memoized-callback'
+export * from './use-notification-permission'
 export * from './use-onboarding-state'
+export * from './use-search'
 export * from './use-table-pagination'
 export * from './use-throttle'
 export * from './use-window-size'
-export * from './use-horizontal-scrollbar'
-export * from './use-image-edge-color'
-export * from './use-search'
-export * from './use-auto-limit-tags'

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

@@ -0,0 +1,55 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+/**
+ * Returns the combined height (px) of the sticky page header and announcement
+ * bar (if present), updated live via ResizeObserver / MutationObserver.
+ * Useful for offsetting fixed/absolute-positioned panels so they don't
+ * overlap the header.
+ */
+export function useHeaderHeight(defaultHeight = 64): number {
+  const [height, setHeight] = useState(defaultHeight)
+
+  useEffect(() => {
+    const measure = () => {
+      let total = 0
+      const header = document.querySelector('header')
+      if (header) total += header.offsetHeight
+      const bar = document.querySelector('[data-announcement-bar]')
+      if (bar instanceof HTMLElement) total += bar.offsetHeight
+      setHeight(total > 0 ? total : defaultHeight)
+    }
+
+    measure()
+
+    const resizeObserver = new ResizeObserver(measure)
+    const header = document.querySelector('header')
+    if (header) resizeObserver.observe(header)
+    const bar = document.querySelector('[data-announcement-bar]')
+    if (bar) resizeObserver.observe(bar)
+
+    const mutationObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList' || mutation.type === 'attributes') {
+          measure()
+          const newBar = document.querySelector('[data-announcement-bar]')
+          if (newBar) resizeObserver.observe(newBar)
+        }
+      }
+    })
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['data-announcement-bar'],
+    })
+
+    return () => {
+      resizeObserver.disconnect()
+      mutationObserver.disconnect()
+    }
+  }, [defaultHeight])
+
+  return height
+}

package/src/hooks/ui/use-horizontal-scrollbar.ts

@@ -17,6 +17,7 @@ export function useHorizontalScrollbar() {
   const trackRef = useRef<HTMLDivElement>(null)
   const thumbRef = useRef<HTMLDivElement>(null)
   const roRef = useRef<ResizeObserver | null>(null)
+  const moRef = useRef<MutationObserver | null>(null)
   const [thumbRatio, setThumbRatio] = useState(0)
 
   // Edge-fade state
@@ -94,6 +95,10 @@ export function useHorizontalScrollbar() {
       roRef.current.disconnect()
       roRef.current = null
     }
+    if (moRef.current) {
+      moRef.current.disconnect()
+      moRef.current = null
+    }
     if (rafIdRef.current) {
       cancelAnimationFrame(rafIdRef.current)
       rafIdRef.current = 0
@@ -105,8 +110,20 @@ export function useHorizontalScrollbar() {
       const ratio = node.clientWidth / node.scrollWidth
       setThumbRatio(ratio >= 1 ? 0 : ratio)
 
-      roRef.current = new ResizeObserver(measure)
-      roRef.current.observe(node)
+      const ro = new ResizeObserver(measure)
+      roRef.current = ro
+      const observeAll = () => {
+        ro.disconnect()
+        ro.observe(node)
+        for (const child of Array.from(node.children)) ro.observe(child)
+      }
+      observeAll()
+
+      moRef.current = new MutationObserver(() => {
+        observeAll()
+        measure()
+      })
+      moRef.current.observe(node, { childList: true })
 
       requestAnimationFrame(() => {
         syncThumbToDOM()

package/src/hooks/ui/use-notification-permission.ts

@@ -0,0 +1,64 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+
+export interface UseNotificationPermissionResult {
+  /** Whether the page-context Notification API exists in this browser (false during SSR and on iOS Safari). */
+  supported: boolean
+  permission: NotificationPermission
+  /** Prompt the user for permission. Must be called from a user gesture or browsers will auto-deny. */
+  request: () => Promise<NotificationPermission>
+}
+
+/**
+ * Tracks the browser's desktop-notification permission, staying in sync when
+ * the user changes the site setting externally (Permissions API change event
+ * where available, visibility/focus re-read as the Safari fallback).
+ */
+export function useNotificationPermission(): UseNotificationPermissionResult {
+  const [supported, setSupported] = useState(false)
+  const [permission, setPermission] = useState<NotificationPermission>('default')
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !('Notification' in window)) return
+    setSupported(true)
+    const sync = () => setPermission(Notification.permission)
+    sync()
+
+    // The query resolves async; without the flag it would attach the listener after unmount.
+    let cancelled = false
+    let status: PermissionStatus | undefined
+    navigator.permissions
+      ?.query({ name: 'notifications' as PermissionName })
+      .then((s) => {
+        if (cancelled) return
+        status = s
+        s.addEventListener('change', sync)
+      })
+      .catch(() => undefined)
+
+    document.addEventListener('visibilitychange', sync)
+    window.addEventListener('focus', sync)
+    return () => {
+      cancelled = true
+      status?.removeEventListener('change', sync)
+      document.removeEventListener('visibilitychange', sync)
+      window.removeEventListener('focus', sync)
+    }
+  }, [])
+
+  const request = useCallback(async () => {
+    if (typeof window === 'undefined' || !('Notification' in window)) {
+      return 'denied' as NotificationPermission
+    }
+    // Older Safari only implements the callback form; resolving from both is harmless.
+    const result = await new Promise<NotificationPermission>((resolve) => {
+      const maybePromise = Notification.requestPermission(resolve)
+      if (maybePromise && typeof maybePromise.then === 'function') void maybePromise.then(resolve)
+    })
+    setPermission(Notification.permission)
+    return result
+  }, [])
+
+  return { supported, permission, request }
+}