wenay-react2 1.0.41 → 1.0.43

package/lib/common/src/grid/columnState/ColumnDots.js

@@ -3,8 +3,11 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // with dots on the columns that are currently shown. Placing a dot IS showing
 // the column; the card view (CardList) rebuilds from the same config live.
 // Gestures (pointer events, mouse + touch):
-//   drag a dot along the track  -> the dot slides to another (empty) mark: that
-//                                  column replaces the old one
+//   drag a dot along the track  -> LIVE: every empty mark the dot crosses swaps
+//                                  the shown column immediately (the grid/cards
+//                                  follow the finger - that is how you SEARCH for
+//                                  a column on a phone); a small label above the
+//                                  finger names the currently shown column
 //   swipe a dot UP (flick off)  -> the dot tears off the track: column hidden
 //   tap an empty mark           -> a dot appears there: column shown
 //   tap a dot (no move)         -> select the field (highlight); the sort
@@ -38,7 +41,7 @@ export function ColumnDots(p) {
     function downDot(key, e) {
         e.preventDefault();
         e.currentTarget.setPointerCapture(e.pointerId);
-        gestureRef.current = { key, startX: e.clientX, startY: e.clientY, moved: false };
+        gestureRef.current = { key, startX: e.clientX, startY: e.clientY, moved: false, shown: key, fixed: !!byKey.get(key)?.fixed };
     }
     function moveDot(e) {
         const g = gestureRef.current;
@@ -56,7 +59,17 @@ export function ColumnDots(p) {
         const from = order.indexOf(g.key);
         const off = -dy > REMOVE_DY && -dy > Math.abs(dx);
         const to = Math.max(0, Math.min(n - 1, Math.round(from + dx / step)));
-        setDrag({ key: g.key, dx, dy, to, off });
+        // LIVE swap: crossing an EMPTY mark shows that column immediately (the grid
+        // follows the finger - column search by dragging). Occupied marks are passed
+        // over; a fixed dot never swaps (same rule the old on-drop commit had).
+        if (!off && !g.fixed) {
+            const target = order[to];
+            if (target && target != g.shown && cfg.visible[target] == false) {
+                p.state.api.setConfig({ ...cfg, visible: { ...cfg.visible, [g.shown]: false, [target]: true } });
+                g.shown = target;
+            }
+        }
+        setDrag({ key: g.key, dx, dy, to, off, shown: g.shown });
     }
     function upDot() {
         const g = gestureRef.current;
@@ -71,21 +84,19 @@ export function ColumnDots(p) {
         }
         if (!st)
             return;
-        const meta = byKey.get(g.key);
+        // swaps already happened live during the move; the drop only settles
+        // selection and handles the tear-off of the CURRENTLY shown column
         if (st.off) {
+            const meta = byKey.get(g.shown);
             if (!meta?.fixed && visibleKeys.length > 1) {
-                p.state.api.show(g.key, false);
-                if (selected == g.key)
+                p.state.api.show(g.shown, false);
+                if (selected == g.key || selected == g.shown)
                     setSelected(null);
             }
             return;
         }
-        const target = order[st.to];
-        if (target && target != g.key && cfg.visible[target] == false && !meta?.fixed) {
-            p.state.api.setConfig({ ...cfg, visible: { ...cfg.visible, [g.key]: false, [target]: true } });
-            if (selected == g.key)
-                setSelected(target);
-        }
+        if (g.shown != g.key && selected == g.key)
+            setSelected(g.shown);
     }
     function tapMark(key) {
         if (cfg.visible[key] != false)
@@ -101,11 +112,17 @@ export function ColumnDots(p) {
                         const isSorted = cfg.sort?.key == k;
                         return _jsxs("div", { onPointerUp: () => tapMark(k), className: cx(['wenayColDotsMark', vis ? 'wenayColDotsMark_on' : 'wenayColDotsMark_off']), style: { left: `${pct(i)}%`, cursor: !vis && visibleKeys.length < max ? 'pointer' : 'default' }, children: [isSorted && _jsx("div", { className: 'wenayColDotsSortMark', children: cfg.sort.dir == 'asc' ? '↑' : '↓' }), _jsx("div", { className: 'wenayColDotsMarkPin' }), _jsx("div", { className: 'wenayColDotsMarkLabel', children: short(k) })] }, 'm' + k);
                     }), order.map((k, i) => {
-                        if (cfg.visible[k] == false)
+                        const d = drag?.key == k ? drag : null;
+                        // the dragged dot stays mounted through live swaps (its column may be
+                        // hidden mid-gesture; unmounting would kill the pointer capture)...
+                        if (cfg.visible[k] == false && !d)
+                            return null;
+                        // ...and the live-shown column's resting dot is suppressed: its
+                        // representation IS the dot under the finger
+                        if (drag && !d && k == drag.shown && drag.shown != drag.key)
                             return null;
                         const meta = byKey.get(k);
-                        const d = drag?.key == k ? drag : null;
-                        const removing = !!d?.off && !meta?.fixed && visibleKeys.length > 1;
-                        return _jsx("div", { onPointerDown: e => downDot(k, e), onPointerMove: moveDot, onPointerUp: upDot, onPointerCancel: upDot, className: cx(['wenayColDotsDotWrap', d && 'wenayColDotsDotWrap_dragging', removing && 'wenayColDotsDotWrap_removing']), style: { left: `${pct(i)}%`, transform: d ? `translate(${d.dx}px, ${removing ? d.dy : 0}px)` : undefined }, children: _jsx("div", { className: cx(['wenayColDotsDot', selected == k && 'wenayColDotsDot_selected', meta?.fixed && 'wenayColDotsDot_fixed']) }) }, 'd' + k);
+                        const removing = !!d?.off && !byKey.get(d.shown)?.fixed && visibleKeys.length > 1;
+                        return _jsxs("div", { onPointerDown: e => downDot(k, e), onPointerMove: moveDot, onPointerUp: upDot, onPointerCancel: upDot, className: cx(['wenayColDotsDotWrap', d && 'wenayColDotsDotWrap_dragging', removing && 'wenayColDotsDotWrap_removing']), style: { left: `${pct(i)}%`, transform: d ? `translate(${d.dx}px, ${removing ? d.dy : 0}px)` : undefined }, children: [d && !d.off && _jsx("div", { className: 'wenayColDotsDragLabel', children: short(d.shown) }), _jsx("div", { className: cx(['wenayColDotsDot', selected == k && 'wenayColDotsDot_selected', meta?.fixed && 'wenayColDotsDot_fixed']) })] }, 'd' + k);
                     })] })] });
 }

package/lib/common/src/grid/columnState/ColumnsMenu.js

@@ -22,6 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // comes back to life when the column returns. No ag-grid, no storage here.
 import { useRef } from 'react';
 import { useReorder } from '../../hooks/useReorder';
+import { movedOrderWithFixed } from '../../utils/fixedOrder';
 function colsMenuClass(parts) {
     return parts.filter(Boolean).join(' ');
 }
@@ -96,20 +97,10 @@ export function ColumnsMenu(p) {
         p.state.api.show(key, cfg.visible[key] == false);
     }
     /** Simulated drop with the same fixed pinning as the config's normalize():
-     *  the drag preview never disagrees with where the button actually lands. */
+     *  the drag preview never disagrees with where the button actually lands -
+     *  both sides now share utils/fixedOrder. */
     function movedOrder(order, key, to) {
-        const next = order.slice();
-        const from = next.indexOf(key);
-        if (from == -1)
-            return next;
-        next.splice(from, 1);
-        next.splice(Math.max(0, Math.min(next.length, to)), 0, key);
-        const res = next.filter(k => !byKey.get(k)?.fixed);
-        p.state.columns.forEach(function pinFixed(c, i) {
-            if (c.fixed)
-                res.splice(Math.min(i, res.length), 0, c.key);
-        });
-        return res;
+        return movedOrderWithFixed(order, key, to, p.state.columns);
     }
     return _jsx(MenuStrip, { items: items, tail: p.tail, onItem: onItem, onMove: p.reorder == false ? undefined : order => p.state.api.move(order), move: movedOrder, holdMs: p.holdMs, compact: p.compact, className: p.className, style: p.style });
 }

package/lib/common/src/grid/columnState/columnGrid.d.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+import type { ColDef, ColGroupDef, GridPreDestroyedEvent, GridReadyEvent } from 'ag-grid-community';
+import type { AgGridReactProps } from 'ag-grid-react';
+import { type AgGridTableProps } from '../agGrid4';
+import { createToolbar, type ToolbarConfig, type ToolbarItem, type ToolbarSourceMode } from '../../components/Toolbar';
+import { CardList } from './CardList';
+import { ColumnDots } from './ColumnDots';
+import { ColumnsMenu } from './ColumnsMenu';
+import { type ColumnMeta, type ColumnsConfig, type ColumnStateController } from './columnState';
+export type ColumnGridColumnDef<T extends object> = ColDef<T> | ColGroupDef<T>;
+export type ColumnGridColumn = Partial<Omit<ColumnMeta, 'key'>> & {
+    key: string;
+};
+export type ColumnGridToolbarOptions = {
+    key?: string;
+    items?: ToolbarItem[];
+    def?: Partial<ToolbarConfig>;
+    settingsItem?: {
+        title?: string;
+        icon?: React.ReactNode;
+    };
+    resetItem?: false | {
+        title?: string;
+        icon?: React.ReactNode;
+        defaultVisible?: boolean;
+    };
+    sourceMode?: ToolbarSourceMode;
+};
+export type ColumnGridOptions<T extends object> = {
+    /** Shared persistence key for the column config. */
+    key: string;
+    /** ag-grid defs. Leaf defs become ColumnMeta automatically by colId/field/headerName. */
+    columnDefs?: readonly ColumnGridColumnDef<T>[];
+    /** Optional metadata overrides, keyed by colId/field. Missing fields are inferred from columnDefs. */
+    columns?: readonly ColumnGridColumn[];
+    def?: Partial<ColumnsConfig>;
+    /** Optional default data for View; per-render props still override it. */
+    data?: readonly T[];
+    /** Optional default row id getter for View/CardList and simple table wiring. */
+    getId?: (row: T, index: number) => string;
+    /** Optional sizeColumnsToFit when the visible column count changes. */
+    autoSizeOnColumnCountChange?: boolean;
+    saveMs?: number;
+    /** Built by default over the same columnState list source; pass false to skip it. */
+    toolbar?: false | ColumnGridToolbarOptions;
+};
+export type ColumnGridTableProps<T extends object> = Omit<AgGridTableProps<T>, 'columnDefs' | 'autoSizeColumns' | 'onGridReady' | 'onGridPreDestroyed'> & {
+    columnDefs?: AgGridReactProps<T>['columnDefs'];
+    /** Defaults to false because columnState restores/persists widths. */
+    autoSizeColumns?: boolean;
+    onGridReady?: (event: GridReadyEvent<T>) => void;
+    onGridPreDestroyed?: (event: GridPreDestroyedEvent<T>) => void;
+    /** Defaults from createColumnGrid(opts); fits once when visible column count changes. */
+    autoSizeOnColumnCountChange?: boolean;
+};
+export type ColumnGridMenuProps = Omit<React.ComponentProps<typeof ColumnsMenu>, 'state'>;
+export type ColumnGridDotsProps = Omit<React.ComponentProps<typeof ColumnDots>, 'state'>;
+export type ColumnGridCardsProps<T extends object> = Omit<React.ComponentProps<typeof CardList<T>>, 'state'>;
+export type ColumnGridViewMode = 'table' | 'cards';
+export type ColumnGridControls = false | 'auto' | 'toolbar' | 'menu' | 'dots';
+export type ColumnGridToolbar = ReturnType<typeof createToolbar>;
+export type ColumnGridToolbarBarProps = React.ComponentProps<ColumnGridToolbar['Bar']>;
+export type ColumnGridToolbarSettingsProps = React.ComponentProps<ColumnGridToolbar['Settings']>;
+export type ColumnGridViewProps<T extends object> = {
+    mode?: ColumnGridViewMode;
+    data?: readonly T[];
+    getId?: (row: T, index: number) => string;
+    controls?: ColumnGridControls;
+    table?: ColumnGridTableProps<T>;
+    cards?: Omit<ColumnGridCardsProps<T>, 'data'>;
+    menu?: ColumnGridMenuProps;
+    dots?: ColumnGridDotsProps;
+    toolbar?: ColumnGridToolbarBarProps;
+    className?: string;
+    style?: React.CSSProperties;
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+    tableHeight?: React.CSSProperties['height'];
+};
+export type ColumnGridController<T extends object> = {
+    state: ColumnStateController;
+    toolbar: ColumnGridToolbar | null;
+    columns: readonly ColumnMeta[];
+    columnDefs: AgGridReactProps<T>['columnDefs'];
+    api: ColumnStateController['api'] & {
+        tableProps: (props?: ColumnGridTableProps<T>) => AgGridTableProps<T>;
+    };
+    grid: ColumnStateController['grid'];
+    tableProps: (props?: ColumnGridTableProps<T>) => AgGridTableProps<T>;
+    Table: (props: ColumnGridTableProps<T>) => React.JSX.Element;
+    Menu: (props?: ColumnGridMenuProps) => React.JSX.Element;
+    Dots: (props?: ColumnGridDotsProps) => React.JSX.Element;
+    Cards: (props: ColumnGridCardsProps<T>) => React.JSX.Element;
+    Toolbar: (props?: ColumnGridToolbarBarProps) => React.JSX.Element | null;
+    Settings: (props?: ColumnGridToolbarSettingsProps) => React.JSX.Element | null;
+    View: (props: ColumnGridViewProps<T>) => React.JSX.Element;
+    /** Release factory-lifetime subscriptions; persisted config is untouched. */
+    dispose: () => void;
+};
+/** High-level column kit for the common case: one keyed config drives a grid,
+ *  compact menu, toolbar settings, mobile dots, and card/table views. */
+export declare function createColumnGrid<T extends object>(opts: ColumnGridOptions<T>): ColumnGridController<T>;
+export declare function useColumnGrid<T extends object>(opts: ColumnGridOptions<T>): ColumnGridController<T>;

package/lib/common/src/grid/columnState/columnGrid.js

@@ -0,0 +1,231 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AgGridTable } from '../agGrid4';
+import { createToolbar } from '../../components/Toolbar';
+import { CardList } from './CardList';
+import { ColumnDots } from './ColumnDots';
+import { ColumnsMenu } from './ColumnsMenu';
+import { createColumnState } from './columnState';
+function isGroupDef(def) {
+    return Array.isArray(def.children);
+}
+function textOrUndefined(v) {
+    if (v == null || v === '')
+        return undefined;
+    return String(v);
+}
+function titleFromKey(key) {
+    return key
+        .replace(/[_-]+/g, ' ')
+        .replace(/\b\w/g, s => s.toUpperCase());
+}
+function collectColumnMetas(defs, parentGroup) {
+    const res = [];
+    for (const def of defs ?? []) {
+        if (isGroupDef(def)) {
+            const group = textOrUndefined(def.groupId) ?? textOrUndefined(def.headerName) ?? parentGroup;
+            res.push(...collectColumnMetas(def.children, group));
+            continue;
+        }
+        const key = textOrUndefined(def.colId) ?? textOrUndefined(def.field);
+        if (!key)
+            continue;
+        res.push({
+            key,
+            title: textOrUndefined(def.headerName) ?? titleFromKey(key),
+            group: parentGroup,
+        });
+    }
+    return res;
+}
+function resolveColumns(opts) {
+    const auto = collectColumnMetas(opts.columnDefs);
+    const overrides = new Map((opts.columns ?? []).map(c => [c.key, c]));
+    const used = new Set();
+    const res = [];
+    for (const base of auto) {
+        if (used.has(base.key))
+            continue;
+        const patch = overrides.get(base.key);
+        used.add(base.key);
+        res.push({ ...base, ...patch, key: base.key, title: patch?.title ?? base.title });
+    }
+    for (const patch of opts.columns ?? []) {
+        if (used.has(patch.key))
+            continue;
+        used.add(patch.key);
+        res.push({ ...patch, key: patch.key, title: patch.title ?? titleFromKey(patch.key) });
+    }
+    return res;
+}
+function cx(parts) {
+    return parts.filter(Boolean).join(' ');
+}
+function mergeClass(a, b) {
+    return a ? b + ' ' + a : b;
+}
+/** High-level column kit for the common case: one keyed config drives a grid,
+ *  compact menu, toolbar settings, mobile dots, and card/table views. */
+export function createColumnGrid(opts) {
+    const columnDefs = (opts.columnDefs ?? []);
+    const state = createColumnState({
+        key: opts.key,
+        columns: resolveColumns(opts),
+        def: opts.def,
+        saveMs: opts.saveMs,
+    });
+    let gridApiForFit = null;
+    let fitOnCountChange = opts.autoSizeOnColumnCountChange === true;
+    let visibleCount = state.api.visibleKeys().length;
+    let fitRaf = 0;
+    function scheduleFit() {
+        if (!gridApiForFit)
+            return;
+        cancelAnimationFrame(fitRaf);
+        fitRaf = requestAnimationFrame(() => gridApiForFit?.sizeColumnsToFit());
+    }
+    const offConfigChange = state.api.onChange.on(() => {
+        const next = state.api.visibleKeys().length;
+        if (next == visibleCount)
+            return;
+        visibleCount = next;
+        if (fitOnCountChange)
+            scheduleFit();
+    });
+    const toolbar = opts.toolbar === false ? null : createToolbar({
+        key: opts.toolbar?.key ?? `${opts.key}.toolbar`,
+        items: opts.toolbar?.items ?? state.columns.map(c => ({
+            key: c.key,
+            title: c.title,
+            short: c.short,
+            icon: c.icon,
+            fixed: c.fixed,
+            defaultVisible: c.defaultVisible,
+            onClick: () => {
+                const present = state.api.getPresent();
+                if (c.fixed || (present && !present[c.key]))
+                    return;
+                const cfg = state.api.getConfig();
+                state.api.show(c.key, cfg.visible[c.key] == false);
+            },
+        })),
+        def: opts.toolbar?.def,
+        settingsItem: opts.toolbar?.settingsItem,
+        resetItem: opts.toolbar?.resetItem,
+        source: state.api.listSource,
+        sourceMode: opts.toolbar?.sourceMode,
+    });
+    function tableProps(props = {}) {
+        const { onGridReady, onGridPreDestroyed, autoSizeColumns = false, autoSizeOnColumnCountChange = opts.autoSizeOnColumnCountChange === true, columnDefs: localDefs = columnDefs, ...rest } = props;
+        return {
+            ...rest,
+            columnDefs: localDefs,
+            autoSizeColumns,
+            onGridReady(event) {
+                gridApiForFit = event.api;
+                fitOnCountChange = autoSizeOnColumnCountChange;
+                state.grid.attach(event.api);
+                // re-seed: the column count may have changed while no grid was attached,
+                // and the first post-remount onChange must not mis-skip the auto-fit
+                visibleCount = state.api.visibleKeys().length;
+                if (fitOnCountChange)
+                    scheduleFit();
+                onGridReady?.(event);
+            },
+            onGridPreDestroyed(event) {
+                if (gridApiForFit === event.api)
+                    gridApiForFit = null;
+                cancelAnimationFrame(fitRaf);
+                fitRaf = 0;
+                state.grid.detach();
+                onGridPreDestroyed?.(event);
+            },
+        };
+    }
+    function Table(props) {
+        return _jsx(AgGridTable, { ...tableProps(props) });
+    }
+    function Menu(props = {}) {
+        return _jsx(ColumnsMenu, { ...props, state: state });
+    }
+    function Dots(props = {}) {
+        return _jsx(ColumnDots, { ...props, max: props.max ?? state.columns.length, className: mergeClass(props.className, 'wenayColumnGridDots'), state: state });
+    }
+    function Cards(props) {
+        return _jsx(CardList, { ...props, state: state });
+    }
+    function Toolbar(props = {}) {
+        if (!toolbar)
+            return null;
+        const Bar = toolbar.Bar;
+        return _jsx(Bar, { ...props });
+    }
+    function Settings(props = {}) {
+        if (!toolbar)
+            return null;
+        const ToolbarSettings = toolbar.Settings;
+        return _jsx(ToolbarSettings, { ...props });
+    }
+    function controlKind(mode, controls) {
+        if (controls === false)
+            return null;
+        if (!controls || controls == 'auto')
+            return 'dots';
+        return controls;
+    }
+    function renderControls(kind, p) {
+        if (!kind)
+            return null;
+        if (kind == 'dots')
+            return _jsx(Dots, { ...p.dots });
+        if (kind == 'toolbar')
+            return _jsx(Toolbar, { settings: true, popAlign: "left", ...p.toolbar });
+        return _jsx(Menu, { compact: true, ...p.menu });
+    }
+    function View(p) {
+        const mode = p.mode ?? 'table';
+        const kind = controlKind(mode, p.controls);
+        const controls = renderControls(kind, p);
+        const data = p.data ?? opts.data ?? [];
+        const getId = p.getId ?? opts.getId;
+        const bodyStyle = mode == 'table'
+            ? { height: p.tableHeight ?? 240, minHeight: 0, ...p.bodyStyle }
+            : { ...p.bodyStyle };
+        const tableGetRowId = p.table?.getRowId ?? (getId
+            ? ((params) => getId(params.data, 0))
+            : undefined);
+        return _jsxs("div", { className: cx(['wenayColumnGrid', `wenayColumnGrid_${mode}`, kind && `wenayColumnGrid_controls_${kind}`, p.className]), style: p.style, children: [_jsx("div", { className: cx(['wenayColumnGridBody', p.bodyClassName]), style: bodyStyle, children: mode == 'cards'
+                        ? _jsx(Cards, { ...p.cards, data: data, getId: p.cards?.getId ?? getId })
+                        : _jsx(Table, { ...p.table, rowData: (p.table?.rowData ?? data), getRowId: tableGetRowId }) }), controls && _jsx("div", { className: cx(['wenayColumnGridControls', kind && `wenayColumnGridControls_${kind}`]), children: controls })] });
+    }
+    /** Release factory-lifetime subscriptions (config onChange, toolbar source, pending fit).
+     *  Persisted config stays; this is listener lifetime only (HMR, repeated factories). */
+    function dispose() {
+        offConfigChange();
+        toolbar?.api.dispose();
+        cancelAnimationFrame(fitRaf);
+        fitRaf = 0;
+        gridApiForFit = null;
+    }
+    return {
+        state,
+        toolbar,
+        columns: state.columns,
+        columnDefs,
+        api: { ...state.api, tableProps },
+        grid: state.grid,
+        tableProps,
+        Table,
+        Menu,
+        Dots,
+        Cards,
+        Toolbar,
+        Settings,
+        View,
+        dispose,
+    };
+}
+export function useColumnGrid(opts) {
+    const [grid] = useState(() => createColumnGrid(opts));
+    return grid;
+}

package/lib/common/src/grid/columnState/columnState.js

@@ -1,6 +1,8 @@
 import { listen as createListen } from 'wenay-common2';
 import { createUpdateApi } from '../../../updateBy';
 import { memoryGetOrCreate, memoryMarkDirty } from '../../utils/memoryStore';
+import { pinFixedOrder } from '../../utils/fixedOrder';
+import { structEqual } from '../../utils/structEqual';
 const SCHEMA_V = 1;
 /** Grid events that mean "the user changed the column layout / sort / filter". */
 const GRID_EVENTS = ['columnMoved', 'columnResized', 'columnVisible', 'sortChanged', 'filterChanged'];
@@ -74,14 +76,11 @@ export function createColumnState(opts) {
         const known = new Set(opts.columns.map(c => c.key));
         const byKey = new Map(opts.columns.map(c => [c.key, c]));
         const rawOrder = Array.isArray(st.order) ? st.order : [];
-        const order = rawOrder.filter(k => known.has(k) && !byKey.get(k)?.fixed);
+        const prelim = rawOrder.filter(k => known.has(k) && !byKey.get(k)?.fixed);
         for (const c of opts.columns)
-            if (!c.fixed && order.indexOf(c.key) == -1)
-                order.push(c.key);
-        opts.columns.forEach(function pinFixed(c, i) {
-            if (c.fixed)
-                order.splice(Math.min(i, order.length), 0, c.key);
-        });
+            if (!c.fixed && prelim.indexOf(c.key) == -1)
+                prelim.push(c.key);
+        const order = pinFixedOrder(prelim, opts.columns);
         const rawVisible = st.visible && typeof st.visible == 'object' ? st.visible : {};
         const visible = {};
         for (const c of opts.columns)
@@ -245,13 +244,15 @@ export function createColumnState(opts) {
                 order.push(k);
         const filter = (gridApi.getFilterModel() ?? {});
         const next = { ...cfg, order, visible, width, sort, filter };
-        if (JSON.stringify(next) == JSON.stringify(cfg))
+        // structural compare: the grid returns filter models with its own key order,
+        // which must not count as a change (stringify used to false-positive here)
+        if (structEqual(next, cfg))
             return;
         commit(next, true);
         // normalize() may have corrected the grid's move (a fixed column dragged
         // away from its pinned index): push the corrected order back so the grid
         // and the config never disagree
-        if (JSON.stringify(normalize().order) != JSON.stringify(next.order))
+        if (!structEqual(normalize().order, next.order))
             applyToGrid();
     }
     function onGridEvent(e) {

package/lib/common/src/grid/columnState/index.js

@@ -1,3 +1,6 @@
+// Grid-less barrel: columnState/ColumnsMenu/ColumnDots/CardList must stay importable without
+// pulling ag-grid runtime (mobile/card consumers). createColumnGrid lives in './columnGrid'
+// (it imports AgGridTable + createToolbar) and is exported from the root api, not from here.
 export * from './columnState';
 export * from './ColumnsMenu';
 export * from './ColumnDots';

package/lib/common/src/hooks/useDraggable.d.ts

@@ -8,6 +8,14 @@ export type UseDraggableOptions = {
     holdMs?: number;
     onDragEnd?: DragEndCallback;
     onDragStart?: DragStartCallback;
+    /** Imperative per-move-tick callback: fires with the current delta on every
+     *  mousemove/touchmove of an active drag - NOT on setPosition/resetPosition/cancelDrag
+     *  and not on release. Goes through a ref, an inline closure does not resubscribe. */
+    onMove?: (position: Position) => void;
+    /** When false, position lives only in positionRef/onMove and the hook does NOT
+     *  re-render per move tick (imperative consumers, e.g. the DragBox adapter).
+     *  isDragging start/end re-renders remain. Default true. */
+    trackState?: boolean;
 };
 export interface UseDraggableReturn {
     readonly position: Position;

package/lib/common/src/hooks/useDraggable.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 export function useDraggableApi(options = {}) {
-    const { initialPosition = { x: 0, y: 0 }, holdMs = 500, onDragEnd, onDragStart } = options;
+    const { initialPosition = { x: 0, y: 0 }, holdMs = 500, onDragEnd, onDragStart, onMove, trackState = true } = options;
     const [position, setPositionState] = useState(initialPosition);
     const positionRef = useRef(position);
     const holdMsRef = useRef(holdMs);
@@ -11,17 +11,22 @@ export function useDraggableApi(options = {}) {
     const draggingRef = useRef(false);
     const onDragEndRef = useRef(onDragEnd);
     const onDragStartRef = useRef(onDragStart);
+    const onMoveRef = useRef(onMove);
+    const trackStateRef = useRef(trackState);
     const holdTimerMouse = useRef(null);
     const holdTimerTouch = useRef(null);
     const setPos = (p) => {
         positionRef.current = p;
-        setPositionState(p);
+        if (trackStateRef.current)
+            setPositionState(p);
     };
     holdMsRef.current = holdMs;
+    trackStateRef.current = trackState;
     draggingRef.current = draggingMouse || draggingTouch;
     useEffect(() => {
         onDragEndRef.current = onDragEnd;
         onDragStartRef.current = onDragStart;
+        onMoveRef.current = onMove;
     });
     const cancelMouseHold = useMemo(() => function cancelMouseHold() {
         if (holdTimerMouse.current != null) {
@@ -77,7 +82,9 @@ export function useDraggableApi(options = {}) {
         if (!draggingMouse)
             return;
         const handleMouseMove = (e) => {
-            setPos({ x: e.clientX - offsetMouse.current.x, y: e.clientY - offsetMouse.current.y });
+            const p = { x: e.clientX - offsetMouse.current.x, y: e.clientY - offsetMouse.current.y };
+            setPos(p);
+            onMoveRef.current?.(p);
         };
         const handleMouseUp = () => {
             document.removeEventListener("mousemove", handleMouseMove);
@@ -104,7 +111,9 @@ export function useDraggableApi(options = {}) {
             const theTouch = Array.from(e.changedTouches).find((t) => t.identifier === offsetTouch.current?.id);
             if (!theTouch)
                 return;
-            setPos({ x: theTouch.clientX - offsetTouch.current.x, y: theTouch.clientY - offsetTouch.current.y });
+            const p = { x: theTouch.clientX - offsetTouch.current.x, y: theTouch.clientY - offsetTouch.current.y };
+            setPos(p);
+            onMoveRef.current?.(p);
         };
         const handleTouchEnd = (e) => {
             if (!offsetTouch.current)

package/lib/common/src/hooks/useOutside.d.ts

@@ -37,6 +37,9 @@ type ButtonBaseProps = {
 };
 type ButtonProps = ButtonBaseProps & {
     statusDef?: boolean;
+    /** Persist the open/closed status under this key (module-lifetime). Same naming as FloatingWindow/Resizable/RightMenu. */
+    keyForSave?: string;
+    /** @deprecated alias of {@link keyForSave}; kept for compatibility, `keyForSave` wins when both are set. */
     keySave?: string;
     outClick?: boolean | (() => void);
     zIndex?: number;
@@ -46,7 +49,7 @@ export declare const OutsideClickArea: React.ForwardRefExoticComponent<React.HTM
     status?: boolean;
     zIndex?: number;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare function Button({ keySave, statusDef, outClick, ...data }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ keyForSave, keySave, statusDef, outClick, ...data }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare function HoverButton(props: ButtonBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare const OutsideButton: typeof Button;
 export declare function AbsoluteButton(props: Parameters<typeof Button>[0]): import("react/jsx-runtime").JSX.Element;

package/lib/common/src/hooks/useOutside.js

@@ -73,7 +73,8 @@ function ButtonBase({ children, button, style = {}, className = "", state: [a, s
     return _jsxs("div", { style: { position: "relative", width: "min-content", ...style }, className: className, children: [_jsx("div", { onClick: () => setA(!a), children: typeof button == "function" ? button(a) : button }), a && (typeof children == "function" ? children({ onClose: () => setA(!a) }) : children)] });
 }
 const saveStatus = {};
-export function Button({ keySave, statusDef, outClick, ...data }) {
+export function Button({ keyForSave, keySave, statusDef, outClick, ...data }) {
+    keySave = keyForSave ?? keySave;
     if (keySave && saveStatus[keySave] != null)
         statusDef = saveStatus[keySave];
     const [status, setStatusRaw] = useState(statusDef ?? false);