52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T4d58,import * as React from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; import { useFocusTrap } from "@/hooks/use-focus-trap"; import { ScrollIndicator } from "@/components/ui/scroll-indicator"; export interface BottomDrawerProps { /** * Whether the drawer is open */ open: boolean; /** * Callback when the drawer should close (backdrop click, Escape key, swipe * down, or hardware/browser Back). For deferred-edit forms this is * "cancel/discard" -- the footer's presence sets the expectation that nothing * applies until Save. */ onClose: () => void; /** * Optional title shown in the sticky frosted header. Scrollable content * passes behind it. */ title?: string; /** * Optional sticky frosted action bar pinned to the bottom of the sheet, * mirroring the header. Lay actions out as `DrawerAction`s in a row, most- * destructive leftmost (e.g. `Delete | Reset | Cancel | Save`); the footer * spreads them evenly. Content scrolls behind it. */ footer?: React.ReactNode; /** * Where focus lands when the drawer opens. `'first'` (default) focuses the * first focusable child; `'container'` focuses the sheet itself so a form * drawer does NOT auto-focus its first text field and pop the mobile keyboard * (which obscures the form). Prefer `'container'` for drawers with several * fields/options. The drawer stays fully keyboard-navigable either way. */ initialFocus?: "first" | "container"; /** * Forces the presentation instead of the default viewport-responsive switch. * `'auto'` (default) is a bottom sheet below `md` and a centered dialog at * `md`+. `'sheet'` and `'dialog'` pin one form at every width -- for a demo or * a surface that should not follow the viewport. Regular apps leave this * unset. */ presentation?: "auto" | "sheet" | "dialog"; /** * Portal target for the overlay. Defaults to `document.body` (the drawer * covers the viewport). Pass an element that establishes a containing block * (e.g. `transform`/`contain: paint`) to scope the drawer to it instead -- the * `fixed inset-0` overlay then fills that element rather than the page. Used * by demos that render the drawer inside a device canvas. */ container?: Element | DocumentFragment | null; children: React.ReactNode; } // Movement below this is treated as a tap, not a drag (px). const DRAG_SLOP = 10; // Drag distance that dismisses the sheet on release (px). const DISMISS_DISTANCE = 120; // Release velocity that dismisses regardless of distance (px/ms). const DISMISS_VELOCITY = 0.5; // Frosted surface used by both sticky bars -- translucent surface + blur so // content is legibly visible behind them (matches the BottomNav recipe but // surface-tinted rather than background-tinted). const FROSTED = "wj-frost"; const DIVIDER = "border-[var(--color-border-light)] dark:border-[var(--color-border-dark)]"; /** * A responsive drawer component. * * - Mobile: slides up as a bottom sheet with a drag handle; swiping the sheet * down dismisses it (only when its content is scrolled to the top, so the * gesture never fights an inner scroll) * - Desktop (md+): centered dialog with scale animation * * The card itself scrolls; an optional `title` header and `footer` action bar * are sticky and frosted, so content passes behind both. Use the `footer` slot * for modal actions (`DrawerAction`s) instead of placing buttons in content. * * @example * ```tsx * setIsOpen(false)} * title="Add Reading" * footer={ * <> * } label="Cancel" onClick={() => setIsOpen(false)} /> * } label="Save" type="submit" form="add-reading" disabled={!dirty} /> * * } * > * * * ``` */ export function BottomDrawer({ open, onClose, title, footer, initialFocus = "first", presentation = "auto", container, children }: BottomDrawerProps) { // Responsive-vs-forced presentation. `auto` keeps the original viewport `md:` // switch verbatim (so existing consumers are byte-identical); `sheet`/`dialog` // pin one form at every width. const sheet = presentation === "sheet"; const dialog = presentation === "dialog"; const cls = { // Overlay flex alignment: sheet pins to the bottom, dialog centers. overlay: dialog ? "flex-row items-center justify-center" : sheet ? "flex-col justify-end" : "flex-col justify-end md:flex-row md:items-center md:justify-center", // Sheet wrapper width: dialog is a capped centered card, sheet is full width. wrapperWidth: dialog ? "max-w-2xl mx-4" : sheet ? "" : "md:max-w-2xl md:mx-4", // Open/closed transform: sheet slides from the bottom, dialog scales in. wrapperOpen: dialog ? "scale-100" : sheet ? "translate-y-0" : "translate-y-0 md:scale-100", wrapperClosed: dialog ? "scale-95 opacity-0" : sheet ? "translate-y-full" : "translate-y-full md:translate-y-0 md:scale-95 md:opacity-0", // Card corners + border: dialog is fully rounded/bordered, sheet is top-only. cardShape: dialog ? "rounded-2xl border" : sheet ? "rounded-t-2xl border-t" : "rounded-t-2xl md:rounded-2xl border-t md:border", // The drag handle is a sheet affordance; hide it in dialog form. handle: dialog ? "hidden" : sheet ? "flex" : "flex md:hidden", }; // The card is the scroll container; sticky header/footer pin within it. const scrollRef = React.useRef(null); const titleId = React.useId(); const [dragY, setDragY] = React.useState(0); // The header's divider appears only once content has scrolled under it // (same idiom as the app header / tab bar); at rest the header stays // frost-only. The border is always present and only its color toggles, so // no height jump. const [scrolledUnder, setScrolledUnder] = React.useState(false); React.useEffect(() => { if (open) setScrolledUnder((scrollRef.current?.scrollTop ?? 0) > 0); }, [open]); // The custom scroll indicator's track must start below the sticky header // and end above the sticky footer (the native scrollbar - now hidden - ran // behind both). Their heights vary with title presence, footer content, and // safe-area padding, so measure them. const headerRef = React.useRef(null); const footerRef = React.useRef(null); const [chromeOffsets, setChromeOffsets] = React.useState({ top: 8, bottom: 8 }); const hasFooter = !!footer; // Deliberately a passive effect, not a layout effect: these offsets only // bound the scroll indicator, and reading offsetHeight before paint forced a // synchronous layout in the first frame of the open transition -- the one // frame that has the least to spare on mobile. Landing a paint later is // invisible; the jank was not. React.useEffect(() => { if (!open) return; const measure = () => { const top = (headerRef.current?.offsetHeight ?? 0) + 4; const bottom = (footerRef.current?.offsetHeight ?? 0) + 4; // Same numbers must not commit a render. The ResizeObserver below fires // an initial callback on the next frame, which otherwise guaranteed a // second commit mid-slide for values that had not moved. setChromeOffsets((prev) => prev.top === top && prev.bottom === bottom ? prev : { top, bottom }, ); }; measure(); const ro = new ResizeObserver(measure); if (headerRef.current) ro.observe(headerRef.current); if (footerRef.current) ro.observe(footerRef.current); return () => ro.disconnect(); }, [open, title, hasFooter]); // Trap focus inside the card while open; restores trigger focus on close. useFocusTrap(scrollRef, open, { initialFocus }); const dragState = React.useRef<{ startY: number; lastY: number; lastT: number; velocity: number; dragging: boolean; } | null>(null); React.useEffect(() => { if (!open) return; const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); }, [open, onClose]); // Keep the latest onClose without re-running the history effect every render // (it must depend only on `open`). const onCloseRef = React.useRef(onClose); onCloseRef.current = onClose; // Hardware / browser Back closes the drawer instead of navigating the app. // While open, push a throwaway history entry; Back (Android maps the hardware // button to webview history-back) pops it and fires popstate, which we treat // as a dismiss. If the drawer is closed another way (swipe, backdrop, a // footer action), we pop our own entry so Back isn't left on a phantom state. // Safe with react-router: pushState doesn't fire popstate, and Back lands on // the original (untouched) entry, so the router's location never changes here. React.useEffect(() => { if (!open) return; window.history.pushState({ ...window.history.state, __wjDrawer: true }, ""); const onPopState = () => onCloseRef.current(); window.addEventListener("popstate", onPopState); return () => { window.removeEventListener("popstate", onPopState); if (window.history.state?.__wjDrawer) { window.history.back(); } }; }, [open]); // A layout effect on purpose: this invalidates layout document-wide, and as // a passive effect it landed one frame into the slide. React.useLayoutEffect(() => { if (open) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = ""; } // Reset any in-progress drag whenever the drawer opens or closes so the // open/close transitions start from a clean transform. setDragY(0); dragState.current = null; return () => { document.body.style.overflow = ""; }; }, [open]); const handleTouchStart = (e: React.TouchEvent) => { dragState.current = { startY: e.touches[0].clientY, lastY: e.touches[0].clientY, lastT: performance.now(), velocity: 0, dragging: false, }; }; // A downward drag that starts inside a nested scroll region should scroll that // region, not dismiss the sheet. Walk from the touch target up to the card and // report whether any scrollable ancestor sits scrolled away from its own top. // Without this, swiping down to scroll back up inside an inner scroll box (e.g. // the goal icon picker's expanded "more" grid) would fight the swipe-to-dismiss // gesture, since the card itself is still at scrollTop 0. const nestedScrollerNotAtTop = (target: EventTarget | null): boolean => { let el = target instanceof HTMLElement ? target : null; const card = scrollRef.current; while (el && el !== card) { if (el.scrollTop > 0) { const overflowY = getComputedStyle(el).overflowY; if (overflowY === "auto" || overflowY === "scroll") return true; } el = el.parentElement; } return false; }; const handleTouchMove = (e: React.TouchEvent) => { const s = dragState.current; if (!s) return; const y = e.touches[0].clientY; const dy = y - s.startY; if (!s.dragging) { // Upward movement, the card not at its scroll top, or a nested scroller // not at ITS top: this is a scroll, not a dismiss gesture -- hand the // touch back so the inner content scrolls. if ( dy < -DRAG_SLOP || (scrollRef.current?.scrollTop ?? 0) > 0 || nestedScrollerNotAtTop(e.target) ) { dragState.current = null; return; } if (dy < DRAG_SLOP) return; // within slop: could still be a tap s.dragging = true; } const now = performance.now(); s.velocity = (y - s.lastY) / Math.max(1, now - s.lastT); s.lastY = y; s.lastT = now; setDragY(Math.max(0, dy)); }; const handleTouchEnd = () => { const s = dragState.current; dragState.current = null; if (!s?.dragging) return; if (dragY > DISMISS_DISTANCE || s.velocity > DISMISS_VELOCITY) { onClose(); } setDragY(0); }; // No DOM to portal into during server rendering. An overlay has no meaningful // server output anyway -- it is chrome that opens in response to interaction, // and the client renders it on mount. Without this guard the component reads // `document.body` during render and throws in any prerender / SSG pass. if (typeof document === "undefined") return null; // Portal to so the fixed overlay escapes any transformed / will-change // ancestor (e.g. a swipe-navigation content wrapper). A `position: fixed` // element inside such an ancestor is positioned relative to IT, not the // viewport, which clips/breaks the drawer -- so callers can mount the drawer // anywhere in the tree, including inside swipeable tab content. return createPortal(