"use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, onInteractOutside, ...props }, ref) => ( { onInteractOutside?.(event) const target = event.target if (target instanceof Element && target.closest('[data-dialog-companion], [data-agent-ui]')) { event.preventDefault() } }} className={cn( // grid-cols-[minmax(0,1fr)]: the implicit auto track sizes to the widest // child's min-content, and nowrap text (truncate) counts at full width // there, so one long description widens every sibling past the dialog // edge. minmax(0,1fr) caps the track at the content box. // left: centered in the viewport MINUS the docked agent sheet. // --agent-sheet-w exists as an inline var on ONLY while the // sheet is docked open (AgentSheetProvider); closed/floating falls to // the 0px fallback, making this exactly left-[50%]. Do NOT read // --agent-dock-w here: globals.css seeds that at 10px permanently. // Without the shift a wide dialog centers under the sheet and its // right edge becomes unreachable (sheet is z-60). "fixed left-[calc((100vw-var(--agent-sheet-w,0px))/2)] top-[50%] z-50 grid grid-cols-[minmax(0,1fr)] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-[var(--shadow-md)] max-h-[calc(100dvh-2rem)] overflow-y-auto scrollbar-visible data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-98 sm:rounded-xl", className )} {...props} > {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName /** * Backdrop for non-modal dialogs. Radix renders no Overlay when the root has * `modal={false}`, so dialogs that opt out of modality (to keep the agent * sheet interactive above them) render this alongside DialogContent to keep * the standard veil. z-40 sits under DialogContent (z-50) and the agent * sheet (z-60). */ const DialogVeil = () => (

) // Ref-counted so overlapping non-modal dialogs (e.g. the template picker // closing in the same commit as the booking dialog opens) cannot fight over // the flag: the shell stays inert until the LAST open dialog releases it. let dashShellInertCount = 0 /** * Hand-rolled page modality for `modal={false}` dialogs. Radix non-modal mode * drops the focus trap, aria-hiding, and body pointer-events lock, so the * page behind the DialogVeil would stay keyboard/AT/tap-reachable. `inert` on * the dash shell blocks all of that while the agent sheet and its trigger * (both outside the shell) stay live. Pair with DialogVeil. */ const useDashShellInert = (open: boolean) => { React.useEffect(() => { if (!open) return const shell = document.getElementById('dash-shell') if (!shell) return dashShellInertCount++ shell.inert = true return () => { dashShellInertCount-- if (dashShellInertCount <= 0) shell.inert = false } }, [open]) } const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( // data-ph-unmask: dialog titles are static i18n chrome in session replays; // a title carrying user data adds data-ph-mask at the call site. )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogVeil, useDashShellInert, DialogHeader, DialogFooter, DialogTitle, DialogDescription, }