nexus-shared 3.2.0 → 4.1.0

package/dist/Components/Dashboards/DashboardBoard.js

@@ -0,0 +1,594 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconCheck, iconChevronDown, iconGripVertical, iconLayoutGrid, iconPencil, iconPlus, iconRefresh, iconX, InlineIcon } from "nexus-icons";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { addableWidgets, createWidgetBatcher, drawableWidgets, drawnItems, mergeHidden, moveItem, neighbourInColumn, normaliseLayout, sameLayout, WIDGET_SIZES, WIDGET_SPANS, widgetAtPoint, widgetDataEmpty, widgetNeedsData, widgetSizeLabel, } from "../../Helpers/DashboardHelpers.js";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { Button } from "../Documents/Button.js";
+import { Menu } from "../Documents/Menu.js";
+import { SplitButton } from "../Documents/SplitButton.js";
+import { Popup } from "../Layouts/Popup.js";
+import { WidgetFrame, WidgetNavigateContext } from "./WidgetFrame.js";
+const DRAG_THRESHOLD = 4;
+// The board looks for widgets whose refresh time has passed this often, while the page is in view.
+const REFRESH_TICK = 5000;
+const moduleName = (module) => module.charAt(0).toUpperCase() + module.slice(1);
+const errorText = (error) => (error instanceof Error && error.message ? error.message : typeof error === "string" && error ? error : "This could not be read.");
+/**
+ * A dashboard of widgets on a 12-column grid, for one place (the Home, a module's dashboard). Each widget takes a size
+ * preset (S 3×1, M 6×2, L 6×4, W 12×2, T 12×4), the grid fills every gap (`grid-auto-flow: dense`), and a layout is
+ * an ordered list of `{ code, size }`; on a phone every widget is the full width, in order. Widgets load only when near
+ * the screen, each module asked once per draw (`loadModule`), kept for the page's life or their `refresh` seconds.
+ *
+ * Customise turns on edit mode: move by dragging a widget's handle or with the arrow keys on a focused widget, Enter or
+ * Space for its size menu (only its sizes), Delete to remove it; Add widget opens a drawer of the widgets this place
+ * may hold, by module; Save, Cancel, Reset to default. A save another window beat (`stale`) shows the layout saved
+ * there and says so.
+ *
+ * @example
+ * <DashboardBoard place="home" widgets={WIDGETS} canSee={canSee} layout={saved?.items} version={saved?.version}
+ *   defaultLayout={HOME_DEFAULT} loadModule={loadWidgets} onSave={saveLayout} onReset={resetLayout} />
+ */
+export function DashboardBoard({ place, placeModule = place, widgets, canSee, layout, version = null, defaultLayout, onSave, onReset, canCustomise = true, canSaveCompanyDefault = false, onSaveCompanyDefault, loadModule, initialData, moduleLabel = moduleName, onNavigate, title, actions, loadMargin = "200px", className, }) {
+    const drawable = useMemo(() => drawableWidgets(widgets, placeModule, canSee), [widgets, placeModule, canSee]);
+    const toLayout = useCallback((items) => normaliseLayout(items, widgets), [widgets]);
+    // What is saved: the person's layout, else the default. It follows the props when the app gives a new one.
+    const [saved, setSaved] = useState(() => ({
+        layout: toLayout(layout ?? defaultLayout),
+        version,
+        own: Boolean(layout),
+    }));
+    const propsKey = useRef({ layout, version, defaultLayout });
+    useEffect(() => {
+        const last = propsKey.current;
+        if (last.layout === layout && last.version === version && last.defaultLayout === defaultLayout)
+            return;
+        propsKey.current = { layout, version, defaultLayout };
+        setSaved({
+            layout: toLayout(layout ?? defaultLayout),
+            version,
+            own: Boolean(layout),
+        });
+    }, [layout, version, defaultLayout, toLayout]);
+    // Edit mode: the drawn items being edited, and whether Reset was pressed since.
+    const [draft, setDraft] = useState(null);
+    const [resetting, setResetting] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [notice, setNotice] = useState(null);
+    const [announce, setAnnounce] = useState("");
+    const [adding, setAdding] = useState(false);
+    const addedRef = useRef(null);
+    const editing = draft !== null;
+    const items = editing ? draft : drawnItems(saved.layout, drawable);
+    /* Data */
+    const loadModuleRef = useRef(loadModule);
+    loadModuleRef.current = loadModule;
+    const batcher = useMemo(() => {
+        const made = createWidgetBatcher((module, codes) => {
+            const load = loadModuleRef.current;
+            if (!load)
+                return Promise.reject(new Error("This board has no loadModule."));
+            return load(module, codes);
+        });
+        for (const [code, data] of Object.entries(initialData ?? {}))
+            made.prime(code, data);
+        return made;
+        // The cache lives as long as the board: initialData is read once.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const [states, setStates] = useState({});
+    const statesRef = useRef(states);
+    statesRef.current = states;
+    const drawableRef = useRef(drawable);
+    drawableRef.current = drawable;
+    const itemsRef = useRef(items);
+    itemsRef.current = items;
+    // Widgets near the screen now, kept by the one IntersectionObserver.
+    const nearRef = useRef(new Set());
+    const setState = useCallback((code, next) => {
+        setStates(previous => ({
+            ...previous,
+            [code]: typeof next === "function" ? next(previous[code]) : next,
+        }));
+    }, []);
+    /** The state a widget is drawn in: its own, else ready from data kept (read with the page), else waiting. */
+    const stateOf = useCallback((code) => {
+        const own = states[code];
+        if (own)
+            return own;
+        const kept = batcher.cached(code);
+        return kept ? { status: "ready", data: kept.data, at: kept.at } : { status: "idle" };
+    }, [states, batcher]);
+    const load = useCallback((code, options = {}) => {
+        const widget = drawableRef.current.get(code);
+        if (!widget || !widgetNeedsData(widget))
+            return;
+        const size = itemsRef.current.find(item => item.code === code)?.size ?? widget.sizes[0];
+        const had = statesRef.current[code] ??
+            (batcher.cached(code)
+                ? {
+                    status: "ready",
+                    data: batcher.cached(code).data,
+                    at: batcher.cached(code).at,
+                }
+                : undefined);
+        if (!options.force && batcher.isFresh(widget)) {
+            const kept = batcher.cached(code);
+            if (had?.status !== "ready" || had.at !== kept.at || had.stale)
+                setState(code, { status: "ready", data: kept.data, at: kept.at });
+            return;
+        }
+        const showing = had?.status === "ready";
+        setState(code, showing ? { ...had, refreshing: true, stale: false } : { status: "loading" });
+        batcher.request(widget, { place, size }, { force: options.force }).then(data => setState(code, {
+            status: "ready",
+            data,
+            at: batcher.cached(code)?.at ?? Date.now(),
+        }), error => setState(code, previous => (options.background && previous?.status === "ready" ? { ...previous, refreshing: false } : { status: "failed", message: errorText(error) })));
+    }, [batcher, place, setState]);
+    // One IntersectionObserver for the board: a widget loads when it comes near the screen.
+    const elementsRef = useRef(new Map());
+    const observerRef = useRef(null);
+    const loadRef = useRef(load);
+    loadRef.current = load;
+    useEffect(() => {
+        if (typeof IntersectionObserver === "undefined") {
+            // No observer (an old browser, a test page): everything counts as near.
+            for (const code of elementsRef.current.keys()) {
+                nearRef.current.add(code);
+                loadRef.current(code);
+            }
+            return;
+        }
+        const observer = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                const code = entry.target.dataset.code;
+                if (!code)
+                    continue;
+                if (!entry.isIntersecting) {
+                    nearRef.current.delete(code);
+                    continue;
+                }
+                nearRef.current.add(code);
+                const state = statesRef.current[code];
+                if (!state || state.status === "idle" || state.stale)
+                    loadRef.current(code);
+            }
+        }, 
+        // scrollMargin widens the scrollers between (an admin shell's page area), where rootMargin reaches only the window.
+        {
+            rootMargin: `${loadMargin} 0px`,
+            scrollMargin: loadMargin,
+        });
+        observerRef.current = observer;
+        for (const element of elementsRef.current.values())
+            observer.observe(element);
+        return () => {
+            observer.disconnect();
+            observerRef.current = null;
+        };
+    }, [loadMargin]);
+    const refCallbacks = useRef(new Map());
+    const refFor = (code) => {
+        let callback = refCallbacks.current.get(code);
+        if (!callback) {
+            callback = element => {
+                const before = elementsRef.current.get(code);
+                if (before && before !== element) {
+                    observerRef.current?.unobserve(before);
+                    elementsRef.current.delete(code);
+                    nearRef.current.delete(code);
+                }
+                if (element) {
+                    elementsRef.current.set(code, element);
+                    observerRef.current?.observe(element);
+                }
+            };
+            refCallbacks.current.set(code, callback);
+        }
+        return callback;
+    };
+    // A widget whose refresh time has passed is read again while it is near the screen and the page is in view.
+    const anyRefresh = items.some(item => (drawable.get(item.code)?.refresh ?? 0) > 0);
+    useEffect(() => {
+        if (!anyRefresh)
+            return;
+        const timer = window.setInterval(() => {
+            if (document.visibilityState === "hidden")
+                return;
+            for (const code of nearRef.current) {
+                const widget = drawableRef.current.get(code);
+                const state = statesRef.current[code];
+                if (!widget?.refresh || state?.status !== "ready" || state.refreshing || batcher.isFresh(widget))
+                    continue;
+                loadRef.current(code, { background: true });
+            }
+        }, REFRESH_TICK);
+        return () => window.clearInterval(timer);
+    }, [anyRefresh, batcher]);
+    /** The board's Refresh: everything near the screen read again now, the rest when it comes near. */
+    function refreshAll() {
+        batcher.clear();
+        setStates(previous => {
+            const next = { ...previous };
+            for (const [code, state] of Object.entries(previous))
+                if (!nearRef.current.has(code) && state.status === "ready")
+                    next[code] = { ...state, stale: true };
+            return next;
+        });
+        for (const code of nearRef.current)
+            load(code, { force: true });
+        setAnnounce("Refreshing the dashboard.");
+    }
+    /* Editing */
+    function startEditing() {
+        setDraft(drawnItems(saved.layout, drawable));
+        setResetting(false);
+        setNotice(null);
+        setAnnounce("Customising: drag a widget's handle, or focus a widget and use the arrow keys. Enter for its size, Delete to remove it.");
+    }
+    function cancelEditing() {
+        setDraft(null);
+        setResetting(false);
+        setAdding(false);
+        setAnnounce("Changes cancelled.");
+    }
+    function changeDraft(next) {
+        setDraft(next);
+        setResetting(false);
+    }
+    function resetDraft() {
+        setDraft(drawnItems(toLayout(defaultLayout), drawable));
+        setResetting(true);
+        setAnnounce("The default layout is shown. Save to keep it.");
+    }
+    function applyAnswer(result, savedLayout, own) {
+        if (result.status === "saved") {
+            setSaved({
+                layout: toLayout(result.layout ?? savedLayout),
+                version: result.version,
+                own,
+            });
+            setNotice(null);
+            setAnnounce("Layout saved.");
+            return true;
+        }
+        if (result.status === "stale") {
+            setSaved({
+                layout: toLayout(result.layout),
+                version: result.version,
+                own: true,
+            });
+            setNotice({
+                tone: "info",
+                text: "Changed in another window: the layout saved there is shown.",
+            });
+            setAnnounce("Changed in another window: the layout saved there is shown.");
+            return true;
+        }
+        setNotice({
+            tone: "danger",
+            text: result.message || "The layout could not be saved.",
+        });
+        return false;
+    }
+    async function save() {
+        if (!draft || busy)
+            return;
+        const reset = resetting && sameLayout(draft, drawnItems(toLayout(defaultLayout), drawable));
+        const full = reset ? toLayout(defaultLayout) : mergeHidden(saved.layout, draft, drawable);
+        setBusy(true);
+        try {
+            let result;
+            if (reset && onReset)
+                result = await onReset(saved.version);
+            else if (onSave)
+                result = await onSave(full, saved.version);
+            else
+                result = { status: "saved", version: saved.version };
+            if (applyAnswer(result, full, !reset || !onReset)) {
+                setDraft(null);
+                setResetting(false);
+            }
+        }
+        catch (error) {
+            setNotice({
+                tone: "danger",
+                text: errorText(error) === "This could not be read." ? "The layout could not be saved." : errorText(error),
+            });
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function saveCompanyDefault() {
+        if (!draft || busy || !onSaveCompanyDefault)
+            return;
+        setBusy(true);
+        try {
+            const result = await onSaveCompanyDefault(mergeHidden(saved.layout, draft, drawable));
+            if (result && result.status === "failed")
+                setNotice({
+                    tone: "danger",
+                    text: result.message || "The company's default could not be saved.",
+                });
+            else {
+                setNotice({
+                    tone: "success",
+                    text: "Saved as the company's default for this place.",
+                });
+                setAnnounce("Saved as the company's default for this place.");
+            }
+        }
+        catch (error) {
+            setNotice({ tone: "danger", text: errorText(error) });
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    const titleOf = (code) => drawable.get(code)?.title ?? code;
+    function moveTo(code, to) {
+        if (!draft)
+            return;
+        const from = draft.findIndex(item => item.code === code);
+        if (from < 0 || to === from || to < 0 || to >= draft.length)
+            return;
+        changeDraft(moveItem(draft, from, to));
+        setAnnounce(`${titleOf(code)}: position ${to + 1} of ${draft.length}.`);
+    }
+    function resize(code, size) {
+        if (!draft)
+            return;
+        changeDraft(draft.map(item => (item.code === code ? { ...item, size } : item)));
+        setAnnounce(`${titleOf(code)}: ${widgetSizeLabel(size)}.`);
+    }
+    function remove(code) {
+        if (!draft)
+            return;
+        const index = draft.findIndex(item => item.code === code);
+        const next = draft.filter(item => item.code !== code);
+        changeDraft(next);
+        setAnnounce(`${titleOf(code)} removed.`);
+        // The focus goes to the widget that took its place, else the one before, else Add widget.
+        const focusCode = next[Math.min(index, next.length - 1)]?.code;
+        requestAnimationFrame(() => {
+            const target = focusCode ? elementsRef.current.get(focusCode) : addButtonRef.current;
+            target?.focus({ preventScroll: false });
+        });
+    }
+    function add(widget) {
+        if (!draft || draft.some(item => item.code === widget.code))
+            return;
+        changeDraft([...draft, { code: widget.code, size: widget.sizes[0] }]);
+        addedRef.current = widget.code;
+        setAnnounce(`${widget.title} added at the end.`);
+    }
+    function closeAdding() {
+        setAdding(false);
+    }
+    // Once the Add drawer has gone (after its fade, when animations are on), the widget added last is shown, with the
+    // focus on it; before that the page behind the drawer cannot take the focus.
+    function afterAdding() {
+        const code = addedRef.current;
+        addedRef.current = null;
+        const element = code ? elementsRef.current.get(code) : null;
+        if (!element)
+            return;
+        element.scrollIntoView({ block: "nearest" });
+        element.focus({ preventScroll: true });
+    }
+    /** The boxes of the drawn widgets where the grid puts them, without a drag's offset. */
+    function rects() {
+        const grid = gridRef.current;
+        const box = grid?.getBoundingClientRect();
+        return itemsRef.current.map(item => {
+            const element = elementsRef.current.get(item.code);
+            if (!element || !box)
+                return { left: 0, top: 0, width: 0, height: 0 };
+            return {
+                left: box.left + element.offsetLeft,
+                top: box.top + element.offsetTop,
+                width: element.offsetWidth,
+                height: element.offsetHeight,
+            };
+        });
+    }
+    // Keyboard, on a focused widget in edit mode: arrows move it, Enter or Space opens its size menu, Delete removes it.
+    function onWidgetKeyDown(event, code) {
+        if (!draft || event.defaultPrevented)
+            return;
+        const own = event.currentTarget;
+        const onHandle = event.target instanceof Element && event.target.closest(".nx-widget__grip");
+        if (event.target !== own && !onHandle)
+            return;
+        const index = draft.findIndex(item => item.code === code);
+        let to = null;
+        if (event.key === "ArrowLeft")
+            to = index - 1;
+        else if (event.key === "ArrowRight")
+            to = index + 1;
+        else if (event.key === "ArrowUp" || event.key === "ArrowDown")
+            to = neighbourInColumn(rects(), index, event.key === "ArrowUp" ? "up" : "down") ?? (event.key === "ArrowUp" ? index - 1 : index + 1);
+        else if (event.key === "Home")
+            to = 0;
+        else if (event.key === "End")
+            to = draft.length - 1;
+        else if ((event.key === "Enter" || event.key === " ") && !onHandle) {
+            event.preventDefault();
+            own.querySelector(".nx-widget__size")?.click();
+            return;
+        }
+        else if (event.key === "Delete" || event.key === "Backspace") {
+            event.preventDefault();
+            remove(code);
+            return;
+        }
+        if (to === null)
+            return;
+        event.preventDefault();
+        moveTo(code, to);
+        // The widget keeps the focus where it went, in view.
+        requestAnimationFrame(() => elementsRef.current.get(code)?.scrollIntoView({ block: "nearest" }));
+    }
+    /* Drag: a widget's head (its handle) moves it; the others make room as it passes over them. */
+    const gridRef = useRef(null);
+    const addButtonRef = useRef(null);
+    const [dragging, setDragging] = useState(null);
+    const stopListeningRef = useRef(null);
+    useEffect(() => () => stopListeningRef.current?.(), []);
+    const dragRef = useRef(null);
+    // Where the dragged widget is drawn: under the pointer, from wherever the grid has put its slot now.
+    const placeDragged = useCallback(() => {
+        const drag = dragRef.current;
+        const grid = gridRef.current;
+        if (!drag?.moving || !grid)
+            return;
+        const element = elementsRef.current.get(drag.code);
+        if (!element)
+            return;
+        const box = grid.getBoundingClientRect();
+        element.style.translate = `${drag.pointer.x - drag.grab.x - (box.left + element.offsetLeft)}px ${drag.pointer.y - drag.grab.y - (box.top + element.offsetTop)}px`;
+    }, []);
+    useLayoutEffect(placeDragged);
+    function onHeadPointerDown(event, code) {
+        if (!draft || event.button !== 0 || !event.isPrimary || busy)
+            return;
+        const target = event.target instanceof Element ? event.target : null;
+        if (target?.closest("button:not(.nx-widget__grip), a[href], [role=menu], [popover]"))
+            return;
+        const element = elementsRef.current.get(code);
+        if (!element)
+            return;
+        const box = element.getBoundingClientRect();
+        dragRef.current = {
+            code,
+            pointerId: event.pointerId,
+            start: { x: event.clientX, y: event.clientY },
+            grab: { x: event.clientX - box.left, y: event.clientY - box.top },
+            pointer: { x: event.clientX, y: event.clientY },
+            before: draft,
+            over: null,
+            moving: false,
+        };
+        // Listened for on the window, not captured: the grid moves the widget in the page as it passes others, and an
+        // element moved in the document loses a pointer capture.
+        const move = (moved) => onDragMove(moved);
+        const up = (ended) => ended.pointerId === dragRef.current?.pointerId && endDrag(false);
+        const cancel = (ended) => ended.pointerId === dragRef.current?.pointerId && endDrag(true);
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+        window.addEventListener("pointercancel", cancel);
+        stopListeningRef.current = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+            window.removeEventListener("pointercancel", cancel);
+        };
+    }
+    function onDragMove(event) {
+        const drag = dragRef.current;
+        if (!drag || event.pointerId !== drag.pointerId)
+            return;
+        drag.pointer = { x: event.clientX, y: event.clientY };
+        if (!drag.moving) {
+            if (Math.hypot(event.clientX - drag.start.x, event.clientY - drag.start.y) < DRAG_THRESHOLD)
+                return;
+            drag.moving = true;
+            setDragging(drag.code);
+        }
+        const order = itemsRef.current;
+        const from = order.findIndex(item => item.code === drag.code);
+        const over = widgetAtPoint(rects(), event.clientX, event.clientY, from);
+        const overCode = over === null ? null : order[over].code;
+        // Each widget passed over makes room once: the room it gives can put it under the pointer again.
+        if (overCode !== null && overCode !== drag.over) {
+            const next = moveItem(order, from, over);
+            itemsRef.current = next;
+            setDraft(next);
+            setResetting(false);
+        }
+        drag.over = overCode;
+        placeDragged();
+    }
+    function endDrag(cancel) {
+        const drag = dragRef.current;
+        dragRef.current = null;
+        stopListeningRef.current?.();
+        stopListeningRef.current = null;
+        if (!drag)
+            return;
+        const element = elementsRef.current.get(drag.code);
+        if (element)
+            element.style.translate = "";
+        if (!drag.moving)
+            return;
+        setDragging(null);
+        if (cancel) {
+            setDraft(drag.before);
+            setAnnounce("Move cancelled.");
+            return;
+        }
+        const index = itemsRef.current.findIndex(item => item.code === drag.code);
+        setAnnounce(`${titleOf(drag.code)}: position ${index + 1} of ${itemsRef.current.length}.`);
+    }
+    // Esc during a drag puts the widget back; a scroll keeps it under the pointer.
+    useEffect(() => {
+        if (!dragging)
+            return;
+        const key = (event) => {
+            if (event.key !== "Escape")
+                return;
+            event.preventDefault();
+            endDrag(true);
+        };
+        window.addEventListener("keydown", key, true);
+        window.addEventListener("scroll", placeDragged, true);
+        return () => {
+            window.removeEventListener("keydown", key, true);
+            window.removeEventListener("scroll", placeDragged, true);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dragging]);
+    /* Drawing */
+    const groups = adding && draft ? addableWidgets(drawable, draft, placeModule) : [];
+    const allOnBoard = groups.every(group => group.widgets.every(one => one.onBoard));
+    function frameFor(item, index) {
+        const widget = drawable.get(item.code);
+        const state = stateOf(item.code);
+        const needsData = widgetNeedsData(widget);
+        const frameState = !needsData ? "ready" : state.status === "ready" ? (widgetDataEmpty(widget, state.data) ? "empty" : "ready") : state.status === "failed" ? "failed" : "loading";
+        const context = {
+            place,
+            size: item.size,
+            refresh: () => load(item.code, { force: true }),
+        };
+        const sizes = WIDGET_SIZES.filter(size => widget.sizes.includes(size));
+        const tools = editing ? (_jsxs("span", { className: "nx-widget__tools", children: [sizes.length > 1 && (_jsx(Menu, { kind: "radio", size: "sm", align: "end", "aria-label": `Size of ${widget.title}`, items: sizes.map(size => ({
+                        value: size,
+                        label: widgetSizeLabel(size),
+                        checked: size === item.size,
+                    })), onSelect: size => resize(item.code, size), children: _jsx(Button, { variant: "ghost", size: "sm", className: "nx-widget__size", iconEnd: _jsx(InlineIcon, { icon: iconChevronDown }), "aria-label": `Size of ${widget.title}: ${widgetSizeLabel(item.size)}`, title: "Size", children: item.size }) })), _jsx(Button, { variant: "ghost", size: "sm", hoverTone: "danger", icon: _jsx(InlineIcon, { icon: iconX }), "aria-label": `Remove ${widget.title}`, title: "Remove", onClick: () => remove(item.code) })] })) : undefined;
+        return (_jsx(WidgetFrame, { ref: refFor(item.code), "data-code": item.code, "data-dragging": dragging === item.code || undefined, title: widget.title, link: editing ? undefined : widget.link, size: item.size, state: frameState, message: frameState === "failed" && state.status === "failed" ? state.message : frameState === "empty" ? widget.empty : undefined, onRetry: () => load(item.code, { force: true }), onRefresh: needsData ? () => load(item.code, { force: true }) : undefined, refreshing: state.status === "ready" && state.refreshing, inertBody: editing, tabIndex: editing ? 0 : undefined, "aria-roledescription": editing ? "widget" : undefined, "aria-label": editing ? `${widget.title}, ${widgetSizeLabel(item.size)}, position ${index + 1} of ${items.length}` : undefined, "aria-keyshortcuts": editing ? "ArrowLeft ArrowRight ArrowUp ArrowDown Enter Delete" : undefined, onKeyDown: editing ? event => onWidgetKeyDown(event, item.code) : undefined, lead: editing ? (_jsx("button", { type: "button", className: "nx-widget__grip", "aria-label": `Move ${widget.title}`, title: "Drag to move, or use the arrow keys", tabIndex: -1, children: _jsx(InlineIcon, { icon: iconGripVertical }) })) : undefined, tools: tools, onPointerDown: editing ? event => event.target instanceof Element && event.target.closest(".nx-widget__head") && onHeadPointerDown(event, item.code) : undefined, children: frameState === "ready" ? widget.render(needsData && state.status === "ready" ? state.data : undefined, context) : null }, item.code));
+    }
+    const saveLabel = resetting ? "Save the default" : "Save";
+    return (_jsx(WidgetNavigateContext, { value: onNavigate ?? null, children: _jsxs("section", { className: cx("nx-dash", className), "data-editing": editing || undefined, "aria-busy": busy || undefined, children: [_jsxs("header", { className: "nx-dash__bar", children: [title && _jsx("div", { className: "nx-dash__title", children: title }), notice && (_jsxs("p", { className: "nx-dash__notice", "data-tone": notice.tone, role: notice.tone === "danger" ? "alert" : "status", children: [_jsx("span", { children: notice.text }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconX }), "aria-label": "Dismiss", onClick: () => setNotice(null) })] })), _jsx("div", { className: "nx-dash__actions", children: editing ? (_jsxs(_Fragment, { children: [_jsx(Button, { ref: addButtonRef, size: "sm", icon: _jsx(InlineIcon, { icon: iconPlus }), onClick: () => setAdding(true), disabled: busy, children: "Add widget" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: resetDraft, disabled: busy, children: "Reset to default" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: cancelEditing, disabled: busy, children: "Cancel" }), canSaveCompanyDefault && onSaveCompanyDefault ? (_jsx(SplitButton, { size: "sm", fixed: true, loading: busy, menuLabel: "More ways to save", options: [
+                                            {
+                                                value: "mine",
+                                                label: saveLabel,
+                                                icon: _jsx(InlineIcon, { icon: iconCheck }),
+                                            },
+                                            {
+                                                value: "company",
+                                                label: "Save as the company's default",
+                                                description: "Everyone without a layout of their own sees it here.",
+                                            },
+                                        ], onAction: value => void (value === "company" ? saveCompanyDefault() : save()) })) : (_jsx(Button, { variant: "primary", size: "sm", icon: _jsx(InlineIcon, { icon: iconCheck }), loading: busy, onClick: () => void save(), children: saveLabel }))] })) : (_jsxs(_Fragment, { children: [actions, _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconRefresh }), onClick: refreshAll, children: "Refresh" }), canCustomise && (_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconPencil }), onClick: startEditing, children: "Customise" }))] })) })] }), items.length > 0 ? (_jsx("div", { ref: gridRef, className: "nx-dash__grid", "data-dragging": dragging ? "" : undefined, children: items.map(frameFor) })) : (_jsxs("div", { className: "nx-dash__empty", children: [_jsx(InlineIcon, { icon: iconLayoutGrid }), _jsx("p", { children: editing ? "No widgets on this dashboard. Add one to start." : "Nothing on this dashboard yet." }), editing ? (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconPlus }), onClick: () => setAdding(true), children: "Add widget" })) : (canCustomise && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconPencil }), onClick: startEditing, children: "Customise" })))] })), _jsx("p", { className: "nx-visually-hidden", "aria-live": "polite", children: announce }), _jsxs(Popup, { open: adding, drawer: true, size: "sm", title: "Add widget", icon: _jsx(InlineIcon, { icon: iconPlus }), onClose: closeAdding, onClosed: afterAdding, footer: _jsx(Button, { variant: "primary", size: "sm", onClick: closeAdding, children: "Done" }), children: [(groups.length === 0 || allOnBoard) && _jsx("p", { className: "nx-dash-add__all", children: "Every widget this dashboard can hold is on it." }), groups.map(group => (_jsxs("section", { className: "nx-dash-add__group", "aria-label": typeof moduleLabel(group.module) === "string" ? moduleLabel(group.module) : group.module, children: [_jsx("h3", { className: "nx-dash-add__module", children: moduleLabel(group.module) }), _jsx("ul", { className: "nx-dash-add__list", children: group.widgets.map(({ widget, onBoard }) => (_jsxs("li", { className: "nx-dash-add__item", "data-code": widget.code, children: [_jsx(WidgetPreview, { size: widget.sizes[0] }), _jsxs("div", { className: "nx-dash-add__text", children: [_jsxs("span", { className: "nx-dash-add__title", children: [widget.icon, widget.title] }), widget.description && _jsx("span", { className: "nx-dash-add__description", children: widget.description }), _jsx("span", { className: "nx-dash-add__sizes", children: widget.sizes.map(size => WIDGET_SPANS[size].label).join(" · ") })] }), onBoard ? (_jsxs("span", { className: "nx-dash-add__on", children: [_jsx(InlineIcon, { icon: iconCheck }), " On the board"] })) : (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconPlus }), "aria-label": `Add ${widget.title}`, onClick: () => add(widget), children: "Add" }))] }, widget.code))) })] }, group.module)))] })] }) }));
+}
+/** A widget's shape in the Add list: its default size on a small 12-column grid. */
+function WidgetPreview({ size }) {
+    const span = WIDGET_SPANS[size];
+    return (_jsx("span", { className: "nx-dash-add__preview", "aria-hidden": "true", children: _jsx("span", { className: "nx-dash-add__shape", style: {
+                gridColumn: `span ${span.columns}`,
+                gridRow: `span ${span.rows}`,
+            } }) }));
+}