site-builder/craft/src/panels/mobile/BottomSheet.tsx

import React, { useEffect } from 'react';

export interface BottomSheetProps {
  open: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}

/**
 * Mobile-only bottom sheet (Phase A). Slides up from the bottom of the
 * viewport to host one of the existing side-panel components
 * (BlocksPanel/PagesPanel/LayersPanel/AssetsPanel/GuidedStyles) unchanged,
 * as the mobile replacement for the desktop fixed left/right panel columns.
 * See `MobilePanelBar`, which owns which sheet (if any) is open.
 *
 * Deliberately NOT a generic replacement for `src/ui/Modal.tsx` (centered
 * dialog chrome) -- this is anchored to the bottom, sized to ~65dvh, and
 * has its own drag-handle affordance + internally scrollable body, all of
 * which Modal doesn't need for its centered use cases.
 */
export const BottomSheet: React.FC<BottomSheetProps> = ({ open, onClose, title, children }) => {
  useEffect(() => {
    if (!open) return;
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', handleKeyDown);

    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      document.body.style.overflow = prevOverflow;
    };
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div
      className="mobile-sheet-backdrop"
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
    >
      {/* Deliberately NOT aria-modal: the tab bar stays reachable/operable
          while a sheet is open (tapping another tab swaps sheets directly),
          so the rest of the screen must not be marked inert to assistive
          tech the way a true modal dialog would be. */}
      <div className="mobile-sheet" role="dialog" aria-label={title}>
        <div className="mobile-sheet-handle-row">
          <span className="mobile-sheet-handle" aria-hidden="true" />
        </div>
        <div className="mobile-sheet-header">
          <span className="mobile-sheet-title">{title}</span>
          <button
            type="button"
            className="mobile-sheet-close"
            onClick={onClose}
            aria-label={`Close ${title}`}
          >
            <i className="fa fa-times" aria-hidden="true" />
          </button>
        </div>
        <div className="mobile-sheet-body">{children}</div>
      </div>
    </div>
  );
};