@sequent-org/moodboard 1.3.5 → 1.4.0

package/src/grid/DotGrid.js

@@ -1,5 +1,9 @@
 import { BaseGrid } from './BaseGrid.js';
-import { getActivePhases, getEffectiveSize } from './DotGridZoomPhases.js';
+import { getActivePhases, getDotCheckpointForZoom, getDotColor, getEffectiveSize, getRawScreenDotRadius, getScreenDotRadius, getScreenSpacing } from './DotGridZoomPhases.js';
+import { getScreenAnchor } from './ScreenGridPhaseMachine.js';
+
+/** Checkpoint zoomPercent: 1px dot вместо круга */
+const DOT_1PX_CHECKPOINTS = new Set([7, 7.6, 8.4, 15, 17, 19, 20, 21, 24, 26, 30, 37, 41, 46]);
 
 /**
  * Точечная сетка с фазовым переключением при зуме (как в Miro).
@@ -14,8 +18,7 @@ export class DotGrid extends BaseGrid {
         this.highlightIntersections = options.highlightIntersections ?? true;
         this.dotSize = options.dotSize ?? 1; // для serialize/setDotSize; фазы переопределяют при отрисовке
         this.snapSize = options.snapSize ?? 20; // фиксированный шаг привязки в world-координатах
-        // Порог видимости точки на экране и лимит плотности отрисовки.
-        this.minScreenDotRadius = options.minScreenDotRadius ?? 0.45;
+        this.minScreenDotRadius = options.minScreenDotRadius ?? 0;
         this.minScreenSpacing = options.minScreenSpacing ?? 8;
         this.maxDotsPerPhase = options.maxDotsPerPhase ?? 25000;
         this.intersectionSize = options.intersectionSize ?? this.dotSize;
@@ -23,6 +26,21 @@ export class DotGrid extends BaseGrid {
 
         /** Текущий zoom (scale) для выбора фазы. 1 = 100%. */
         this._zoom = 1;
+
+        // DotGrid всегда непрозрачный.
+        this.opacity = 1;
+        this.graphics.alpha = 1;
+
+        // Cursor-centric anchor-контракт: при зуме точка под курсором фиксируется.
+        this._anchorX = null;
+        this._anchorY = null;
+        this._lastStepPxX = null;
+        this._lastStepPxY = null;
+        this._cursorOffsetX = 0;
+        this._cursorOffsetY = 0;
+
+        // Временный debug-режим: разрешает дробный радиус для тонкой подстройки.
+        this._allowFloatDotRadius = false;
     }
 
     /**
@@ -49,7 +67,7 @@ export class DotGrid extends BaseGrid {
     createVisual() {
         this.size = this._getEffectiveSize();
         const phases = this._getActivePhases();
-        const baseOpacity = this.opacity ?? 0.7;
+        const baseOpacity = 1;
         for (const { phase, alpha } of phases) {
             this._drawPhaseDots(phase, baseOpacity * alpha);
         }
@@ -60,41 +78,79 @@ export class DotGrid extends BaseGrid {
      */
     _drawPhaseDots(phase, alpha) {
         const b = this.getDrawBounds();
-        const scale = Math.max(0.001, this._zoom || 1);
-        const baseSize = phase.size;
-        const minWorldSpacing = this.minScreenSpacing / scale;
-        let size = Math.max(baseSize, minWorldSpacing);
-
-        const widthWorld = Math.max(0, b.right - b.left);
-        const heightWorld = Math.max(0, b.bottom - b.top);
-        const estimateDots = () => {
-            const nx = Math.floor(widthWorld / size) + 3;
-            const ny = Math.floor(heightWorld / size) + 3;
-            return nx * ny;
-        };
-        const dots = estimateDots();
-        if (dots > this.maxDotsPerPhase) {
-            const densityFactor = Math.sqrt(dots / this.maxDotsPerPhase);
-            size *= Math.max(1, densityFactor);
-        }
+        const stepPx = Math.max(1, Math.round(getScreenSpacing(this._zoom)));
+
+        const worldX = this.viewportTransform?.worldX || 0;
+        const worldY = this.viewportTransform?.worldY || 0;
+        const cursorX = this.viewportTransform?.zoomCursorX;
+        const cursorY = this.viewportTransform?.zoomCursorY;
+        const useCursorAnchor = this.viewportTransform?.useCursorAnchor === true;
+        const anchorX = this._resolveScreenAnchor('x', worldX, stepPx, cursorX, useCursorAnchor);
+        const anchorY = this._resolveScreenAnchor('y', worldY, stepPx, cursorY, useCursorAnchor);
 
-        const startX = Math.floor(b.left / size) * size;
-        const startY = Math.floor(b.top / size) * size;
-        const endX = Math.ceil(b.right / size) * size;
-        const endY = Math.ceil(b.bottom / size) * size;
+        const alignStart = (min, anchor, step) => {
+            const minInt = Math.round(min);
+            const d = ((anchor - minInt) % step + step) % step;
+            return minInt + d;
+        };
+        const startX = alignStart(b.left, anchorX, stepPx);
+        const startY = alignStart(b.top, anchorY, stepPx);
+        const endX = Math.round(b.right) + stepPx;
+        const endY = Math.round(b.bottom) + stepPx;
 
-        const minWorldRadius = this.minScreenDotRadius / scale;
-        const maxWorldRadius = size * 0.2;
-        const dotSize = Math.min(Math.max(phase.dotSize, minWorldRadius), maxWorldRadius);
+        const rawDotSize = this._allowFloatDotRadius
+            ? getRawScreenDotRadius(this._zoom, this.minScreenDotRadius)
+            : getScreenDotRadius(this._zoom, this.minScreenDotRadius);
+        const checkpoint = getDotCheckpointForZoom(this._zoom);
+        const zoomPct = checkpoint?.zoomPercent ?? 100;
+        const use1px = DOT_1PX_CHECKPOINTS.has(zoomPct);
+        const dotSize = use1px ? 0.4 : rawDotSize;
+        const dotColor = getDotColor(this._zoom, this.color);
 
-        this.graphics.beginFill(this.color, alpha);
-        for (let x = startX; x <= endX; x += size) {
-            for (let y = startY; y <= endY; y += size) {
+        this.graphics.beginFill(dotColor, alpha);
+        for (let x = startX; x <= endX; x += stepPx) {
+            for (let y = startY; y <= endY; y += stepPx) {
                 this.drawDot(x, y, dotSize);
             }
         }
         this.graphics.endFill();
     }
+
+    _normalizeAnchor(anchor, stepPx) {
+        const step = Math.max(1, Math.round(stepPx));
+        const normalized = ((Math.round(anchor) % step) + step) % step;
+        return normalized;
+    }
+
+    _resolveScreenAnchor(axis, worldOffset, stepPx, cursorPx, useCursorAnchor) {
+        const anchorKey = axis === 'x' ? '_anchorX' : '_anchorY';
+        const lastStepKey = axis === 'x' ? '_lastStepPxX' : '_lastStepPxY';
+        const cursorOffsetKey = axis === 'x' ? '_cursorOffsetX' : '_cursorOffsetY';
+        const step = Math.max(1, Math.round(stepPx));
+        const rawAnchor = this._normalizeAnchor(getScreenAnchor(worldOffset, step), step);
+
+        // Во время cursor-centric zoom привязываем сетку к экранной позиции курсора.
+        // Сохраняем относительное смещение курсор↔узел, чтобы не было "прилипания"
+        // узла к курсору, если курсор стоял в пустом месте.
+        if (useCursorAnchor && Number.isFinite(cursorPx)) {
+            const prevAnchor = Number(this[anchorKey]);
+            const prevStep = Math.max(1, Math.round(Number(this[lastStepKey]) || step));
+            if (Number.isFinite(prevAnchor)) {
+                this[cursorOffsetKey] = this._normalizeAnchor(Math.round(cursorPx) - prevAnchor, prevStep);
+            } else if (!Number.isFinite(this[cursorOffsetKey])) {
+                this[cursorOffsetKey] = 0;
+            }
+            const offset = this._normalizeAnchor(this[cursorOffsetKey], step);
+            const cursorAnchor = this._normalizeAnchor(Math.round(cursorPx) - offset, step);
+            this[anchorKey] = cursorAnchor;
+            this[lastStepKey] = step;
+            return cursorAnchor;
+        }
+
+        this[anchorKey] = rawAnchor;
+        this[lastStepKey] = step;
+        return rawAnchor;
+    }
     
     /**
      * Рисует выделенные пересечения (каждые 5 точек)
@@ -119,11 +175,20 @@ export class DotGrid extends BaseGrid {
      * Рисует одну точку
      */
     drawDot(x, y, size) {
+        const px = Math.round(x);
+        const py = Math.round(y);
+        const r = this._allowFloatDotRadius
+            ? Math.max(0, Number(size) || 0)
+            : Math.max(0, Math.round(size));
+        if (r < 1) {
+            this.graphics.drawRect(px, py, 1, 1);
+            return;
+        }
         if (this.dotStyle === 'circle') {
-            this.graphics.drawCircle(x, y, size);
+            this.graphics.drawCircle(px, py, r);
         } else if (this.dotStyle === 'square') {
-            const half = size;
-            this.graphics.drawRect(x - half, y - half, half * 2, half * 2);
+            const half = r;
+            this.graphics.drawRect(px - half, py - half, half * 2, half * 2);
         }
     }
     
@@ -177,6 +242,24 @@ export class DotGrid extends BaseGrid {
         this.updateVisual();
     }
 
+    /**
+     * Временная debug-настройка дробного радиуса.
+     * @param {boolean} enabled
+     */
+    setAllowFloatDotRadius(enabled) {
+        this._allowFloatDotRadius = enabled === true;
+        this.updateVisual();
+    }
+
+    /**
+     * DotGrid всегда непрозрачный: внешний вызов setOpacity игнорируем.
+     */
+    setOpacity() {
+        this.opacity = 1;
+        this.graphics.alpha = 1;
+        this.updateVisual();
+    }
+
     // Делаем цвет пересечений таким же, как основной цвет
     setColor(color) {
         super.setColor(color);

package/src/grid/DotGridZoomPhases.js

@@ -1,8 +1,5 @@
 /**
  * Логика фаз точечной сетки при зуме (чистые функции, тестируемые без PIXI).
- * Фазы подобраны по зафиксированным checkpoint'ам Miro:
- * - high zoom: базовый шаг 20 world units;
- * - low zoom: шаг укрупняется, чтобы избежать перегруза при отрисовке.
  */
 
 /** @type {{ zoomMin: number, zoomMax: number, size: number, dotSize: number }[]} */
@@ -10,26 +7,130 @@ export const PHASES = [
     { zoomMin: 0.02, zoomMax: 0.12, size: 160, dotSize: 0.7 },
     { zoomMin: 0.12, zoomMax: 0.25, size: 80, dotSize: 0.8 },
     { zoomMin: 0.25, zoomMax: 0.5, size: 40, dotSize: 0.9 },
-    { zoomMin: 0.5, zoomMax: 5, size: 20, dotSize: 1 }
+    { zoomMin: 0.5, zoomMax: 5, size: 20, dotSize: 1 },
 ];
 
+/**
+ * Дискретный профиль dot-grid по zoom checkpoint'ам:
+ * на каждом шаге фиксированы spacing / dotRadius / color.
+ */
+export const DOT_CHECKPOINTS = [
+    { zoomPercent: 10, spacing: 16, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 11, spacing: 16, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 12, spacing: 18, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 13, spacing: 10, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 15, spacing: 12, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 17, spacing: 14, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 19, spacing: 16, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 20, spacing: 16, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 21, spacing: 18, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 24, spacing: 20, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 26, spacing: 16, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 30, spacing: 12, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 33, spacing: 13, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 37, spacing: 16, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 41, spacing: 18, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 46, spacing: 20, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 50, spacing: 10, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 52, spacing: 11, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 58, spacing: 12, dotRadius: 1, color: 0xE8E8E8 },
+    { zoomPercent: 1.4, spacing: 16, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 1.6, spacing: 18, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 1.8, spacing: 8, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 2.0, spacing: 10, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 2.2, spacing: 12, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 2.4, spacing: 14, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 2.6, spacing: 16, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 3.0, spacing: 18, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 3.4, spacing: 8, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 3.6, spacing: 10, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 4.0, spacing: 12, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 4.6, spacing: 14, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 5.4, spacing: 16, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 6.0, spacing: 18, dotRadius: 0.5, color: 0xA3A3A3 },
+    { zoomPercent: 7.0, spacing: 8, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 7.6, spacing: 10, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 8.4, spacing: 12, dotRadius: 1, color: 0xA3A3A3 },
+    { zoomPercent: 73, spacing: 15, dotRadius: 1, color: 0xE8E8E8 },
+    { zoomPercent: 75, spacing: 15, dotRadius: 1, color: 0xE8E8E8 },
+    { zoomPercent: 82, spacing: 16, dotRadius: 1, color: 0xE8E8E8 },
+    { zoomPercent: 92, spacing: 18, dotRadius: 1.2, color: 0xE8E8E8 },
+    { zoomPercent: 100, spacing: 20, dotRadius: 1, color: 0xE8E8E8 },
+    { zoomPercent: 103, spacing: 21, dotRadius: 1.3, color: 0xE8E8E8 },
+    { zoomPercent: 115, spacing: 23, dotRadius: 1.4, color: 0xE8E8E8 },
+    { zoomPercent: 125, spacing: 25, dotRadius: 1, color: 0xE8E8E8 },
+    { zoomPercent: 129, spacing: 26, dotRadius: 1.5, color: 0xE3E3E3 },
+    { zoomPercent: 144, spacing: 29, dotRadius: 1.7, color: 0xE7E7E7 },
+    { zoomPercent: 150, spacing: 30, dotRadius: 2, color: 0xE8E8E8 },
+    { zoomPercent: 162, spacing: 32, dotRadius: 1.5, color: 0xE5E5E5 },
+    { zoomPercent: 181, spacing: 36, dotRadius: 2, color: 0xE2E2E2 },
+    { zoomPercent: 200, spacing: 40, dotRadius: 2, color: 0xE8E8E8 },
+    { zoomPercent: 250, spacing: 50, dotRadius: 2, color: 0xE8E8E8 },
+    { zoomPercent: 300, spacing: 60, dotRadius: 3, color: 0xE8E8E8 },
+    { zoomPercent: 400, spacing: 80, dotRadius: 4, color: 0xE8E8E8 },
+    { zoomPercent: 500, spacing: 100, dotRadius: 5, color: 0xE8E8E8 },
+];
+
+function clampZoom(zoom) {
+    return Math.max(0.02, Math.min(5, zoom || 1));
+}
+
+/**
+ * Для DotGrid границы фаз выбираются по "нижней" фазе (включительно),
+ * чтобы на 50% происходил ожидаемый визуальный скачок.
+ */
+function resolveDotPhase(zoom) {
+    const z = clampZoom(zoom);
+    for (const phase of PHASES) {
+        if (z >= phase.zoomMin && z <= phase.zoomMax) {
+            return phase;
+        }
+    }
+    return PHASES[PHASES.length - 1];
+}
+
+function resolveDotCheckpoint(zoom) {
+    const z = clampZoom(zoom);
+    const p = z * 100;
+    let best = DOT_CHECKPOINTS[0];
+    let bestDist = Math.abs(best.zoomPercent - p);
+    for (let i = 1; i < DOT_CHECKPOINTS.length; i += 1) {
+        const row = DOT_CHECKPOINTS[i];
+        const dist = Math.abs(row.zoomPercent - p);
+        if (dist < bestDist) {
+            best = row;
+            bestDist = dist;
+        }
+    }
+    return best;
+}
+
+function sanitizeColor(color, fallback = 0xE8E8E8) {
+    const n = Number(color);
+    if (!Number.isFinite(n)) return fallback;
+    return Math.max(0, Math.min(0xFFFFFF, Math.round(n)));
+}
+
+function sanitizeSpacing(spacing, fallback = 20) {
+    const n = Number(spacing);
+    if (!Number.isFinite(n)) return fallback;
+    return Math.max(1, Math.round(n));
+}
+
+function sanitizeDotRadius(radius, fallback = 1) {
+    const n = Number(radius);
+    if (!Number.isFinite(n)) return fallback;
+    return Math.max(0, n);
+}
+
 /**
  * Возвращает активные фазы и их alpha для crossfade.
  * @param {number} zoom - world.scale.x (1 = 100%)
  * @returns {Array<{ phase: object, alpha: number }>}
  */
 export function getActivePhases(zoom) {
-    const z = Math.max(0.02, Math.min(5, zoom));
-    for (let i = 0; i < PHASES.length; i++) {
-        const phase = PHASES[i];
-        const inRange = i === PHASES.length - 1
-            ? (z >= phase.zoomMin && z <= phase.zoomMax)
-            : (z >= phase.zoomMin && z < phase.zoomMax);
-        if (inRange) {
-            return [{ phase, alpha: 1 }];
-        }
-    }
-    return [{ phase: PHASES[PHASES.length - 1], alpha: 1 }];
+    const phase = resolveDotPhase(zoom);
+    return [{ phase, alpha: 1 }];
 }
 
 /**
@@ -38,5 +139,102 @@ export function getActivePhases(zoom) {
  * @returns {number}
  */
 export function getEffectiveSize(zoom) {
-    return getActivePhases(zoom)[0].phase.size;
+    return resolveDotPhase(zoom).size;
+}
+
+/**
+ * Возвращает текущий checkpoint (копию) для zoom.
+ * @param {number} zoom
+ * @returns {{ zoomPercent:number, spacing:number, dotRadius:number, color:number }}
+ */
+export function getDotCheckpointForZoom(zoom) {
+    const row = resolveDotCheckpoint(zoom);
+    return {
+        zoomPercent: row.zoomPercent,
+        spacing: row.spacing,
+        dotRadius: row.dotRadius,
+        color: row.color,
+    };
+}
+
+/**
+ * Обновляет checkpoint для заданного zoomPercent.
+ * Используется debug-панелью для live-настройки.
+ * @param {number} zoomPercent
+ * @param {{ spacing?: number, dotRadius?: number, color?: number }} patch
+ * @returns {{ zoomPercent:number, spacing:number, dotRadius:number, color:number } | null}
+ */
+export function updateDotCheckpoint(zoomPercent, patch = {}) {
+    const target = Number(zoomPercent);
+    if (!Number.isFinite(target)) return null;
+    const row = DOT_CHECKPOINTS.find((r) => Math.abs(r.zoomPercent - target) < 1e-6);
+    if (!row) return null;
+    if (Object.prototype.hasOwnProperty.call(patch, 'spacing')) {
+        row.spacing = sanitizeSpacing(patch.spacing, row.spacing);
+    }
+    if (Object.prototype.hasOwnProperty.call(patch, 'dotRadius')) {
+        row.dotRadius = sanitizeDotRadius(patch.dotRadius, row.dotRadius);
+    }
+    if (Object.prototype.hasOwnProperty.call(patch, 'color')) {
+        row.color = sanitizeColor(patch.color, row.color);
+    }
+    return {
+        zoomPercent: row.zoomPercent,
+        spacing: row.spacing,
+        dotRadius: row.dotRadius,
+        color: row.color,
+    };
+}
+
+/**
+ * Возвращает screen-spacing в px для текущего zoom.
+ * @param {number} zoom
+ * @param {number} minScreenSpacing
+ * @returns {number}
+ */
+export function getScreenSpacing(zoom) {
+    return resolveDotCheckpoint(zoom).spacing;
+}
+
+/**
+ * Возвращает integer-радиус точки в screen-space для текущего zoom.
+ * @param {number} zoom
+ * @param {number} minScreenDotRadius
+ * @returns {number}
+ */
+export function getScreenDotRadius(zoom, minScreenDotRadius = 1) {
+    const stepRadius = resolveDotCheckpoint(zoom).dotRadius;
+    return Math.max(0, Math.round(stepRadius));
+}
+
+/**
+ * Возвращает raw-радиус без округления (для debug-просмотра).
+ * @param {number} zoom
+ * @param {number} minScreenDotRadius
+ * @returns {number}
+ */
+export function getRawScreenDotRadius(zoom, minScreenDotRadius = 0.1) {
+    const stepRadius = resolveDotCheckpoint(zoom).dotRadius;
+    return Math.max(0, Number(stepRadius) || 0);
+}
+
+/**
+ * Возвращает цвет точки для текущего zoom-checkpoint.
+ * @param {number} zoom
+ * @param {number} fallbackColor
+ * @returns {number}
+ */
+export function getDotColor(zoom, fallbackColor = 0xE8E8E8) {
+    const color = resolveDotCheckpoint(zoom).color;
+    return Number.isFinite(color) ? color : fallbackColor;
+}
+
+/**
+ * Точечная сетка всегда рендерится без прозрачности.
+ * @param {number} zoom
+ * @returns {number}
+ */
+export function getDotOpacity(zoom) {
+    void zoom;
+    return 1;
 }

package/src/grid/GridDiagnostics.js

@@ -0,0 +1,80 @@
+const GLOBAL_DIAG_KEY = '__MOODBOARD_GRID_DIAGNOSTICS__';
+const MAX_HISTORY = 500;
+
+function getGlobalScope() {
+    try {
+        return globalThis;
+    } catch (_) {
+        return null;
+    }
+}
+
+function normalizeEnabled(raw) {
+    if (raw === true || raw === '1' || raw === 1) return true;
+    if (raw === false || raw === '0' || raw === 0) return false;
+    return false;
+}
+
+function ensureSink() {
+    const scope = getGlobalScope();
+    if (!scope) return null;
+    const existing = scope[GLOBAL_DIAG_KEY];
+    if (existing && typeof existing === 'object') {
+        if (typeof existing.enabled !== 'boolean') existing.enabled = false;
+        if (!existing.counters || typeof existing.counters !== 'object') existing.counters = {};
+        if (!Array.isArray(existing.history)) existing.history = [];
+        return existing;
+    }
+    const created = {
+        enabled: false,
+        counters: {},
+        history: [],
+    };
+    scope[GLOBAL_DIAG_KEY] = created;
+    return created;
+}
+
+export function isGridDiagnosticsEnabled() {
+    const envEnabled = normalizeEnabled(
+        (typeof process !== 'undefined' && process?.env?.MOODBOARD_GRID_DIAGNOSTICS) || false
+    );
+    if (envEnabled) return true;
+    const sink = ensureSink();
+    return !!sink?.enabled;
+}
+
+export function incrementGridDiagnosticCounter(counterName) {
+    if (!counterName || !isGridDiagnosticsEnabled()) return;
+    const sink = ensureSink();
+    if (!sink) return;
+    sink.counters[counterName] = (sink.counters[counterName] || 0) + 1;
+}
+
+export function logGridDiagnostic(scope, message, data = undefined) {
+    if (!isGridDiagnosticsEnabled()) return;
+    const sink = ensureSink();
+    if (!sink) return;
+
+    const entry = {
+        ts: Date.now(),
+        scope,
+        message,
+        data,
+    };
+    sink.history.push(entry);
+    if (sink.history.length > MAX_HISTORY) {
+        sink.history.splice(0, sink.history.length - MAX_HISTORY);
+    }
+}
+
+export function getGridDiagnosticsSnapshot() {
+    const sink = ensureSink();
+    if (!sink) {
+        return { enabled: false, counters: {}, history: [] };
+    }
+    return {
+        enabled: !!sink.enabled,
+        counters: { ...sink.counters },
+        history: [...sink.history],
+    };
+}

package/src/grid/GridFactory.js

@@ -67,18 +67,20 @@ export class GridFactory {
         const defaults = {
             line: {
                 enabled: true,
-                size: 32,
-                color: 0x6a6aff,
-                opacity: 0.4,
+                size: 20,
+                color: 0xF4F4F4,
+                opacity: 1,
                 lineWidth: 1,
-                showSubGrid: false,
-                subGridDivisions: 4
+                showSubGrid: true,
+                subGridDivisions: 5,
+                subGridColor: 0xFEFEFE,
+                subGridOpacity: 1
             },
             dot: {
                 enabled: true,
                 size: 30,
-                color: 0x6a6aff,
-                opacity: 0.7,
+                color: 0xE8E8E8,
+                opacity: 1,
                 dotSize: 1,
                 dotStyle: 'circle',
                 highlightIntersections: true
@@ -86,7 +88,7 @@ export class GridFactory {
             cross: {
                 enabled: true,
                 size: 65,            // шаг между крестиками
-                color: 0xB8BAFF,     // целевой цвет
+                color: 0xE8E8E8,     // как у dot-сетки
                 opacity: 1,          // непрозрачно
                 crossHalfSize: 5,    // длина луча (половина креста) в px
                 crossLineWidth: 1
@@ -130,21 +132,21 @@ export class GridFactory {
                 type: 'dot',
                 size: 10,
                 color: 0xC0C0C0,
-                opacity: 0.6,
+                opacity: 1,
                 dotSize: 1
             },
             'standard-dots': {
                 type: 'dot',
                 size: 20,
                 color: 0xB0B0B0,
-                opacity: 0.7,
+                opacity: 1,
                 dotSize: 2
             },
             'bold-dots': {
                 type: 'dot',
                 size: 30,
                 color: 0xA0A0A0,
-                opacity: 0.8,
+                opacity: 1,
                 dotSize: 3,
                 dotStyle: 'square'
             },