wenay-react2 1.0.19 → 1.0.21

package/lib/common/src/components/MyResizeObserver.js

@@ -1,4 +1,4 @@
-// Класс для отслеживания изменения размеров элементов
+// Class for tracking element size changes
 export class CResizeObserver {
     #idMap = new WeakMap();
     #funcMap = new WeakMap();
@@ -19,9 +19,7 @@ export class CResizeObserver {
             this.#observer?.observe(element);
         }
         functions.push(onResize);
-        let id = new class {
-            [Symbol.species] = this; //{} as ObserveID
-        }();
+        const id = {}; // unique WeakMap key; the branded type only exists at compile time
         this.#idMap.set(id, { element, func: onResize });
         return id;
     }
@@ -43,13 +41,13 @@ export class CResizeObserver {
 }
 const global_resizeObserver = new CResizeObserver();
 const resizeableElementMap = new WeakMap();
-// Задаём автоматическое изменение размеров элемента в зависимости от размеров родительского элемента
+// Set automatic element resizing based on the parent element size
 //
 export function setResizeableElement(el) {
     const parent = el.parentElement;
     if (!parent)
         return;
-    const parentParent = parent.parentElement; // на один уровень выше
+    const parentParent = parent.parentElement; // one level higher
     if (!parentParent)
         return;
     const lastEl = parent.lastElementChild;
@@ -60,26 +58,25 @@ export function setResizeableElement(el) {
     if (existing)
         global_resizeObserver.delete(existing);
     const observerId = global_resizeObserver.add(parentParent, () => {
+        // Jump directly by the mismatch amount (previously 1px with reflow on each step);
+        // a few iterations are only for final adjustment, the upper bound prevents an infinite loop
         let lastRangeDelta = 0;
-        let i = 0;
-        //console.log("###",el.style.width, el.clientWidth);
-        for (let width = el.clientWidth;;) { //} width>=20;  width--) {
-            let rangeDelta = Math.floor(lastEl.getBoundingClientRect().right - parentParent.getBoundingClientRect().right - 0);
+        for (let width = el.clientWidth, i = 0; i < 8; i++) {
+            const rangeDelta = Math.floor(lastEl.getBoundingClientRect().right - parentParent.getBoundingClientRect().right);
             if (rangeDelta == 0)
                 break;
             if (lastRangeDelta && rangeDelta * lastRangeDelta < 0)
                 break;
             lastRangeDelta = rangeDelta;
-            if (rangeDelta > 0)
-                width--;
-            else
-                width++;
             defaultWidth ??= el.clientWidth;
-            if (width < 10 || width > defaultWidth)
-                break;
+            width -= rangeDelta;
+            if (width < 10)
+                width = 10;
+            if (width > defaultWidth)
+                width = defaultWidth;
             el.style.width = width + "px";
-            //console.log(i+": "+numEl.getBoundingClientRect().right,"<", parentParent.getBoundingClientRect().right, rangeEl.clientWidth); //numEl.clientLeft, numEl.clientWidth);
-            i++;
+            if (width == 10 || width == defaultWidth)
+                break;
         }
     });
     resizeableElementMap.set(el, observerId);

package/lib/common/src/components/Other.js

@@ -6,13 +6,13 @@ export function EditParams2({ onSave, params: paramsDef }) {
         paramsDef().then(e => {
             setParamsD(e);
         });
-    }, [true]);
+    }, []);
     const [paramsD, setParamsD] = useState(null);
     const params = useRef(null);
     return _jsxs("div", { className: "maxSize", children: [paramsD && _jsx(ParametersReact, { params: paramsD, onChange: e => params.current = e }), onSave && _jsx("div", { className: "msTradeActive msTradeAlt", onClick: async () => {
                     const t = params.current || paramsD;
                     if (t)
-                        onSave?.(t);
+                        onSave(t);
                 }, children: "save" })] });
 }
 export function EditParams3({ onSave, params: paramsDef }) {
@@ -20,12 +20,13 @@ export function EditParams3({ onSave, params: paramsDef }) {
         paramsDef().then(e => {
             setParams(e);
         });
-    }, [true]);
+    }, []);
     const [params, setParams] = useState(null);
     return _jsxs("div", { className: "maxSize", children: [params && params.map((z, i) => _jsx(ParametersReact, { params: z, onChange: e => {
-                    params[i] = z;
+                    params[i] = e;
                     setParams(params);
                 } }, i)), onSave && _jsx("div", { className: "msTradeActive msTradeAlt", onClick: async () => {
-                    params && onSave?.(params);
+                    if (params)
+                        onSave(params);
                 }, children: "save" })] });
 }

package/lib/common/src/components/Parameters.js

@@ -1,24 +1,25 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-//вид кнопки
+// Button view
 export function FButton(name) {
     return _jsxs("div", { className: "", style: { width: "100%" }, children: [" ", name] });
 }
-//стрелка для кнопки
+// Arrow for the button
 export function FNameButton(type, name) { return FButton(_jsx("p", { className: "toPTextIndicator", children: (type ? "▼ " : "▶ ") + name })); }
 export function CParameter(props) {
-    const [hovered, setHovered] = React.useState(false); // Состояние для отслеживания наведения мышки
-    return (_jsxs("div", { className: "toLine LeftMenuParameters toIndicatorMenuButton", style: { position: "relative" }, children: [_jsx("div", { className: "toLine", style: { width: "auto", ...props.style }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: props.name }), _jsx("div", { className: "toLine toRight", style: props.enabled === false ? { opacity: 0.5 } : {}, children: props.children }), hovered && props.commentary?.length && (_jsx("div", { className: "commentary", style: {
+    const [hovered, setHovered] = React.useState(false); // Tracks mouse hover state
+    return (_jsxs("div", { className: "toLine LeftMenuParameters toIndicatorMenuButton", style: { position: "relative" }, children: [_jsx("div", { className: "toLine", style: { width: "auto", ...props.style }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: props.name }), _jsx("div", { className: "toLine toRight", style: props.enabled === false ? { opacity: 0.5 } : {}, children: props.children }), hovered && props.commentary && props.commentary.length > 0 && (_jsx("div", { className: "commentary", style: {
                     marginTop: "5px",
                     fontSize: "12px",
                     color: "gray",
-                    position: "absolute", // Можно сделать абсолютно спозиционированным
-                    bottom: "-20px", // Сдвигаем вниз, чтобы не перекрывать основной контент
+                    position: "absolute", // Can be absolutely positioned
+                    bottom: "-20px", // Shift down to avoid covering the main content
                     left: "0",
-                    backgroundColor: "white", // Чтобы выделялось на фоне
+                    backgroundColor: "white", // Make it stand out from the background
                     padding: "2px 4px",
                     border: "1px solid lightgray",
                     borderRadius: "4px",
                     zIndex: 10,
+                    whiteSpace: "pre-line", // otherwise "\n" collapses into spaces
                 }, children: props.commentary.join("\n") }))] }));
 }

package/lib/common/src/components/ParametersEngine.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { deepCloneMutable, isDate, TF, timeLocalToStr_yyyymmdd, timeLocalToStr_yyyymmdd_hhmm, timeLocalToStr_yyyymmdd_hhmmss, timeLocalToStr_yyyymmdd_hhmmss_ms } from "wenay-common2";
-import { setResizeableElement } from "./MyResizeObserver";
+import { setResizeableElement, removeResizeableElement } from "./MyResizeObserver";
 import { CParameter, FNameButton } from "./Parameters";
 import { SetAutoStepForElement } from "../utils";
 function timeToStr(time, step) {
@@ -20,7 +20,7 @@ function CButton({ name, className, status: statusDef, header, onExpand, childre
                             onExpand?.(status2);
                         }, children: name(status) }), header] }), status && children] });
 }
-//класс наведение на объект, если на вели на оболочку над children то появиться onFocusUp/focusDw
+// Hover wrapper: when the wrapper around children is hovered, focus state is exposed.
 function DivHover({ children, className, style }) {
     const [hover, setHover] = useState(false);
     return _jsx("div", { className: className, style: style, onMouseLeave: () => { setHover(false); }, onMouseEnter: () => { setHover(true); }, children: children(hover) });
@@ -36,14 +36,7 @@ function InputString(set, val, style) {
         } });
 }
 function InputTime(set, value, range) {
-    //const data= this._inputNumStrMap.get(range);
-    //let val= value;
-    //if (1) return null;
     let { min, max } = range ?? {};
-    // (data?.value==value)
-    //     ? data
-    //     : { min: range.min, max: range.max, step: range.defaultStep??range.step, val: value };
-    //this._inputNumStrMap.delete(range);
     const timeSplits = typeof value == "string" ? value.split(":").length : 2;
     const hasDot = typeof value == "string" ? value.includes(".") : false;
     const step = range?.step ?? (timeSplits <= 1 ? TF.D1.msec : timeSplits == 2 ? TF.M1.msec : hasDot ? 1 : TF.S1.msec);
@@ -64,29 +57,23 @@ function InputTime(set, value, range) {
                 step % TF.S1.msec == 0 ? timeLocalToStr_yyyymmdd_hhmmss(new Date(val_)) : timeLocalToStr_yyyymmdd_hhmmss_ms(new Date(val_));
         return timeStr.replace(" ", "T");
     }
-    //function toInputVal(val: string | const_Date | undefined) { return val ? new Date(val).valueOf() : undefined; }
-    //const inputType : React.InputHTMLAttributes.type = ;
     let _ref = null;
-    return _jsxs(_Fragment, { children: [_jsx("input", { type: "range", min: toNum(range?.defaultMin ?? range?.min ?? "2015.01.01"), max: toNum(range?.defaultMax ?? range?.max ?? new Date().toString()), step: range?.defaultStep ?? step, value: toNum(value), onInput: (e) => {
+    return _jsxs(_Fragment, { children: [_jsx("input", { type: "range", min: toNum(range?.defaultMin ?? range?.min ?? "2015-01-01"), max: toNum(range?.defaultMax ?? range?.max ?? new Date()), step: range?.defaultStep ?? step, value: toNum(value) ?? "", onInput: (e) => {
                     setVal(Number(e.currentTarget.value));
                 }, ref: (ref) => {
                     if (ref) {
                         setResizeableElement(ref);
+                        return () => removeResizeableElement(ref);
                     }
                 } }), _jsx("div", { children: _jsx("input", { type: step % TF.D1.msec == 0 ? "date" : "datetime-local", style: { width: "calc(100% - 13px)", marginTop: 5 }, onInput: (e) => {
                         set(e.currentTarget.value);
-                    }, min: toInputStr(min), max: toInputStr(max), step: step % TF.D1.msec == 0 ? step / TF.D1.msec : step / TF.S1.msec, value: toInputStr(normalizedValue), 
-                    //onMouseOver={()=>{ console.log("over"); _ref?.dispatchEvent(new MouseEvent("mouseenter", { 'bubbles': true }));  _ref?.dispatchEvent(new MouseEvent("mouseover", { 'bubbles': true }))}}
-                    onMouseEnter: () => {
+                    }, min: toInputStr(min), max: toInputStr(max), step: step % TF.D1.msec == 0 ? step / TF.D1.msec : step / TF.S1.msec, value: toInputStr(normalizedValue), onMouseEnter: () => {
                         _ref?.focus();
                     }, onMouseLeave: () => {
                         _ref?.blur();
-                    } }) }), _jsx("input", { required: true, className: "toNumberInput inputCan", type: "number", style: { width: 18, marginLeft: -13, marginRight: 0 }, min: toNum(min), max: toNum(max), step: step, value: toNum(value), onInput: (e) => {
-                    const target = e.currentTarget;
-                    setVal(Number(target.value));
-                }, 
-                //onMouseEnter={()=>console.log("!!!", deepClone(_ref?.classList))}
-                ref: (ref) => {
+                    } }) }), _jsx("input", { required: true, className: "toNumberInput inputCan", type: "number", style: { width: 18, marginLeft: -13, marginRight: 0 }, min: toNum(min), max: toNum(max), step: step, value: toNum(value) ?? "", onInput: (e) => {
+                    setVal(Number(e.currentTarget.value));
+                }, ref: (ref) => {
                     if (ref) {
                         _ref = ref;
                     }
@@ -108,6 +95,7 @@ function InputList(set, value, range, rangeLabels) {
         }, ref: (ref) => {
             if (ref) {
                 setResizeableElement(ref);
+                return () => removeResizeableElement(ref);
             }
         }, children: range.map((a, i) => {
             return _jsx("option", { value: toString(a), label: rangeLabels?.at(i) ?? toString(a), children: toString(a) }, toString(a));
@@ -115,27 +103,24 @@ function InputList(set, value, range, rangeLabels) {
 }
 const _inputNumStrMap = new WeakMap();
 function InputNumber(set, value, range) {
-    //if (1) return null;
     const data = _inputNumStrMap.get(range);
-    //let val= value;
     let { min, max, step, val } = (data?.value == value)
         ? data
         : { min: range.min, max: range.max, step: range.defaultStep ?? range.step, val: value };
     _inputNumStrMap.delete(range);
     let _ref;
     return _jsxs(_Fragment, { children: [_jsx("input", { type: "range", min: range.defaultMin ?? range.min, max: range.defaultMax ?? range.max, step: range.defaultStep ?? range.step, value: String(value), onInput: (e) => {
-                    const current = e.currentTarget;
-                    set(Number(current.value));
+                    set(Number(e.currentTarget.value));
                     if (_ref)
-                        _ref.step = current.step;
+                        _ref.step = e.currentTarget.step;
                 }, ref: (ref) => {
                     if (ref) {
                         setResizeableElement(ref);
+                        return () => removeResizeableElement(ref);
                     }
                 } }), _jsx("input", { required: true, className: "toNumberInput inputCan", type: "number", min: min, max: max, step: step, value: val, onInput: (e) => {
                     const target = e.currentTarget;
                     let value2 = target.value != "" ? Number(target.value) : value;
-                    //if (target.value=="") console.log(value, range);
                     _inputNumStrMap.set(range, {
                         val: target.value,
                         min: target.min,
@@ -147,11 +132,8 @@ function InputNumber(set, value, range) {
                         set(Number(target.value));
                     else {
                         target.reportValidity();
-                        // this.Refresh();
                     }
-                }, 
-                //onBlur={ (a)=>{ console.log("blur"); if (! a.currentTarget.checkValidity()) set(Number(a.currentTarget.value)); } }
-                ref: (ref) => {
+                }, ref: (ref) => {
                     if (ref) {
                         _ref = ref;
                         ref.step = step + "";
@@ -175,16 +157,19 @@ function InputListArray(set, values, range, rangeLabels) {
         }, multiple: true, ref: (ref) => {
             if (ref) {
                 setResizeableElement(ref);
+                return () => removeResizeableElement(ref);
             }
         }, children: range.map((a, i) => {
             return _jsx("option", { value: String(a), label: rangeLabels?.at(i) ?? String(a), children: a }, String(a));
         }) });
 }
 export function ParametersReact(data) {
-    const params = useRef(null);
+    // callbacks live in a ref: useMemo below intentionally freezes the element until
+    // params identity changes, and would otherwise freeze a stale onChange/onExpand with it
+    const callbacks = useRef({ onChange: data.onChange, onExpand: data.onExpand });
+    callbacks.current = { onChange: data.onChange, onExpand: data.onExpand };
     const result = useMemo(() => {
-        params.current = data.params;
-        return _jsx(ParametersBaseReact, { params: data.params, onChange: data.onChange, onExpand: data.onExpand, expandStatus: data.expandStatus, expandStatusLvl: data.expandStatusLvl });
+        return _jsx(ParametersBaseReact, { params: data.params, onChange: (p) => callbacks.current.onChange(p), onExpand: (p) => callbacks.current.onExpand?.(p), expandStatus: data.expandStatus, expandStatusLvl: data.expandStatusLvl });
     }, [data.params]);
     return result;
 }
@@ -194,18 +179,19 @@ function ParametersBaseReact(data) {
     const styleColorDisable = "rgb(146,146,146)";
     const p = useMemo(() => deepCloneMutable(data.params), [data.params]);
     const myParams = useRef(p);
-    useEffect(() => {
+    // sync during render: the effect+Refresh variant committed a frame of stale params first
+    if (myParams.current !== p)
         myParams.current = p;
-        Refresh();
-    }, [p]);
-    let timeoutId = null;
+    const timeoutId = useRef(null);
+    useEffect(() => () => { if (timeoutId.current != null)
+        clearTimeout(timeoutId.current); }, []);
     function refreshIndicator() {
         data.onChange(myParams.current);
     }
     function refreshIndicatorDelayed() {
-        if (timeoutId != null)
-            clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => {
+        if (timeoutId.current != null)
+            clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(() => {
             refreshIndicator();
         }, 200);
     }
@@ -227,24 +213,23 @@ function ParametersBaseReact(data) {
         Refresh();
         if (enabled)
             if (typeof value == "number" || value instanceof Date || (value instanceof Array && (typeof value[0] == "number" || value[0] instanceof Date)))
-                refreshIndicatorDelayed(); // обрабатываем с задержкой
+                refreshIndicatorDelayed(); // process with delay
             else
-                refreshIndicator(); // обрабатываем без задержки
-        //SessionSave();
+                refreshIndicator(); // process without delay
     }
     function onExpandA(param, flag) {
         data.onExpand?.(myParams.current);
     }
     function ListParams(obj, parentEnabled = true, expandLevel = 0) {
         return Object.entries(obj).map(([key, param]) => {
-            //изменения параметров индикатора
+            // Indicator parameter changes
             const onSetValue = (value, currentEnabled = true) => {
                 onSetValueA(param, value, parentEnabled && currentEnabled);
             };
             if (!Array.isArray(obj))
                 if (typeof (param) == "boolean" || typeof (param) == "string") {
                     const set = (data) => {
-                        obj[key] = data;
+                        obj[key] = data; // this branch only renders boolean/string params
                         onSetValue(data);
                     };
                     return _jsx(CParameter, { name: key, enabled: parentEnabled, children: Param(set, param) }, key + "#" + typeof (param));
@@ -259,7 +244,6 @@ function ParametersBaseReact(data) {
                 const nameButton = (type) => FNameButton(type, name);
                 const nameT = _jsx("p", { className: "toPTextIndicator", children: name });
                 const set = (a) => {
-                    //if (typeof a=="boolean") {a=!value;}
                     const aa = param.value instanceof Date ? new Date(a) : a;
                     param.value = aa;
                     onSetValue(aa, param.enabled ?? true);
@@ -292,7 +276,7 @@ function ParametersBaseReact(data) {
                                 onSetValue(value);
                             }, children: param.enabled ? "ON " : "OFF" })
                         : null;
-                    // если есть вложение, то делам рекурсию со сдвигом
+                    // If there are nested parameters, recurse with an offset.
                     if (!Array.isArray(value)) {
                         const enabledD = enabled != false && parentEnabled != false;
                         const list = ListParams(value, enabledD, expandLevel - 1);
@@ -303,7 +287,7 @@ function ParametersBaseReact(data) {
                     }
                     if (Array.isArray(value)) {
                         let arr = value;
-                        if (Array.isArray(range)) { // значит рисуем выпадающий список
+                        if (Array.isArray(range)) { // render a dropdown list
                             if (typeof arr[0] == "boolean")
                                 throw "boolean range is not supported!";
                             let arr2 = arr;
@@ -319,11 +303,10 @@ function ParametersBaseReact(data) {
                                 type = itemType;
                         }
                         const elements = arr.map((itemVal, index, array) => {
-                            //работа с массивом отображения и добавления
+                            // Render and add array elements.
                             const name_ = name + " #" + String(index + 1);
                             const nameElement = _jsx("div", { children: name_ }, name_ + "#$3");
                             const enabledElements = Array.isArray(param.elementsEnabled) ? param.elementsEnabled : undefined;
-                            //const onHoverElement = <div style={{position: "absolute", left: -30, top: 0, display: "flex"}}>
                             const onHoverElement = _jsxs("div", { style: { marginLeft: -18, marginTop: -7 }, children: [_jsx("div", { className: "toButtonEasy", style: { width: "15px", fontSize: "medium", marginRight: 3 }, onClick: () => {
                                             array.splice(index, 0, itemVal);
                                             enabledElements?.splice(index, 0, enabledElements[index]);
@@ -347,11 +330,7 @@ function ParametersBaseReact(data) {
                                         : undefined] });
                             return _jsx(DivHover, { children: (hover) => paramL(hover) }, name_ + "#$");
                         });
-                        return _jsx(CButton, { className: "toIndicatorMenuButton", name: nameButton, status: expanded, header: enableHTML, onExpand: onExpand, children: _jsx("div", { className: "", style: { overflow: "hidden", paddingLeft: nestedMarginLeft }, children: _jsxs("div", { style: { animation: "0.1s ease 0s 1 normal none running moveDown" }, children: [_jsx("div", { className: "", style: {
-                                                //marginLeft: widthStr,
-                                                //width: "calc(100%-" + widthStr + ")",
-                                                color: "inherit"
-                                            }, children: elements }), !param.constLength &&
+                        return _jsx(CButton, { className: "toIndicatorMenuButton", name: nameButton, status: expanded, header: enableHTML, onExpand: onExpand, children: _jsx("div", { className: "", style: { overflow: "hidden", paddingLeft: nestedMarginLeft }, children: _jsxs("div", { style: { animation: "0.1s ease 0s 1 normal none running moveDown" }, children: [_jsx("div", { className: "", style: { color: "inherit" }, children: elements }), !param.constLength &&
                                             _jsx("div", { className: "toButtonEasy", style: { paddingLeft: 10, textAlign: "left" /*width: "255px"*/ }, onClick: () => {
                                                     let element = arr.at(-1);
                                                     element ??= Array.isArray(param.range) ? param.range[0] : param.range ? param.range.min :
@@ -361,9 +340,7 @@ function ParametersBaseReact(data) {
                                                 }, children: " ......add new element" })] }) }) }, key + "#$");
                     }
                 }
-                {
-                    return simpleParameter(Param(set, value, undefined, range, param.labels));
-                }
+                return simpleParameter(Param(set, value, undefined, range, param.labels));
             }
             return null;
         });

package/lib/common/src/grid/agGrid4/agGrid4.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { AgGridReactProps } from 'ag-grid-react';
+import type { GridApi, GetRowIdParams, GridPreDestroyedEvent, GridReadyEvent } from 'ag-grid-community';
+import { type BufferTable, type GetId } from './core';
+export type UseAgGridOptions<T> = {
+    /** How to get a row id. Defaults to the `id` field. Captured once (first render). */
+    getId?: GetId<T>;
+    /** External buffer: a plain object above the component (like datum.tableArr) that survives route remounts. */
+    externalBuffer?: BufferTable<T>;
+};
+/**
+ * Headless table hook. All race handling lives in the core; the hook only binds it
+ * to the React and grid lifecycle:
+ *
+ *   const grid = useAgGrid<Row>({ getId })
+ *   <AgGridMy<Row> controller={grid} columnDefs={cols} />
+ *   grid.update({ newData })
+ */
+export declare function useAgGrid<T>(options?: UseAgGridOptions<T>): {
+    update: (args: import("./core").UpdateArgs<T>) => void;
+    remove(rows: Partial<T>[]): void;
+    fit: () => boolean;
+    updateData: (args: import("./core").UpdateArgs<T>) => void;
+    sync: () => void;
+    getId: GetId<T>;
+    buffer: BufferTable<T>;
+    apiRef: React.RefObject<GridApi<T> | null>;
+    props: {
+        getRowId(params: GetRowIdParams<T>): string;
+        onGridReady(event: GridReadyEvent<T>): void;
+        onGridPreDestroyed(_event: GridPreDestroyedEvent<T>): void;
+    };
+    gridProps: {
+        getRowId(params: GetRowIdParams<T>): string;
+        onGridReady(event: GridReadyEvent<T>): void;
+        onGridPreDestroyed(_event: GridPreDestroyedEvent<T>): void;
+    };
+    getApi(): GridApi<T> | null;
+    withApi<R>(fn: (api: GridApi<T>) => R): R | undefined;
+    sizeColumnsToFit: () => boolean;
+};
+export type AgGridController<T> = ReturnType<typeof useAgGrid<T>>;
+export type AgGridMyProps<T> = AgGridReactProps<T> & {
+    /** Controller from useAgGrid: all wiring (getRowId, ready/destroy, sync) is inside. */
+    controller?: AgGridController<T>;
+    /** Declarative row upsert for simple cases without a controller. */
+    data?: Partial<T>[];
+    /** Auto-fit columns to the container. Defaults to true. */
+    autoSizeColumns?: boolean;
+};
+declare function AgGridMyInner<T>(props: AgGridMyProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const AgGridMy: typeof AgGridMyInner;
+export {};

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

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Layer 2 (React): headless hook over the core + custom <AgGridMy> component.
+// The hook does NOT render; it returns a controller. AgGridMy is our AgGridReact with
+// project defaults (theme, memo, auto sizing, selection, lifecycle). Wiring is the
+// controller prop; bare <AgGridReact> can still spread gridProps (as in agGrid3).
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { AgGridReact } from 'ag-grid-react';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
+import { createGridBuffer } from './core';
+import { useAgGridTheme } from './theme';
+// ag-grid v35 requires module registration. Do it lazily and once, on the first hook
+// use, not when the package is imported (the entry stays side-effect-free).
+// Re-registration by a consumer that already calls GridStyleDefault() is harmless.
+let modulesRegistered = false;
+function ensureAgGridModules() {
+    if (modulesRegistered)
+        return;
+    modulesRegistered = true;
+    ModuleRegistry.registerModules([AllCommunityModule]);
+}
+/**
+ * Headless table hook. All race handling lives in the core; the hook only binds it
+ * to the React and grid lifecycle:
+ *
+ *   const grid = useAgGrid<Row>({ getId })
+ *   <AgGridMy<Row> controller={grid} columnDefs={cols} />
+ *   grid.update({ newData })
+ */
+export function useAgGrid(options) {
+    ensureAgGridModules();
+    const apiRef = useRef(null);
+    // The core is created once; dependencies live in its closure, with no useCallback chains.
+    const [core] = useState(function createCore() {
+        const getId = options?.getId ?? (data => String(data?.id));
+        return createGridBuffer({ getId, externalBuffer: options?.externalBuffer });
+    });
+    const gridProps = useMemo(() => ({
+        getRowId(params) {
+            return core.api.getId(params.data);
+        },
+        onGridReady(event) {
+            apiRef.current = event.api;
+            core.control.attach(event.api); // attach runs sync and catches up with the race
+        },
+        onGridPreDestroyed(_event) {
+            apiRef.current = null;
+            core.control.detach();
+        },
+    }), [core]);
+    return useMemo(() => {
+        const fit = () => {
+            const api = apiRef.current;
+            if (!api)
+                return false;
+            api.sizeColumnsToFit();
+            return true;
+        };
+        return {
+            update: core.api.updateData,
+            remove(rows) {
+                core.api.updateData({ removeData: rows });
+            },
+            fit,
+            updateData: core.api.updateData,
+            sync: core.api.sync,
+            getId: core.api.getId,
+            buffer: core.api.buffer,
+            apiRef,
+            props: gridProps,
+            gridProps,
+            getApi() {
+                return apiRef.current;
+            },
+            withApi(fn) {
+                const api = apiRef.current;
+                return api ? fn(api) : undefined;
+            },
+            sizeColumnsToFit: fit,
+        };
+    }, [core, gridProps]);
+}
+// --- AgGridMy: our grid with project defaults --------------------------------
+// v35: the canonical row-selection form is an object, not the legacy "multiple" string.
+// Stable module-level reference so the grid does not re-evaluate the option on each render.
+const ROW_SELECTION = { mode: 'multiRow' };
+function AgGridMyInner(props) {
+    const { controller, data, autoSizeColumns = true, defaultColDef, theme, getRowId, onGridReady, onGridPreDestroyed, ...rest } = props;
+    // Own controller for declarative mode (without an external controller); the hook is unconditional.
+    const own = useAgGrid();
+    const grid = controller ?? own;
+    const defaultTheme = useAgGridTheme();
+    const containerRef = useRef(null);
+    useEffect(function pushData() {
+        if (data)
+            grid.update({ newData: data });
+    }, [data, grid]);
+    useEffect(function observeResize() {
+        if (!containerRef.current || !autoSizeColumns)
+            return;
+        let rafId = 0;
+        const observer = new ResizeObserver(function fitColumns(entries) {
+            // one observed element: the last entry is the latest size; one RAF per batch,
+            // cancelled on cleanup so fit() cannot hit a grid mid-destroy
+            const entry = entries[entries.length - 1];
+            if (entry.contentRect.width < 400)
+                return;
+            cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(() => grid.fit());
+        });
+        observer.observe(containerRef.current);
+        return () => {
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+        };
+    }, [autoSizeColumns, grid]);
+    const mergedColDef = useMemo(() => ({ sortable: true, resizable: true, filter: true, ...defaultColDef }), [defaultColDef]);
+    return (_jsx("div", { ref: containerRef, style: { height: '100%', width: '100%', overflow: 'hidden' }, children: _jsx(AgGridReact, { theme: theme ?? defaultTheme, asyncTransactionWaitMillis: 50, suppressCellFocus: true, rowSelection: ROW_SELECTION, ...rest, defaultColDef: mergedColDef, 
+            // getRowId after the spread: undefined from rest must not erase the wiring,
+            // otherwise the grid falls back to index-based row identity.
+            getRowId: getRowId ?? grid.props.getRowId, onGridReady: function ready(event) {
+                grid.props.onGridReady(event);
+                if (autoSizeColumns)
+                    event.api.sizeColumnsToFit();
+                onGridReady?.(event);
+            }, onGridPreDestroyed: function destroyed(event) {
+                grid.props.onGridPreDestroyed(event);
+                onGridPreDestroyed?.(event);
+            } }) }));
+}
+// memo: the grid does not re-render from unrelated page state; data updates bypass
+// render (controller.updateData). The cast is required because memo() erases the component generic.
+export const AgGridMy = memo(AgGridMyInner);

package/lib/common/src/grid/agGrid4/core.d.ts

@@ -0,0 +1,56 @@
+export type RowId = string;
+/** Gets a stable row id. Works with partial data too. */
+export type GetId<T> = (data: Partial<T>) => RowId;
+export type BufferTable<T> = Record<RowId, Partial<T>>;
+export type GridTransaction<T> = {
+    add?: T[];
+    update?: T[];
+    remove?: T[];
+};
+/** Minimal grid api contract (the real GridApi is structurally compatible). */
+export type GridApiLike<T> = {
+    forEachNode(callback: (node: {
+        data?: T;
+    }) => void): void;
+    applyTransaction(tx: GridTransaction<T>): unknown;
+    applyTransactionAsync(tx: GridTransaction<T>): void;
+};
+export type PushOptions = {
+    add?: boolean;
+    update?: boolean;
+    /** add+update in one SYNCHRONOUS transaction. Default: add is sync, update is async (batched). */
+    sync?: boolean;
+};
+export type UpdateArgs<T> = {
+    newData?: Partial<T>[];
+    removeData?: Partial<T>[];
+    /** Only update the buffer; do not touch the grid. */
+    onlyMemo?: boolean;
+    option?: PushOptions;
+};
+/**
+ * Table core: buffer + delivery to the grid. Lifecycle:
+ *  1. updateData at any time: the buffer is always updated, the grid only if attached;
+ *  2. attach(api) on onGridReady: sync catches up with everything that arrived earlier;
+ *  3. detach() on grid destroy: the core accumulates in the buffer again until the next attach.
+ */
+export declare function createGridBuffer<T>(deps: {
+    getId: GetId<T>;
+    /** External buffer (object above the component) survives route remounts. Otherwise use an internal one. */
+    externalBuffer?: BufferTable<T>;
+}): {
+    control: {
+        attach: (gridApi: GridApiLike<T>) => void;
+        detach: () => void;
+    };
+    api: {
+        updateData: (args: UpdateArgs<T>) => void;
+        sync: () => void;
+        getId: GetId<T>;
+        buffer: BufferTable<T>;
+    };
+};
+export type GridBufferCore<T> = ReturnType<typeof createGridBuffer<T>>;
+export type NumberPair = [a: number, b: number];
+/** Column comparator: numbers as numbers, empty/NaN values last (respecting inversion). */
+export declare function numericComparator<T = any>(map?: (a: any, b: any) => NumberPair): (a1: any, b1: any, _nodeA?: T, _nodeB?: T, inv?: boolean) => number;