chesspal 0.0.1 → 0.2.0

package/dist/page/board/pointer.js

@@ -0,0 +1,239 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+/**
+ * The board's pointer and keyboard, for the board turned as `columns` and `ranks` say from its top left corner: the player's pieces answer while they may
+ * move, the right button marks at any time.
+ */
+export function useBoardPointer({ columns, ranks, pieces, player, selected, targets, promotion, onSelect, onMove, onRefuse, onPromote }) {
+    const board = useRef(null);
+    const press = useRef(undefined);
+    const [drag, setDrag] = useState(undefined);
+    const marking = useRef(undefined);
+    const [marks, setMarks] = useState(noMarks);
+    const [drawing, setDrawing] = useState(undefined);
+    const dragged = useRef(undefined);
+    const own = (square) => {
+        const piece = pieces.get(square);
+        return player !== undefined && piece !== undefined && (piece === piece.toUpperCase()) === (player === "white");
+    };
+    // Where a move to a square lands: there, or castling's square for a king taken onto its own rook, as on Lichess; none for a square it cannot go to.
+    const landing = (square) => targets.find((move) => move.to === square || rookOf(move) === square)?.to;
+    const isTarget = (square) => landing(square) !== undefined;
+    // A press on a square that is not the player's, and none of the piece picked's moves, puts the piece down, saying why it cannot go there.
+    const putDown = (square) => {
+        onSelect(undefined);
+        if (selected !== undefined) {
+            onRefuse(selected, square);
+        }
+    };
+    // The keyboard: the arrows move between the squares as the board is turned, Enter and Space press one as a click does, Esc puts the piece down.
+    const [cursor, setCursor] = useState(undefined);
+    const focused = cursor ?? selected ?? `${columns[0]}${ranks[7]}`;
+    const key = (event, square) => {
+        const step = arrowSteps[event.key];
+        if (step !== undefined) {
+            const column = Math.min(7, Math.max(0, columns.indexOf(square[0]) + step[0]));
+            const row = Math.min(7, Math.max(0, ranks.indexOf(Number(square[1])) + step[1]));
+            const next = `${columns[column]}${ranks[row]}`;
+            event.preventDefault();
+            setCursor(next);
+            board.current.querySelector(`[data-square="${next}"]`).focus();
+        }
+        else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            pressKey(square);
+        }
+        else if (event.key === "Escape" && selected !== undefined) {
+            onSelect(undefined);
+        }
+    };
+    // The focus goes back to the board after the choice of a promotion: to the pawn's square when it was cancelled, else to where it went.
+    const promote = (piece) => {
+        const back = piece === undefined ? promotion.from : promotion.to;
+        onPromote(piece);
+        setCursor(back);
+        requestAnimationFrame(() => board.current?.querySelector(`[data-square="${back}"]`)?.focus());
+    };
+    const pressKey = (square) => {
+        setMarks(noMarks);
+        if (player === undefined) {
+            return;
+        }
+        if (selected !== undefined && isTarget(square)) {
+            onMove(selected, landing(square));
+        }
+        else if (own(square)) {
+            onSelect(selected === square ? undefined : square);
+        }
+        else {
+            putDown(square);
+        }
+    };
+    // The square under a point, as the board is turned; none off the board.
+    const squareAt = (x, y) => {
+        const box = board.current.getBoundingClientRect();
+        const column = Math.floor((x - box.left) / (box.width / 8));
+        const row = Math.floor((y - box.top) / (box.height / 8));
+        return column >= 0 && column < 8 && row >= 0 && row < 8 ? `${columns[column]}${ranks[row]}` : undefined;
+    };
+    // Where a square's corner is in the window.
+    const cornerOf = (square) => {
+        const box = board.current.getBoundingClientRect();
+        const size = box.width / 8;
+        return [box.left + columns.indexOf(square[0]) * size, box.top + ranks.indexOf(Number(square[1])) * size];
+    };
+    const goBack = () => {
+        setDrag((now) => now === undefined ? undefined : { ...now, at: cornerOf(now.from), over: undefined, back: true });
+    };
+    useEffect(() => {
+        if (drag === undefined) {
+            return;
+        }
+        // Esc puts the piece back; a piece going back lands within 260 ms, whether its transition ends or not.
+        const escape = (event) => {
+            if (event.key === "Escape") {
+                press.current = undefined;
+                goBack();
+            }
+        };
+        const landed = drag.back ? setTimeout(() => setDrag(undefined), reducedMotion() ? 0 : 260) : undefined;
+        addEventListener("keydown", escape);
+        document.documentElement.classList.add("dragging");
+        return () => {
+            removeEventListener("keydown", escape);
+            document.documentElement.classList.remove("dragging");
+            clearTimeout(landed);
+        };
+    }, [drag?.back, drag === undefined]);
+    const down = (event) => {
+        const square = squareAt(event.clientX, event.clientY);
+        if (square === undefined) {
+            return;
+        }
+        // The right button marks a square, or draws an arrow when dragged; the left one clears them all, and moves.
+        if (event.button === 2) {
+            marking.current = { from: square, id: event.pointerId };
+            board.current.setPointerCapture(event.pointerId);
+            return;
+        }
+        if (event.button !== 0) {
+            return;
+        }
+        setMarks(noMarks);
+        if (player === undefined || drag !== undefined) {
+            return;
+        }
+        if (selected !== undefined && isTarget(square)) {
+            // A finger plays when it lifts, so a page scrolled from a dot plays nothing.
+            if (event.pointerType === "touch") {
+                press.current = { from: selected, to: landing(square), x: event.clientX, y: event.clientY, was: false, touch: true, id: event.pointerId, moved: false };
+            }
+            else {
+                onMove(selected, landing(square));
+            }
+            return;
+        }
+        if (!own(square)) {
+            putDown(square);
+            return;
+        }
+        press.current = { from: square, x: event.clientX, y: event.clientY, was: selected === square, touch: event.pointerType === "touch", id: event.pointerId, moved: false };
+        board.current.setPointerCapture(event.pointerId);
+        onSelect(square);
+    };
+    const moveTo = (event) => {
+        const mark = marking.current;
+        if (mark !== undefined && event.pointerId === mark.id) {
+            const to = squareAt(event.clientX, event.clientY);
+            setDrawing(to === undefined || to === mark.from ? undefined : { from: mark.from, to });
+            return;
+        }
+        const now = press.current;
+        if (now === undefined || event.pointerId !== now.id) {
+            return;
+        }
+        const box = board.current.getBoundingClientRect();
+        const size = box.width / 8;
+        const distance = Math.hypot(event.clientX - now.x, event.clientY - now.y);
+        if (now.to !== undefined) {
+            if (distance >= 8) {
+                press.current = undefined;
+            }
+            return;
+        }
+        // A press becomes a drag past 4 px of the mouse, 8 of a finger; before, it is a click.
+        if (drag === undefined && distance < (now.touch ? 8 : 4)) {
+            return;
+        }
+        now.moved ||= distance >= size / 2;
+        // A finger holds the piece three quarters of a square above it, and drops it where the piece is seen; until it has gone half a square, the
+        // piece stays on its own, so a touch never pushes it a square on by mistake.
+        const over = now.touch && !now.moved ? now.from : squareAt(event.clientX, now.touch ? event.clientY - 0.75 * size : event.clientY);
+        setDrag({ from: now.from, at: [event.clientX - size / 2, event.clientY - size / 2], over, touch: now.touch, back: false });
+    };
+    const release = (event, cancelled) => {
+        const mark = marking.current;
+        if (mark !== undefined && event.pointerId === mark.id) {
+            const to = squareAt(event.clientX, event.clientY);
+            marking.current = undefined;
+            setDrawing(undefined);
+            if (!cancelled && to !== undefined) {
+                setMarks((now) => toggled(now, mark.from, to));
+            }
+            return;
+        }
+        const now = press.current;
+        if (now === undefined || event.pointerId !== now.id) {
+            return;
+        }
+        press.current = undefined;
+        if (now.to !== undefined) {
+            if (!cancelled) {
+                onMove(now.from, now.to);
+            }
+            return;
+        }
+        if (drag === undefined) {
+            // A click on the piece already picked puts it down.
+            if (now.was) {
+                onSelect(undefined);
+            }
+            return;
+        }
+        const to = drag.over;
+        const landed = to === undefined || to === drag.from ? undefined : landing(to);
+        if (!cancelled && landed !== undefined) {
+            setDrag(undefined);
+            dragged.current = `${drag.from}${landed}`;
+            onMove(drag.from, landed);
+        }
+        else if (!cancelled && to === drag.from) {
+            setDrag(undefined);
+        }
+        else {
+            goBack();
+            // A game that changed under the drag may have given the turn away: no reason for a piece that may not move.
+            if (!cancelled && to !== undefined && to !== drag.from && player !== undefined) {
+                onRefuse(drag.from, to);
+            }
+        }
+    };
+    return { board, drag, marks, drawing, focused, dragged, own, isTarget, down, moveTo, release, key, pressKey, promote, setCursor };
+}
+const noMarks = { squares: [], arrows: [] };
+/** The marks with a square, or an arrow when the squares differ, added; taken away when they were there. */
+function toggled(marks, from, to) {
+    if (from === to) {
+        return { ...marks, squares: marks.squares.includes(to) ? marks.squares.filter((square) => square !== to) : [...marks.squares, to] };
+    }
+    const there = marks.arrows.some((arrow) => arrow.from === from && arrow.to === to);
+    return { ...marks, arrows: there ? marks.arrows.filter((arrow) => arrow.from !== from || arrow.to !== to) : [...marks.arrows, { from, to }] };
+}
+/** The corner of the rook a castling moves; none for another move. */
+function rookOf(move) {
+    return move.san.startsWith("O-O-O") ? `a${move.from[1]}` : move.san.startsWith("O-O") ? `h${move.from[1]}` : undefined;
+}
+// How each arrow moves the keyboard's square, in columns and rows as the board is seen.
+const arrowSteps = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
+function reducedMotion() {
+    return matchMedia("(prefers-reduced-motion: reduce)").matches;
+}

package/dist/page/board/squares.js

@@ -0,0 +1,26 @@
+// The squares of a board and the pieces on them, read from a FEN.
+/** The files' letters, from White's left. */
+export const files = "abcdefgh";
+/** The pieces of a FEN by square, as its letters: uppercase for White. */
+export function piecesOf(fen) {
+    const pieces = new Map();
+    const rows = (fen.split(" ")[0] ?? "").split("/");
+    rows.forEach((row, index) => {
+        let file = 0;
+        for (const letter of row) {
+            if (/\d/.test(letter)) {
+                file += Number(letter);
+            }
+            else {
+                pieces.set(`${files[file]}${8 - index}`, letter);
+                file += 1;
+            }
+        }
+    });
+    return pieces;
+}
+/** The square of the king whose side is to move in a FEN. */
+export function kingToMove(fen, pieces) {
+    const king = fen.split(" ")[1] === "b" ? "k" : "K";
+    return [...pieces].find(([, letter]) => letter === king)?.[0];
+}

package/dist/page/dialogs/analyses.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+// The list of the analyses (D-92): the games analysed or brought to study, found by a search, to open again, analyse again or delete, each row with its
+// menu over the dialog and the question it asks in its place.
+import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
+import { ResultTile } from "../game/result-tile.js";
+import { signature } from "../players/model-name.js";
+import { searched } from "./search.js";
+import { accountSide, playerIn, studiedSides } from "./studied.js";
+/** The list, read anew at each opening: the search, the row that loads a game, then a row for each game found, with its menu or its question. */
+export function Analyses({ onStudy, onLoad, you, accounts, ai, text }) {
+    const words = text.study;
+    const [analyses, reload] = useAnalyses();
+    const [query, setQuery] = useState("");
+    const [menu, setMenu] = useState(undefined);
+    const [asking, setAsking] = useState(undefined);
+    const [busy, setBusy] = useState(false);
+    const [problem, setProblem] = useState(undefined);
+    useClosing(menu !== undefined, () => setMenu(undefined));
+    useClosing(asking !== undefined, () => setAsking(undefined));
+    const act = async (name, asked) => {
+        setBusy(true);
+        const refused = asked === "remove" ? await deletion("/api/delete-game", name) : await deletion("/api/delete-review", name);
+        // Analysing again opens the game without its review: the chat's analyst goes over it (D-89).
+        const after = refused === undefined && asked === "redo" ? await onStudy({ game: name }) : refused;
+        setBusy(false);
+        setAsking(undefined);
+        setProblem(after);
+        reload();
+    };
+    const open = (name) => {
+        setBusy(true);
+        void onStudy({ game: name }).then((refused) => {
+            setBusy(false);
+            setProblem(refused);
+        });
+    };
+    const rows = analyses.map((item) => {
+        const named = namedSides(item, you, accounts, ai, text);
+        // How it went only for the player's own games: played here, or loaded and named by their name on the site (D-93).
+        const played = item.name.startsWith("games/") ? named.you : accountSide(tagsOf(item), accounts);
+        const outcome = played === undefined ? undefined : outcomeOf(item.result, played);
+        return { item, named, outcome };
+    });
+    const found = searched(rows, query, ({ item, named, outcome }) => searchText(item, named.sides, outcome, text));
+    return (_jsxs("div", { class: "analyses", children: [_jsxs("label", { class: "search", children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M10.5 17A6.5 6.5 0 1 0 10.5 4A6.5 6.5 0 0 0 10.5 17ZM15.5 15.5L20 20" }) }), _jsx("input", { type: "search", value: query, placeholder: words.search, "aria-label": words.search, spellcheck: false, onInput: (event) => setQuery(event.currentTarget.value) })] }), _jsxs("button", { class: "load-row", type: "button", onClick: onLoad, children: [_jsx("span", { class: "plus", "aria-hidden": "true", children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", children: _jsx("path", { d: "M12 5V19M5 12H19" }) }) }), _jsxs("span", { children: [_jsx("b", { children: words.bring }), _jsx("small", { children: words.bringNote })] })] }), problem === undefined ? null : _jsx("p", { class: "problem", role: "alert", children: problem }), analyses.length > 0 && found.length === 0 ? _jsx("p", { class: "none", children: words.noMatch }) : null, found.length === 0 ? null : (_jsx("ul", { class: "games", "aria-label": words.yours, children: found.map(({ item, named, outcome }) => asking?.name === item.name
+                    ? (_jsx(Question, { asked: asking.asked, game: named.sides, when: dayOf(item.date, text.language), by: by(item), busy: busy, onYes: () => void act(item.name, asking.asked), onNo: () => setAsking(undefined), words: words }, item.name))
+                    : (_jsxs("li", { class: "game", children: [_jsxs("button", { class: "reopen", type: "button", disabled: busy, onClick: () => open(item.name), children: [_jsx(ResultTile, { result: item.result }), _jsxs("span", { class: "what", children: [_jsx("b", { class: "who", children: named.sides }), _jsx("span", { class: "meta", children: [dayOf(item.date, text.language), words.moves(item.moves), item.opening].filter((part) => part !== undefined).join(" · ") }), item.reviewed ? _jsx(Reviewed, { by: by(item), words: words }) : null] }), _jsxs("span", { class: "score", children: [_jsx("b", { children: scoreOf(item.result) }), outcome === undefined ? _jsx("span", {}) : _jsx(OutcomeBadge, { outcome: outcome, words: words })] })] }), _jsx("span", { class: "row-actions", children: _jsx("button", { class: `icon-button${menu?.name === item.name ? " on" : ""}`, type: "button", title: words.more, "aria-label": words.more, "aria-expanded": menu?.name === item.name, disabled: busy, onClick: (event) => setMenu(menu?.name === item.name ? undefined : { name: item.name, anchor: event.currentTarget }), children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H5.01M12 12H12.01M19 12H19.01" }) }) }) }), menu?.name === item.name
+                                ? (_jsx(RowMenu, { anchor: menu.anchor, reviewed: item.reviewed, onPick: (asked) => {
+                                        setMenu(undefined);
+                                        setAsking({ name: item.name, asked });
+                                    }, onClose: () => setMenu(undefined), words: words }))
+                                : null] }, item.name))) }))] }));
+}
+/**
+ * A row's menu, over the dialog and the page in the browser's top layer, under its button or above it when there is no room: analyse again and delete the
+ * analysis, for a game reviewed; delete the game, apart and in red. Scrolling closes it, which would leave its button.
+ */
+function RowMenu({ anchor, reviewed, onPick, onClose, words }) {
+    const menu = useRef(null);
+    useLayoutEffect(() => {
+        const element = menu.current;
+        element.showPopover();
+        placeUnder(element, anchor);
+        element.querySelector("button")?.focus();
+        window.addEventListener("scroll", onClose, true);
+        window.addEventListener("resize", onClose);
+        return () => {
+            window.removeEventListener("scroll", onClose, true);
+            window.removeEventListener("resize", onClose);
+        };
+    }, []);
+    return (_jsxs("div", { ref: menu, class: "row-menu", popover: "manual", children: [reviewed
+                ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => onPick("redo"), children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M19 12A7 7 0 1 1 16.5 6.6M17 3V7H13" }) }), _jsxs("span", { children: [words.redo, _jsx("small", { children: words.redoNote })] })] }), _jsxs("button", { type: "button", onClick: () => onPick("unreview"), children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M5 19H19M8 15L4.5 11.5L12 4L18 10L11 17H8ZM8.5 7.5L14.5 13.5" }) }), _jsxs("span", { children: [words.unreview, _jsx("small", { children: words.unreviewNote })] })] }), _jsx("hr", {})] }))
+                : null, _jsxs("button", { class: "danger", type: "button", onClick: () => onPick("remove"), children: [_jsx(TrashIcon, {}), _jsx("span", { children: words.remove })] })] }));
+}
+/** The question a row asks in place of the row: deleting in red, analysing again in the accent. */
+function Question({ asked, game, when, by, busy, onYes, onNo, words }) {
+    const { question, note, yes } = asked === "redo" ? words.askRedo(game, by) : asked === "unreview" ? words.askUnreview(game) : words.askRemove(game, when);
+    // The safe answer takes the focus, as the menu's item had it.
+    const cancel = useRef(null);
+    useEffect(() => cancel.current?.focus(), []);
+    return (_jsxs("li", { class: `ask ${asked === "redo" ? "redo" : "danger"}`, role: "alertdialog", "aria-label": question, children: [_jsxs("p", { children: [_jsx("b", { children: question }), _jsx("small", { children: note })] }), _jsxs("span", { class: "buttons", children: [_jsx("button", { ref: cancel, type: "button", disabled: busy, onClick: onNo, children: words.cancel }), _jsxs("button", { class: "yes", type: "button", disabled: busy, onClick: onYes, children: [asked === "remove" ? _jsx(TrashIcon, {}) : null, yes] })] })] }));
+}
+function TrashIcon() {
+    return (_jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M4 7H20M9 7V4.5H15V7M6.5 7L7.5 20H16.5L17.5 7M10.5 11V16M13.5 11V16" }) }));
+}
+// The gap between the menu and its button, and the least margin it keeps from the window's edges.
+const menuGap = 4;
+const edge = 8;
+/** Puts a menu under its button, its right edges aligned, or above the button when it would go past the window's bottom. */
+function placeUnder(menu, anchor) {
+    const button = anchor.getBoundingClientRect();
+    const box = menu.getBoundingClientRect();
+    const below = button.bottom + menuGap + box.height <= window.innerHeight - edge;
+    menu.style.top = `${below ? button.bottom + menuGap : Math.max(edge, button.top - menuGap - box.height)}px`;
+    menu.style.left = `${Math.max(edge, button.right - box.width)}px`;
+}
+/** Who played a game listed, as its analysis names them, «Stefano – Opus 5.5 · xhigh», and the player's side when they played one. */
+function namedSides(item, you, accounts, ai, text) {
+    const model = item.aiModel === undefined ? ai : signature(item.aiModel.model, item.aiModel.effort);
+    const sides = studiedSides(tagsOf(item), you, model, text.sides, accounts);
+    const side = playerIn(sides);
+    return { sides: `${sides.white.name} – ${sides.black.name}`, ...(side === undefined ? {} : { you: side }) };
+}
+/** What the search looks through in a row: who played, the models, the date, the opening and its variation, how it went and whether it is reviewed. */
+function searchText(item, sides, outcome, text) {
+    const words = text.study;
+    const state = item.reviewed ? words.reviewed : words.unreviewed;
+    const went = outcome === undefined ? undefined : words.outcome[outcome];
+    return [sides, item.aiModel?.model, by(item), item.annotator?.model, dayOf(item.date, text.language), item.opening, scoreOf(item.result), went, state].join(" ");
+}
+/** How a game went for the player, as chess.com marks it: a green square with a plus, a red one with a minus, a grey one with an equals sign. */
+function OutcomeBadge({ outcome, words }) {
+    return (_jsxs("svg", { class: `outcome ${outcome}`, viewBox: "0 0 16 16", role: "img", "aria-label": words.outcome[outcome], children: [_jsx("title", { children: words.outcome[outcome] }), _jsx("rect", { width: "16", height: "16", rx: "4" }), _jsx("path", { d: outcomeSigns[outcome] })] }));
+}
+/** A game the AI reviewed: its speech bubble, and the model that wrote the review when the tags say it. */
+function Reviewed({ by, words }) {
+    return (_jsxs("span", { class: "state reviewed", title: by === undefined ? words.reviewed : `${words.reviewed}: ${by}`, children: [_jsx("svg", { class: "icon", viewBox: "0 0 24 24", role: "img", "aria-label": words.reviewed, children: _jsx("path", { d: "M5 5H19V15.5H11L7 19.5V15.5H5Z" }) }), by === undefined ? null : _jsx("span", { children: by })] }));
+}
+const outcomeSigns = { won: "M5 8h6M8 5v6", lost: "M5 8h6", drawn: "M5 6.5h6M5 9.5h6" };
+/** The tags of a game listed that name its sides. */
+function tagsOf(item) {
+    return { White: item.white, Black: item.black, ...(item.site === undefined ? {} : { Site: item.site }) };
+}
+/** Who reviewed a game, «Opus 5.5 · high», when its tags say it (D-81). */
+function by(item) {
+    return item.annotator === undefined ? undefined : signature(item.annotator.model, item.annotator.effort);
+}
+/** A result as the row shows it: 1–0, 0–1, ½–½ or *. */
+function scoreOf(result) {
+    return result === "1/2-1/2" ? "½–½" : result.replace("-", "–");
+}
+/** How a game went for the player: won, lost or drawn; nothing for a game without a result. */
+function outcomeOf(result, you) {
+    if (result === "1/2-1/2") {
+        return "drawn";
+    }
+    return result === "1-0" || result === "0-1" ? (result === "1-0") === (you === "white") ? "won" : "lost" : undefined;
+}
+/** A PGN date, 2026.11.04, as the player reads it: «4 nov», with the year when it is not this one. */
+function dayOf(date, language) {
+    const [, year, month, day] = /^(\d{4})\.(\d{2})\.(\d{2})$/.exec(date ?? "") ?? [];
+    if (year === undefined || month === undefined || day === undefined) {
+        return date;
+    }
+    const when = new Date(Number(year), Number(month) - 1, Number(day));
+    return when.toLocaleDateString(language, { day: "numeric", month: "short", ...(when.getFullYear() === new Date().getFullYear() ? {} : { year: "numeric" }) });
+}
+/** A deletion asked of the server: undefined once done, else why it refused. */
+async function deletion(route, game) {
+    try {
+        const response = await fetch(route, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ game }) });
+        return response.ok ? undefined : (await response.json()).error ?? response.statusText;
+    }
+    catch (error) {
+        return error.message;
+    }
+}
+/** Closes a menu, or a row's question, at a click outside it or at Escape, which would otherwise close the whole dialog. */
+function useClosing(open, close) {
+    useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        const outside = (event) => {
+            if (!event.target.closest(".row-menu, .row-actions, .ask")) {
+                close();
+            }
+        };
+        const escape = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                close();
+            }
+        };
+        document.addEventListener("pointerdown", outside);
+        document.addEventListener("keydown", escape, true);
+        return () => {
+            document.removeEventListener("pointerdown", outside);
+            document.removeEventListener("keydown", escape, true);
+        };
+    }, [open]);
+}
+/** The analyses of the player's folder, read once the dialog opens and again on demand; none while they come, or when the server cannot give them. */
+function useAnalyses() {
+    const [analyses, setAnalyses] = useState([]);
+    const [reads, setReads] = useState(0);
+    useEffect(() => {
+        void fetch("/api/analyses")
+            .then(async (response) => response.ok ? await response.json() : [])
+            .catch(() => [])
+            .then(setAnalyses);
+    }, [reads]);
+    return [analyses, () => setReads((count) => count + 1)];
+}

package/dist/page/dialogs/dialog.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useRef } from "preact/hooks";
+/** A dialog over the page, as the settings' one: Esc and a click outside close it; a step inside it goes back with the arrow beside its title. */
+export function Dialog({ open, title, onBack, onClose, text, children }) {
+    const dialog = useRef(null);
+    useEffect(() => {
+        const element = dialog.current;
+        if (open && !element.open) {
+            element.showModal();
+            // The field marked autofocus takes the focus, which the dialog itself would keep.
+            element.querySelector("[autofocus]")?.focus();
+        }
+        else if (!open && element.open) {
+            element.close();
+        }
+    }, [open]);
+    // A click on the backdrop reaches the dialog itself, as one on its padding does: only the first is outside its box.
+    const closeOutside = (event) => {
+        const box = dialog.current.getBoundingClientRect();
+        const inside = event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;
+        if (event.target === dialog.current && !inside) {
+            onClose();
+        }
+    };
+    return (_jsxs("dialog", { ref: dialog, class: "dialog", "aria-label": title, onClose: onClose, onClick: closeOutside, children: [_jsxs("header", { children: [onBack === undefined ? null : (_jsx("button", { class: "icon-button", type: "button", title: text.profile.back, "aria-label": text.profile.back, onClick: onBack, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M15 6L9 12L15 18" }) }) })), _jsx("h2", { children: title }), _jsx("button", { class: "icon-button", type: "button", title: text.close, "aria-label": text.close, onClick: onClose, children: _jsx("svg", { class: "icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M6 6L18 18M18 6L6 18" }) }) })] }), open ? children : null] }));
+}