"use client"; import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react"; type ConfirmOptions = { title: string; message?: string; confirmText?: string; cancelText?: string; danger?: boolean; }; type AlertOptions = { title: string; message?: string; okText?: string }; type DialogState = | { kind: "confirm"; options: ConfirmOptions; resolve: (v: boolean) => void } | { kind: "alert"; options: AlertOptions; resolve: () => void } | null; type DialogContextValue = { confirm: (options: ConfirmOptions) => Promise; alert: (options: AlertOptions) => Promise; }; const DialogContext = createContext(null); export function useDialog(): DialogContextValue { const ctx = useContext(DialogContext); if (!ctx) throw new Error("useDialog must be used within DialogProvider"); return ctx; } // Subtle entrance — just enough to avoid a hard flicker, not a showy animation. const DIALOG_KEYFRAMES = `@keyframes chrome-dialog-overlay { from { opacity: 0; } to { opacity: 1; } } @keyframes chrome-dialog-panel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }`; export function DialogProvider({ children }: { children: React.ReactNode }) { const [state, setState] = useState(null); const confirm = useCallback( (options: ConfirmOptions) => new Promise((resolve) => setState({ kind: "confirm", options, resolve })), [], ); const alert = useCallback( (options: AlertOptions) => new Promise((resolve) => setState({ kind: "alert", options, resolve })), [], ); const panelRef = useRef(null); const close = useCallback( (resolved: boolean) => { if (!state) return; if (state.kind === "confirm") state.resolve(resolved); else state.resolve(); setState(null); }, [state], ); useEffect(() => { if (!state) return; function onKey(e: KeyboardEvent) { if (e.key === "Escape") { // Stop the press from also reaching a dropdown/select listening beneath // the modal, which would otherwise close both at once. e.preventDefault(); close(false); } if (e.key === "Enter" && panelRef.current?.contains(e.target as Node)) close(true); } document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [state, close]); return ( {children} {state && ( <>

close(false)} >

e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="chrome-dialog-title" >

{state.kind === "confirm" ? "Confirm" : "Notice"}

{state.options.title}

{state.options.message && (

{state.options.message}

)}

{state.kind === "confirm" && ( )}

)} ); }

dialog.