nexus-shared 1.1.20 → 2.0.0

package/dist/Components/Layouts/MessageBox.d.ts

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import { type ButtonVariant } from "../Documents/Button.tsx";
+import { type TextBoxType } from "../Inputs/TextBox.tsx";
+import type { PopupSize } from "./Popup.tsx";
+export type MessageTone = "neutral" | "info" | "success" | "warning" | "danger" | "question";
+export interface MessageBoxOptions {
+    title: ReactNode;
+    /** Text under the title. */
+    message?: ReactNode;
+    /** Colors the icon: `info`, `success`, `warning`, `danger`, `question`. `neutral` shows no icon. */
+    tone?: MessageTone;
+    /** Replaces the tone's icon; `null` shows none. */
+    icon?: ReactNode | null;
+    /** Default `sm`. */
+    size?: PopupSize;
+    /** The close button, Esc, and a click outside dismiss the box. Default true. */
+    closable?: boolean;
+}
+export interface MessageBoxButton<T extends string = string> {
+    value: T;
+    label: ReactNode;
+    /** Default: `primary` for the last button (`danger` when the tone is danger), `secondary` for the others. */
+    variant?: ButtonVariant;
+    /** Takes focus when the box opens. Default: the last button, or the first when the tone is danger or warning. */
+    autoFocus?: boolean;
+}
+export interface ShowMessageBoxOptions<T extends string> extends MessageBoxOptions {
+    buttons: readonly MessageBoxButton<T>[];
+}
+export interface ConfirmOptions extends MessageBoxOptions {
+    /** Default "OK". */
+    confirmLabel?: ReactNode;
+    /** Default "Cancel". */
+    cancelLabel?: ReactNode;
+}
+export interface AlertOptions extends MessageBoxOptions {
+    /** Default "OK". */
+    okLabel?: ReactNode;
+}
+export interface PromptOptions extends ConfirmOptions {
+    /** Label of the text box. */
+    label?: ReactNode;
+    defaultValue?: string;
+    placeholder?: string;
+    /** An empty answer is refused. Default true. */
+    required?: boolean;
+    inputType?: TextBoxType;
+}
+/**
+ * A message box with the given buttons. Resolves with the clicked button's value, or `null` when the box was
+ * dismissed with the close button, Esc, or a click outside.
+ */
+export declare function showMessageBox<T extends string>(options: ShowMessageBoxOptions<T>): Promise<T | null>;
+/** A message with one OK button. Resolves when it is closed. */
+declare function alert(input: AlertOptions | string): Promise<void>;
+/** A question with Cancel and OK. Resolves with true for OK; Esc, the close button, and a click outside mean false. */
+declare function confirm(input: ConfirmOptions | string): Promise<boolean>;
+/** A text box with Cancel and OK. Resolves with the text, or `null` when cancelled. */
+declare function prompt(input: PromptOptions | string): Promise<string | null>;
+/**
+ * Message boxes that return promises: `await messageBox.confirm({ title: "Delete the booking?", tone: "danger", confirmLabel: "Delete" })`,
+ * `messageBox.alert("Saved")`, `const name = await messageBox.prompt({ title: "Rename", defaultValue: room.name })`,
+ * `messageBox.show({ title, buttons: [...] })`. Needs one `<PopupHost />` on the page.
+ */
+export declare const messageBox: {
+    show: typeof showMessageBox;
+    alert: typeof alert;
+    confirm: typeof confirm;
+    prompt: typeof prompt;
+};
+export {};

package/dist/Components/Layouts/MessageBox.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconAlertCircle, iconAlertTriangle, iconCircleCheck, iconHelpCircle, iconInfoCircle, InlineIcon } from "nexus-icons";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { Button } from "../Documents/Button.js";
+import { TextBox } from "../Inputs/TextBox.js";
+import { openPopup } from "./PopupHost.js";
+const TONE_ICONS = {
+    neutral: null,
+    info: iconInfoCircle,
+    success: iconCircleCheck,
+    warning: iconAlertTriangle,
+    danger: iconAlertCircle,
+    question: iconHelpCircle,
+};
+let promptCounter = 0;
+function toneIcon(tone, icon) {
+    if (icon !== undefined)
+        return icon;
+    const data = TONE_ICONS[tone];
+    return data ? _jsx(InlineIcon, { icon: data }) : null;
+}
+/**
+ * A message box with the given buttons. Resolves with the clicked button's value, or `null` when the box was
+ * dismissed with the close button, Esc, or a click outside.
+ */
+export function showMessageBox(options) {
+    const { title, message, tone = "neutral", icon, size = "sm", closable = true, buttons } = options;
+    const cautious = tone === "danger" || tone === "warning";
+    const explicit = buttons.findIndex(button => button.autoFocus);
+    const focusIndex = explicit >= 0 ? explicit : cautious ? 0 : buttons.length - 1;
+    let result = null;
+    const popup = openPopup({
+        title,
+        icon: toneIcon(tone, icon),
+        size,
+        closable,
+        closeOnBackdrop: closable,
+        closeOnEscape: closable,
+        variant: "dialog",
+        minimizable: false,
+        maximizable: false,
+        className: cx("nx-popup--message", `nx-popup--tone-${tone}`),
+        initialFocus: "[data-nx-focus]",
+        content: message ? _jsx("div", { className: "nx-message__text", children: message }) : null,
+        footer: handle => buttons.map((button, index) => (_jsx(Button, { variant: button.variant ?? (index === buttons.length - 1 ? (tone === "danger" ? "danger" : "primary") : "secondary"), "data-nx-focus": index === focusIndex || undefined, onClick: () => {
+                result = button.value;
+                handle.close();
+            }, children: button.label }, button.value))),
+    });
+    return popup.closed.then(() => result);
+}
+function options(input) {
+    return typeof input === "string" ? { title: input } : input;
+}
+/** A message with one OK button. Resolves when it is closed. */
+function alert(input) {
+    const given = options(input);
+    return showMessageBox({ tone: "info", ...given, buttons: [{ value: "ok", label: given.okLabel ?? "OK" }] }).then(() => undefined);
+}
+/** A question with Cancel and OK. Resolves with true for OK; Esc, the close button, and a click outside mean false. */
+function confirm(input) {
+    const given = options(input);
+    return showMessageBox({
+        tone: "question",
+        ...given,
+        buttons: [
+            { value: "cancel", label: given.cancelLabel ?? "Cancel" },
+            { value: "confirm", label: given.confirmLabel ?? "OK" },
+        ],
+    }).then(value => value === "confirm");
+}
+/** A text box with Cancel and OK. Resolves with the text, or `null` when cancelled. */
+function prompt(input) {
+    const { title, message, tone = "neutral", icon, size = "sm", closable = true, label, defaultValue, placeholder, required = true, inputType = "text", confirmLabel, cancelLabel } = options(input);
+    const formId = `nx-prompt-${++promptCounter}`;
+    let result = null;
+    const popup = openPopup({
+        title,
+        icon: toneIcon(tone, icon),
+        size,
+        closable,
+        closeOnBackdrop: closable,
+        closeOnEscape: closable,
+        variant: "dialog",
+        minimizable: false,
+        maximizable: false,
+        className: cx("nx-popup--message", `nx-popup--tone-${tone}`),
+        initialFocus: `#${formId} input`,
+        content: handle => (_jsxs("form", { id: formId, className: "nx-message__form", onSubmit: (event) => {
+                event.preventDefault();
+                result = String(new FormData(event.currentTarget).get("value") ?? "");
+                handle.close();
+            }, children: [message && _jsx("div", { className: "nx-message__text", children: message }), _jsx(TextBox, { name: "value", label: label, type: inputType, defaultValue: defaultValue, placeholder: placeholder, required: required })] })),
+        footer: handle => (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => handle.close(), children: cancelLabel ?? "Cancel" }), _jsx(Button, { type: "submit", form: formId, variant: "primary", children: confirmLabel ?? "OK" })] })),
+    });
+    return popup.closed.then(() => result);
+}
+/**
+ * Message boxes that return promises: `await messageBox.confirm({ title: "Delete the booking?", tone: "danger", confirmLabel: "Delete" })`,
+ * `messageBox.alert("Saved")`, `const name = await messageBox.prompt({ title: "Rename", defaultValue: room.name })`,
+ * `messageBox.show({ title, buttons: [...] })`. Needs one `<PopupHost />` on the page.
+ */
+export const messageBox = { show: showMessageBox, alert, confirm, prompt };

package/dist/Components/Layouts/Popup.d.ts

@@ -0,0 +1,92 @@
+import { type ReactNode } from "react";
+export type PopupSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+/**
+ * `window`: a low title bar, as on a desktop window, with the window buttons filling its top right corner.
+ * `dialog`: a larger heading with the icon in a circle, as message boxes have.
+ */
+export type PopupVariant = "window" | "dialog";
+/**
+ * How a popup was closed: its close button, Esc, a click on the backdrop, code, or `replaced` (a popup opened with the
+ * same key took its place).
+ */
+export type PopupCloseReason = "close" | "escape" | "backdrop" | "code" | "replaced";
+/**
+ * What opening a popup again does while it is still open or minimized. `replace`: it closes, and a fresh one opens
+ * (content mounted again, centered, in its default window state). `restore`: it comes back as it was, with what was
+ * typed in it.
+ */
+export type PopupReopen = "replace" | "restore";
+/**
+ * A popup's window state: `normal` (its size, where it was moved to), `maximized` (the whole browser window), or
+ * `minimized` (a bar at the bottom right, while the page can be used).
+ */
+export type PopupWindowState = "normal" | "maximized" | "minimized";
+export interface PopupProps {
+    open: boolean;
+    /** Asked to close. The page sets `open` to false (or not, to keep it open). */
+    onClose: (reason: PopupCloseReason) => void;
+    /** After the exit animation, once the dialog is closed and its content unmounted. */
+    onClosed?: () => void;
+    title?: ReactNode;
+    /** Muted text after the title in the title bar (under it in a `dialog`). */
+    description?: ReactNode;
+    /** Before the title, and on its bar when minimized. */
+    icon?: ReactNode;
+    /**
+     * `window` (default): a low title bar with the icon, the title, and the description on one line, and the window
+     * buttons filling its top right corner. `dialog`: a larger heading, the icon in a circle, the description under the
+     * title, as message boxes have.
+     */
+    variant?: PopupVariant;
+    /** Width: `xs` 360, `sm` 440, `md` 560 (default), `lg` 720, `xl` 960, or `full`. */
+    size?: PopupSize;
+    /** Buttons at the end, right-aligned. */
+    footer?: ReactNode;
+    /** Shows the close button. Default true. */
+    closable?: boolean;
+    /** Esc closes. Default true. */
+    closeOnEscape?: boolean;
+    /** A click on the backdrop closes. Default true; turn off for forms that must be saved or cancelled. */
+    closeOnBackdrop?: boolean;
+    /**
+     * The minimize button: the popup steps aside to a bar at the bottom right, keeping everything typed in it, and the
+     * page can be used again. Default: when `closable`, since a popup that must be answered cannot be put aside.
+     * Needs `<PopupHost />`, which shows the bars.
+     */
+    minimizable?: boolean;
+    /** The maximize button, and a double-click on the title bar: the popup fills the window. Default true. */
+    maximizable?: boolean;
+    /** The title bar moves the popup, kept inside the window. Default true. */
+    movable?: boolean;
+    /**
+     * What opening it again does while it is still open or minimized. `replace` (default): a fresh one, as a new opening.
+     * `restore`: it comes back as it was, with what was typed in it. A page popup opens again through the button that
+     * opened it (while minimized); a popup from `openPopup` through its `key`.
+     */
+    reopen?: PopupReopen;
+    /** The window state, when the page controls it; pair it with `onWindowStateChange`. */
+    windowState?: PopupWindowState;
+    /** The window state each time the popup opens, when the page does not control it. Default `normal`. */
+    defaultWindowState?: Exclude<PopupWindowState, "minimized">;
+    /** When the buttons, a double-click on the title bar, a drag, or the minimized bar change the window state. */
+    onWindowStateChange?: (state: PopupWindowState) => void;
+    /** A body without padding, for tables and lists that reach the edges. */
+    flush?: boolean;
+    /** A selector for the element that takes focus when the popup opens. Default: the first control in the body or footer. */
+    initialFocus?: string;
+    /** Name for screen readers when there is no title. */
+    "aria-label"?: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * A modal window on the native <dialog>, with the buttons of a desktop window: minimize, maximize, and close. It sits
+ * in the top layer above everything, dims and locks the page behind it, traps Tab, closes with Esc or a click outside,
+ * and returns focus to where it came from. The title bar moves it; a double-click there maximizes it. Minimized, it
+ * waits as a bar at the bottom right with its content kept, while the page can be used. The body scrolls while the
+ * title and the footer stay. The content mounts while the popup is open, so a form inside starts fresh every time.
+ *
+ * @example
+ * <Popup open={open} onClose={() => setOpen(false)} title="Edit booking" footer={<Button variant="primary">Save</Button>}>…</Popup>
+ */
+export declare function Popup({ open, onClose, onClosed, title, description, icon, variant, size, footer, closable, closeOnEscape, closeOnBackdrop, minimizable, maximizable, movable, reopen, windowState: windowStateProp, defaultWindowState, onWindowStateChange, flush, initialFocus, "aria-label": ariaLabel, className, children, }: PopupProps): import("react").JSX.Element;

package/dist/Components/Layouts/Popup.js

@@ -0,0 +1,376 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconMinus, iconSquare, iconSquares, iconX, InlineIcon } from "nexus-icons";
+import { useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { afterAnimation } from "../../Helpers/AnimationHelpers.js";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { cssVariablePosition, DRAG_CANCEL_SELECTOR, moveWithin, startDrag, viewportBounds } from "../../Helpers/DragHelpers.js";
+import { HostedPopupContext } from "./PopupContext.js";
+import { dockWindow, undockWindow, useDockReady } from "./PopupDock.js";
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+// Where a minimized popup flies to: the newest bar of the dock, at the bottom right.
+const DOCK_EDGE = 16;
+const DOCK_BAR = { width: 300, height: 44 };
+function motionAllowed() {
+    return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function popupPosition(dialog) {
+    return cssVariablePosition(dialog, "--nx-popup-x", "--nx-popup-y");
+}
+// Each popup's opener and the popup that held it, so focus can find its way back through popups that have gone.
+const openers = new WeakMap();
+/**
+ * A modal window on the native <dialog>, with the buttons of a desktop window: minimize, maximize, and close. It sits
+ * in the top layer above everything, dims and locks the page behind it, traps Tab, closes with Esc or a click outside,
+ * and returns focus to where it came from. The title bar moves it; a double-click there maximizes it. Minimized, it
+ * waits as a bar at the bottom right with its content kept, while the page can be used. The body scrolls while the
+ * title and the footer stay. The content mounts while the popup is open, so a form inside starts fresh every time.
+ *
+ * @example
+ * <Popup open={open} onClose={() => setOpen(false)} title="Edit booking" footer={<Button variant="primary">Save</Button>}>…</Popup>
+ */
+export function Popup({ open, onClose, onClosed, title, description, icon, variant = "window", size = "md", footer, closable = true, closeOnEscape = true, closeOnBackdrop = true, minimizable, maximizable = true, movable = true, reopen = "replace", windowState: windowStateProp, defaultWindowState = "normal", onWindowStateChange, flush = false, initialFocus, "aria-label": ariaLabel, className, children, }) {
+    const id = useId();
+    const dialogRef = useRef(null);
+    // Content stays mounted through the exit animation, and while minimized.
+    const [shown, setShown] = useState(open);
+    const [closing, setClosing] = useState(false);
+    const [ownState, setOwnState] = useState(defaultWindowState);
+    // Counts fresh openings in place of a minimized popup (`reopen="replace"`): the content mounts again for each.
+    const [round, setRound] = useState(0);
+    const windowState = windowStateProp ?? ownState;
+    const minimized = windowState === "minimized";
+    const maximized = windowState === "maximized";
+    const dockReady = useDockReady();
+    const hosted = useContext(HostedPopupContext);
+    const canMinimize = (minimizable ?? closable) && dockReady;
+    const downOnBackdropRef = useRef(false);
+    // The element that opened the popup, where focus goes back when the browser has nowhere better.
+    const openerRef = useRef(null);
+    // True from an opening until the popup has closed, so the opener is taken once per opening (popups from code mount open).
+    const openingRef = useRef(false);
+    // The control that had focus when the popup was minimized, focused again when it comes back.
+    const savedFocusRef = useRef(null);
+    // Set before the popup closes its own dialog (to minimize or after the exit animation), so the close event is not taken for the browser's.
+    const selfCloseRef = useRef(false);
+    const dockedRef = useRef(false);
+    // The state a minimized popup comes back to.
+    const restoreToRef = useRef(defaultWindowState);
+    // The box before a maximize or a restore, for the animation between the two.
+    const flipFromRef = useRef(null);
+    const dockId = `nx-window${id}`;
+    function changeWindowState(next) {
+        if (next === latest.current.windowState)
+            return;
+        if (windowStateProp === undefined)
+            setOwnState(next);
+        onWindowStateChange?.(next);
+    }
+    // The latest props and callbacks, for the dock bar and the drag, which outlive a render.
+    const latest = useRef({ windowState, defaultWindowState, reopen, title, icon, closable, ariaLabel, onClose, changeWindowState });
+    useLayoutEffect(() => {
+        latest.current = { windowState, defaultWindowState, reopen, title, icon, closable, ariaLabel, onClose, changeWindowState };
+        if (!minimized)
+            restoreToRef.current = windowState;
+    });
+    function dock() {
+        const current = latest.current;
+        dockedRef.current = true;
+        dockWindow({
+            id: dockId,
+            title: current.title ?? current.ariaLabel ?? "Window",
+            label: typeof current.title === "string" ? current.title : current.ariaLabel,
+            icon: current.icon,
+            restore: () => latest.current.changeWindowState(restoreToRef.current),
+            close: current.closable ? () => latest.current.onClose("close") : undefined,
+        });
+    }
+    function undock() {
+        if (!dockedRef.current)
+            return;
+        dockedRef.current = false;
+        undockWindow(dockId);
+    }
+    // Focus goes back to the opener when the browser left it nowhere (its own target was a dock bar that is gone), or
+    // still in the closed dialog, which Chrome reports until its next focus fixup. An opener inside a popup that has
+    // closed since (one this popup replaced) is gone too: that popup's opener takes focus.
+    function returnFocus() {
+        const active = document.activeElement;
+        const dialog = dialogRef.current;
+        if (!dialog || (active && active !== document.body && !dialog.contains(active)))
+            return;
+        let link = openers.get(dialog);
+        for (let hops = 0; link && !link.opener?.isConnected && link.within && hops < 10; hops++)
+            link = openers.get(link.within);
+        if (link?.opener?.isConnected)
+            link.opener.focus({ preventScroll: true });
+    }
+    function focusInside(dialog) {
+        const target = initialFocus ? dialog.querySelector(initialFocus) : dialog.querySelector(`:is(.nx-popup__body, .nx-popup__foot) :is(${FOCUSABLE})`);
+        (target ?? dialog).focus();
+    }
+    function showDialog(dialog) {
+        // The first modal locks the page; the space of its scrollbar is kept as padding, so nothing shifts.
+        if (!document.querySelector(".nx-popup:modal"))
+            document.documentElement.style.setProperty("--nx-scrollbar-gap", `${window.innerWidth - document.documentElement.clientWidth}px`);
+        dialog.showModal();
+    }
+    function closeDialog(dialog) {
+        selfCloseRef.current = true;
+        dialog.close();
+        returnFocus();
+    }
+    // After the popup has closed: the content unmounts, and the next opening starts centered, in its default state.
+    function finishClose() {
+        const dialog = dialogRef.current;
+        setClosing(false);
+        setShown(false);
+        undock();
+        openingRef.current = false;
+        savedFocusRef.current = null;
+        if (dialog) {
+            dialog.style.removeProperty("--nx-popup-x");
+            dialog.style.removeProperty("--nx-popup-y");
+        }
+        if (windowStateProp === undefined)
+            setOwnState(defaultWindowState);
+        onClosed?.();
+    }
+    // Minimizing: the popup flies to the bottom right and fades, then the dialog closes (the page is usable again) and
+    // its bar appears on the dock. Without motion it goes at once. Returns a function that stops it, for a quick restore.
+    function leaveToDock(dialog) {
+        let stopped = false;
+        let animation = null;
+        const hide = () => {
+            if (stopped)
+                return;
+            stopped = true;
+            const active = document.activeElement;
+            savedFocusRef.current = active instanceof HTMLElement && dialog.contains(active) ? active : null;
+            closeDialog(dialog);
+            dialog.removeAttribute("data-nx-minimizing");
+            animation?.cancel();
+            dock();
+        };
+        if (!motionAllowed()) {
+            hide();
+            return () => undefined;
+        }
+        const box = dialog.getBoundingClientRect();
+        const view = viewportBounds();
+        const barWidth = Math.min(DOCK_BAR.width, view.width - 2 * DOCK_EDGE);
+        const dx = view.width - DOCK_EDGE - barWidth / 2 - (box.left + box.width / 2);
+        const dy = view.height - DOCK_EDGE - DOCK_BAR.height / 2 - (box.top + box.height / 2);
+        const scale = Math.max(0.2, Math.min(1, barWidth / box.width));
+        dialog.setAttribute("data-nx-minimizing", "");
+        animation = dialog.animate([{ transform: "none", opacity: 1 }, { transform: `translate(${dx}px, ${dy}px) scale(${scale})`, opacity: 0 }], { duration: 200, easing: "cubic-bezier(0.3, 0, 0.8, 0.15)", fill: "forwards" });
+        animation.finished.then(hide, () => undefined);
+        return () => {
+            if (stopped)
+                return;
+            stopped = true;
+            animation?.cancel();
+            dialog.removeAttribute("data-nx-minimizing");
+        };
+    }
+    useLayoutEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (!open) {
+            if (dialog.open)
+                setClosing(true);
+            // Closed while minimized: there is nothing to animate.
+            else if (shown)
+                finishClose();
+            return;
+        }
+        if (!openingRef.current) {
+            openingRef.current = true;
+            const active = document.activeElement;
+            openerRef.current = active instanceof HTMLElement && active !== document.body ? active : null;
+            openers.set(dialog, { opener: openerRef.current, within: openerRef.current?.closest("dialog.nx-popup") ?? null });
+        }
+        setShown(true);
+        setClosing(false);
+        if (minimized) {
+            if (dialog.open)
+                return leaveToDock(dialog);
+            if (!dockedRef.current)
+                dock();
+            return;
+        }
+        undock();
+        if (dialog.open)
+            return;
+        showDialog(dialog);
+        // Back from the dock: the control that had focus takes it again. A first opening focuses once the content has rendered.
+        if (shown) {
+            const saved = savedFocusRef.current;
+            savedFocusRef.current = null;
+            if (saved?.isConnected && dialog.contains(saved))
+                saved.focus({ preventScroll: true });
+            else
+                focusInside(dialog);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, minimized]);
+    // Closing: the exit animation plays, then the dialog closes and the content unmounts. Without the animation
+    // (reduced motion), it closes in the same frame.
+    useLayoutEffect(() => {
+        const dialog = dialogRef.current;
+        if (!closing || !dialog)
+            return;
+        return afterAnimation(dialog, "nx-popup-out", () => {
+            closeDialog(dialog);
+            finishClose();
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [closing]);
+    // Focus moves in once the content has rendered: the asked-for element, else the first control in the body or footer.
+    useLayoutEffect(() => {
+        const dialog = dialogRef.current;
+        if (!open || !shown || !dialog || !dialog.open)
+            return;
+        focusInside(dialog);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, shown]);
+    // Maximize and restore grow or shrink the popup from its old box to its new one.
+    useLayoutEffect(() => {
+        const from = flipFromRef.current;
+        flipFromRef.current = null;
+        const dialog = dialogRef.current;
+        if (!from || !dialog?.open || minimized)
+            return;
+        const to = dialog.getBoundingClientRect();
+        if (!to.width || !to.height)
+            return;
+        const animation = dialog.animate([
+            { transformOrigin: "0 0", transform: `translate(${from.left - to.left}px, ${from.top - to.top}px) scale(${from.width / to.width}, ${from.height / to.height})` },
+            { transformOrigin: "0 0", transform: "none" },
+        ], { duration: 200, easing: "cubic-bezier(0.2, 0, 0, 1)" });
+        return () => animation.cancel();
+    }, [windowState, minimized]);
+    // A moved popup stays inside the window when the window gets smaller or the popup grows.
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!open || minimized || maximized || !movable || !dialog)
+            return;
+        const position = popupPosition(dialog);
+        const keepInside = () => {
+            const { x, y } = position.get();
+            if (dialog.open && (x || y))
+                moveWithin(dialog, { x: 0, y: 0 }, { position });
+        };
+        const observer = new ResizeObserver(keepInside);
+        observer.observe(dialog);
+        window.addEventListener("resize", keepInside);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener("resize", keepInside);
+        };
+    }, [open, minimized, maximized, movable]);
+    // Opened again while minimized, with `reopen="replace"`: a fresh opening in its place, its content mounted again,
+    // centered, in its default window state.
+    function reopenFresh() {
+        const dialog = dialogRef.current;
+        savedFocusRef.current = null;
+        dialog?.style.removeProperty("--nx-popup-x");
+        dialog?.style.removeProperty("--nx-popup-y");
+        setRound(value => value + 1);
+        latest.current.changeWindowState(latest.current.defaultWindowState);
+    }
+    // A page's popup comes back from the dock when the button that opened it is pressed again (fresh, or as it was, by
+    // `reopen`), since setting `open` to true again changes nothing. Popups opened from code come back through their key.
+    useEffect(() => {
+        const opener = openerRef.current;
+        if (hosted || !open || !minimized || !opener?.isConnected)
+            return;
+        const bringBack = () => (latest.current.reopen === "replace" ? reopenFresh() : latest.current.changeWindowState(restoreToRef.current));
+        opener.addEventListener("click", bringBack);
+        return () => opener.removeEventListener("click", bringBack);
+    }, [hosted, open, minimized]);
+    // The dock bar follows a new title or icon; it goes when the popup unmounts.
+    useEffect(() => {
+        if (dockedRef.current)
+            dock();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [title, icon, closable, ariaLabel]);
+    useEffect(() => () => undock(), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // Esc: the browser asks to close; the page decides through onClose.
+    function onCancel(event) {
+        event.preventDefault();
+        if (closeOnEscape && !closing)
+            onClose("escape");
+    }
+    // Closed by the browser itself, e.g. a form with method="dialog": tell the page.
+    function onNativeClose() {
+        if (selfCloseRef.current) {
+            selfCloseRef.current = false;
+            return;
+        }
+        if (open)
+            onClose("code");
+    }
+    // A click counts as "outside" only when it started and ended on the backdrop, so dragging a selection out of
+    // the popup does not close it.
+    function onPointerDown(event) {
+        downOnBackdropRef.current = event.target === event.currentTarget;
+    }
+    function onClick(event) {
+        const onBackdrop = event.target === event.currentTarget && downOnBackdropRef.current;
+        downOnBackdropRef.current = false;
+        if (onBackdrop && closeOnBackdrop && !closing)
+            onClose("backdrop");
+    }
+    // A mouse click on minimize or maximize leaves focus in the field being typed in, as a desktop window's buttons do.
+    function keepFocus(event) {
+        event.preventDefault();
+    }
+    function toggleMaximize() {
+        const dialog = dialogRef.current;
+        if (dialog && motionAllowed())
+            flipFromRef.current = dialog.getBoundingClientRect();
+        changeWindowState(maximized ? "normal" : "maximized");
+    }
+    // The title bar moves the popup. Dragging a maximized popup restores it under the pointer, as desktop windows do.
+    function onHeadPointerDown(event) {
+        const dialog = dialogRef.current;
+        if (!movable || !dialog || closing || event.button !== 0 || !event.isPrimary)
+            return;
+        if (event.target instanceof Element && event.target.closest(DRAG_CANCEL_SELECTOR))
+            return;
+        const position = popupPosition(dialog);
+        startDrag(event.nativeEvent, {
+            target: dialog,
+            handle: event.currentTarget,
+            position,
+            onStart: ({ start, pointer }) => {
+                if (latest.current.windowState !== "maximized")
+                    return;
+                const before = dialog.getBoundingClientRect();
+                const along = (start.x - before.left) / before.width;
+                const down = start.y - before.top;
+                position.set({ x: 0, y: 0 });
+                flushSync(() => latest.current.changeWindowState("normal"));
+                if (latest.current.windowState === "maximized")
+                    return false;
+                // Keep the pressed spot of the title bar under the pointer; the drag adds the distance moved so far.
+                const after = dialog.getBoundingClientRect();
+                position.set({ x: pointer.x - along * after.width - after.left - (pointer.x - start.x), y: pointer.y - down - after.top - (pointer.y - start.y) });
+            },
+        });
+    }
+    function onHeadDoubleClick(event) {
+        if (!maximizable || closing || (event.target instanceof Element && event.target.closest(DRAG_CANCEL_SELECTOR)))
+            return;
+        toggleMaximize();
+    }
+    const titleId = `${id}-title`;
+    const descriptionId = `${id}-description`;
+    const hasControls = canMinimize || maximizable || closable;
+    return (_jsx("dialog", { ref: dialogRef, className: cx("nx-popup", `nx-popup--${variant}`, `nx-popup--${size}`, flush && "nx-popup--flush", maximized && "nx-popup--maximized", movable && "nx-popup--movable", closing && "nx-popup--closing", className), "data-window-state": windowState, "aria-labelledby": title ? titleId : undefined, "aria-label": title ? undefined : ariaLabel, "aria-describedby": description ? descriptionId : undefined, onCancel: onCancel, onClose: onNativeClose, onPointerDown: onPointerDown, onClick: onClick, children: shown && (_jsxs(HostedPopupContext, { value: false, children: [(title || icon || hasControls) && (_jsxs("header", { className: "nx-popup__head", onPointerDown: onHeadPointerDown, onDoubleClick: onHeadDoubleClick, children: [icon && _jsx("span", { className: "nx-popup__icon", children: icon }), _jsxs("div", { className: "nx-popup__heading", children: [title && (_jsx("h2", { id: titleId, className: "nx-popup__title", children: title })), description && (_jsx("p", { id: descriptionId, className: "nx-popup__description", children: description }))] }), hasControls && (_jsxs("div", { className: "nx-popup__controls", children: [canMinimize && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__minimize", "aria-label": "Minimize", title: "Minimize", onMouseDown: keepFocus, onClick: () => changeWindowState("minimized"), children: _jsx(InlineIcon, { icon: iconMinus }) })), maximizable && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__maximize", "aria-label": maximized ? "Restore down" : "Maximize", title: maximized ? "Restore down" : "Maximize", onMouseDown: keepFocus, onClick: toggleMaximize, children: _jsx(InlineIcon, { icon: maximized ? iconSquares : iconSquare }) })), closable && (_jsx("button", { type: "button", className: "nx-popup__control nx-popup__close", "aria-label": "Close", title: "Close", onClick: () => onClose("close"), children: _jsx(InlineIcon, { icon: iconX }) }))] }))] })), _jsx("div", { className: "nx-popup__body", children: children }), footer && _jsx("footer", { className: "nx-popup__foot", children: footer })] }, round)) }));
+}

package/dist/Components/Layouts/PopupContext.d.ts

@@ -0,0 +1,2 @@
+/** True inside `<PopupHost />`: its popups are opened from code and come back through their `key`, not their opener. Internal. */
+export declare const HostedPopupContext: import("react").Context<boolean>;

package/dist/Components/Layouts/PopupContext.js

@@ -0,0 +1,4 @@
+"use client";
+import { createContext } from "react";
+/** True inside `<PopupHost />`: its popups are opened from code and come back through their `key`, not their opener. Internal. */
+export const HostedPopupContext = createContext(false);