@flamingo-stack/openframe-frontend-core 0.0.390 → 0.0.391-snapshot.20260709132828

package/src/components/features/auth/complete-account-form.tsx

@@ -0,0 +1,197 @@
+'use client'
+
+import type * as React from 'react'
+import { cn } from '../../../utils/cn'
+import { Button } from '../../ui/button'
+import { Input } from '../../ui/input'
+import { PasswordInput } from '../../ui/password-input'
+import type { AuthSsoProvider } from './sso-providers'
+import { SsoProviderButtons } from './sso-providers'
+
+export interface CompleteAccountFormProps {
+  /** Controlled field values */
+  firstName: string
+  lastName: string
+  password: string
+  confirmPassword: string
+  onFirstNameChange: (value: string) => void
+  onLastNameChange: (value: string) => void
+  onPasswordChange: (value: string) => void
+  onConfirmPasswordChange: (value: string) => void
+  /** Primary submit ("Start Free Trial") */
+  onSubmit: () => void
+  /** Secondary action rendered left of the submit (e.g. "Back to Organization"). */
+  onBack?: () => void
+  /** SSO alternatives offered above the fields ("Continue with …"). */
+  ssoProviders?: AuthSsoProvider[]
+  onSsoClick?: (provider: AuthSsoProvider) => void
+  title?: string
+  subtitle?: string
+  dividerLabel?: string
+  submitLabel?: string
+  backLabel?: string
+  ssoActionLabel?: string
+  submitDisabled?: boolean
+  loading?: boolean
+  disabled?: boolean
+  errors?: {
+    firstName?: string
+    lastName?: string
+    password?: string
+    confirmPassword?: string
+  }
+  className?: string
+}
+
+/**
+ * Account details form shared by the Sign Up ("Complete your Account") and
+ * Accept Invitation screens. Presentational + controlled — SSO shortcuts on
+ * top, then name + password fields ("or create account").
+ */
+export function CompleteAccountForm({
+  firstName,
+  lastName,
+  password,
+  confirmPassword,
+  onFirstNameChange,
+  onLastNameChange,
+  onPasswordChange,
+  onConfirmPasswordChange,
+  onSubmit,
+  onBack,
+  ssoProviders,
+  onSsoClick,
+  title = 'Complete your Account',
+  subtitle = 'Fill in the details below to get started',
+  dividerLabel = 'or create account',
+  submitLabel = 'Start Free Trial',
+  backLabel = 'Back to Organization',
+  ssoActionLabel = 'Continue with',
+  submitDisabled = false,
+  loading = false,
+  disabled = false,
+  errors,
+  className,
+}: CompleteAccountFormProps) {
+  const fieldsDisabled = disabled || loading
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
+      onSubmit()
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-col gap-[var(--spacing-system-l)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xl)]',
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="flex flex-col">
+        <h1 className="text-h2 text-ods-text-primary tracking-[-0.64px]">{title}</h1>
+        <p className="text-h4 text-ods-text-secondary">{subtitle}</p>
+      </div>
+
+      {/* SSO shortcuts + divider */}
+      {ssoProviders && ssoProviders.length > 0 && (
+        <>
+          <SsoProviderButtons
+            providers={ssoProviders}
+            onSsoClick={onSsoClick}
+            actionLabel={ssoActionLabel}
+            disabled={fieldsDisabled}
+          />
+          <div className="flex items-center gap-[var(--spacing-system-s)]">
+            <div className="h-px flex-1 bg-ods-border" />
+            <span className="text-h6 text-ods-text-secondary">{dividerLabel}</span>
+            <div className="h-px flex-1 bg-ods-border" />
+          </div>
+        </>
+      )}
+
+      {/* First + Last name */}
+      <div className="flex gap-[var(--spacing-system-l)]">
+        <div className="min-w-0 flex-1">
+          <Input
+            label="First Name"
+            placeholder="Enter First Name"
+            value={firstName}
+            error={errors?.firstName}
+            disabled={fieldsDisabled}
+            onChange={(event) => onFirstNameChange(event.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+        <div className="min-w-0 flex-1">
+          <Input
+            label="Last Name"
+            placeholder="Enter Last Name"
+            value={lastName}
+            error={errors?.lastName}
+            disabled={fieldsDisabled}
+            onChange={(event) => onLastNameChange(event.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+      </div>
+
+      {/* Password + Confirm */}
+      <div className="flex gap-[var(--spacing-system-l)]">
+        <div className="min-w-0 flex-1">
+          <PasswordInput
+            label="Password"
+            placeholder="Enter Password"
+            value={password}
+            error={errors?.password}
+            disabled={fieldsDisabled}
+            onChange={(event) => onPasswordChange(event.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+        <div className="min-w-0 flex-1">
+          <PasswordInput
+            label="Confirm Password"
+            placeholder="Confirm Password"
+            value={confirmPassword}
+            error={errors?.confirmPassword}
+            disabled={fieldsDisabled}
+            onChange={(event) => onConfirmPasswordChange(event.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+      </div>
+
+      {/* Actions — optional back + submit */}
+      <div className="flex items-center gap-[var(--spacing-system-l)]">
+        {onBack ? (
+          <Button
+            type="button"
+            variant="transparent"
+            fullWidth
+            className="flex-1"
+            disabled={fieldsDisabled}
+            onClick={onBack}
+          >
+            {backLabel}
+          </Button>
+        ) : (
+          // Spacer keeps the button on the right half, matching the design
+          <div className="flex-1" />
+        )}
+        <Button
+          type="button"
+          variant="accent"
+          fullWidth
+          className="flex-1"
+          loading={loading}
+          disabled={disabled || submitDisabled}
+          onClick={onSubmit}
+        >
+          {submitLabel}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/features/auth/index.ts

@@ -1,8 +1,8 @@
-export * from './accept-invitation-form'
 export * from './auth-benefits-panel'
 export * from './auth-branding'
 export * from './auth-shell'
 export * from './back-to-login-link'
+export * from './complete-account-form'
 export * from './create-organization-form'
 export * from './invite-link-invalid-modal'
 export * from './login-form'

package/src/components/features/notifications/notification-drawer.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useRef } from 'react'
 import { BellOffIcon } from '../../icons-v2-generated/interface/bell-off-icon'
 import { ClockHistoryIcon, ArrowRightUpIcon } from '../../icons-v2-generated'
+import { useAppLayoutDrawerContainer } from '../../navigation/app-layout-context'
+import { AppLayoutDrawer, AppLayoutDrawerContent } from '../../navigation/app-layout-drawer'
 import { SplitButton } from '../../ui/button'
 import { Drawer, DrawerContent, DrawerTitle } from '../../ui/drawer'
 import { Switch } from '../../ui/switch'
@@ -27,6 +29,10 @@ export function NotificationDrawer({
   renderTile: renderTileProp,
 }: NotificationDrawerProps) {
   const ctx = useOptionalNotifications()
+  // Inside AppLayout the drawer renders in-layout (dims and covers only the
+  // main content area — header and sidebar stay interactive). Outside of it
+  // (Storybook, non-AppLayout hosts) it falls back to the viewport Drawer.
+  const layoutContainer = useAppLayoutDrawerContainer()
 
   if (!ctx) return null
 
@@ -56,6 +62,71 @@ export function NotificationDrawer({
 
   const unreadNotifications = notifications.filter((n) => !n.read)
 
+  const content = (
+    <>
+      <div className="px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]">
+        <DrawerTitle
+          hideClose
+          className="truncate"
+          actions={
+            <button
+              type="button"
+              disabled={unreadCount === 0}
+              onClick={markAllRead}
+              className="self-center text-h6 text-ods-text-secondary underline transition-colors hover:text-ods-text-primary disabled:opacity-40"
+            >
+              Mark All Complete
+            </button>
+          }
+        >
+          New Notifications
+        </DrawerTitle>
+      </div>
+
+      <DrawerScrollList
+        unreadNotifications={unreadNotifications}
+        liveDurationMs={liveDurationMs}
+        onComplete={markRead}
+        onSettle={markSettled}
+        hasMore={hasMore}
+        isLoadingMore={isLoadingMore}
+        loadMore={loadMore}
+        loadMoreRootMargin={loadMoreRootMargin}
+        renderTile={renderTile}
+      />
+
+      <div className="flex flex-col gap-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
+        <div className="overflow-hidden rounded-md border border-ods-border bg-ods-card">
+          <ShowNotificationsToggleRow checked={showPopups} onChange={setShowPopups} />
+          {desktopPopupsConfigured && (
+            <DesktopNotificationsToggleRow checked={showDesktopPopups} onChange={setShowDesktopPopups} />
+          )}
+        </div>
+        <NotificationsHistoryButton
+          onClick={onHistoryClick ? () => { onHistoryClick(); close() } : undefined}
+          historyHref={historyHref}
+        />
+      </div>
+    </>
+  )
+
+  if (layoutContainer) {
+    return (
+      <AppLayoutDrawer open={isOpen} onOpenChange={(v) => (v ? open() : close())}>
+        <AppLayoutDrawerContent
+          side="right"
+          aria-describedby={undefined}
+          // md matches the content's default mobileBreakpoint: below it the
+          // panel is forced full-bleed (w-full), so the fixed width must not
+          // apply there or the panel would detach from the right edge.
+          className={cn('md:w-[26rem] gap-[var(--spacing-system-m)] p-[var(--spacing-system-zero)]', className)}
+        >
+          {content}
+        </AppLayoutDrawerContent>
+      </AppLayoutDrawer>
+    )
+  }
+
   return (
     <Drawer open={isOpen} onOpenChange={(v) => (v ? open() : close())}>
       <DrawerContent
@@ -67,49 +138,7 @@ export function NotificationDrawer({
           className,
         )}
       >
-        <div className="px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]">
-          <DrawerTitle
-            hideClose
-            className="truncate"
-            actions={
-              <button
-                type="button"
-                disabled={unreadCount === 0}
-                onClick={markAllRead}
-                className="self-center text-h6 text-ods-text-secondary underline transition-colors hover:text-ods-text-primary disabled:opacity-40"
-              >
-                Complete All
-              </button>
-            }
-          >
-            New Notifications
-          </DrawerTitle>
-        </div>
-
-        <DrawerScrollList
-          unreadNotifications={unreadNotifications}
-          liveDurationMs={liveDurationMs}
-          onComplete={markRead}
-          onSettle={markSettled}
-          hasMore={hasMore}
-          isLoadingMore={isLoadingMore}
-          loadMore={loadMore}
-          loadMoreRootMargin={loadMoreRootMargin}
-          renderTile={renderTile}
-        />
-
-        <div className="flex flex-col gap-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
-          <div className="overflow-hidden rounded-md border border-ods-border bg-ods-card">
-            <ShowNotificationsToggleRow checked={showPopups} onChange={setShowPopups} />
-            {desktopPopupsConfigured && (
-              <DesktopNotificationsToggleRow checked={showDesktopPopups} onChange={setShowDesktopPopups} />
-            )}
-          </div>
-          <NotificationsHistoryButton
-            onClick={onHistoryClick ? () => { onHistoryClick(); close() } : undefined}
-            historyHref={historyHref}
-          />
-        </div>
+        {content}
       </DrawerContent>
     </Drawer>
   )

package/src/components/features/time-tracker/time-tracker-header-button.tsx

@@ -1,8 +1,14 @@
 'use client'
 
 import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { useEffect, useRef } from 'react'
 import { cn } from '../../../utils/cn'
 import { ClockHistoryIcon } from '../../icons-v2-generated/date-and-time/clock-history-icon'
+import {
+  type AppLayoutDrawerHandle,
+  useAppLayoutDrawerContainer,
+  useAppLayoutDrawerCoordination,
+} from '../../navigation/app-layout-context'
 import { HeaderButton } from '../../navigation/header-button'
 import { OVERLAY_BACKDROP_CLASS } from '../../ui/drawer'
 import { TimeTrackerPanel } from './time-tracker-panel'
@@ -19,8 +25,11 @@ export interface TimeTrackerHeaderButtonProps {
  * Header affordance for the time tracker. Renders nothing unless wrapped in a
  * `<TimeTrackerProvider>`. The trigger is the standard `HeaderButton`; when a
  * session is active it also shows the live elapsed time. The popup is a Radix
- * Popover anchored under the button (not a modal/drawer), backed by the same
- * dim overlay as the Drawer so all panels darken the page identically.
+ * Popover anchored under the button (not a modal/drawer). Inside AppLayout the
+ * dim backdrop covers only the main content area (header and sidebar stay
+ * interactive) and the popup joins the layout's panel coordination — opening
+ * it closes any open in-layout drawer and vice versa. Outside AppLayout it
+ * falls back to a viewport-wide backdrop.
  */
 export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHeaderButtonProps) {
   const ctx = useOptionalTimeTracker()
@@ -29,10 +38,38 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
     runningSince: ctx?.runningSince,
     accumulatedMs: ctx?.accumulatedMs,
   })
+  const layoutContainer = useAppLayoutDrawerContainer()
+  const coordination = useAppLayoutDrawerCoordination()
+
+  const isOpen = ctx?.isOpen ?? false
+  const isOpenRef = useRef(isOpen)
+  isOpenRef.current = isOpen
+  const closeRef = useRef(ctx?.close)
+  closeRef.current = ctx?.close
+  // Stable handle: the same object must be registered AND passed as `self`
+  // to notifyDrawerDidOpen so the coordinator can skip it when closing the
+  // other panels.
+  const selfHandleRef = useRef<AppLayoutDrawerHandle | null>(null)
+  if (!selfHandleRef.current) {
+    selfHandleRef.current = {
+      close: () => {
+        if (isOpenRef.current) closeRef.current?.()
+      },
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) coordination?.notifyDrawerDidOpen(selfHandleRef.current ?? undefined)
+  }, [isOpen, coordination])
+
+  useEffect(() => {
+    if (!selfHandleRef.current) return
+    return coordination?.registerDrawer(selfHandleRef.current)
+  }, [coordination])
 
   if (!ctx) return null
 
-  const { isOpen, open, close, status } = ctx
+  const { open, close, status } = ctx
   const isPaused = status === 'paused'
   const isActive = status === 'tracking' || isPaused
 
@@ -72,13 +109,16 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
       </PopoverPrimitive.Trigger>
       {/* Popovers have no built-in overlay — portal a dim backdrop behind the
           panel. Clicks land on it (outside Content), so Radix still closes the
-          popover. Own Portal: Radix's Portal slots a single child. */}
-      <PopoverPrimitive.Portal>
+          popover. Own Portal: Radix's Portal slots a single child. Inside
+          AppLayout the backdrop portals into the main-area container (absolute,
+          AppLayoutDrawer-overlay tier) so header/sidebar stay undimmed and
+          interactive; standalone it dims the whole viewport. */}
+      <PopoverPrimitive.Portal container={layoutContainer ?? undefined}>
         <div
           aria-hidden="true"
           data-state={isOpen ? 'open' : 'closed'}
           className={cn(
-            'fixed inset-0 z-[1299]',
+            layoutContainer ? 'absolute inset-0 z-[102]' : 'fixed inset-0 z-[1299]',
             OVERLAY_BACKDROP_CLASS,
             'data-[state=open]:animate-in data-[state=open]:fade-in-0',
             'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',

package/src/components/navigation/app-header.tsx

@@ -251,16 +251,20 @@ function NotificationsHeaderButton({
   return (
     <HeaderButton
       icon={
-        <div className="relative w-4 h-4 md:w-6 md:h-6">
-          <BellIcon className="w-full h-full" />
-          {hasUnread && (
-            <span
-              className="absolute top-0 right-0 bg-ods-warning rounded-full w-1.5 h-1.5 md:w-2 md:h-2"
-            />
-          )}
-        </div>
+        isActive ? (
+          <XmarkIcon className="w-4 h-4 md:w-6 md:h-6" />
+        ) : (
+          <div className="relative w-4 h-4 md:w-6 md:h-6">
+            <BellIcon className="w-full h-full" />
+            {hasUnread && (
+              <span
+                className="absolute top-0 right-0 bg-ods-warning rounded-full w-1.5 h-1.5 md:w-2 md:h-2"
+              />
+            )}
+          </div>
+        )
       }
-      aria-label="Notifications"
+      aria-label={isActive ? 'Close notifications' : 'Notifications'}
       onClick={onClick}
       isActive={isActive}
       disabled={disabled || !onClick}

package/src/components/navigation/app-layout-context.ts

@@ -0,0 +1,46 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+
+/**
+ * Container element that wraps `<main>` and serves as the portal target for
+ * `AppLayoutDrawer`. Drawers rendered into this container sit on top of the
+ * main content area only — the sidebar and header remain visible and
+ * interactive. Null when AppLayout hasn't mounted (or when used outside of it).
+ *
+ * Lives in its own module (not app-layout.tsx) so in-layout panels
+ * (AppLayoutDrawer, NotificationDrawer, TimeTrackerHeaderButton) can consume
+ * these contexts without importing AppLayout itself — AppLayout renders those
+ * panels, so importing it back would create a module cycle.
+ */
+export const AppLayoutDrawerContainerContext = createContext<HTMLElement | null>(null)
+
+export function useAppLayoutDrawerContainer(): HTMLElement | null {
+  return useContext(AppLayoutDrawerContainerContext)
+}
+
+/**
+ * Coordination between AppLayout's in-layout panels (`AppLayoutDrawer`, the
+ * time-tracker popup) and the mobile burger menu. At most ONE of them may be
+ * open at a time — each dims the main area, so stacking them reads as broken:
+ *   - a panel that opens calls `notifyDrawerDidOpen(self)` so the layout
+ *     closes the burger menu AND every other registered panel;
+ *   - each panel registers a close handle so opening the menu via the burger
+ *     button (or another panel) closes it. Null outside of AppLayout.
+ */
+export interface AppLayoutDrawerHandle {
+  close: () => void
+}
+
+export interface AppLayoutDrawerCoordination {
+  /** `self` is skipped when closing the other registered panels. */
+  notifyDrawerDidOpen: (self?: AppLayoutDrawerHandle) => void
+  /** Returns an unregister cleanup. */
+  registerDrawer: (handle: AppLayoutDrawerHandle) => () => void
+}
+
+export const AppLayoutDrawerCoordinationContext = createContext<AppLayoutDrawerCoordination | null>(null)
+
+export function useAppLayoutDrawerCoordination(): AppLayoutDrawerCoordination | null {
+  return useContext(AppLayoutDrawerCoordinationContext)
+}

package/src/components/navigation/app-layout-drawer.tsx

@@ -14,7 +14,11 @@ import {
   OVERLAY_BACKDROP_CLASS,
   type DrawerSide,
 } from "../ui/drawer"
-import { useAppLayoutDrawerContainer, useAppLayoutDrawerCoordination } from "./app-layout"
+import {
+  type AppLayoutDrawerHandle,
+  useAppLayoutDrawerContainer,
+  useAppLayoutDrawerCoordination,
+} from "./app-layout-context"
 
 /**
  * AppLayoutDrawer is a Drawer variant that renders **inside** AppLayout's main
@@ -68,26 +72,32 @@ const AppLayoutDrawerRoot = ({
     [isControlled, onOpenChange],
   )
 
-  // Coordinate with AppLayout's mobile burger menu (the drawer covers it):
-  // opening the drawer closes the menu, and opening the menu closes the
-  // drawer via the registered close handle. Refs keep the registration
-  // effect independent of render-to-render identity changes.
+  // Coordinate with AppLayout's other in-layout panels and the mobile burger
+  // menu: opening this drawer closes them, and opening any of them closes
+  // this drawer via the registered close handle. Refs keep the handle
+  // identity stable across renders — the same object must be registered AND
+  // passed as `self` so the coordinator can skip it when closing the rest.
   const coordination = useAppLayoutDrawerCoordination()
   const openRef = React.useRef(open)
   openRef.current = open
   const handleOpenChangeRef = React.useRef(handleOpenChange)
   handleOpenChangeRef.current = handleOpenChange
+  const selfHandleRef = React.useRef<AppLayoutDrawerHandle | null>(null)
+  if (!selfHandleRef.current) {
+    selfHandleRef.current = {
+      close: () => {
+        if (openRef.current) handleOpenChangeRef.current(false)
+      },
+    }
+  }
 
   React.useEffect(() => {
-    if (open) coordination?.notifyDrawerDidOpen()
+    if (open) coordination?.notifyDrawerDidOpen(selfHandleRef.current ?? undefined)
   }, [open, coordination])
 
   React.useEffect(() => {
-    return coordination?.registerDrawer({
-      close: () => {
-        if (openRef.current) handleOpenChangeRef.current(false)
-      },
-    })
+    if (!selfHandleRef.current) return
+    return coordination?.registerDrawer(selfHandleRef.current)
   }, [coordination])
 
   return (

package/src/components/navigation/app-layout.tsx

@@ -1,50 +1,21 @@
 'use client'
 
-import { createContext, Suspense, useCallback, useContext, useMemo, useRef, useState } from 'react'
+import { Suspense, useCallback, useMemo, useRef, useState } from 'react'
 import { NavigationSidebarConfig } from '../../types/navigation'
 import { cn } from '../../utils'
 import { NotificationDrawer } from '../features/notifications/notification-drawer'
 import { AppHeader, AppHeaderProps } from './app-header'
+import {
+  AppLayoutDrawerContainerContext,
+  type AppLayoutDrawerCoordination,
+  AppLayoutDrawerCoordinationContext,
+  type AppLayoutDrawerHandle,
+} from './app-layout-context'
 import { MobileBurgerMenu, MobileBurgerMenuProps } from './mobile-burger-menu'
 import { NavigationSidebar } from './navigation-sidebar'
 
-/**
- * Container element that wraps `<main>` and serves as the portal target for
- * `AppLayoutDrawer`. Drawers rendered into this container sit on top of the
- * main content area only — the sidebar and header remain visible and
- * interactive. Null when AppLayout hasn't mounted (or when used outside of it).
- */
-const AppLayoutDrawerContainerContext = createContext<HTMLElement | null>(null)
-
-export function useAppLayoutDrawerContainer(): HTMLElement | null {
-  return useContext(AppLayoutDrawerContainerContext)
-}
-
-/**
- * Two-way coordination between AppLayout's mobile burger menu and in-layout
- * drawers (`AppLayoutDrawer`), which render above the menu (z-[103] vs
- * z-[101]) — the two must never be open at the same time:
- *   - a drawer that opens calls `notifyDrawerDidOpen` so the layout closes
- *     the menu (otherwise it would resurface once the drawer closes);
- *   - each drawer registers a close handle so opening the menu via the
- *     burger button closes any open drawer instead of hiding the menu
- *     underneath it. Null outside of AppLayout.
- */
-export interface AppLayoutDrawerHandle {
-  close: () => void
-}
-
-interface AppLayoutDrawerCoordination {
-  notifyDrawerDidOpen: () => void
-  /** Returns an unregister cleanup. */
-  registerDrawer: (handle: AppLayoutDrawerHandle) => () => void
-}
-
-const AppLayoutDrawerCoordinationContext = createContext<AppLayoutDrawerCoordination | null>(null)
-
-export function useAppLayoutDrawerCoordination(): AppLayoutDrawerCoordination | null {
-  return useContext(AppLayoutDrawerCoordinationContext)
-}
+export { useAppLayoutDrawerContainer, useAppLayoutDrawerCoordination } from './app-layout-context'
+export type { AppLayoutDrawerHandle } from './app-layout-context'
 
 export interface AppLayoutProps {
   children: React.ReactNode
@@ -113,7 +84,14 @@ export function AppLayout({
   }, [])
 
   const drawerCoordination = useMemo<AppLayoutDrawerCoordination>(() => ({
-    notifyDrawerDidOpen: () => setMobileMenuOpen(false),
+    notifyDrawerDidOpen: (self) => {
+      setMobileMenuOpen(false)
+      // Only one in-layout panel may be open at a time — each dims the main
+      // area, so stacking them reads as broken.
+      for (const handle of drawerHandlesRef.current) {
+        if (handle !== self) handle.close()
+      }
+    },
     registerDrawer: (handle) => {
       drawerHandlesRef.current.add(handle)
       return () => drawerHandlesRef.current.delete(handle)