// Workspace — interactive shells: modal, popover, NewTaskModal, NewDocModal,
// StatusPopover, AssigneePopover, PhasePopover. Loaded after primitives.jsx
// and before layout.jsx so every other module can read these globals.
// ── Modal shell ─────────────────────────────────────────────────────
function Modal({ title, onClose, width = 480, footer, children }) {
React.useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose && onClose(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onClose]);
return (
<>
{title}
{children}
{footer && (
{footer}
)}
);
}
// ── Popover ─────────────────────────────────────────────────────────
// `align` is 'left' | 'right' relative to the anchor.
//
// Outside-click handling: the popover listens to mousedown on document and
// closes when the click is outside BOTH the anchor and the popover itself.
// Without the popover-self check, a mousedown on any option inside the
// popover fires this handler before the option's own onClick runs (mousedown
// happens first in the DOM event sequence), so onClose() races onPick() and
// the popover snaps shut "without doing anything".
//
// Stacking-context note: the popover renders via createPortal to document.body
// so it escapes the Modal's transform-based containing block. Modal uses
// `transform: translateX(-50%)`, which makes `position: fixed` children
// resolve relative to the modal instead of the viewport — without the portal
// the getBoundingClientRect-derived coords land off, and z-index is trapped
// under the modal's own backdrop. That's the "Estado / Prioridad / Fase /
// Asignado a no funcionan" bug in NewTaskModal.
function Popover({ anchorRef, onClose, width = 220, align = 'left', children }) {
const [pos, setPos] = React.useState(null);
const popoverRef = React.useRef(null);
React.useLayoutEffect(() => {
if (!anchorRef?.current) return;
const r = anchorRef.current.getBoundingClientRect();
const top = r.bottom + 6;
const left = align === 'right' ? Math.max(8, r.right - width) : r.left;
setPos({ top, left });
}, [anchorRef, align, width]);
React.useEffect(() => {
const onDoc = (e) => {
if (anchorRef?.current && anchorRef.current.contains(e.target)) return;
if (popoverRef.current && popoverRef.current.contains(e.target)) return;
onClose && onClose();
};
const onKey = (e) => { if (e.key === 'Escape') onClose && onClose(); };
document.addEventListener('mousedown', onDoc);
window.addEventListener('keydown', onKey);
return () => { document.removeEventListener('mousedown', onDoc); window.removeEventListener('keydown', onKey); };
}, [anchorRef, onClose]);
if (!pos) return null;
const node = (