wenay-react2 1.0.20 → 1.0.21

package/lib/common/src/myChart/chartEngine/chartEngineReact.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /*************************************************************
  * chartEngine.tsx
- * Обновлённый пример, где:
- *  - Ширина панелей = 100% от Canvas
- *  - Высота панелей задаётся в процентах (heightPct)
- *  - Последняя панель всегда "дотягивает" до 100%
+ * Updated example where:
+ *  - Panel width = 100% of Canvas
+ *  - Panel height is defined in percent (heightPct)
+ *  - The last panel always fills up to 100%
  *************************************************************/
 import { useRef, useEffect } from 'react';
 /**
- * Фабрика DataSet
+ * DataSet factory
  */
 export function createDataSet(params) {
     const { id, type = 'line', data = [], style = {}, chunkSize = 100 } = params;
@@ -22,23 +22,24 @@ export function createDataSet(params) {
     const mergedStyle = { ...defaultStyle, ...style };
     let internalData = data.slice();
     let minMaxChunks = [];
+    function computeChunk(chunkIndex) {
+        const start = chunkIndex * chunkSize;
+        const end = Math.min(start + chunkSize, internalData.length);
+        let minY = Infinity;
+        let maxY = -Infinity;
+        for (let i = start; i < end; i++) {
+            const y = internalData[i].y;
+            if (y < minY)
+                minY = y;
+            if (y > maxY)
+                maxY = y;
+        }
+        return { xStart: internalData[start].x, xEnd: internalData[end - 1].x, minY, maxY };
+    }
     function buildMinMaxChunks() {
         minMaxChunks = [];
-        if (internalData.length === 0)
-            return;
-        for (let i = 0; i < internalData.length; i += chunkSize) {
-            const chunkData = internalData.slice(i, i + chunkSize);
-            let minY = Infinity;
-            let maxY = -Infinity;
-            const xStart = chunkData[0].x;
-            const xEnd = chunkData[chunkData.length - 1].x;
-            for (const dp of chunkData) {
-                if (dp.y < minY)
-                    minY = dp.y;
-                if (dp.y > maxY)
-                    maxY = dp.y;
-            }
-            minMaxChunks.push({ xStart, xEnd, minY, maxY });
+        for (let c = 0; c * chunkSize < internalData.length; c++) {
+            minMaxChunks.push(computeChunk(c));
         }
     }
     buildMinMaxChunks();
@@ -64,26 +65,15 @@ export function createDataSet(params) {
     }
     function addData(newPoints) {
         const arr = Array.isArray(newPoints) ? newPoints : [newPoints];
+        if (arr.length === 0)
+            return;
+        const oldLength = internalData.length;
         internalData.push(...arr);
-        const remainder = internalData.length % chunkSize;
-        if (remainder <= arr.length) {
-            buildMinMaxChunks();
-        }
-        else {
-            const lastChunkIndex = Math.floor((internalData.length - 1) / chunkSize);
-            const startIndex = lastChunkIndex * chunkSize;
-            const chunkData = internalData.slice(startIndex, startIndex + chunkSize);
-            let minY = Infinity;
-            let maxY = -Infinity;
-            for (const d of chunkData) {
-                if (d.y < minY)
-                    minY = d.y;
-                if (d.y > maxY)
-                    maxY = d.y;
-            }
-            const xStart = chunkData[0].x;
-            const xEnd = chunkData[chunkData.length - 1].x;
-            minMaxChunks[lastChunkIndex] = { xStart, xEnd, minY, maxY };
+        // recompute only the tail: previously crossing a chunk boundary rebuilt ALL chunks (O(n) per boundary)
+        const firstChunk = Math.floor(oldLength / chunkSize);
+        const lastChunk = Math.floor((internalData.length - 1) / chunkSize);
+        for (let c = firstChunk; c <= lastChunk; c++) {
+            minMaxChunks[c] = computeChunk(c);
         }
     }
     return {
@@ -92,7 +82,8 @@ export function createDataSet(params) {
         data: internalData,
         style: mergedStyle,
         chunkSize,
-        minMaxChunks,
+        // buildMinMaxChunks reassigns the local array, so use a getter instead of a stale snapshot
+        get minMaxChunks() { return minMaxChunks; },
         getMinMaxInRange,
         addData
     };
@@ -140,7 +131,7 @@ export function createPanelManager() {
             top: 0,
             width: 0,
             height: 0,
-            heightPct: config.heightPct ?? 20, // по умолчанию 20% (или любой другой)
+            heightPct: config.heightPct ?? 20, // default 20% (or any other value)
             dataSets: config.dataSets,
             verticalRange: { minY: 0, maxY: 1 },
             autoFocusY: config.autoFocusY !== false,
@@ -150,28 +141,28 @@ export function createPanelManager() {
     }
     /**
      * layoutPanels:
-     *  - Суммируем heightPct всех панелей (кроме последней).
-     *  - Последняя панель = 100% - сумма предыдущих (если вдруг сумма < 100).
-     *  - Переводим проценты в px, рассчитываем top/height.
+     *  - Sum heightPct for all panels except the last one.
+     *  - Last panel = 100% - sum of previous panels (if the sum is below 100).
+     *  - Convert percents to px and calculate top/height.
      */
     function layoutPanels(containerWidth, containerHeight) {
-        // Сумма процентов у всех панелей, кроме последней
+        // Percent sum for all panels except the last one
         if (panels.length === 0)
             return;
-        // Рассчитываем сумму “заданных” процентов (кроме последней)
+        // Calculate the sum of assigned percents (except the last one)
         let totalAssignedPct = 0;
         for (let i = 0; i < panels.length - 1; i++) {
             totalAssignedPct += panels[i].heightPct;
         }
         if (totalAssignedPct > 100)
-            totalAssignedPct = 100; // ограничим
-        // Последней панели даём остаток
+            totalAssignedPct = 100; // clamp
+        // Give the remaining space to the last panel
         const lastPanel = panels[panels.length - 1];
         lastPanel.heightPct = 100 - totalAssignedPct;
-        // Теперь вычисляем top/height
+        // Now calculate top/height
         let currentTopPx = 0;
         for (const p of panels) {
-            // Преобразуем процент в px
+            // Convert percent to px
             const hPx = (p.heightPct / 100) * containerHeight;
             p.left = 0;
             p.top = currentTopPx;
@@ -181,21 +172,21 @@ export function createPanelManager() {
         }
     }
     /**
-     * resizePanel: меняем процент высоты одной панели при “перетаскивании”.
-     * deltaPx — изменение высоты в px, превращаем в проценты.
+     * resizePanel: change one panel height percent while dragging.
+     * deltaPx is the height change in px, converted to percent.
      */
     function resizePanel(panelId, deltaPx, containerHeight) {
         const idx = panels.findIndex((p) => p.id === panelId);
-        if (idx < 0 || idx >= panels.length)
+        if (idx < 0)
             return;
         const p = panels[idx];
-        // Текущий процент
+        // Current percent
         const oldPct = p.heightPct;
         // px -> pct
         const deltaPct = (deltaPx / containerHeight) * 100;
         const newPct = p.heightPct + deltaPct;
-        // Ограничим чтобы не уходило в отрицательные значения
-        if (newPct < 5) { // Минимум 5% (условно)
+        // Clamp to avoid negative values
+        if (newPct < 5) { // Minimum 5% (arbitrary)
             p.heightPct = 5;
         }
         else if (newPct > 95) {
@@ -212,21 +203,41 @@ export function createPanelManager() {
         resizePanel
     };
 }
+// Right Y-axis width, a single file-level constant
+const AXIS_THICKNESS = 40;
+// Visible world-X range for a drawing area of the given pixel width
+function visibleXRange(width, transform) {
+    return [transform.offsetX, transform.offsetX + (width - AXIS_THICKNESS) / transform.scaleX];
+}
+// Data is sorted by x: find visible-range boundaries with binary search,
+// without filter allocations on each frame. Returns [start, end) by indexes.
+function visibleRange(data, xMin, xMax) {
+    let lo = 0, hi = data.length;
+    while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        if (data[mid].x < xMin)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    const start = lo;
+    hi = data.length;
+    while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        if (data[mid].x <= xMax)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    return [start, lo];
+}
 export function createRenderer() {
-    const AXIS_THICKNESS = 40;
     function getNiceTicks(minVal, maxVal, count) {
         const range = maxVal - minVal || 1;
         const roughStep = range / count;
         const mag = Math.pow(10, Math.floor(Math.log10(roughStep)));
-        let norm = roughStep / mag;
-        let step = 1;
-        if (norm < 2)
-            step = 1;
-        else if (norm < 5)
-            step = 2;
-        else
-            step = 5;
-        step *= mag;
+        const norm = roughStep / mag;
+        const step = (norm < 2 ? 1 : norm < 5 ? 2 : 5) * mag;
         const niceMin = Math.floor(minVal / step) * step;
         const niceMax = Math.ceil(maxVal / step) * step;
         const ticks = [];
@@ -240,7 +251,7 @@ export function createRenderer() {
     }
     function yToPixY(yVal, panel, transform) {
         // autoFocusY => [minY, maxY]
-        // иначе offsetY/scaleY
+        // otherwise offsetY/scaleY
         if (panel.autoFocusY) {
             const { minY, maxY } = panel.verticalRange;
             const range = maxY - minY || 1;
@@ -306,11 +317,9 @@ export function createRenderer() {
         const fillColor = style.fillColor ?? 'rgba(34,153,221,0.2)';
         const gradientFill = style.gradientFill ?? true;
         const lineWidth = style.lineWidth ?? 2;
-        const AXIS_THICKNESS = 40;
-        const xMinVisible = transform.offsetX;
-        const xMaxVisible = transform.offsetX + (panel.width - AXIS_THICKNESS) / transform.scaleX;
-        const visible = data.filter((pt) => pt.x >= xMinVisible && pt.x <= xMaxVisible);
-        if (visible.length < 2)
+        const [xMinVisible, xMaxVisible] = visibleXRange(panel.width, transform);
+        const [start, end] = visibleRange(data, xMinVisible, xMaxVisible);
+        if (end - start < 2)
             return;
         const result = [];
         let lastPixX = -1;
@@ -325,7 +334,8 @@ export function createRenderer() {
             if (b !== a)
                 result.push(b);
         };
-        for (const pt of visible) {
+        for (let i = start; i < end; i++) {
+            const pt = data[i];
             const px = Math.round(xToPixX(pt.x, transform, panel));
             if (px !== lastPixX) {
                 flush();
@@ -382,19 +392,18 @@ export function createRenderer() {
     }
     function drawBarChart(ctx, data, panel, transform, style) {
         const barColor = style.barColor ?? '#66cc66';
-        const AXIS_THICKNESS = 40;
-        const xMinVisible = transform.offsetX;
-        const xMaxVisible = transform.offsetX + (panel.width - AXIS_THICKNESS) / transform.scaleX;
-        const visible = data.filter((pt) => pt.x >= xMinVisible && pt.x <= xMaxVisible);
-        if (!visible.length)
+        const [xMinVisible, xMaxVisible] = visibleXRange(panel.width, transform);
+        const [start, end] = visibleRange(data, xMinVisible, xMaxVisible);
+        if (end === start)
             return;
         ctx.save();
         ctx.fillStyle = barColor;
         const barWidth = 5;
-        for (const pt of visible) {
+        const pyBase = yToPixY(panel.verticalRange.minY, panel, transform);
+        for (let i = start; i < end; i++) {
+            const pt = data[i];
             const px = xToPixX(pt.x, transform, panel);
             const py = yToPixY(pt.y, panel, transform);
-            const pyBase = yToPixY(panel.verticalRange.minY, panel, transform);
             ctx.fillRect(px - barWidth / 2, py, barWidth, pyBase - py);
         }
         ctx.restore();
@@ -489,11 +498,14 @@ export function createInteraction(canvas, getTransform, setTransform, getPanels,
         const localX = e.clientX - rect.left;
         const localY = e.clientY - rect.top;
         crosshairPos = { x: localX, y: localY };
-        // Проверка границы между панелями (для ресайза)
+        // Check the boundary between panels (for resize)
         const panels = getPanels();
         for (const p of panels) {
             if (!p.resizable)
                 continue;
+            // last panel takes the leftover height in layoutPanels - its bottom border is not draggable
+            if (p === panels[panels.length - 1])
+                continue;
             const bottom = p.top + p.height;
             if (Math.abs(localY - bottom) < 5) {
                 dragMode = DragMode.ResizePanel;
@@ -502,15 +514,15 @@ export function createInteraction(canvas, getTransform, setTransform, getPanels,
                 return;
             }
         }
-        // Ищем панель
+        // Find panel
         activePanel = findPanel(localX, localY, panels);
         if (!activePanel) {
             dragMode = DragMode.None;
             return;
         }
-        const axisRightX = activePanel.left + activePanel.width - 40;
+        const axisRightX = activePanel.left + activePanel.width - AXIS_THICKNESS;
         if (localX >= axisRightX) {
-            // масштаб по Y, если autoFocusY=false
+            // Scale by Y if autoFocusY=false
             dragMode = DragMode.ScaleY;
         }
         else {
@@ -533,11 +545,13 @@ export function createInteraction(canvas, getTransform, setTransform, getPanels,
         lastX = e.clientX;
         lastY = e.clientY;
         const t = getTransform();
-        // Режим ресайза панели
+        // Panel resize mode
         if (dragMode === DragMode.ResizePanel && resizingPanelId) {
             // deltaPx = dy
-            const { height: cH } = getContainerSize();
+            const { width: cW, height: cH } = getContainerSize();
             panelManager.resizePanel(resizingPanelId, dy, cH);
+            // recalc px top/height right away - previously it only happened on container resize
+            panelManager.layoutPanels(cW, cH);
             onTransformChanged();
             return;
         }
@@ -560,12 +574,6 @@ export function createInteraction(canvas, getTransform, setTransform, getPanels,
         }
         onTransformChanged();
     }
-    function onMouseUp(e) {
-        isMouseDown = false;
-        dragMode = DragMode.None;
-        activePanel = null;
-        resizingPanelId = null;
-    }
     function onGlobalMouseUp(e) {
         if (isMouseDown) {
             isMouseDown = false;
@@ -594,7 +602,7 @@ export function createInteraction(canvas, getTransform, setTransform, getPanels,
         const p = findPanel(localX, localY, getPanels());
         if (!p)
             return;
-        const axisRightX = p.left + p.width - 40;
+        const axisRightX = p.left + p.width - AXIS_THICKNESS;
         if (localX >= axisRightX) {
             onToggleAutoFocusY(p);
             onTransformChanged();
@@ -638,7 +646,7 @@ export function createInteraction(canvas, getTransform, setTransform, getPanels,
     };
 }
 /**
- * Фабричная функция движка
+ * Engine factory function
  */
 export function createChartEngine(canvas) {
     const ctx = canvas.getContext('2d');
@@ -657,7 +665,22 @@ export function createChartEngine(canvas) {
     let resizeObserver = null;
     let containerWidth = 0;
     let containerHeight = 0;
-    const isYRightAxis = true;
+    // Dirty flag: render only when something changes. Invalidation hooks cover interaction
+    // (including crosshair), addData/addPanel/resize; stamp in renderLoop catches direct
+    // mutations through dataModel/panelManager (data lengths, panel geometry, canvas size).
+    let needsRender = true;
+    let lastStamp = NaN;
+    function invalidate() { needsRender = true; }
+    function frameStamp() {
+        const panels = panelManager.panels;
+        let s = panels.length + canvas.width * 3 + canvas.height * 5;
+        for (const p of panels) {
+            s += p.top * 7 + p.height * 13 + (p.autoFocusY ? 1 : 0);
+            for (const ds of p.dataSets)
+                s += ds.data.length * 31;
+        }
+        return s;
+    }
     function setTransform(t) {
         transform = t;
     }
@@ -673,13 +696,27 @@ export function createChartEngine(canvas) {
     function getContainerSize() {
         return { width: containerWidth, height: containerHeight };
     }
-    const interaction = createInteraction(canvas, getTransform, setTransform, getPanels, () => updatePanels(), (p) => toggleAutoFocusY(p), panelManager, getContainerSize);
+    const interaction = createInteraction(canvas, getTransform, setTransform, getPanels, 
+    // invalidate is enough: renderLoop runs updatePanels once per dirty frame,
+    // calling it here doubled the min/max scan on every mouse event
+    invalidate, (p) => toggleAutoFocusY(p), panelManager, getContainerSize);
     function updatePanels() {
-        const x1 = transform.offsetX;
-        const x2 = transform.offsetX + (canvas.width - 40) / transform.scaleX;
+        const [x1, x2] = visibleXRange(canvas.width, transform);
         for (const p of panelManager.panels) {
             if (p.autoFocusY) {
-                const { minY, maxY } = dataModel.getGlobalMinMaxY(x1, x2, (ds) => p.dataSets.includes(ds));
+                let minY = Infinity;
+                let maxY = -Infinity;
+                for (const ds of p.dataSets) {
+                    const r = ds.getMinMaxInRange(x1, x2);
+                    if (r.minY < minY)
+                        minY = r.minY;
+                    if (r.maxY > maxY)
+                        maxY = r.maxY;
+                }
+                if (minY === Infinity || maxY === -Infinity) {
+                    minY = 0;
+                    maxY = 1;
+                }
                 p.verticalRange.minY = minY;
                 p.verticalRange.maxY = maxY;
             }
@@ -695,12 +732,19 @@ export function createChartEngine(canvas) {
     function renderLoop() {
         if (destroyed)
             return;
-        updatePanels();
-        const xMin = transform.offsetX;
-        const xMax = transform.offsetX + (canvas.width - 40) / transform.scaleX;
-        const crosshair = interaction.getCrosshairPos();
-        for (const p of panelManager.panels) {
-            renderer.drawPanel(ctx, p, transform, { xMin, xMax }, crosshair, isYRightAxis);
+        const stamp = frameStamp();
+        if (stamp !== lastStamp) {
+            lastStamp = stamp;
+            needsRender = true;
+        }
+        if (needsRender) {
+            needsRender = false;
+            updatePanels();
+            const [xMin, xMax] = visibleXRange(canvas.width, transform);
+            const crosshair = interaction.getCrosshairPos();
+            for (const p of panelManager.panels) {
+                renderer.drawPanel(ctx, p, transform, { xMin, xMax }, crosshair, true);
+            }
         }
         animationFrameId = requestAnimationFrame(renderLoop);
     }
@@ -712,8 +756,7 @@ export function createChartEngine(canvas) {
         destroyed = true;
         cancelAnimationFrame(animationFrameId);
         interaction.destroy();
-        if (resizeObserver && containerEl) {
-            resizeObserver.unobserve(containerEl);
+        if (resizeObserver) {
             resizeObserver.disconnect();
         }
         containerEl = null;
@@ -731,6 +774,7 @@ export function createChartEngine(canvas) {
                     if (canvas.width !== w || canvas.height !== h) {
                         canvas.width = w;
                         canvas.height = h;
+                        invalidate(); // changing canvas size clears the bitmap, so redraw is required
                     }
                     containerWidth = w;
                     containerHeight = h;
@@ -742,10 +786,14 @@ export function createChartEngine(canvas) {
         resizeObserver.observe(containerEl);
     }
     function createDataSetFn(params) {
-        return dataModel.addDataSet(params);
+        const ds = dataModel.addDataSet(params);
+        const addDataOrig = ds.addData;
+        ds.addData = (p) => { addDataOrig(p); invalidate(); };
+        return ds;
     }
     function addPanelFn(config) {
         panelManager.addPanel(config);
+        invalidate();
     }
     return {
         init,
@@ -760,7 +808,7 @@ export function createChartEngine(canvas) {
     };
 }
 /**
- * Пример генерации данных
+ * Data generation example
  */
 export function generateIncrementalData(startX, count, startY, maxDelta) {
     const arr = [];
@@ -777,9 +825,9 @@ export function generateIncrementalData(startX, count, startY, maxDelta) {
     return arr;
 }
 /**
- * Пример React-компонента MyChart
+ * MyChart React component example
  */
-export const MyChartEngine = () => {
+export const MyChartEngine = ({ style }) => {
     const containerRef = useRef(null);
     const canvasRef = useRef(null);
     const engineRef = useRef(null);
@@ -792,7 +840,7 @@ export const MyChartEngine = () => {
         engineRef.current = engine;
         engine.attachToContainer(container);
         engine.init();
-        // Создаём DataSets
+        // Create DataSets
         const lineData = generateIncrementalData(0, 50, 100, 10);
         const lineDS = engine.createDataSet({
             id: 'line1',
@@ -807,8 +855,8 @@ export const MyChartEngine = () => {
             data: barData,
             style: { barColor: '#66aa66' }
         });
-        // Добавляем панели — указываем heightPct
-        // Последняя панель автоматически заберёт остаток до 100%.
+        // Add panels and specify heightPct
+        // The last panel automatically takes the remaining space up to 100%.
         engine.addPanel({
             id: 'mainPanel',
             dataSets: [lineDS],
@@ -823,7 +871,7 @@ export const MyChartEngine = () => {
             autoFocusY: true,
             resizable: true
         });
-        // Имитация добавления
+        // Simulate adding data
         let lineX = lineData[lineData.length - 1].x;
         let lineY = lineData[lineData.length - 1].y;
         let barX = barData[barData.length - 1].x;
@@ -841,7 +889,7 @@ export const MyChartEngine = () => {
                 barY = 0;
             barX++;
             barDS.addData({ x: barX, y: barY });
-        }, 1);
+        }, 50); // demo stream; 1ms flooded the dataset at max timer rate
         return () => {
             clearInterval(intervalId);
             engine.destroy();
@@ -851,6 +899,7 @@ export const MyChartEngine = () => {
             width: '100%',
             height: '600px',
             border: '1px solid #ccc',
-            position: 'relative'
+            position: 'relative',
+            ...style
         }, children: _jsx("canvas", { ref: canvasRef }) }));
 };

package/lib/common/src/styles/styleGrid.d.ts

@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import { CellClassParams } from "ag-grid-community";
 import type { Theme, ThemeDefaultParams } from "ag-grid-community";
 import { provideGlobalGridOptions } from "ag-grid-community";
@@ -17,4 +18,4 @@ export declare function StyleCSSHeadGridEdit(name: string, rules: string): void;
 export declare function StyleCSSHeadGrid(): void;
 export type tCallFuncAgGrid<T> = (params: CellClassParams & {
     data: T;
-}) => {};
+}) => CSSProperties | Record<string, any>;

package/lib/common/src/styles/styleGrid.js

@@ -1,6 +1,7 @@
 import { colorSchemeDarkBlue, iconSetMaterial, provideGlobalGridOptions, themeAlpine } from "ag-grid-community";
 import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
 export { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
+import { tokens } from "./tokens";
 // import 'ag-grid-community/styles/ag-grid.css';
 // import 'ag-grid-community/styles/ag-theme-alpine.css';
 // Register all community features
@@ -9,14 +10,7 @@ export function GridStyleDefault() {
     const theme = themeAlpine
         .withPart(colorSchemeDarkBlue)
         .withPart(iconSetMaterial)
-        .withParams({
-        'fontFamily': 'Roboto',
-        'textColor': 'rgba(214,214,214,0.9)',
-        'tabTextColor': 'rgba(227,227,227,0.9)',
-        'fontSize': '10px',
-        'spacing': '3px',
-        'backgroundColor': 'rgb(19,24,33)'
-    });
+        .withParams({ ...tokens.grid });
     // Mark all grids as using legacy themes
     provideGlobalGridOptions({ theme: theme });
     return { theme, provideGlobalGridOptions };
@@ -38,13 +32,17 @@ export const StyleGridDefault = {
 };
 export function StyleCSSHeadGridEdit(name, rules) {
     let style = document.createElement('style');
-    style.type = 'text/css';
-    document.getElementsByTagName('head')[0].appendChild(style);
+    document.head.appendChild(style);
     style.sheet?.insertRule(name + "{" + rules + "}", 0);
 }
+let headGridStylesApplied = false;
 export function StyleCSSHeadGrid() {
-    // уменьшаем отступы с боков для заголовков
+    // idempotent: repeated calls used to append a new <style> to <head> every time
+    if (headGridStylesApplied)
+        return;
+    headGridStylesApplied = true;
+    // Reduce side padding for headers
     StyleCSSHeadGridEdit('.ag-theme-alpine-dark .ag-theme-alpine .ag-header-cell, .ag-theme-alpine-dark .ag-header-group-cell', "padding-left: 3px; padding-right: 3px;");
-    // выравнивание в заголовке по центру
+    // Center header content
     StyleCSSHeadGridEdit('.ag-header-cell-label', 'justify-content: center');
 }

package/lib/common/src/styles/tokens.d.ts

@@ -0,0 +1,39 @@
+export declare const tokens: {
+    readonly color: {
+        readonly bgDark: "#131821";
+        readonly bgLight: "#17202e";
+        readonly scrollbarTrack: "rgba(255, 255, 255, 0)";
+        readonly scrollbarThumb: "#1d262c";
+        readonly scrollbarThumbAlt: "#4c4562";
+        readonly textBase: "#c4c4c4";
+        readonly textTheme: "#5D9FFA";
+        readonly borderCommon: "rgb(50, 62, 71)";
+    };
+    readonly menu: {
+        readonly bgColor: "rgba(12, 12, 12, 0.91)";
+        readonly blur: "10px";
+        readonly border: "1px solid rgba(255, 255, 255, 0.41)";
+        readonly activeBackground: "rgba(255, 255, 255, 0.23)";
+        readonly itemColor: "#fff";
+        readonly itemHoverColor: "#101010";
+        readonly itemHoverBgColor: "#fff";
+    };
+    readonly font: {
+        readonly family: "Roboto";
+        readonly sizeBase: "12px";
+    };
+    readonly zIndex: {
+        /** CSS variable --wenay-z-modal; fallback in ModalProvider */
+        readonly modal: 9999;
+    };
+    /** ag-grid theme params shared by GridStyleDefault (legacy) and agGrid4 buildAgTheme */
+    readonly grid: {
+        readonly fontFamily: "Roboto";
+        readonly textColor: "rgba(214,214,214,0.9)";
+        readonly tabTextColor: "rgba(227,227,227,0.9)";
+        readonly fontSize: "10px";
+        readonly spacing: "3px";
+        readonly backgroundColor: "rgb(19,24,33)";
+    };
+};
+export type Tokens = typeof tokens;