wenay-react2 1.0.40 → 1.0.42

package/lib/common/src/utils/searchHistory.js

@@ -7,9 +7,11 @@ export function createSearchHistory(opts) {
     const max = Math.max(1, opts.max ?? 8);
     const st = memoryGetOrCreate(opts.key, { items: [] });
     const stApi = createUpdateApi(st);
-    function normalize() {
+    /** Pure derivation - reads must not rewrite the persisted object (a getter that
+     *  mutates state silently marks nothing dirty and surprises memoryCache diffing). */
+    function normalized() {
         const seen = new Set();
-        st.items = st.items
+        return st.items
             .map(normalizeSearchHistoryItem)
             .filter(Boolean)
             .filter(item => {
@@ -20,20 +22,19 @@ export function createSearchHistory(opts) {
             return true;
         })
             .slice(0, max);
-        return st.items;
     }
     function emit() {
-        normalize();
+        st.items = normalized(); // normalization happens on WRITE, announced below
         stApi.render();
         memoryMarkDirty(opts.key);
     }
     return {
         get items() {
-            return normalize().slice();
+            return normalized();
         },
         use() {
             stApi.use();
-            return normalize().slice();
+            return normalized();
         },
         add(value) {
             const item = normalizeSearchHistoryItem(value);

package/lib/common/src/utils/structEqual.d.ts

@@ -0,0 +1,12 @@
+/** Structural deep equality for plain config/data trees (objects, arrays, primitives).
+ *
+ *  Replacement for the `JSON.stringify(a) == JSON.stringify(b)` idiom, with the same
+ *  tolerance but none of its key-order sensitivity:
+ *  - object key ORDER does not matter (stringify's false-positive "changed");
+ *  - object props with `undefined` values count as absent (JSON drops them);
+ *  - `NaN` equals `NaN` (JSON serializes both to `null`);
+ *  - no serialization cost, early exit on first difference.
+ *
+ *  Not for class instances / Maps / Sets / cycles - data that would not survive
+ *  JSON round-tripping did not work with the stringify idiom either. */
+export declare function structEqual(a: unknown, b: unknown): boolean;

package/lib/common/src/utils/structEqual.js

@@ -0,0 +1,40 @@
+/** Structural deep equality for plain config/data trees (objects, arrays, primitives).
+ *
+ *  Replacement for the `JSON.stringify(a) == JSON.stringify(b)` idiom, with the same
+ *  tolerance but none of its key-order sensitivity:
+ *  - object key ORDER does not matter (stringify's false-positive "changed");
+ *  - object props with `undefined` values count as absent (JSON drops them);
+ *  - `NaN` equals `NaN` (JSON serializes both to `null`);
+ *  - no serialization cost, early exit on first difference.
+ *
+ *  Not for class instances / Maps / Sets / cycles - data that would not survive
+ *  JSON round-tripping did not work with the stringify idiom either. */
+export function structEqual(a, b) {
+    if (a === b)
+        return true;
+    if (typeof a == 'number' && typeof b == 'number')
+        return Number.isNaN(a) && Number.isNaN(b);
+    if (typeof a != 'object' || typeof b != 'object' || a == null || b == null)
+        return false;
+    const aArr = Array.isArray(a);
+    if (aArr != Array.isArray(b))
+        return false;
+    if (aArr) {
+        const x = a, y = b;
+        if (x.length != y.length)
+            return false;
+        for (let i = 0; i < x.length; i++)
+            if (!structEqual(x[i], y[i]))
+                return false;
+        return true;
+    }
+    const ao = a, bo = b;
+    const ka = Object.keys(ao).filter(k => ao[k] !== undefined);
+    const kb = Object.keys(bo).filter(k => bo[k] !== undefined);
+    if (ka.length != kb.length)
+        return false;
+    for (const k of ka)
+        if (!structEqual(ao[k], bo[k]))
+            return false;
+    return true;
+}

package/lib/common/updateBy.d.ts

@@ -2,7 +2,10 @@ import React from "react";
 type Listener = (a?: any) => void;
 interface ObserverState {
     listeners: Set<Listener>;
+    callbacks: Set<Listener>;
     version: number;
+    running: boolean;
+    pending: boolean;
 }
 export declare const map3: WeakMap<object, ObserverState>;
 export declare const mapWait: Map<object, {

package/lib/common/updateBy.js

@@ -1,4 +1,4 @@
-import { useCallback, useLayoutEffect, useSyncExternalStore } from "react";
+import React, { useCallback, useLayoutEffect, useSyncExternalStore } from "react";
 import { listen as createListen, waitRun } from "wenay-common2";
 export const map3 = new WeakMap();
 export const mapWait = new Map();
@@ -14,34 +14,59 @@ function getUpdateListen(obj) {
 function getObserverState(obj) {
     let state = map3.get(obj);
     if (!state) {
-        state = { listeners: new Set(), version: 0 };
+        state = { listeners: new Set(), callbacks: new Set(), version: 0, running: false, pending: false };
         map3.set(obj, state);
     }
     return state;
 }
-// reverse/lastOnly действуют только на React-подписчиков (useUpdateBy);
-// императивные on-подписчики вызываются всегда все, в порядке подписки
-function triggerUpdate(obj, reverse = false, lastOnly = false) {
+// reverse/lastOnly действуют только на React-подписчиков (useSyncExternalStore);
+// императивные f-колбэки вызываются всегда все, в порядке подписки, ДО React-нотификаторов
+function runTriggerPass(obj, state, reverse, lastOnly) {
     const listen = updateListens.get(obj);
-    let state = map3.get(obj);
-    if ((!state || state.listeners.size === 0) && !listen?.[1].count())
-        return;
-    state ??= getObserverState(obj);
     state.version += 1;
-    let listenersArray = Array.from(state.listeners);
+    // императивные f-колбэки: всегда все, в порядке подписки
+    Array.from(state.callbacks).forEach(callback => callback(obj));
+    const listenersArray = Array.from(state.listeners);
     if (lastOnly) {
         const last = listenersArray.at(-1);
         if (last)
             last(obj);
-        listen?.[0](obj);
-        return;
     }
-    if (reverse) {
-        listenersArray.reverse();
+    else {
+        if (reverse) {
+            listenersArray.reverse();
+        }
+        listenersArray.forEach(listener => listener(obj));
     }
-    listenersArray.forEach(listener => listener(obj));
     listen?.[0](obj);
 }
+const MAX_TRIGGER_PASSES = 100;
+function triggerUpdate(obj, reverse = false, lastOnly = false) {
+    const listen = updateListens.get(obj);
+    let state = map3.get(obj);
+    if ((!state || (state.listeners.size === 0 && state.callbacks.size === 0)) && !listen?.[1].count())
+        return;
+    state ??= getObserverState(obj);
+    // реентерабельность: синхронный renderBy по тому же объекту изнутри слушателя
+    // коалесцируется — помечаем pending и выходим, текущая итерация сделает ещё проход
+    if (state.running) {
+        state.pending = true;
+        return;
+    }
+    state.running = true;
+    try {
+        for (let pass = 0; pass < MAX_TRIGGER_PASSES; pass++) {
+            state.pending = false;
+            runTriggerPass(obj, state, reverse, lastOnly);
+            if (!state.pending)
+                break;
+        }
+    }
+    finally {
+        state.running = false;
+        state.pending = false;
+    }
+}
 function schedule(a, ms, reverse = false, lastOnly = false) {
     if (ms) {
         (mapWait.get(a) || mapWait.set(a, waitRun()).get(a))
@@ -63,29 +88,39 @@ export function renderByLast(a, ms) {
     schedule(a, ms, false, true);
 }
 export function useUpdateBy(a, f) {
+    // f прокидывается через ref: inline-колбэк (новая identity на каждый рендер)
+    // не должен вызывать переподписку — регистрируется одна стабильная обёртка на (a)
+    const fRef = React.useRef(f);
+    fRef.current = f;
+    const hasF = !!f;
     // стабильный subscribe: без useCallback React переподписывается на каждый рендер,
     // а удаление state из map3 при этом сбрасывало бы version → лишний форс-ререндер
     const subscribe = useCallback((listener) => {
-        if (f)
+        if (hasF)
             return () => { };
         const state = getObserverState(a);
         state.listeners.add(listener);
         return () => {
             state.listeners.delete(listener);
         };
-    }, [a, f]);
+    }, [a, hasF]);
     useSyncExternalStore(subscribe, 
     // getSnapshot must be pure: only read the version, subscribe creates the state
-    () => (f ? 0 : (map3.get(a)?.version ?? 0)));
+    () => (hasF ? 0 : (map3.get(a)?.version ?? 0)));
     useLayoutEffect(() => {
-        if (!f)
+        if (!hasF)
             return;
         const state = getObserverState(a);
-        state.listeners.add(f);
+        // обёртка передаёт тот же мутированный объект — для ветки Dispatch<SetStateAction<T>>
+        // setState(тот же ref) React бэйлаутит без ререндера (см. UpdateCallback)
+        const wrapper = (obj) => {
+            fRef.current?.(obj);
+        };
+        state.callbacks.add(wrapper);
         return () => {
-            state.listeners.delete(f);
+            state.callbacks.delete(wrapper);
         };
-    }, [a, f]);
+    }, [a, hasF]);
 }
 export function updateBy(a, f) {
     useUpdateBy(a, f);

package/lib/style/menuRight.css

@@ -7,12 +7,12 @@
   right: 0;
 }
 .menu-container.activeM {
-  background: var(--menu-active-background);
+  background: var(--menu-active-background, var(--menu-item-active-bg-color, #262626));
 }
 
 .menu-button {
   padding: 4px 10px;
-  color: var(--menu-item-color);
+  color: var(--menu-item-color, #fff);
   font-size: 28px;
   border: none;
   background: transparent;
@@ -33,38 +33,44 @@
 
 
 .dropdown-content {
-  background: var(--menu-bg-color);
-  border-top: var(--menu-border);
-  border-left: var(--menu-border);
-  border-right: var(--menu-border);
+  background: var(--menu-bg-color, #0c0c0c);
+  border-top: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
+  border-left: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
+  border-right: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
   user-select: none;
   min-width: 50px;
   height: min-content;
   width: max-content;
 }
 
-.menu-item {
-  min-height: 30px;
-  padding: 10px;
-  position: relative;
-  cursor: pointer;
-  border-bottom: var(--menu-border);
-  transition: background 0.3s;
-}
-
-.menu-item:hover,
-.menu-item.force-hover {
-  background: var(--menu-item-hover-bg-color);
-  color: var(--menu-item-hover-color);
+.menu-item {
+  min-height: 30px;
+  padding: 10px;
+  position: relative;
+  cursor: pointer;
+  color: var(--menu-item-color, #fff);
+  border-bottom: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
+  transition: background 0.3s, color 0.3s;
+}
+
+.menu-item:hover,
+.menu-item.force-hover {
+  background: var(--menu-item-hover-bg-color, #fff);
+  color: var(--menu-item-hover-color, #101010);
+}
+
+.menu-item:active {
+  background: var(--menu-item-pressed-bg-color, #f2c94c);
+  color: var(--menu-item-pressed-color, #101010);
 }
 
 .submenu {
-  background: var(--menu-bg-color);
+  background: var(--menu-bg-color, #0c0c0c);
 
-  backdrop-filter: blur(var(--menu-blur)); /* Blur */
-  -webkit-backdrop-filter: blur(var(--menu-blur)); /* For Safari */
+  backdrop-filter: blur(var(--menu-blur, 0px)); /* Blur */
+  -webkit-backdrop-filter: blur(var(--menu-blur, 0px)); /* For Safari */
 
-  border: var(--menu-border);
+  border: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
   min-width: 200px;
 }
 .draggable-div {

package/lib/style/style.css

@@ -136,11 +136,11 @@ input:invalid {
 
 /* Menu */
 .MenuR {
-  box-shadow: var(--menu-shadow);
+  box-shadow: var(--menu-shadow, 0 0 20px 14px rgba(34, 60, 80, 0.2));
   margin-top: 4px;
   min-width: 80px;
   width: max-content;
-  background: var(--menu-bg-color);
+  background: var(--menu-bg-color, #0c0c0c);
 }
 
 .maxSize {
@@ -197,18 +197,24 @@ input:invalid {
    menu-specific colors through the shared --menu-* token contract. */
 .MenuR.toButton,
 .MenuR.toButtonA {
-  color: var(--menu-item-color);
-  border-bottom: var(--menu-border);
+  color: var(--menu-item-color, #fff);
+  border-bottom: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
 }
 .MenuR.toButtonA {
-  background: var(--menu-active-background);
+  background: var(--menu-active-background, var(--menu-item-active-bg-color, #262626));
+  color: var(--menu-item-active-color, var(--menu-item-color, #fff));
 }
 .MenuR.toButton:hover,
-.MenuR.toButton:active,
 .MenuR.toButtonA:hover {
-  background: var(--menu-item-hover-bg-color);
-  color: var(--menu-item-hover-color);
-  border-bottom: var(--menu-border);
+  background: var(--menu-item-hover-bg-color, #fff);
+  color: var(--menu-item-hover-color, #101010);
+  border-bottom: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
+}
+.MenuR.toButton:active,
+.MenuR.toButtonA:active {
+  background: var(--menu-item-pressed-bg-color, #f2c94c);
+  color: var(--menu-item-pressed-color, #101010);
+  border-bottom: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
 }
 
 /* Menu indicator elements */
@@ -745,6 +751,63 @@ body {
   overflow: auto;
 }
 
+/* Column grid kit layout (createColumnGrid.View). */
+.wenayColumnGrid {
+  position: relative;
+  display: grid;
+  gap: var(--cols-grid-gap, 8px);
+  min-width: 0;
+}
+.wenayColumnGridControls,
+.wenayColumnGridBody {
+  min-width: 0;
+}
+.wenayColumnGridControls_dots {
+  position: absolute;
+  left: var(--cols-grid-dots-x, 10px);
+  right: var(--cols-grid-dots-x, 10px);
+  bottom: var(--cols-grid-dots-bottom, 10px);
+  z-index: 3;
+}
+.wenayColumnGrid_cards.wenayColumnGrid_controls_dots .wenayCardListItem:last-child {
+  padding-bottom: var(--cols-grid-dots-card-bottom-padding, 92px);
+}
+.wenayColumnGridDots {
+  padding: var(--cols-grid-dots-padding, 6px 8px 8px);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+.wenayColumnGridDots .wenayColDotsHead {
+  justify-content: flex-end;
+  gap: 0;
+  margin-bottom: 2px;
+  font-size: 11px;
+}
+.wenayColumnGridDots .wenayColDotsTrack {
+  height: 48px;
+  margin: 0 16px;
+}
+.wenayColumnGridDots .wenayColDotsMeta,
+.wenayColumnGridDots .wenayColDotsSpacer {
+  display: none;
+}
+.wenayColumnGridDots .wenayColDotsSort {
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  font-size: 0;
+  opacity: 0.82;
+  background: transparent;
+}
+.wenayColumnGridDots .wenayColDotsSort::before {
+  content: "⇅";
+  font-size: 16px;
+  line-height: 1;
+}
+
 /* Column state compact menu (ColumnsMenu/MenuStrip). Visual defaults moved from
    component inline styles; runtime drag transforms remain inline. */
 .wenayColsMenu,
@@ -1162,4 +1225,4 @@ body {
 .wenaySegBtnActive {
   background: rgba(255, 255, 255, 0.16);
   color: #fff;
-}
+}

package/lib/style/tokens.css

@@ -21,13 +21,17 @@
   --base-color-hover: #fff;
 
   /* Menu */
-  --menu-bg-color: rgba(12, 12, 12, 0.91);
-  --menu-blur: 10px;
+  --menu-bg-color: #0c0c0c;
+  --menu-blur: 0px;
   --menu-border: var(--base-border);
-  --menu-active-background: rgba(255, 255, 255, 0.23);
   --menu-item-color: var(--base-color-hover);
+  --menu-item-active-bg-color: #262626;
+  --menu-item-active-color: var(--base-color-hover);
+  --menu-active-background: var(--menu-item-active-bg-color);
   --menu-item-hover-color: #101010;
-  --menu-item-hover-bg-color: var(--base-color-hover);
+  --menu-item-hover-bg-color: var(--base-color-hover);
+  --menu-item-pressed-color: #101010;
+  --menu-item-pressed-bg-color: #f2c94c;
   --menu-outline-color: #007bff;
 
   /* Menu shadow (was a literal in .MenuR) */

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "wenay-react2",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "Common react",
   "strict": true,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "lib/**/*",
+    "doc/**/*",
     "!**/*.tsbuildinfo"
   ],
   "author": "wenay",
@@ -23,7 +24,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-rnd": "^10.5.3",
-    "wenay-common2": "^1.0.65"
+    "wenay-common2": "^1.0.70"
   },
   "peerDependencies": {
     "react": "^19.2.0",