window.rustProxyMasonry = (() => {
    const grid = document.getElementById("dashboard-overview-grid");
    if (!grid) return { refresh() { } };
    const widgets = () => [...grid.children].filter(node => node.dataset.dashboardWidget);
    const group = node => node.classList.contains("pool-card") ? 4
        : node.classList.contains("stat") ? 0
            : node.classList.contains("overview-wide-chart") ? 2
                : node.dataset.dashboardWidget?.endsWith("_diagnostics") ? 3 : 1;

    function refresh() {
        const previous = widgets();
        // Existing layouts (without a width map) retain their historical rows.
        // Once a user moves/resizes a block, DOM order is the actual order.
        const legacy = grid.dataset.overviewLayoutMode !== "custom";
        const ordered = legacy ? previous.map((node, index) => ({ node, index }))
            .sort((a, b) => group(a.node) - group(b.node) || a.index - b.index)
            .map(item => item.node) : previous;
        if (ordered.some((node, i) => node !== previous[i])) grid.append(...ordered);
        let lastGroup = -1;
        for (const node of ordered) {
            for (const key of ["position", "left", "top", "width", "minHeight", "gridColumnStart",
                "gridColumnEnd", "gridRowStart", "gridRowEnd", "alignSelf"]) node.style[key] = "";
            node.classList.remove("overview-row-start");
            if (node.hidden || !legacy) continue;
            const current = group(node);
            if (current !== lastGroup) node.classList.add("overview-row-start");
            lastGroup = current;
        }
        grid.classList.remove("is-packed");
        grid.classList.add("is-aligned");
        grid.style.height = "";
    }
    refresh();
    return {
        refresh,
        groupFor(id) {
            const node = widgets().find(item => item.dataset.dashboardWidget === id);
            return node ? group(node) : -1;
        },
    };
})();