wenay-react2 1.0.34 → 1.0.36

package/lib/common/src/hooks/useReorderBoard.d.ts

@@ -1,4 +1,4 @@
-import { tReorderItem } from './useReorder';
+import { ReorderItem } from './useReorder';
 /** useReorderBoard - the columns extension of useReorder: keyed blocks live in
  *  VERTICAL columns (plain consumer divs), one block drags between/within them,
  *  ONE commit on drop. Column "gravity" is pure consumer CSS (justify-content:
@@ -8,19 +8,19 @@ import { tReorderItem } from './useReorder';
  *  drag. Children of a column div must be exactly its items, 1:1, in order.
  *  Same non-goals as useReorder: no nesting, no spans/collision packing, no
  *  autoscroll - that day is a ready-made dnd library. */
-export type tBoardPos = {
+export type BoardPosition = {
     col: string;
     index: number;
 };
-export type tBoardColumn = {
+export type BoardColumn = {
     key: string;
     items: string[];
 };
-export type tReorderBoardOptions = {
+export type ReorderBoardOptions = {
     /** columns in board order; each column's div children must render items 1:1 */
-    columns: tBoardColumn[];
+    columns: BoardColumn[];
     /** ONE commit on drop; skipped when nothing moved */
-    commit: (next: tBoardColumn[]) => void;
+    commit: (next: BoardColumn[]) => void;
     /** false = this key cannot start a drag (default: all can) */
     canDrag?: (key: string) => boolean;
     /** hold before the drag starts; default 0 */
@@ -28,12 +28,12 @@ export type tReorderBoardOptions = {
     /** the block was grabbed */
     onDragStart?: (e: {
         key: string;
-        from: tBoardPos;
+        from: BoardPosition;
     }) => void;
     /** every pointer move while dragging; position = pointer delta in local px */
     onDragMove?: (e: {
         key: string;
-        over: tBoardPos;
+        over: BoardPosition;
         position: {
             x: number;
             y: number;
@@ -42,20 +42,20 @@ export type tReorderBoardOptions = {
     /** the target slot changed (compare prev.col != over.col for column crossings) */
     onOverChange?: (e: {
         key: string;
-        over: tBoardPos;
-        prev: tBoardPos | null;
+        over: BoardPosition;
+        prev: BoardPosition | null;
     }) => void;
     /** drop; committed=false when nothing moved (plain click) */
     onDragEnd?: (e: {
         key: string;
-        from: tBoardPos;
-        over: tBoardPos;
+        from: BoardPosition;
+        over: BoardPosition;
         committed: boolean;
     }) => void;
 };
-export declare function useReorderBoard(o: tReorderBoardOptions): {
+export declare function useReorderBoard(o: ReorderBoardOptions): {
     columnRef: (col: string) => (el: HTMLElement | null) => void;
-    item: (key: string) => tReorderItem;
+    item: (key: string) => ReorderItem;
     dragKey: string | null;
-    over: tBoardPos | null;
+    over: BoardPosition | null;
 };

package/lib/common/src/hooks/useReplay.d.ts

@@ -1,5 +1,7 @@
-import { ObserveAll2, Replay } from "wenay-common2";
-type StorePatch = ObserveAll2.StorePatch;
+import { Observe, Replay } from "wenay-common2";
+type StoreDrain = Observe.StoreDrain;
+type StoreEachCtx = Observe.StoreEachCtx;
+type StorePatch = Observe.StorePatch;
 type ReplayEvent<Z extends any[]> = Replay.ReplayEvent<Z>;
 type ReplayRemote<Z extends any[]> = Replay.ReplayRemote<Z>;
 type StaleInfo = Replay.StaleInfo;
@@ -63,14 +65,14 @@ export declare function useReplaySubscribe<Z extends any[]>(remote: ReplayRemote
 export type UseStoreReplaySyncOptions = UseReplaySubscribeOptions;
 export type StoreReplaySyncController = ReplaySubscribeController;
 /**
- * Sync an existing mirror store from a store replay line (`ObserveAll2.exposeStoreReplay(...).api.replay`).
- * Thin lifecycle wrapper over `ObserveAll2.syncStoreReplay`: the keyframe (root patch) and the
+ * Sync an existing mirror store from a store replay line (`Observe.exposeStoreReplay(...).api.replay`).
+ * Thin lifecycle wrapper over `Observe.syncStoreReplay`: the keyframe (root patch) and the
  * patch tail are applied to the store by the library; UI subscribes to the store as usual
  * (useStoreNode/useStoreSelect).
  */
-export declare function useStoreReplaySync<T extends object>(store: ObserveAll2.Store<T> | null | undefined, remote: ReplayRemote<[StorePatch]> | null | undefined, options?: UseStoreReplaySyncOptions): StoreReplaySyncController;
+export declare function useStoreReplaySync<T extends object>(store: Observe.Store<T> | null | undefined, remote: ReplayRemote<[StorePatch]> | null | undefined, options?: UseStoreReplaySyncOptions): StoreReplaySyncController;
 export type StoreReplayMirrorController<T extends object> = StoreReplaySyncController & {
-    readonly store: ObserveAll2.Store<T>;
+    readonly store: Observe.Store<T>;
 };
 /**
  * Convenience: create a local mirror store and keep it synced from a store replay line.
@@ -78,6 +80,31 @@ export type StoreReplayMirrorController<T extends object> = StoreReplaySyncContr
  * so reconnect is a journal tail, not a keyframe. A new `remote` recreates the store.
  */
 export declare function useStoreReplayMirror<T extends object>(remote: ReplayRemote<[StorePatch]> | null | undefined, initial: T, options?: UseStoreReplaySyncOptions): StoreReplayMirrorController<T>;
+export type UseStoreReplayEachOptions<T extends object> = UseStoreReplaySyncOptions & {
+    /**
+     * Seed of the internal mirror store. Creation-time only (a later identity change does nothing).
+     * Reconnect after a FULL unmount: pass the saved snapshot together with `since`
+     * ({since: prev.seq(), initial: prev.store.snapshot()}) — the tail lands ON TOP of the previous
+     * state; a fresh empty mirror would not converge.
+     */
+    initial?: T;
+    /** Drain of the internal mirror store — the coalescing window of the per-key feed. Creation-time only. */
+    drain?: StoreDrain;
+};
+/**
+ * Per-key fold over a store replay line — React counterpart of `Observe.syncStoreReplayEach`
+ * (internal mirror store + syncStoreReplay + store.each()). cb fires once per CHANGED top-level
+ * key per drain window with the current value; the first delivery is the keyframe EXPANDED per
+ * key; (key, undefined) = key deleted — cold start / reconnect are not special cases for per-key
+ * consumers (grid rows, canvas layers, ...). The fold target should live outside React state.
+ *
+ * Unlike the library one-call (a fresh store per call), the mirror here lives in a ref: within
+ * one mounted component every resubscribe (StrictMode double-effect, restart(), enabled toggling,
+ * staleMs/policy change) reconnects by tail ON TOP of the kept state — no snapshot/initial dance.
+ * A new `remote` identity recreates the store (fresh keyframe). Direct reads / extra
+ * subscriptions: controller.store (useStoreNode/useStoreKeys work on it as usual).
+ */
+export declare function useStoreReplayEach<T extends object>(remote: ReplayRemote<[StorePatch]> | null | undefined, cb: (key: string, value: T[keyof T] | undefined, ctx: StoreEachCtx) => void, options?: UseStoreReplayEachOptions<T>): StoreReplayMirrorController<T>;
 export type UseReplayFrameOptions = {
     /** Pull period, ms. Default 300. */
     intervalMs?: number;

package/lib/common/src/hooks/useReplay.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ObserveAll2, Replay } from "wenay-common2";
+import { Observe, Replay } from "wenay-common2";
+import { useStoreEach } from "./useObserveStore";
 /**
  * React bridge over the Replay stack (snapshot + sequenced delta line) of wenay-common2.
  *
@@ -111,8 +112,8 @@ export function useReplaySubscribe(remote, cb, options = {}) {
     return useMemo(() => ({ ready, error, stale, seq, lastTs, restart }), [ready, error, stale, seq, lastTs, restart]);
 }
 /**
- * Sync an existing mirror store from a store replay line (`ObserveAll2.exposeStoreReplay(...).api.replay`).
- * Thin lifecycle wrapper over `ObserveAll2.syncStoreReplay`: the keyframe (root patch) and the
+ * Sync an existing mirror store from a store replay line (`Observe.exposeStoreReplay(...).api.replay`).
+ * Thin lifecycle wrapper over `Observe.syncStoreReplay`: the keyframe (root patch) and the
  * patch tail are applied to the store by the library; UI subscribes to the store as usual
  * (useStoreNode/useStoreSelect).
  */
@@ -138,7 +139,7 @@ export function useStoreReplaySync(store, remote, options = {}) {
         setError(null);
         if (staleMs === undefined)
             setStale(false); // see useReplaySubscribe: stale re-syncs from common2, no reset-to-false flicker
-        const off = ObserveAll2.syncStoreReplay(store, remote, {
+        const off = Observe.syncStoreReplay(store, remote, {
             since: seqRef.current,
             policy,
             hint: hintRef.current,
@@ -195,12 +196,38 @@ export function useStoreReplaySync(store, remote, options = {}) {
 export function useStoreReplayMirror(remote, initial, options = {}) {
     const storeRef = useRef(null);
     if (!storeRef.current || storeRef.current.remote !== remote) {
-        storeRef.current = { remote, store: ObserveAll2.createStore(initial) };
+        storeRef.current = { remote, store: Observe.createStore(initial) };
     }
     const store = storeRef.current.store;
     const sync = useStoreReplaySync(store, remote, options);
     return useMemo(() => ({ ...sync, store }), [sync, store]);
 }
+/**
+ * Per-key fold over a store replay line — React counterpart of `Observe.syncStoreReplayEach`
+ * (internal mirror store + syncStoreReplay + store.each()). cb fires once per CHANGED top-level
+ * key per drain window with the current value; the first delivery is the keyframe EXPANDED per
+ * key; (key, undefined) = key deleted — cold start / reconnect are not special cases for per-key
+ * consumers (grid rows, canvas layers, ...). The fold target should live outside React state.
+ *
+ * Unlike the library one-call (a fresh store per call), the mirror here lives in a ref: within
+ * one mounted component every resubscribe (StrictMode double-effect, restart(), enabled toggling,
+ * staleMs/policy change) reconnects by tail ON TOP of the kept state — no snapshot/initial dance.
+ * A new `remote` identity recreates the store (fresh keyframe). Direct reads / extra
+ * subscriptions: controller.store (useStoreNode/useStoreKeys work on it as usual).
+ */
+export function useStoreReplayEach(remote, cb, options = {}) {
+    const { initial, drain, ...syncOptions } = options;
+    const storeRef = useRef(null);
+    if (!storeRef.current || storeRef.current.remote !== remote) {
+        storeRef.current = { remote, store: Observe.createStore((initial ?? {}), drain !== undefined ? { drain } : undefined) };
+    }
+    const store = storeRef.current.store;
+    // each BEFORE sync: effects run in hook-call order, so the per-key subscriber already exists
+    // when the keyframe applies to the store (the expansion is not missed)
+    useStoreEach(store, cb, { enabled: syncOptions.enabled });
+    const sync = useStoreReplaySync(store, remote, syncOptions);
+    return useMemo(() => ({ ...sync, store }), [sync, store]);
+}
 /**
  * Pull a replay line at YOUR pace (the frame model of common2): a timer around
  * `remote.frame(seq, hint)` — the server condenses the tail via the line's `frame` lambda

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

@@ -1,5 +1,5 @@
 import { Params } from "wenay-common2";
-type tLogsInput<T extends object> = T & {
+type LogInput<T extends object> = T & {
     id: string;
     var?: number;
     time: Date;
@@ -43,7 +43,7 @@ export declare function getLogsApi<T extends object = {}>(setting: {
     limitPer: number;
     varMin?: number;
 }): {
-    addLogs(a: tLogsInput<T>): void;
+    addLogs(a: LogInput<T>): void;
     params: {
         def: () => {
             minVarLogs: {
@@ -160,7 +160,7 @@ export declare function PageLogs({ update }: {
 export declare function MessageEventLogs({ zIndex }: {
     zIndex?: number;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function PageLogs2({ update }: {
+export declare function LogsPage({ update }: {
     update?: number;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,9 +3,9 @@ import { AgGridReact } from "ag-grid-react";
 import { useCallback, useEffect, useRef } from "react";
 import { copyToClipboard, Params, timeLocalToStr_hhmmss } from "wenay-common2";
 import { renderBy, updateBy } from "../../updateBy";
-import { mouseMenuApi } from "../menu/menuMouse";
-import { staticGetAdd } from "../utils/mapMemory";
-import { ParametersReact } from "../components/ParametersEngine";
+import { contextMenu } from "../menu/menuMouse";
+import { memoryGetOrCreate } from "../utils/memoryStore";
+import { ParamsEditor } from "../components/ParamsEditor";
 const cashLogs = new Map();
 const datumConst = {
     map: cashLogs,
@@ -22,7 +22,7 @@ const getSettingLogs = () => ({
 const settingLogs = { params: Params.GetSimpleParams(getSettingLogs()) };
 // varMin - minimum importance
 export function getLogsApi(setting) {
-    const datum = staticGetAdd("settingLogs", settingLogs);
+    const datum = memoryGetOrCreate("settingLogs", settingLogs);
     function addToArr(arr, data, limit) {
         arr.unshift(data);
         if (arr.length > limit)
@@ -55,8 +55,8 @@ export function getLogsApi(setting) {
 }
 export const logsApi = getLogsApi({ limitPer: 500 });
 function InputSettingLogs({}) {
-    const datum = staticGetAdd("settingLogs", settingLogs);
-    return _jsx(ParametersReact
+    const datum = memoryGetOrCreate("settingLogs", settingLogs);
+    return _jsx(ParamsEditor
     // @ts-ignore
     , { 
         // @ts-ignore
@@ -69,7 +69,7 @@ export function PageLogs({ update }) {
     const datumFull = datumConst;
     const rowData = [...datumFull.map.values()].flat();
     const datum = datumMiniConst;
-    const setting = staticGetAdd("settingLogs", settingLogs);
+    const setting = memoryGetOrCreate("settingLogs", settingLogs);
     const apiGrid = useRef(null);
     useEffect(() => {
         apiGrid.current?.api.sizeColumnsToFit();
@@ -160,10 +160,8 @@ export function PageLogs({ update }) {
                     filter: true,
                     wrapText: true,
                 }, headerHeight: 30, rowHeight: 26, autoSizePadding: 1, rowData: rowData, columnDefs: columns, onCellMouseDown: (e) => {
-                    // @ts-ignore
-                    if (e.event?.button == 2) {
-                        // copyToClipboard(e.value)
-                        mouseMenuApi.map.set("sym", [
+                    if (e.event instanceof MouseEvent && e.event.button == 2) {
+                        contextMenu.openAt(e.event, [
                             {
                                 name: "copy", onClick: () => { copyToClipboard(e.value); }
                             }
@@ -189,7 +187,7 @@ function Message({ logs }) {
 const tt = {};
 let r = 0;
 export function MessageEventLogs({ zIndex }) {
-    const setting = staticGetAdd("settingLogs", settingLogs);
+    const setting = memoryGetOrCreate("settingLogs", settingLogs);
     updateBy(tt);
     updateBy(datumMiniConst, () => {
         const last = datumMiniConst.last[0];
@@ -222,7 +220,7 @@ const pages = [
     { name: "setting", key: "InputSettingLogs", page: InputSettingLogs },
 ];
 const map = Object.fromEntries(pages.map(e => [e.key, e.page]));
-export function PageLogs2({ update }) {
+export function LogsPage({ update }) {
     const datum = defPageBase;
     updateBy(datum);
     const Page = map[datum.keyPage];

package/lib/common/src/logs/{logs3.d.ts → logsContext.d.ts}

@@ -3,14 +3,14 @@ import React from 'react';
  *  1. Log types
  * -----------------------------
  */
-export interface tLogsInput<T extends object = {}> {
+export interface LogInput<T extends object = {}> {
     id: string;
     var?: number;
     time: Date;
     txt: string;
     [key: string]: any;
 }
-export interface tLogs<T extends object = {}> extends tLogsInput<T> {
+export interface LogEntry<T extends object = {}> extends LogInput<T> {
     num: number;
 }
 /** -----------------------------
@@ -18,8 +18,8 @@ export interface tLogs<T extends object = {}> extends tLogsInput<T> {
  * -----------------------------
  */
 interface LogsContextValue {
-    logs: tLogs[];
-    addLog: (input: tLogsInput) => void;
+    logs: LogEntry[];
+    addLog: (input: LogInput) => void;
     minVarLogs: number;
     setMinVarLogs: (value: number) => void;
     minVarMessage: number;

package/lib/common/src/logs/{logs3.js → logsContext.js}

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AgGridReact } from 'ag-grid-react';
 /** -----------------------------
- *  2. staticGetAdd function -
+ *  2. memoryGetOrCreate function -
  *     loads and saves data in localStorage.
  * -----------------------------
  */
-function staticGetAdd(key, defaultValue) {
+function memoryGetOrCreate(key, defaultValue) {
     try {
         const stored = localStorage.getItem(key);
         // If localStorage has no value, write defaultValue
@@ -32,7 +32,7 @@ function staticGetAdd(key, defaultValue) {
 const LogsContext = createContext(null);
 export function LogsProvider({ children }) {
     // 4.1. Load settings from localStorage once (lazy init: the provider rerenders on every addLog)
-    const [savedSettings] = useState(() => staticGetAdd("logSettings", {
+    const [savedSettings] = useState(() => memoryGetOrCreate("logSettings", {
         minVarLogs: 0,
         minVarMessage: 0,
         timeShow: 2,
@@ -42,7 +42,7 @@ export function LogsProvider({ children }) {
     //      only settings are, but logs can be saved too if needed)
     const [logs, setLogs] = useState([]);
     const counterRef = useRef(0);
-    // 4.3. Settings themselves, initialized from staticGetAdd output
+    // 4.3. Settings themselves, initialized from memoryGetOrCreate output
     const [minVarLogs, setMinVarLogs] = useState(savedSettings.minVarLogs);
     const [minVarMessage, setMinVarMessage] = useState(savedSettings.minVarMessage);
     const [timeShow, setTimeShow] = useState(savedSettings.timeShow);

package/lib/common/src/menu/menu.d.ts

@@ -2,22 +2,22 @@ import React, { ReactElement } from 'react';
 /*******************************************************
  * Menu data types
  *******************************************************/
-export type tMenuReactStrictly<T = any> = {
+export type MenuItemStrict<T = any> = {
     name: string | ((status?: T) => string);
     getStatus?: (() => T) | null;
     onClick?: ((e: any) => void | undefined | null | ((void | undefined | null | Promise<any> | (() => Promise<any>))[]) | Promise<any>) | null;
     active?: (() => boolean) | null;
     status?: boolean;
-    next?: (() => (tMenuReact<any> | false)[] | Promise<(tMenuReact<any> | false)[]>) | null;
+    next?: (() => (MenuItem<any> | false)[] | Promise<(MenuItem<any> | false)[]>) | null;
     func?: (() => React.ReactElement | Promise<React.ReactElement>) | null;
-    onFocus?: (() => tMenuReact<any>[] | Promise<tMenuReact<any>[]>) | null;
+    onFocus?: (() => MenuItem<any>[] | Promise<MenuItem<any>[]>) | null;
     menuElement?: typeof MenuElement;
 };
-export type tMenuReact<T = any> = tMenuReactStrictly<T> | false | null | undefined;
+export type MenuItem<T = any> = MenuItemStrict<T> | false | null | undefined;
 /*******************************************************
  * Helper type
  *******************************************************/
-type tCounters = {
+type MenuProgressCounters = {
     ok?: number;
     error?: number;
     count?: number;
@@ -25,20 +25,20 @@ type tCounters = {
 /*******************************************************
  * Displays counter/progress with animation and ok/error counts
  *******************************************************/
-declare function TimeNum({ data }: {
-    data: tCounters;
+declare function MenuProgress({ data }: {
+    data: MenuProgressCounters;
 }): ReactElement;
 /*******************************************************
  * Main menu element with onClick and counters
  *******************************************************/
 declare function MenuElement({ data: item, toLeft, className, update, }: {
-    data: Pick<tMenuReactStrictly, "onClick" | "active" | "name" | "getStatus">;
+    data: Pick<MenuItemStrict, "onClick" | "active" | "name" | "getStatus">;
     toLeft: boolean;
     className?: (active?: boolean) => string;
     update: () => void;
 }): ReactElement;
 /*******************************************************
- * MenuBase renders the popup menu with support for
+ * Menu renders the popup menu with support for
  * nested submenus and their state management.
  *
  * @param {Object} props - Component props.
@@ -47,7 +47,7 @@ declare function MenuElement({ data: item, toLeft, className, update, }: {
  * @param {number} props.coordinate.y - Y coordinate for menu placement.
  * @param {boolean} [props.coordinate.toLeft=false] - Whether the menu should be shifted left.
  * @param {number} [props.coordinate.left=0] - Additional left offset when the menu has nested items.
- * @param {tMenuReactStrictly[]} props.data - Array of objects describing menu items.
+ * @param {MenuItemStrict[]} props.data - Array of objects describing menu items.
  * @param {number} [props.zIndex] - Menu z-index for overlap visibility.
  * @param {Function} [props.menu] - Function that generates a custom React element for the whole menu.
  * @param {Function} [props.menuElement] - Function that generates a custom React element for one menu item.
@@ -55,10 +55,10 @@ declare function MenuElement({ data: item, toLeft, className, update, }: {
  *
  * @returns {ReactElement} Visual menu element.
  */
-type MenuBaseProps = {
-    menu?: (arr: tMenuReact[]) => ReactElement;
-    menuElement?: (item: tMenuReact) => ReactElement;
-    data: tMenuReact[];
+type MenuProps = {
+    menu?: (arr: MenuItem[]) => ReactElement;
+    menuElement?: (item: MenuItem) => ReactElement;
+    data: MenuItem[];
     zIndex?: number;
     className?: (active?: boolean) => string;
     coordinate?: {
@@ -68,5 +68,5 @@ type MenuBaseProps = {
         left?: number;
     };
 };
-export declare function MenuBase({ coordinate, data, zIndex, menu, className, menuElement, }: MenuBaseProps): ReactElement;
-export { TimeNum, MenuElement };
+export declare function Menu({ coordinate, data, zIndex, menu, className, menuElement, }: MenuProps): ReactElement;
+export { MenuProgress, MenuElement };

package/lib/common/src/menu/menu.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { PromiseArrayListen, sleepAsync } from "wenay-common2";
+import { promiseProgress, sleepAsync } from "wenay-common2";
 /*******************************************************
  * Displays counter/progress with animation and ok/error counts
  *******************************************************/
-function TimeNum({ data }) {
+function MenuProgress({ data }) {
     const [count, setCount] = useState(0);
     const formatLabel = () => {
         if (!data.ok && !data.error)
@@ -54,7 +54,7 @@ function MenuElement({ data: item, toLeft, className, update, }) {
             // If this is an array of tasks, promises, or functions
             if (Array.isArray(result)) {
                 const tasks = result.filter(Boolean);
-                const pa = PromiseArrayListen(tasks); // External helper function
+                const pa = promiseProgress(tasks);
                 setProgress({});
                 unsubOk.current?.();
                 unsubErr.current?.();
@@ -71,8 +71,9 @@ function MenuElement({ data: item, toLeft, className, update, }) {
                         setProgress(null);
                     }
                 };
-                unsubOk.current = pa.listenOk((data, i, countOk, countError, count) => onTick(countOk, countError, count));
-                unsubErr.current = pa.listenError((error, i, countOk, countError, count) => onTick(countOk, countError, count));
+                unsubOk.current = pa.onOk((data, i, countOk, countError, count) => onTick(countOk, countError, count));
+                unsubErr.current = pa.onError((error, i, countOk, countError, count) => onTick(countOk, countError, count));
+                void pa.allSettled();
             }
             // If this is a single promise
             else if (result instanceof Promise) {
@@ -108,7 +109,7 @@ function MenuElement({ data: item, toLeft, className, update, }) {
             }
         }, children: _jsxs("div", { className: "toLine", children: [typeof item.name === "string"
                     ? item.name
-                    : item.name(item.getStatus?.()), progress && _jsx(TimeNum, { data: progress })] }) }));
+                    : item.name(item.getStatus?.()), progress && _jsx(MenuProgress, { data: progress })] }) }));
 }
 const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPos, menuElement, fullArray, }) => {
     const [childMenu, setChildMenu] = useState([]);
@@ -186,24 +187,24 @@ const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPo
                     data: item,
                     className,
                     update,
-                }) ?? (_jsx(MenuElement, { toLeft: isLeftAligned, data: item, className: className, update: update })), _jsxs("div", { children: [item.status && childMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(MenuBase, { data: childMenu, coordinate: {
+                }) ?? (_jsx(MenuElement, { toLeft: isLeftAligned, data: item, className: className, update: update })), _jsxs("div", { children: [item.status && childMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { data: childMenu, coordinate: {
                                 x: 3,
                                 y: 0,
                                 toLeft: isLeftAligned,
                                 left: leftPos,
-                            } }) })), item.status && asyncFuncElement && (_jsx("div", { style: { position: "relative" }, children: _jsx(MenuBase, { menu: () => asyncFuncElement, data: [], coordinate: {
+                            } }) })), item.status && asyncFuncElement && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { menu: () => asyncFuncElement, data: [], coordinate: {
                                 x: 3,
                                 y: 0,
                                 toLeft: isLeftAligned,
                                 left: leftPos,
-                            } }) })), item.status && onFocusMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(MenuBase, { data: onFocusMenu, coordinate: {
+                            } }) })), item.status && onFocusMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { data: onFocusMenu, coordinate: {
                                 x: 3,
                                 y: 0,
                                 toLeft: isLeftAligned,
                                 left: leftPos,
                             } }) }))] })] }));
 };
-export function MenuBase({ coordinate = { x: 0, y: 0, toLeft: false, left: 0 }, data, zIndex, menu, className, menuElement, }) {
+export function Menu({ coordinate = { x: 0, y: 0, toLeft: false, left: 0 }, data, zIndex, menu, className, menuElement, }) {
     const [, forceUpdate] = useState(false);
     const update = () => forceUpdate((p) => !p);
     const refMenu = useRef(null);
@@ -251,4 +252,4 @@ export function MenuBase({ coordinate = { x: 0, y: 0, toLeft: false, left: 0 },
             ? menu(dataMemo)
             : dataMemo.map((item, i, arr) => (_jsx(MenuItemWrapper, { item: item, index: i, update: update, className: className, isLeftAligned: isLeftAligned, leftPos: leftPos, menuElement: menuElement, fullArray: dataMemo }, typeof item.name === "string" ? item.name : i))) }));
 }
-export { TimeNum, MenuElement };
+export { MenuProgress, MenuElement };

package/lib/common/src/menu/menuMouse.d.ts

@@ -1,7 +1,62 @@
-import { MenuBase, tMenuReact } from "./menu";
-export declare const mouseMenuApi: {
+import React from "react";
+import { Menu, MenuItem, MenuItemStrict } from "./menu";
+export type ContextMenuPoint = {
+    x: number;
+    y: number;
+};
+export type ContextMenuAnchor = ContextMenuPoint | {
+    clientX: number;
+    clientY: number;
+    target?: EventTarget | null;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+};
+export type ContextMenuState = {
+    open: boolean;
+    items: MenuItemStrict[];
+    point: ContextMenuPoint;
+    source?: string;
+    layerId?: string;
+    seq: number;
+};
+export type ContextMenuLayerProps = {
+    children: React.ReactElement;
+    zIndex?: number;
+    other?: () => MenuItem[];
+    statusOn?: boolean;
+    onUnClick?: (e: boolean) => void;
+    onConsume?: () => void;
+    className?: (active?: boolean) => string;
+};
+export declare function createContextMenu(data?: {
+    name?: string;
+}): {
+    bb: (b?: boolean) => boolean | undefined;
+    readonly map: Map<string, MenuItem[]>;
+    readonly menuMouse: {
+        name: string;
+        readonly value: {
+            status: boolean;
+            clicks: number;
+        };
+    };
+    getState: () => ContextMenuState;
+    subscribe: (cb: () => void) => () => void;
+    openAt: (anchor: ContextMenuAnchor, items: readonly MenuItem[] | null | undefined, opts?: {
+        source?: string;
+        layerId?: string;
+    }) => boolean;
+    openAtPoint: (point: ContextMenuPoint, items: readonly MenuItem[] | null | undefined, opts?: {
+        source?: string;
+        layerId?: string;
+    }) => boolean;
+    close: () => void;
+    Layer: ({ children, other, statusOn, onUnClick, onConsume, zIndex, className }: ContextMenuLayerProps) => import("react/jsx-runtime").JSX.Element;
+    MenuView: typeof Menu;
+};
+export declare const contextMenu: {
     bb: (b?: boolean) => boolean | undefined;
-    readonly map: Map<string, tMenuReact[]>;
+    readonly map: Map<string, MenuItem[]>;
     readonly menuMouse: {
         name: string;
         readonly value: {
@@ -9,14 +64,17 @@ export declare const mouseMenuApi: {
             clicks: number;
         };
     };
-    ReactMouse: (agr: Parameters<({ children, other, statusOn, onUnClick, onConsume, zIndex, className }: {
-        children: React.ReactElement;
-        zIndex?: number;
-        other?: () => (tMenuReact)[];
-        statusOn?: boolean;
-        onUnClick?: (e: boolean) => void;
-        onConsume?: () => void;
-        className?: (active?: boolean) => string;
-    }) => import("react/jsx-runtime").JSX.Element>[0]) => import("react/jsx-runtime").JSX.Element;
-    ReactMenu: typeof MenuBase;
+    getState: () => ContextMenuState;
+    subscribe: (cb: () => void) => () => void;
+    openAt: (anchor: ContextMenuAnchor, items: readonly MenuItem[] | null | undefined, opts?: {
+        source?: string;
+        layerId?: string;
+    }) => boolean;
+    openAtPoint: (point: ContextMenuPoint, items: readonly MenuItem[] | null | undefined, opts?: {
+        source?: string;
+        layerId?: string;
+    }) => boolean;
+    close: () => void;
+    Layer: ({ children, other, statusOn, onUnClick, onConsume, zIndex, className }: ContextMenuLayerProps) => import("react/jsx-runtime").JSX.Element;
+    MenuView: typeof Menu;
 };