wenay-react2 1.0.40 → 1.0.42

package/lib/common/src/logs/logs.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { copyToClipboard, Params, timeLocalToStr_hhmmss } from "wenay-common2";
 import { renderBy, updateBy } from "../../updateBy";
 import { contextMenu } from "../menu/menuMouse";
@@ -19,32 +19,50 @@ const datumMiniConst = {
 const settingLogs = { params: Params.GetSimpleParams(getSettingLogs()) };
 const logGridDefaultColDef = { ...colDefCentered, wrapText: true };
 // varMin - minimum importance
-export function getLogsApi(setting) {
-    const datum = memoryGetOrCreate("settingLogs", settingLogs);
+// Each call builds its OWN state (fresh map, fresh mini feed, own settings - persisted under
+// setting.settingsKey when provided). The global logsApi below injects the legacy module-level
+// state explicitly, so existing consumers of datumConst/datumMiniConst/"settingLogs" keep
+// seeing the same objects as before.
+export function getLogsApi(setting, sharedState) {
+    const state = sharedState ?? createLogsControllerState({
+        settings: setting.settingsKey
+            ? memoryGetOrCreate(setting.settingsKey, { params: Params.GetSimpleParams(getSettingLogs()) })
+            : undefined,
+    });
     const controller = createLogsController({
         options: setting,
-        state: createLogsControllerState({
-            full: datumConst,
-            mini: datumMiniConst,
-            settings: datum,
-        }),
-        onFullChange: () => renderBy(datumConst),
-        onMiniChange: () => renderBy(datumMiniConst),
-        onSettingsChange: () => renderBy(datum),
+        state,
+        onFullChange: () => renderBy(state.full),
+        onMiniChange: () => renderBy(state.mini),
+        onSettingsChange: () => renderBy(state.settings),
     });
+    // legacy module state -> keep the exact same component identities as before;
+    // custom instances get views bound to THEIR state via closures
+    const usesLegacyState = state.full === datumConst
+        && state.mini === datumMiniConst;
+    const Setting = usesLegacyState ? InputSettingLogs
+        : (props) => _jsx(InputSettingLogs, { ...props, settings: state.settings });
+    const Message = usesLegacyState ? MessageEventLogs
+        : (props) => _jsx(MessageEventLogs, { ...props, settings: state.settings, mini: state.mini });
+    const Page = usesLegacyState ? PageLogs
+        : (props) => _jsx(PageLogs, { ...props, state: state });
     return {
         addLogs: controller.addLogs,
         params: controller.params,
         React: {
-            Setting: InputSettingLogs,
-            Message: MessageEventLogs,
-            PageLogs: PageLogs
+            Setting: Setting,
+            Message: Message,
+            PageLogs: Page
         }
     };
 }
-export const logsApi = getLogsApi({ limitPer: 500 });
-function InputSettingLogs({}) {
-    const datum = memoryGetOrCreate("settingLogs", settingLogs);
+export const logsApi = getLogsApi({ limitPer: 500 }, {
+    full: datumConst,
+    mini: datumMiniConst,
+    settings: memoryGetOrCreate("settingLogs", settingLogs),
+});
+function InputSettingLogs({ settings }) {
+    const datum = settings ?? memoryGetOrCreate("settingLogs", settingLogs);
     return _jsx(ParamsEditor
     // @ts-ignore
     , { 
@@ -54,106 +72,124 @@ function InputSettingLogs({}) {
             renderBy(datum);
         } });
 }
-export function PageLogs({ update }) {
-    const datumFull = datumConst;
-    const rowData = [...datumFull.map.values()].flat();
-    const datum = datumMiniConst;
-    const setting = memoryGetOrCreate("settingLogs", settingLogs);
+/** Controller for the full-page logs table: owns the ag-grid imperative surface that
+ *  `PageLogs` used to drive inline. The importance filter lives in ONE method
+ *  (`applyImportanceFilter`) - it used to be duplicated between the settings effect and
+ *  `onGridReady`. Rows keep the original identity semantics: the grid receives the mount-time
+ *  snapshot once, later entries arrive as `applyTransactionAsync` copies of the mini feed. */
+export function useLogsPageTable(state) {
+    const setting = state?.settings ?? memoryGetOrCreate("settingLogs", settingLogs);
+    const full = state?.full ?? datumConst;
+    const mini = state?.mini ?? datumMiniConst;
     const apiGrid = useRef(null);
-    useEffect(() => {
-        apiGrid.current?.api.sizeColumnsToFit();
-    }, [update]);
-    updateBy(setting, () => {
-        if (setting.params.minVarLogs) {
-            apiGrid.current?.api.setFilterModel({
+    // mount-time snapshot: the live grid is fed by transactions, not re-renders
+    const [rowData] = useState(() => [...full.map.values()].flat());
+    const getApi = useCallback(() => apiGrid.current, []);
+    const fit = useCallback(() => { apiGrid.current?.api.sizeColumnsToFit(); }, []);
+    const applyImportanceFilter = useCallback((min) => {
+        const api = apiGrid.current?.api;
+        if (!api)
+            return;
+        if (min) {
+            api.setFilterModel({
                 var: {
                     filterType: 'number',
                     type: 'greaterThanOrEqual',
-                    filter: setting.params.minVarLogs
+                    filter: min
                 }
             });
         }
         else {
-            apiGrid.current?.api.destroyFilter("var");
+            api.destroyFilter("var");
         }
+    }, []);
+    const appendRow = useCallback((row) => {
+        apiGrid.current?.api.applyTransactionAsync({ add: [row] });
+    }, []);
+    // settings change -> single filter method (no re-render: updateBy with a callback)
+    updateBy(setting, () => {
+        applyImportanceFilter(setting.params.minVarLogs);
     });
-    updateBy(datum, () => {
-        const data = datum.last[0];
-        if (data) { // data.time timeLocalToStr_yyyymmdd_hhmmss_ms
-            apiGrid.current?.api.applyTransactionAsync({
-                add: [{ ...data }]
-            });
-        }
+    // new mini-feed entry -> async append, copy like before (row identity per event)
+    updateBy(mini, () => {
+        const data = mini.last[0];
+        if (data)
+            appendRow({ ...data });
     });
-    const Main = useCallback(() => {
-        const columns = [
-            {
-                field: "time",
-                sort: "desc",
-                width: 50,
-                valueFormatter: (e) => e.value ? timeLocalToStr_hhmmss(e.value) : e.value
-            },
-            {
-                field: "id",
-                width: 20,
-            },
-            {
-                field: "var",
-                width: 50,
-            },
-            {
-                field: "type1",
-                width: 50,
-            },
-            {
-                field: "type2",
-                width: 50,
-            },
-            {
-                field: "type3",
-                width: 50,
-            },
-            {
-                field: "txt",
-                wrapText: true,
-                autoHeight: true,
-                width: 350
-            },
-            {
-                field: "address",
-                width: 150,
-            },
-        ];
-        return _jsx("div", { className: "maxSize", children: _jsx(AgGridTable
-            // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
-            , { 
-                // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
-                suppressCellFocus: true, onGridReady: (a) => {
-                    apiGrid.current = a; //as GridReadyEvent<tColum>
-                    apiGrid.current.api.sizeColumnsToFit();
-                    if (setting.params.minVarLogs) {
-                        apiGrid.current.api.setFilterModel({
-                            var: {
-                                filterType: 'number',
-                                type: 'greaterThanOrEqual',
-                                filter: setting.params.minVarLogs
-                            }
-                        });
-                    }
-                }, onSortChanged: (e) => {
-                }, defaultColDef: logGridDefaultColDef, headerHeight: 30, rowHeight: 26, autoSizePadding: 1, rowData: rowData, columnDefs: columns, onCellMouseDown: (e) => {
-                    if (e.event instanceof MouseEvent && e.event.button == 2) {
-                        contextMenu.openAt(e.event, [
-                            {
-                                name: "copy", actionKey: "logs.copyCell", onClick: () => { copyToClipboard(e.value); }
-                            }
-                        ]);
+    const onGridReady = useCallback((a) => {
+        apiGrid.current = a;
+        fit();
+        // fresh grid has no filter - only apply when the setting asks for one
+        if (setting.params.minVarLogs)
+            applyImportanceFilter(setting.params.minVarLogs);
+    }, [applyImportanceFilter, fit, setting]);
+    const columnDefs = useMemo(() => [
+        {
+            field: "time",
+            sort: "desc",
+            width: 50,
+            valueFormatter: (e) => e.value ? timeLocalToStr_hhmmss(e.value) : e.value
+        },
+        {
+            field: "id",
+            width: 20,
+        },
+        {
+            field: "var",
+            width: 50,
+        },
+        {
+            field: "type1",
+            width: 50,
+        },
+        {
+            field: "type2",
+            width: 50,
+        },
+        {
+            field: "type3",
+            width: 50,
+        },
+        {
+            field: "txt",
+            wrapText: true,
+            autoHeight: true,
+            width: 350
+        },
+        {
+            field: "address",
+            width: 150,
+        },
+    ], []);
+    const gridProps = useMemo(() => ({
+        suppressCellFocus: true,
+        onGridReady,
+        defaultColDef: logGridDefaultColDef,
+        headerHeight: 30,
+        rowHeight: 26,
+        autoSizePadding: 1,
+        rowData,
+        columnDefs,
+        onCellMouseDown: (e) => {
+            if (e.event instanceof MouseEvent && e.event.button == 2) {
+                contextMenu.openAt(e.event, [
+                    {
+                        name: "copy", actionKey: "logs.copyCell", onClick: () => { copyToClipboard(e.value); }
                     }
-                } }) });
-    }, [true]);
-    return _jsx(Main, {});
+                ]);
+            }
+        },
+    }), [columnDefs, onGridReady, rowData]);
+    return { getApi, fit, applyImportanceFilter, appendRow, onGridReady, columnDefs, gridProps };
 }
-function Message({ logs }) {
+export function PageLogs({ update, state }) {
+    const table = useLogsPageTable(state);
+    useEffect(() => {
+        table.fit();
+    }, [update]);
+    return _jsx("div", { className: "maxSize", children: _jsx(AgGridTable, { ...table.gridProps }) });
+}
+export function MessageEventLogCard({ logs }) {
     return _jsxs("div", { className: "testAnime", style: { width: "200px", color: logStyleTokens.text, height: "auto", marginTop: "10px", borderRight: `5px solid ${logStyleTokens.accent}`, background: logSeverityBackground(logs.var) }, children: [_jsx("p", { style: { textAlign: "center", fontSize: "10px", marginBottom: "1px" }, children: "notification" }), _jsx("hr", { style: {
                     backgroundImage: logDividerGradient(),
                     border: 0,
@@ -161,35 +197,87 @@ function Message({ logs }) {
                     margin: "0 0 0 0",
                     boxSizing: "content-box",
                     display: "block"
-                } }), _jsx("div", { style: { textAlign: "right", marginRight: "10px", height: "auto", overflowWrap: "break-word", textOverflow: "ellipsis" }, children: typeof logs.txt == "object" ? JSON.stringify(logs.txt) : logs.txt }), _jsx("p", { style: { float: "inline-end", textAlign: "right", marginRight: "10px" }, children: (new Date()).toLocaleDateString() })] });
+                } }), _jsx("div", { style: { textAlign: "right", marginRight: "10px", height: "auto", overflowWrap: "break-word", textOverflow: "ellipsis" }, children: typeof logs.txt == "object" ? JSON.stringify(logs.txt) : logs.txt }), _jsx("p", { style: { float: "inline-end", textAlign: "right", marginRight: "10px" }, children: (new Date(logs.time)).toLocaleDateString() })] });
 }
-const tt = {};
-let r = 0;
-export function MessageEventLogs({ zIndex }) {
-    const setting = memoryGetOrCreate("settingLogs", settingLogs);
-    updateBy(tt);
-    updateBy(datumMiniConst, () => {
-        const last = datumMiniConst.last[0];
-        if (!last)
+export function useMessageEventLogsController(options = {}) {
+    const setting = options.settings ?? memoryGetOrCreate("settingLogs", settingLogs);
+    const mini = options.mini ?? datumMiniConst;
+    const maxVisible = Math.max(1, options.maxVisible ?? 10);
+    const [notifications, setNotifications] = useState([]);
+    const counterRef = useRef(0);
+    const lastLogRef = useRef(null);
+    const timersRef = useRef(new Map());
+    updateBy(setting);
+    const addNotification = useCallback((last) => {
+        if ((last.var ?? 0) < (setting.params.minVarMessage ?? 0))
             return;
-        if (setting.params.minVarMessage && (!last.var || last.var < setting.params.minVarMessage))
+        const key = String(counterRef.current++);
+        const item = { key, logs: last };
+        const displayMs = (setting.params.timeShow ? setting.params.timeShow : 2) * 1000;
+        setNotifications(prev => [item, ...prev]);
+        const timer = setTimeout(() => {
+            timersRef.current.delete(key);
+            setNotifications(prev => prev.filter(e => e.key !== key));
+        }, displayMs);
+        timersRef.current.set(key, timer);
+    }, [setting]);
+    const onMiniChange = useCallback(() => {
+        const last = mini.last[0];
+        if (!last || last === lastLogRef.current)
             return;
-        let key = String(r++);
-        tt[key] = _jsx("div", { className: "example-exit", children: _jsx(Message, { logs: last }) }, key);
-        setTimeout(() => {
-            if (tt[key]) {
-                delete tt[key];
-                renderBy(tt, 100);
-            }
-        }, setting.params.timeShow ? setting.params.timeShow * 1000 : 2000);
-        renderBy(tt);
-    });
-    const tr = [...Object.values(tt)].reverse().slice(0, 10);
-    return _jsxs("div", { style: { maxHeight: "50vh", position: "absolute", right: "1px", zIndex }, children: [_jsx("div", { onClick: () => { setting.params.show = !setting.params.show; renderBy(tt); }, style: { margin: 3, padding: 3, right: 0, position: "absolute", zIndex: 120,
-                    ...setting.params.show ?
-                        { background: logStyleTokens.toggleBg, fontSize: "25px" } :
-                        { background: logStyleTokens.toggleOffBg }
-                }, children: setting.params.show ? "X" : "log" }), _jsx("div", { children: setting.params.show ? tr : null })] });
+        lastLogRef.current = last;
+        addNotification(last);
+    }, [addNotification, mini]);
+    updateBy(mini, onMiniChange);
+    useEffect(() => () => {
+        timersRef.current.forEach(clearTimeout);
+        timersRef.current.clear();
+    }, []);
+    const setShow = useCallback((value) => {
+        // LogsSettingsState.params is readonly at the type level; keep the legacy in-place mutation
+        ;
+        setting.params.show = value;
+        renderBy(setting);
+    }, [setting]);
+    const toggleShow = useCallback(() => {
+        setShow(!setting.params.show);
+    }, [setShow, setting]);
+    return useMemo(() => ({
+        show: Boolean(setting.params.show),
+        setShow,
+        toggleShow,
+        notifications,
+        visibleNotifications: notifications.slice(0, maxVisible),
+        maxVisible,
+    }), [maxVisible, notifications, setShow, setting.params.show, toggleShow]);
+}
+export function MessageEventLogsView({ controller, zIndex, className, style }) {
+    const toggleTitle = controller.show ? "Hide log notifications" : "Show log notifications";
+    const toggleStyle = {
+        position: "absolute",
+        right: 0,
+        top: 0,
+        zIndex: 120,
+        minWidth: controller.show ? 24 : 42,
+        height: 24,
+        padding: controller.show ? 0 : "0 8px",
+        border: `1px solid ${logStyleTokens.accent}`,
+        borderRadius: 999,
+        background: controller.show ? logStyleTokens.toggleBg : logStyleTokens.toggleOffBg,
+        color: logStyleTokens.text,
+        cursor: "pointer",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: controller.show ? 18 : 12,
+        lineHeight: 1,
+        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.35)",
+    };
+    return _jsxs("div", { className: className, style: { maxHeight: "50vh", position: "absolute", right: "1px", zIndex, ...style }, children: [_jsx("button", { type: "button", "aria-label": toggleTitle, title: toggleTitle, onClick: controller.toggleShow, style: toggleStyle, children: controller.show ? "\u00d7" : "log" }), _jsx("div", { children: controller.show ? controller.visibleNotifications.map(e => (_jsx("div", { className: "example-exit", children: _jsx(MessageEventLogCard, { logs: e.logs }) }, e.key))) : null })] });
+}
+export function MessageEventLogs({ zIndex, settings, mini }) {
+    const controller = useMessageEventLogsController({ settings, mini });
+    return _jsx(MessageEventLogsView, { controller: controller, zIndex: zIndex });
 }
 const defPageBase = {
     keyPage: "PageLogs"

package/lib/common/src/logs/logsController.d.ts

@@ -12,6 +12,9 @@ export type LogsApiOptions = {
     limit?: number;
     limitPer: number;
     varMin?: number;
+    /** memoryGetOrCreate key for this instance's settings; without it a fresh
+     *  (non-persisted) settings object is used. The global logsApi keeps "settingLogs". */
+    settingsKey?: string;
 };
 export declare const getSettingLogs: () => {
     minVarLogs: {

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

@@ -10,19 +10,20 @@ export declare const tokens: {
         readonly borderCommon: "rgb(50, 62, 71)";
     };
     readonly menu: {
-        readonly bgColor: "rgba(12, 12, 12, 0.91)";
-        readonly blur: "10px";
+        readonly bgColor: "#0c0c0c";
+        readonly blur: "0px";
         readonly border: "1px solid rgba(255, 255, 255, 0.41)";
-        readonly activeBackground: "rgba(255, 255, 255, 0.23)";
+        readonly activeBackground: "#262626";
         readonly itemColor: "#fff";
+        readonly itemActiveBgColor: "#262626";
+        readonly itemActiveColor: "#fff";
         readonly itemHoverColor: "#101010";
         readonly itemHoverBgColor: "#fff";
+        readonly itemPressedColor: "#101010";
+        readonly itemPressedBgColor: "#f2c94c";
         readonly outlineColor: "#007bff";
         readonly shadow: "0 0 20px 14px rgba(34, 60, 80, 0.2)";
     };
-    /** FloatingWindow window chrome (--wnd-*). Defaults = legacy look; apps re-skin via :root[data-theme].
-     *  --wnd-header-height/color/font-size/letter-spacing/transform are intentionally undeclared
-     *  (inherit/auto) until a theme sets them. */
     readonly wnd: {
         readonly bg: "transparent";
         readonly border: "none";

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

@@ -12,17 +12,20 @@ export const tokens = {
         borderCommon: 'rgb(50, 62, 71)',
     },
     menu: {
-        bgColor: 'rgba(12, 12, 12, 0.91)',
-        blur: '10px',
+        bgColor: '#0c0c0c',
+        blur: '0px',
         border: '1px solid rgba(255, 255, 255, 0.41)',
-        activeBackground: 'rgba(255, 255, 255, 0.23)',
+        activeBackground: '#262626',
         itemColor: '#fff',
+        itemActiveBgColor: '#262626',
+        itemActiveColor: '#fff',
         itemHoverColor: '#101010',
         itemHoverBgColor: '#fff',
+        itemPressedColor: '#101010',
+        itemPressedBgColor: '#f2c94c',
         outlineColor: '#007bff',
         shadow: '0 0 20px 14px rgba(34, 60, 80, 0.2)',
-    },
-    /** FloatingWindow window chrome (--wnd-*). Defaults = legacy look; apps re-skin via :root[data-theme].
+    }, /** FloatingWindow window chrome (--wnd-*). Defaults = legacy look; apps re-skin via :root[data-theme].
      *  --wnd-header-height/color/font-size/letter-spacing/transform are intentionally undeclared
      *  (inherit/auto) until a theme sets them. */
     wnd: {

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

@@ -46,3 +46,15 @@ export declare function createCacheMap(arr: [k: string, v: Map<string, unknown>]
     isDirty(): boolean;
     getArr: [k: string, v: Map<string, unknown>][];
 };
+export type CacheMap = ReturnType<typeof createCacheMapWithStorage>;
+/** The app-side persistence contract as one hook: load() on mount, then subscribe the dirty
+ *  channel to saveDebounced(delay). The app still owns the write policy - this only wires the
+ *  documented default (`doc/EXAMPLE_USAGE.md`). Returns pass-through methods for the rare
+ *  imperative needs; `reload` is an explicit alias of `load` (a second load() merges storage
+ *  on top of current maps - it is not a reset). */
+export declare function useCacheMapPersistence(cache: CacheMap, delay?: number): {
+    isDirty: () => boolean;
+    flush: () => Promise<void>;
+    save: () => Promise<void>;
+    reload: () => Promise<void>;
+};

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

@@ -0,0 +1,15 @@
+/** Shared "fixed entries pin back to their descriptor index" invariant.
+ *
+ *  columnState.normalize(), ColumnsMenu.movedOrder(), Toolbar.normalize() and
+ *  Toolbar.Settings.movedOrder() used to inline byte-identical copies of this idiom, with
+ *  comments demanding they stay in sync (the drag preview must land exactly where the commit
+ *  does). One implementation makes that invariant structural instead of disciplinary. */
+export type FixedOrderDescriptor = {
+    key: string;
+    fixed?: boolean;
+};
+/** Drop fixed keys from `order`, then pin every fixed descriptor back at its descriptor index. */
+export declare function pinFixedOrder(order: readonly string[], descriptors: readonly FixedOrderDescriptor[]): string[];
+/** The shared drag preview: splice-move `key` to index `to`, then re-pin fixed entries.
+ *  Same result as committing the move through normalize(). */
+export declare function movedOrderWithFixed(order: readonly string[], key: string, to: number, descriptors: readonly FixedOrderDescriptor[]): string[];

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

@@ -0,0 +1,30 @@
+/** Shared "fixed entries pin back to their descriptor index" invariant.
+ *
+ *  columnState.normalize(), ColumnsMenu.movedOrder(), Toolbar.normalize() and
+ *  Toolbar.Settings.movedOrder() used to inline byte-identical copies of this idiom, with
+ *  comments demanding they stay in sync (the drag preview must land exactly where the commit
+ *  does). One implementation makes that invariant structural instead of disciplinary. */
+/** Drop fixed keys from `order`, then pin every fixed descriptor back at its descriptor index. */
+export function pinFixedOrder(order, descriptors) {
+    const fixed = new Set();
+    for (const d of descriptors)
+        if (d.fixed)
+            fixed.add(d.key);
+    const res = order.filter(k => !fixed.has(k));
+    descriptors.forEach(function pinFixed(d, i) {
+        if (d.fixed)
+            res.splice(Math.min(i, res.length), 0, d.key);
+    });
+    return res;
+}
+/** The shared drag preview: splice-move `key` to index `to`, then re-pin fixed entries.
+ *  Same result as committing the move through normalize(). */
+export function movedOrderWithFixed(order, key, to, descriptors) {
+    const next = order.slice();
+    const from = next.indexOf(key);
+    if (from == -1)
+        return next;
+    next.splice(from, 1);
+    next.splice(Math.max(0, Math.min(next.length, to)), 0, key);
+    return pinFixedOrder(next, descriptors);
+}

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

@@ -1,9 +1,11 @@
 export * from './gridRows';
 export * from './arrayPromise';
 export * from './cache';
+export * from './fixedOrder';
 export * from './callbackHub';
 export * from './inputAutoStep';
 export * from './memoryStore';
 export * from './observableMap';
 export * from './pageVisibilityContext';
 export * from './searchHistory';
+export * from './structEqual';

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

@@ -1,9 +1,11 @@
 export * from './gridRows';
 export * from './arrayPromise';
 export * from './cache';
+export * from './fixedOrder';
 export * from './callbackHub';
 export * from './inputAutoStep';
 export * from './memoryStore';
 export * from './observableMap';
 export * from './pageVisibilityContext';
 export * from './searchHistory';
+export * from './structEqual';

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

@@ -27,11 +27,8 @@ export declare const memoryCache: {
     getArr: [k: string, v: Map<string, unknown>][];
 };
 export declare const memoryMaps: {
-    rnd: ObservableMap<string, import("../components/Dnd/FloatingWindow").FloatingWindowSavedGeometry>;
-    resize: ObservableMap<string, {
-        height?: number | string;
-        width?: number | string;
-    }>;
-    rightMenu: ObservableMap<string, import("../components/Menu/RightMenuStore").MenuRightSavedState>;
+    rnd: ObservableMap<string, import("../components/Dnd").FloatingWindowSavedGeometry>;
+    resize: ObservableMap<string, import("./persistedMaps").ResizableSavedSize>;
+    rightMenu: ObservableMap<string, import("../components/Menu").MenuRightSavedState>;
     other: ObservableMap<string, object>;
 };

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

@@ -1,8 +1,6 @@
 import { deepClone } from "wenay-common2";
 import { renderBy } from "../../updateBy";
-import { floatingWindowMap } from "../components/Dnd/FloatingWindow";
-import { mapResiReact } from "../components/Dnd/Resizable";
-import { mapRightMenu } from "../components/Menu/RightMenuStore";
+import { floatingWindowMap, mapResiReact, mapRightMenu } from "./persistedMaps";
 import { createCacheMap } from "./cache";
 import { ObservableMap } from "./observableMap";
 // observable - memoryCache marks itself dirty on its mutations

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

@@ -0,0 +1,16 @@
+import { ObservableMap } from "./observableMap";
+import type { FloatingWindowSavedGeometry } from "../components/Dnd/FloatingWindow";
+import type { MenuRightSavedState } from "../components/Menu/RightMenuStore";
+/** Persisted-state maps live in a utils LEAF so the runtime dependency graph points one way:
+ *  owning components import their map from here, and memoryStore assembles the memoryCache
+ *  registry without reaching up into the component layer (it used to import FloatingWindow/
+ *  Resizable/RightMenuStore, dragging react-rnd and the Menu tree into every utils consumer).
+ *  The `import type` lines above are erased at build - shapes stay documented at their owners. */
+/** Saved size of an FResizableReact column/box; the shape the resize layer persists. */
+export type ResizableSavedSize = {
+    height?: number | string;
+    width?: number | string;
+};
+export declare const floatingWindowMap: ObservableMap<string, FloatingWindowSavedGeometry>;
+export declare const mapResiReact: ObservableMap<string, ResizableSavedSize>;
+export declare const mapRightMenu: ObservableMap<string, MenuRightSavedState>;

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

@@ -0,0 +1,5 @@
+import { ObservableMap } from "./observableMap";
+// observable - memoryCache marks itself dirty on their mutations
+export const floatingWindowMap = new ObservableMap();
+export const mapResiReact = new ObservableMap();
+export const mapRightMenu = new ObservableMap();