nexus-shared 2.0.0 → 3.1.0

package/dist/Helpers/PopoverHelpers.d.ts

@@ -1,19 +1,30 @@
+/** Which side of its anchor a panel opened on: `below` carries its arrow on its top edge, `above` on its bottom edge. */
+export type PanelSide = "below" | "above";
 export type PopoverAlign = "start" | "end";
 export interface PlaceUnderAnchorOptions {
     /** Which edge of the anchor the panel lines up with. Default `start` (the left edge). */
     align?: PopoverAlign;
-    /** Space between the anchor and the panel, in pixels. Default 4. */
+    /** Space between the anchor and the panel, in pixels. Default 4, or the arrow's reach while it is drawn. */
     gap?: number;
     /** Space kept from the window's edges, in pixels. Default 8. */
     margin?: number;
+    /**
+     * Draws an arrow on the panel's edge, aimed at the middle of the anchor. Default true: a panel opened from a button
+     * says which button. Pass false for a panel that opens flush under a field and is read as part of it.
+     */
+    arrow?: boolean;
+    /**
+     * What the arrow points at, when the panel lines up with more than that: the half of a split button that opened it.
+     * Default: the anchor itself.
+     */
+    arrowAt?: DOMRect;
 }
 /**
- * Places a panel under an anchor, or above it when there is no room below, aligned to the anchor's start or end
- * edge and kept inside the window. Returns whether the panel went above.
+ * Places a panel under an anchor, or above it when it fits only there, or on the side with more room when it fits on
+ * neither; aligned to the anchor's start or end edge and kept inside the window, with an arrow aimed at the anchor. A
+ * panel that scrolls (`.nx-popover__scroll`) is never taller than the room on its side. Returns whether it went above.
  */
 export declare function placeUnderAnchor(panel: HTMLElement, anchor: DOMRect, options?: PlaceUnderAnchorOptions): boolean;
-/** Which side of its anchor a list panel opened on. */
-export type PanelSide = "below" | "above";
 export interface PlaceListPanelOptions {
     /** The side of an earlier call, kept while it has `minHeight` of room, so a list that loads more items does not jump across its anchor. */
     side?: PanelSide;
@@ -30,14 +41,40 @@ export interface PlaceListPanelOptions {
  * Places a list panel under its anchor, at least as wide as the anchor, or above it when the room below is short and
  * there is more above. The panel's height is capped to the room on its side, so a long list scrolls inside the window
  * instead of running past it. Returns the side, to pass back while the panel stays open.
+ *
+ * It draws no arrow: the panel is as wide as the field and sits flush under it, so it is already read as that field's
+ * list, and an arrow over a field's own border would look like a fault.
  */
 export declare function placeListPanel(panel: HTMLElement, anchor: DOMRect, options?: PlaceListPanelOptions): PanelSide;
+export interface PlaceAtPointOptions {
+    /** Space kept from the window's edges, in pixels. Default 8. */
+    margin?: number;
+    /**
+     * Draws an arrow with its tip on the point, so the menu says where it was opened. Default true. The panel then
+     * stands the arrow's reach away from the point, and its corner no longer sits on it.
+     */
+    arrow?: boolean;
+}
 /**
  * Places a panel at a point, such as where the user right-clicked: to the right of and below the point when there
- * is room, otherwise to the left of or above it, and never past the window's edges.
+ * is room, otherwise to the left of or above it, and never past the window's edges. With an arrow, the panel is set
+ * back far enough along both axes for the arrow's tip to land on the point. A panel that scrolls is capped to the
+ * room on its side, as under an anchor.
+ */
+export declare function placeAtPoint(panel: HTMLElement, x: number, y: number, options?: PlaceAtPointOptions): void;
+/**
+ * Runs `place` again, once per frame at most, while the page scrolls, the window changes size, or `panel` does (its
+ * content grew). Returns the stop function. A frame later, never inside the observer, so a panel that `place` resizes
+ * is measured once more and settles instead of looping.
+ */
+export declare function followAnchor(place: () => void, panel?: Element): () => void;
+/**
+ * Shows a panel with its scroller (`.nx-popover__scroll`) at the top. The browser keeps where a panel was scrolled
+ * while it was shut, and a list that opens part-way down has lost its heading and its first rows. Does nothing on
+ * browsers without popover support.
  */
-export declare function placeAtPoint(panel: HTMLElement, x: number, y: number, margin?: number): void;
-/** Runs `place` again, once per frame at most, while the page scrolls or the window changes size. Returns the stop function. */
-export declare function followAnchor(place: () => void): () => void;
+export declare function showPanel(panel: HTMLElement): void;
 /** Whether the popover is shown. Safe on browsers without popover support, where it is never "open". */
 export declare function isPopoverOpen(panel: HTMLElement | null): boolean;
+/** How far the arrow reaches past the panel's edge: its depth, less the panel's border it is drawn over. */
+export declare const ARROW_REACH: number;

package/dist/Helpers/PopoverHelpers.js

@@ -2,29 +2,42 @@
  * Placing native popovers. A panel is a fixed [popover] element; these helpers set its top and left once it is shown,
  * keep it inside the window, and move it again while the page scrolls. They measure offsetWidth and offsetHeight,
  * which ignore the panel's opening transform.
+ *
+ * A panel that belongs to a button or to a place also gets an arrow, so the panel is read as that button's panel and
+ * not as a dialog from nowhere. These helpers work out where the arrow goes, because they are the only code that
+ * knows both rectangles; `.nx-popover` draws it from what they write (see "The arrow" below).
  */
 /**
- * Places a panel under an anchor, or above it when there is no room below, aligned to the anchor's start or end
- * edge and kept inside the window. Returns whether the panel went above.
+ * Places a panel under an anchor, or above it when it fits only there, or on the side with more room when it fits on
+ * neither; aligned to the anchor's start or end edge and kept inside the window, with an arrow aimed at the anchor. A
+ * panel that scrolls (`.nx-popover__scroll`) is never taller than the room on its side. Returns whether it went above.
  */
 export function placeUnderAnchor(panel, anchor, options = {}) {
-    const { align = "start", gap = 4, margin = 8 } = options;
-    const width = panel.offsetWidth;
-    const height = panel.offsetHeight;
-    const below = anchor.bottom + gap;
-    const above = anchor.top - gap - height;
-    const fitsBelow = below + height <= window.innerHeight - margin;
-    const top = fitsBelow || above < margin ? below : above;
+    const { align = "start", margin = 8, arrow = true } = options;
+    // The arrow needs its reach between the panel and the anchor, or it would be drawn over the anchor.
+    const gap = Math.max(options.gap ?? 4, arrow ? ARROW_REACH : 0);
+    const { side, width, height } = fitToRoom(panel, window.innerHeight - anchor.bottom - gap - margin, anchor.top - gap - margin);
+    const top = side === "below" ? anchor.bottom + gap : anchor.top - gap - height;
     const wanted = align === "end" ? anchor.right - width : anchor.left;
-    const left = Math.max(margin, Math.min(wanted, window.innerWidth - width - margin));
+    // The arrow points at the middle of what it belongs to. The panel's own style is read once: this runs again on
+    // every animation frame while the page scrolls under an open panel.
+    const target = options.arrowAt ?? anchor;
+    const middle = (target.left + target.right) / 2;
+    const style = getComputedStyle(panel);
+    const left = Math.max(margin, Math.min(arrow ? centred(panel, target, wanted, width, middle, style) : wanted, window.innerWidth - width - margin));
     panel.style.top = `${Math.round(top)}px`;
     panel.style.left = `${Math.round(left)}px`;
-    return top !== below;
+    const box = { left: Math.round(left), top: Math.round(top), width, height };
+    aimArrow(panel, side, box, arrow ? { at: middle, facing: side === "below" ? target.bottom : target.top, room: gap } : null, style);
+    return side === "above";
 }
 /**
  * Places a list panel under its anchor, at least as wide as the anchor, or above it when the room below is short and
  * there is more above. The panel's height is capped to the room on its side, so a long list scrolls inside the window
  * instead of running past it. Returns the side, to pass back while the panel stays open.
+ *
+ * It draws no arrow: the panel is as wide as the field and sits flush under it, so it is already read as that field's
+ * list, and an arrow over a field's own border would look like a fault.
  */
 export function placeListPanel(panel, anchor, options = {}) {
     const { maxHeight = 360, minHeight = 180, gap = 4, margin = 8 } = options;
@@ -54,24 +67,59 @@ function setStyle(element, property, value) {
     if (element.style[property] !== value)
         element.style[property] = value;
 }
+/** The room a panel was given on its side, which a panel with a scroller reads as its tallest (`.nx-popover`). */
+const ROOM = "--nx-popover-room";
+/**
+ * Picks a panel's side by its whole height: below while it fits there, above while it fits only there, else the side
+ * with more room. That side's room is written on the panel, which a panel with `.nx-popover__scroll` takes as its
+ * tallest, so it ends inside the window and scrolls inside itself. Returns the side and the size it has.
+ *
+ * The whole height is the panel's own plus what its scroller hides, read without changing anything: this runs on every
+ * scroll while the panel is open, its scroller's own included, and lifting the cap to measure would throw the list
+ * back to its top.
+ */
+function fitToRoom(panel, roomBelow, roomAbove) {
+    const scroller = panel.querySelector(":scope > .nx-popover__scroll");
+    const whole = panel.offsetHeight + (scroller ? scroller.scrollHeight - scroller.clientHeight : 0);
+    const side = whole <= roomBelow || (whole > roomAbove && roomBelow >= roomAbove) ? "below" : "above";
+    const room = `${Math.max(0, Math.floor(side === "below" ? roomBelow : roomAbove))}px`;
+    if (panel.style.getPropertyValue(ROOM) !== room)
+        panel.style.setProperty(ROOM, room);
+    return { side, width: panel.offsetWidth, height: panel.offsetHeight };
+}
 /**
  * Places a panel at a point, such as where the user right-clicked: to the right of and below the point when there
- * is room, otherwise to the left of or above it, and never past the window's edges.
+ * is room, otherwise to the left of or above it, and never past the window's edges. With an arrow, the panel is set
+ * back far enough along both axes for the arrow's tip to land on the point. A panel that scrolls is capped to the
+ * room on its side, as under an anchor.
  */
-export function placeAtPoint(panel, x, y, margin = 8) {
-    const width = panel.offsetWidth;
-    const height = panel.offsetHeight;
-    let left = x;
-    let top = y;
+export function placeAtPoint(panel, x, y, options = {}) {
+    const { margin = 8, arrow = true } = options;
+    // The tip sits `lead` along the panel's edge and `ARROW_REACH` out from it, so the panel starts that much back.
+    const lead = arrow ? arrowLead(panel) : 0;
+    const reach = arrow ? ARROW_REACH : 0;
+    const { side: opens, width, height } = fitToRoom(panel, window.innerHeight - y - reach - margin, y - reach - margin);
+    let left = x - lead;
+    const top = opens === "below" ? y + reach : y - reach - height;
     if (left + width > window.innerWidth - margin)
-        left = x - width;
-    if (top + height > window.innerHeight - margin)
-        top = y - height;
-    panel.style.left = `${Math.round(Math.max(margin, Math.min(left, window.innerWidth - width - margin)))}px`;
-    panel.style.top = `${Math.round(Math.max(margin, Math.min(top, window.innerHeight - height - margin)))}px`;
+        left = x + lead - width;
+    const placed = {
+        left: Math.round(Math.max(margin, Math.min(left, window.innerWidth - width - margin))),
+        top: Math.round(Math.max(margin, Math.min(top, window.innerHeight - height - margin))),
+        width,
+        height,
+    };
+    panel.style.left = `${placed.left}px`;
+    panel.style.top = `${placed.top}px`;
+    const side = placed.top >= y ? "below" : "above";
+    aimArrow(panel, side, placed, arrow ? { at: x, facing: y, room: reach } : null);
 }
-/** Runs `place` again, once per frame at most, while the page scrolls or the window changes size. Returns the stop function. */
-export function followAnchor(place) {
+/**
+ * Runs `place` again, once per frame at most, while the page scrolls, the window changes size, or `panel` does (its
+ * content grew). Returns the stop function. A frame later, never inside the observer, so a panel that `place` resizes
+ * is measured once more and settles instead of looping.
+ */
+export function followAnchor(place, panel) {
     let frame = 0;
     const reposition = () => {
         cancelAnimationFrame(frame);
@@ -79,13 +127,104 @@ export function followAnchor(place) {
     };
     window.addEventListener("scroll", reposition, { capture: true, passive: true });
     window.addEventListener("resize", reposition);
+    const observer = new ResizeObserver(reposition);
+    if (panel)
+        observer.observe(panel);
     return () => {
         cancelAnimationFrame(frame);
         window.removeEventListener("scroll", reposition, { capture: true });
         window.removeEventListener("resize", reposition);
+        observer.disconnect();
     };
 }
+/**
+ * Shows a panel with its scroller (`.nx-popover__scroll`) at the top. The browser keeps where a panel was scrolled
+ * while it was shut, and a list that opens part-way down has lost its heading and its first rows. Does nothing on
+ * browsers without popover support.
+ */
+export function showPanel(panel) {
+    if (typeof panel.showPopover !== "function")
+        return;
+    panel.showPopover();
+    const scroller = panel.querySelector(":scope > .nx-popover__scroll");
+    if (scroller)
+        scroller.scrollTop = 0;
+}
 /** Whether the popover is shown. Safe on browsers without popover support, where it is never "open". */
 export function isPopoverOpen(panel) {
     return Boolean(panel && typeof panel.matches === "function" && panel.matches(":popover-open"));
 }
+/* ---------------------------------------------------------------------------------------------------------------
+ * The arrow
+ *
+ * An isosceles tail on the panel's edge, drawn in the panel's own border and background, so the two read as one
+ * shape in every theme: `.nx-popover[data-nx-arrow]::before` and `::after` in Nexus.Theme.Picker.css. These
+ * functions write the two things only the placement knows: which edge carries the tail (`data-nx-arrow`) and where
+ * along that edge its tip sits (`--nx-popover-arrow-x`). Both are cleared when it would point at nothing, and no
+ * component has to take part.
+ * ------------------------------------------------------------------------------------------------------------- */
+/** The arrow's base, across the panel's edge. Keep in step with `--nx-popover-arrow` in the `.nx-popover` rule. */
+const ARROW_BASE = 26;
+/** The arrow's depth, out from the panel's edge. Keep in step with `--nx-popover-arrow-depth`. */
+const ARROW_DEPTH = 11;
+/** Half the arrow's base: how far from its tip each foot stands. */
+const ARROW_HALF = ARROW_BASE / 2;
+/** How far the arrow reaches past the panel's edge: its depth, less the panel's border it is drawn over. */
+export const ARROW_REACH = ARROW_DEPTH - 1;
+/**
+ * How far along the panel's edge the arrow's tip has to stay: its own half base, the panel's rounded corner, and two
+ * pixels more, so a foot never stands on the curve and the tail is never read as a torn-off corner.
+ */
+function arrowLead(panel) {
+    const style = panel instanceof HTMLElement ? getComputedStyle(panel) : panel;
+    return (parseFloat(style.borderTopLeftRadius) || 0) + ARROW_HALF + 2;
+}
+/**
+ * Where a panel starts along its edge so that its arrow stands on the middle of the anchor.
+ *
+ * The tip may not stand on a rounded corner, so it keeps `lead` from each end of the panel. An **icon button** is
+ * narrower than two leads, so a panel lined up with it would hold the tip short of its middle: the panel slides
+ * along its edge instead, past the end of the button, by half the button's width at most.
+ *
+ * A **wide anchor keeps its alignment**, whatever the arrow can reach. A menu belongs at the start of the row,
+ * the cell, or the field it opened from - sliding it to the middle of a 900px row would move it right across the
+ * page - so the arrow aims as far as it can there and is left out when that is more than half a base off, which is
+ * what it did before any of this. The window's edges still win over both.
+ */
+function centred(panel, anchor, wanted, width, at, style) {
+    const lead = arrowLead(style);
+    // Only a button too small to be aimed at while the panel lines up with it is worth moving the panel for.
+    if (anchor.width >= lead * 2 || width < lead * 2)
+        return wanted;
+    // The far end carries a pixel more than the lead: `width` is offsetWidth, a whole number, while the panel itself
+    // is fractionally wider, which would otherwise leave the foot that much nearer the curve than the lead promises.
+    return Math.min(Math.max(wanted, at - width + lead + 1), at - lead);
+}
+/**
+ * Aims the panel's arrow, or leaves it out. The tip is kept clear of the panel's rounded corners, and the arrow is
+ * left out when it would point at nothing: the target is off the window, the panel is too narrow to carry an arrow
+ * clear of its corners, the panel was pushed along its edge until the tip is more than half a base from the target,
+ * or it was pushed away from the target across the edge.
+ */
+function aimArrow(panel, side, box, aim, drawn = getComputedStyle(panel)) {
+    if (aim) {
+        const lead = arrowLead(drawn);
+        const x = Math.min(Math.max(aim.at - box.left, lead), box.width - lead);
+        const edge = side === "below" ? box.top : box.top + box.height;
+        const tip = box.left + x;
+        const points = box.width >= lead * 2 && Math.abs(tip - aim.at) <= ARROW_HALF && Math.abs(edge - aim.facing) <= aim.room + 1;
+        if (points && onScreen(aim.facing, aim.at)) {
+            panel.dataset.nxArrow = side;
+            // An absolutely placed arrow starts at the panel's padding box, so the border it is drawn over comes off here.
+            const inside = x - (parseFloat(drawn.borderLeftWidth) || 0);
+            panel.style.setProperty("--nx-popover-arrow-x", `${Math.round(inside * 10) / 10}px`);
+            return;
+        }
+    }
+    delete panel.dataset.nxArrow;
+    panel.style.removeProperty("--nx-popover-arrow-x");
+}
+/** Whether what the arrow points at is still in the window: a button scrolled out of sight gets no arrow. */
+function onScreen(across, along) {
+    return across >= 0 && across <= window.innerHeight && along >= 0 && along <= window.innerWidth;
+}

package/dist/Helpers/PopoverHooks.d.ts

@@ -0,0 +1,24 @@
+import { type Ref, type RefObject, type ToggleEvent } from "react";
+/** What opens a panel from elsewhere, such as an item of a menu. */
+export interface PopoverPanelHandle {
+    open: () => void;
+}
+/**
+ * A `popover="auto"` panel that `open()` shows under `anchor`, aligned to its end, with the arrow: its height capped to
+ * the room on its side (its `.nx-popover__scroll` scrolls), placed again while the page moves or the panel grows, and
+ * the focus moved in as it opens (`focus` moves it, else the panel takes it). The anchor holds the focus as the panel
+ * opens, so the browser gives it back there when Esc closes the panel. `shown` turns true on the first open and stays,
+ * for content drawn only from then on.
+ *
+ * @example
+ * const { panelRef, open, onToggle } = usePopoverPanel(anchor, ref);
+ * <div ref={panelRef} popover="auto" role="dialog" tabIndex={-1} className="nx-popover" onToggle={onToggle}>
+ *   <div className="nx-popover__scroll">…</div>
+ * </div>
+ */
+export declare function usePopoverPanel(anchor: RefObject<HTMLElement | null>, ref?: Ref<PopoverPanelHandle>, focus?: () => void): {
+    panelRef: RefObject<HTMLDivElement | null>;
+    open: boolean;
+    shown: boolean;
+    onToggle: (event: ToggleEvent<HTMLDivElement>) => void;
+};

package/dist/Helpers/PopoverHooks.js

@@ -0,0 +1,62 @@
+"use client";
+import { useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { followAnchor, isPopoverOpen, placeUnderAnchor, showPanel } from "./PopoverHelpers.js";
+/**
+ * A `popover="auto"` panel that `open()` shows under `anchor`, aligned to its end, with the arrow: its height capped to
+ * the room on its side (its `.nx-popover__scroll` scrolls), placed again while the page moves or the panel grows, and
+ * the focus moved in as it opens (`focus` moves it, else the panel takes it). The anchor holds the focus as the panel
+ * opens, so the browser gives it back there when Esc closes the panel. `shown` turns true on the first open and stays,
+ * for content drawn only from then on.
+ *
+ * @example
+ * const { panelRef, open, onToggle } = usePopoverPanel(anchor, ref);
+ * <div ref={panelRef} popover="auto" role="dialog" tabIndex={-1} className="nx-popover" onToggle={onToggle}>
+ *   <div className="nx-popover__scroll">…</div>
+ * </div>
+ */
+export function usePopoverPanel(anchor, ref, focus) {
+    const panelRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [shown, setShown] = useState(false);
+    // A long panel keeps its head and its foot in the window, and its scroller takes what is left (`placeUnderAnchor`).
+    function place() {
+        const panel = panelRef.current;
+        const trigger = anchor.current;
+        if (panel && trigger)
+            placeUnderAnchor(panel, trigger.getBoundingClientRect(), { align: "end" });
+    }
+    useImperativeHandle(ref, () => ({
+        open() {
+            const panel = panelRef.current;
+            if (!panel || isPopoverOpen(panel))
+                return;
+            // Drawn first, so the panel is placed at its real size and the focus finds what it shows.
+            flushSync(() => setShown(true));
+            anchor.current?.focus({ preventScroll: true });
+            showPanel(panel);
+            place();
+            focus?.();
+            if (!panel.contains(document.activeElement))
+                panel.focus();
+        },
+    }));
+    // The panel is fixed, so it follows the anchor while it is open.
+    useLayoutEffect(() => {
+        const panel = panelRef.current;
+        if (!open || !panel)
+            return;
+        return followAnchor(place, panel);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    return {
+        panelRef,
+        open,
+        shown,
+        // A list or a calendar inside the panel toggles too, and React passes its event up: only the panel's own counts.
+        onToggle: (event) => {
+            if (event.target === event.currentTarget)
+                setOpen(event.newState === "open");
+        },
+    };
+}

package/dist/Helpers/RowsStore.d.ts

@@ -1,5 +1,5 @@
 import type { InputParams, InputValidationContext, RowsInputProps, RowValue } from "../Interfaces/FormInterfaces.ts";
-export type RowsStoreOptions<TRow extends RowValue = RowValue> = Pick<RowsInputProps<TRow>, "inputs" | "required" | "min" | "max" | "unique" | "validate" | "itemLabel" | "itemLabelPlural" | "rowKey" | "newRow" | "onRowChange"> & {
+export type RowsStoreOptions<TRow extends RowValue = RowValue> = Pick<RowsInputProps<TRow>, "inputs" | "required" | "min" | "max" | "unique" | "validate" | "itemLabel" | "itemLabelPlural" | "rowKey" | "newRow" | "onRowChange" | "deriveRows"> & {
     /** The row's name when there is no `itemLabel`: "Row" in a table, "Item" in sections. */
     fallbackItem?: string;
     /** The user's date settings, so messages write dates the way the fields show them. */
@@ -109,8 +109,13 @@ export declare class RowsStore<TRow extends RowValue = RowValue> {
     add(values?: Partial<TRow>, index?: number): string;
     /** Adds a copy of a row after it, without its id and with its radios off. Returns the copy's key. */
     duplicate(key: string): string | null;
-    /** Removes a row. A radio it had on moves to the first row left. `undoRemove` puts it back. */
-    remove(key: string): void;
+    /**
+     * Removes a row. A radio it had on moves to the first row left. `undoRemove` puts it back - unless `undo` is false: a
+     * row the code drops, such as one nothing was typed in, is not offered back.
+     */
+    remove(key: string, { undo }?: {
+        undo?: boolean;
+    }): void;
     /** Puts the last removed row back where it was. Returns its key, or `null` when there is nothing to undo. */
     undoRemove(): string | null;
     /** Moves a row to a new position. */
@@ -151,6 +156,12 @@ export declare class RowsStore<TRow extends RowValue = RowValue> {
     private checkEverything;
     /** After a change: repeated values, the rows' own message, the rows to render again, and value listeners. */
     private settle;
+    /**
+     * Values the rows' positions decide rather than the user. Every change funnels through `settle`, so this is the one
+     * place a move, an add, a remove and a keystroke all pass. The patches are written as code writes, which draws only
+     * the cells whose value really changed: a move renumbers its column and leaves focus on the row's own menu.
+     */
+    private derive;
     private bump;
     private touchAllRows;
     private emit;

package/dist/Helpers/RowsStore.js

@@ -226,8 +226,11 @@ export class RowsStore {
                 values[params.name] = false;
         return this.add(values, index + 1);
     }
-    /** Removes a row. A radio it had on moves to the first row left. `undoRemove` puts it back. */
-    remove(key) {
+    /**
+     * Removes a row. A radio it had on moves to the first row left. `undoRemove` puts it back - unless `undo` is false: a
+     * row the code drops, such as one nothing was typed in, is not offered back.
+     */
+    remove(key, { undo = true } = {}) {
         const index = this.positions.get(key);
         if (index === undefined)
             return;
@@ -245,7 +248,16 @@ export class RowsStore {
             this.write(first.key, params.name, true, "code", changed, 1);
             moved.push({ key: first.key, name: params.name });
         }
-        this.removed = { entry, index, moved };
+        if (undo)
+            this.removed = { entry, index, moved };
+        // The person's own last removal stays theirs to undo, in its place: a row dropped before it moves it up one. One
+        // that handed a radio to another row could leave two rows with it on after that undo, so then nothing is undone.
+        else if (this.removed) {
+            if (moved.length)
+                this.removed = null;
+            else if (index < this.removed.index)
+                this.removed = { ...this.removed, index: this.removed.index - 1 };
+        }
         this.messageShown = true;
         this.markUniqueDirty();
         this.settle(changed);
@@ -526,6 +538,7 @@ export class RowsStore {
     }
     /** After a change: repeated values, the rows' own message, the rows to render again, and value listeners. */
     settle(changed) {
+        this.derive(changed);
         for (const name of this.dirtyUnique)
             this.checkUnique(name, changed);
         this.dirtyUnique.clear();
@@ -535,6 +548,27 @@ export class RowsStore {
         this.refresh();
         this.emit();
     }
+    /**
+     * Values the rows' positions decide rather than the user. Every change funnels through `settle`, so this is the one
+     * place a move, an add, a remove and a keystroke all pass. The patches are written as code writes, which draws only
+     * the cells whose value really changed: a move renumbers its column and leaves focus on the row's own menu.
+     */
+    derive(changed) {
+        const derive = this.options.deriveRows;
+        if (!derive)
+            return;
+        const patches = derive(this.getValue());
+        if (!patches)
+            return;
+        this.entries.forEach((entry, index) => {
+            const patch = patches[index];
+            if (!patch)
+                return;
+            // Depth 1, so a derived value never sets `onRowChange` off: these are the store's own writes, not the user's.
+            for (const [name, value] of Object.entries(patch))
+                this.write(entry.key, name, value, "code", changed, 1);
+        });
+    }
     bump(key) {
         this.versions.set(key, (this.versions.get(key) ?? 0) + 1);
         const listeners = this.rowListeners.get(key);

package/dist/Helpers/TableColumns.d.ts

@@ -1,3 +1,10 @@
+/**
+ * The cells of the header a column stands in, from left to right. The header is one row, or — when any column names a
+ * group — a band of group headings over a row holding the headings of the grouped columns only, where a column with no
+ * group keeps its heading in the band row across both (`rowSpan`). A band says how many headings it covers with its
+ * `colSpan`, so the two rows read back as one list: the table measures the columns from it, and a drag drops among them.
+ */
+export declare function headLeafCells(head: HTMLTableSectionElement | null | undefined): HTMLElement[];
 export interface ColumnDragOptions {
     /** The heading pressed. */
     heading: HTMLElement;

package/dist/Helpers/TableColumns.js

@@ -9,18 +9,46 @@ const DRAG_THRESHOLD = 4;
 /** Pixels from the edge of the scroller where a drag scrolls the columns. */
 const EDGE = 52;
 const KEY = "data-col";
+const GROUP = "data-group";
 const DROP_BEFORE = "data-drop-before";
 const DROP_AFTER = "data-drop-after";
-/** The headings a dragged one can be dropped between: the movable ones pinned to the same side. */
-function dropTargets(heading) {
-    const row = heading.parentElement;
-    if (!row)
+/**
+ * The cells of the header a column stands in, from left to right. The header is one row, or — when any column names a
+ * group — a band of group headings over a row holding the headings of the grouped columns only, where a column with no
+ * group keeps its heading in the band row across both (`rowSpan`). A band says how many headings it covers with its
+ * `colSpan`, so the two rows read back as one list: the table measures the columns from it, and a drag drops among them.
+ */
+export function headLeafCells(head) {
+    const band = head?.rows[0];
+    if (!band)
         return [];
+    const top = [...band.cells];
+    const leaves = head?.rows[1];
+    if (!leaves)
+        return top;
+    const under = [...leaves.cells];
+    const cells = [];
+    let at = 0;
+    for (const cell of top) {
+        if (!cell.hasAttribute(GROUP))
+            cells.push(cell);
+        else
+            for (let covered = 0; covered < cell.colSpan; covered++)
+                if (under[at])
+                    cells.push(under[at++]);
+    }
+    return cells;
+}
+/**
+ * The headings a dragged one can be dropped between: the ones pinned to the same side, in the order they are drawn.
+ * They are taken from the whole header, so a column under a band and one beside it are the same list.
+ */
+function dropTargets(head, heading) {
     const pin = heading.getAttribute("data-pin") ?? "";
-    return [...row.children].filter((cell) => cell instanceof HTMLElement && cell.hasAttribute(KEY) && (cell.getAttribute("data-pin") ?? "") === pin);
+    return headLeafCells(head).filter(cell => cell.hasAttribute(KEY) && (cell.getAttribute("data-pin") ?? "") === pin);
 }
-function clearDropMarks(row) {
-    for (const cell of row?.children ?? []) {
+function clearDropMarks(head) {
+    for (const cell of head?.querySelectorAll(`[${DROP_BEFORE}], [${DROP_AFTER}]`) ?? []) {
         cell.removeAttribute(DROP_BEFORE);
         cell.removeAttribute(DROP_AFTER);
     }
@@ -31,8 +59,8 @@ function clearDropMarks(row) {
  */
 export function startColumnDrag(event, { heading, scroller, root, onDrop }) {
     const key = heading.getAttribute(KEY) ?? "";
-    const row = heading.parentElement;
-    if (!key || !row)
+    const head = heading.closest("thead");
+    if (!key || !head)
         return () => undefined;
     const pointerId = event.pointerId;
     const startX = event.clientX;
@@ -42,8 +70,8 @@ export function startColumnDrag(event, { heading, scroller, root, onDrop }) {
     let scrollBy = 0;
     let frame = 0;
     function place(x) {
-        const targets = dropTargets(heading);
-        clearDropMarks(row);
+        const targets = dropTargets(head, heading);
+        clearDropMarks(head);
         target = null;
         for (let index = 0; index < targets.length; index++) {
             const cell = targets[index];
@@ -63,7 +91,7 @@ export function startColumnDrag(event, { heading, scroller, root, onDrop }) {
             }
             // A drop where the column already sits changes nothing, so no line shows there.
             if (target.before === key || cellKey === key) {
-                clearDropMarks(row);
+                clearDropMarks(head);
                 target = null;
             }
             return;
@@ -144,7 +172,7 @@ export function startColumnDrag(event, { heading, scroller, root, onDrop }) {
             cancelAnimationFrame(frame);
         if (!dragging)
             return;
-        clearDropMarks(row);
+        clearDropMarks(head);
         heading.removeAttribute("data-dragging");
         root?.removeAttribute("data-col-drag");
         if (heading.hasPointerCapture?.(pointerId))

package/dist/Helpers/TableExport.js

@@ -38,18 +38,18 @@ export function exportTableCsv(output) {
 }
 const escapeHtml = (text) => text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
 /* Plain black on white, since the paper has no theme, and a header row that repeats on every page. */
-const PRINT_STYLE = `
-  * { box-sizing: border-box; }
-  body { margin: 16mm 12mm; color: #111; font: 11pt/1.45 system-ui, "Segoe UI", sans-serif; }
-  h1 { margin: 0 0 2mm; font-size: 15pt; }
-  p.nx-note { margin: 0 0 5mm; color: #555; font-size: 9pt; }
-  table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
-  thead { display: table-header-group; }
-  th, td { padding: 4px 6px; border-bottom: 1px solid #bbb; text-align: left; vertical-align: top; }
-  th { border-bottom: 1.5px solid #555; font-weight: 600; white-space: nowrap; }
-  td.nx-end, th.nx-end { text-align: right; }
-  td.nx-center, th.nx-center { text-align: center; }
-  tr { page-break-inside: avoid; }
+const PRINT_STYLE = `
+  * { box-sizing: border-box; }
+  body { margin: 16mm 12mm; color: #111; font: 11pt/1.45 system-ui, "Segoe UI", sans-serif; }
+  h1 { margin: 0 0 2mm; font-size: 15pt; }
+  p.nx-note { margin: 0 0 5mm; color: #555; font-size: 9pt; }
+  table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
+  thead { display: table-header-group; }
+  th, td { padding: 4px 6px; border-bottom: 1px solid #bbb; text-align: left; vertical-align: top; }
+  th { border-bottom: 1.5px solid #555; font-weight: 600; white-space: nowrap; }
+  td.nx-end, th.nx-end { text-align: right; }
+  td.nx-center, th.nx-center { text-align: center; }
+  tr { page-break-inside: avoid; }
 `;
 /** The print view's HTML: a heading, a note, and the table. */
 export function tableToPrintHtml({ columns, rows, cellOptions = {}, name = "Table", note }) {