wenay-react2 1.0.35 → 1.0.37

package/README.md

@@ -1,58 +1,13 @@
 # wenay-react2
 
-Common React UI primitives for wenay apps.
+Documentation index only.
 
-Use the new concise API guide first:
+- Brief API guide: [doc/wenay-react2.md](doc/wenay-react2.md)
+- Detailed / rare API guide: [doc/wenay-react2-rare.md](doc/wenay-react2-rare.md)
+- wenay-react2 rename map: [doc/WENAY_REACT2_RENAMES.md](doc/WENAY_REACT2_RENAMES.md)
+- Project rules for maintainers and AI agents: [doc/PROJECT_RULES.md](doc/PROJECT_RULES.md)
+- Recent version changes: [doc/changes/](doc/changes/)
 
-- [wenay-react2.md](doc/wenay-react2.md) - canonical everyday API.
-- [wenay-react2-rare.md](doc/wenay-react2-rare.md) - old names, low-level exports, migration notes.
-- [agGrid4 README](./src/common/src/grid/agGrid4/README.md) - table buffer/controller details.
-- [agGrid4 wrapper boundary](./src/common/src/grid/agGrid4/WRAPPER.md) - where generic primitives end and app wrappers begin.
+`wenay-common2` is an external dependency. Read its current docs from the installed module/package when needed; keep this README focused on `wenay-react2` documentation.
 
-## Import
-
-```ts
-import { useModal, useAgGrid, createGridBuffer, createColumnBuffer, useStoreMirror } from "wenay-react2"
-```
-
-The root export is still flat. A grouped namespace is also exported for large files:
-
-```ts
-import { v2 } from "wenay-react2"
-
-v2.grid.useAgGrid(...)
-v2.modal.useModal()
-```
-
-## API Standard
-
-New code should use the short controller-style surface:
-
-```tsx
-const modal = useModal()
-modal.open(<Dialog />)
-modal.close()
-
-const grid = useAgGrid<Row>({getId: row => row.id})
-grid.update({newData})
-grid.clean()
-grid.flush()
-
-const mirror = useStoreMirror(remoteStore, initialState, {mask, current: true})
-```
-
-Old `Get*`, `*2/*3`, `FuncJSX`, and legacy grid helper names remain documented in `wenay-react2-rare.md` for existing code, but they are not the teaching path for new code.
-
-## QA Stand
-
-```sh
-npm run testReact -- --host 127.0.0.1 --port 3002
-```
-
-The stand source is `src/common/testUseReact/qa.tsx`. Use it for visual checks after changing UI primitives.
-
-## Build
-
-```sh
-npm run build
-```
+Feature-specific docs may also live next to their code, for example agGrid4 docs under `src/common/src/grid/agGrid4/`.

package/lib/common/api.d.ts

@@ -1,15 +1,15 @@
 import "../style/menuRight.css";
 import "../style/style.css";
-import * as hooksV2 from "./src/hooks";
-import * as dndV2 from "./src/components/Dnd";
-import * as utilsV2 from "./src/utils";
-import * as gridV2 from "./src/grid/agGrid4";
-import * as modalV2 from "./src/components/Modal";
-import * as menuV2 from "./src/menu/menu";
-import * as menuMouseV2 from "./src/menu/menuMouse";
-import * as menuRV2 from "./src/menu/menuR";
-import * as logsV2 from "./src/logs/logs";
-import * as updateByV2 from "./updateBy";
+import * as hooksKit from "./src/hooks";
+import * as dndKit from "./src/components/Dnd";
+import * as utilsKit from "./src/utils";
+import * as gridKit from "./src/grid/agGrid4";
+import * as modalKit from "./src/components/Modal";
+import * as menuKit from "./src/menu/menu";
+import * as contextMenuKit from "./src/menu/menuMouse";
+import * as rightClickMenuKit from "./src/menu/menuR";
+import * as logsKit from "./src/logs/logs";
+import * as updateByKit from "./updateBy";
 export * from "./src/styles/styleGrid";
 export * from "./src/styles/tokens";
 export * from "./updateBy";
@@ -17,41 +17,41 @@ export * from "./src/hooks";
 export * from "./src/components/Dnd";
 export * from "./src/utils";
 export * from "./src/grid/agGrid4";
+export * from "./src/grid/columnState";
 export * from "./src/components/Buttons";
 export * from "./src/components/MyResizeObserver";
 export * from "./src/components/Other";
 export * from "./src/components/Parameters";
-export * from "./src/components/ParametersEngine";
+export * from "./src/components/ParamsEditor";
 export * from "./src/components/Input";
 export * from "./src/components/Modal";
 export * from "./src/components/Menu";
 export * from "./src/components/Settings";
 export * from "./src/components/UiSlot";
 export * from "./src/components/Toolbar";
-export { MenuBase, TimeNum, MenuElement as LegacyMenuElement } from "./src/menu/menu";
-export type { tMenuReact, tMenuReactStrictly } from "./src/menu/menu";
+export { Menu, MenuProgress, MenuElement as MenuItemElement } from "./src/menu/menu";
+export type { MenuItem, MenuItemStrict } from "./src/menu/menu";
 export * from "./src/menu/menuMouse";
 export * from "./src/menu/menuR";
 export * from "./src/logs/logs";
-export * from "./src/logs/logs3";
+export * from "./src/logs/logsContext";
 export * from "./src/logs/miniLogs";
 export * from "./src/myChart/1/myChart";
 export * from "./src/myChart/1/myChartTest";
 export * from "./src/myChart/chartEngine/chartEngineReact";
-export declare function test(): number;
-export declare const v2: {
-    readonly hooks: typeof hooksV2;
-    readonly dnd: typeof dndV2;
-    readonly utils: typeof utilsV2;
-    readonly grid: typeof gridV2;
-    readonly modal: typeof modalV2;
+export declare const kit: {
+    readonly hooks: typeof hooksKit;
+    readonly dnd: typeof dndKit;
+    readonly utils: typeof utilsKit;
+    readonly grid: typeof gridKit;
+    readonly modal: typeof modalKit;
     readonly menu: {
-        readonly mouse: typeof menuMouseV2;
-        readonly rightClick: typeof menuRV2;
-        readonly MenuBase: typeof menuV2.MenuBase;
-        readonly TimeNum: typeof menuV2.TimeNum;
-        readonly MenuElement: typeof menuV2.MenuElement;
+        readonly context: typeof contextMenuKit;
+        readonly rightClick: typeof rightClickMenuKit;
+        readonly Menu: typeof menuKit.Menu;
+        readonly MenuProgress: typeof menuKit.MenuProgress;
+        readonly MenuElement: typeof menuKit.MenuElement;
     };
-    readonly logs: typeof logsV2;
-    readonly updateBy: typeof updateByV2;
+    readonly logs: typeof logsKit;
+    readonly updateBy: typeof updateByKit;
 };

package/lib/common/api.js

@@ -1,15 +1,15 @@
 import "../style/menuRight.css";
 import "../style/style.css";
-import * as hooksV2 from "./src/hooks";
-import * as dndV2 from "./src/components/Dnd";
-import * as utilsV2 from "./src/utils";
-import * as gridV2 from "./src/grid/agGrid4";
-import * as modalV2 from "./src/components/Modal";
-import * as menuV2 from "./src/menu/menu";
-import * as menuMouseV2 from "./src/menu/menuMouse";
-import * as menuRV2 from "./src/menu/menuR";
-import * as logsV2 from "./src/logs/logs";
-import * as updateByV2 from "./updateBy";
+import * as hooksKit from "./src/hooks";
+import * as dndKit from "./src/components/Dnd";
+import * as utilsKit from "./src/utils";
+import * as gridKit from "./src/grid/agGrid4";
+import * as modalKit from "./src/components/Modal";
+import * as menuKit from "./src/menu/menu";
+import * as contextMenuKit from "./src/menu/menuMouse";
+import * as rightClickMenuKit from "./src/menu/menuR";
+import * as logsKit from "./src/logs/logs";
+import * as updateByKit from "./updateBy";
 // 0. STYLES - independent
 export * from "./src/styles/styleGrid";
 export * from "./src/styles/tokens";
@@ -19,18 +19,21 @@ export * from "./updateBy";
 export * from "./src/hooks";
 // 4. DND components - depend on updateBy
 export * from "./src/components/Dnd";
-// 5. UTILS - now depend on Dnd (mapMemory imports ExRNDMap3, mapResiReact)
+// 5. UTILS - now depend on Dnd (memoryStore imports floatingWindowMap, mapResiReact)
 export * from "./src/utils";
-// 5b. GRID (agGrid4): core buffer + headless hook + AgGridMy. New path instead of applyTransactionAsyncUpdate
+// 5b. GRID (agGrid4): core buffer + headless hook + AgGridTable.
 export * from "./src/grid/agGrid4";
+// 5c. GRID column state (createColumnState): persisted order/visibility/width/sort/filter,
+// standalone config store + optional two-way ag-grid adapter (attach via onGridReady)
+export * from "./src/grid/columnState";
 // 6. BASE COMPONENTS - depend on hooks
 export * from "./src/components/Buttons";
 export * from "./src/components/MyResizeObserver";
 export * from "./src/components/Other";
 // 7. Parameters - depends on utils
 export * from "./src/components/Parameters";
-// 8. ParametersEngine - depends on Parameters and utils
-export * from "./src/components/ParametersEngine";
+// 8. ParamsEditor - depends on Parameters and utils
+export * from "./src/components/ParamsEditor";
 // 9. Input - depends on hooks and Dnd
 export * from "./src/components/Input";
 // 10. Modal - depends on Input and updateBy
@@ -44,31 +47,28 @@ export * from "./src/components/UiSlot";
 // pure Settings editor works both in the bar's gear popover and in a settings section
 export * from "./src/components/Toolbar";
 // 12. MENU - depends on components
-export { MenuBase, TimeNum, MenuElement as LegacyMenuElement } from "./src/menu/menu";
+export { Menu, MenuProgress, MenuElement as MenuItemElement } from "./src/menu/menu";
 export * from "./src/menu/menuMouse";
 export * from "./src/menu/menuR";
-// 13. LOGS - depend on utils/mapMemory, menu, and components/ParametersEngine
+// 13. LOGS - depend on utils/memoryStore, menu, and components/ParamsEditor
 export * from "./src/logs/logs";
-export * from "./src/logs/logs3";
+export * from "./src/logs/logsContext";
 export * from "./src/logs/miniLogs";
 // 14. CHARTS - highest level
 export * from "./src/myChart/1/myChart";
 export * from "./src/myChart/1/myChartTest";
 export * from "./src/myChart/chartEngine/chartEngineReact";
-export function test() {
-    return 5;
-}
-export const v2 = {
-    hooks: hooksV2,
-    dnd: dndV2,
-    utils: utilsV2,
-    grid: gridV2,
-    modal: modalV2,
+export const kit = {
+    hooks: hooksKit,
+    dnd: dndKit,
+    utils: utilsKit,
+    grid: gridKit,
+    modal: modalKit,
     menu: {
-        ...menuV2,
-        mouse: menuMouseV2,
-        rightClick: menuRV2,
+        ...menuKit,
+        context: contextMenuKit,
+        rightClick: rightClickMenuKit,
     },
-    logs: logsV2,
-    updateBy: updateByV2,
+    logs: logsKit,
+    updateBy: updateByKit,
 };

package/lib/common/src/components/Buttons/MiniButton.d.ts

@@ -8,11 +8,9 @@ export declare function MiniButton({ name, arr, get, onClick, style }: {
     onClick: (index: number) => void;
     style?: React.CSSProperties | undefined;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MiniButton2({ name, children, statusDef, className }: {
+export declare function PopupButton({ name, children, statusDef, className }: {
     name: string;
     statusDef?: boolean;
     children: React.ReactElement | (() => React.ReactElement);
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-/** @deprecated Use MiniButton2 instead */
-export declare const MiniButton3: typeof MiniButton2;

package/lib/common/src/components/Buttons/MiniButton.js

@@ -10,9 +10,7 @@ export function MiniButton({ name, arr, get, onClick, style }) {
                         onClick(i);
                     }, children: k }, k)) }) }) });
 }
-export function MiniButton2({ name, children, statusDef, className = "newButtonSimple" }) {
+export function PopupButton({ name, children, statusDef, className = "newButtonSimple" }) {
     const content = typeof children === 'function' ? children() : children;
     return _jsx(Button, { className: className, statusDef: statusDef, button: (e) => _jsx("div", { className: e ? "msTradeAlt msTradeActive" : "msTradeAlt", children: name }), children: content });
 }
-/** @deprecated Use MiniButton2 instead */
-export const MiniButton3 = MiniButton2;

package/lib/common/src/components/Dnd/{RNDFunc.d.ts → DragArea.d.ts}

@@ -1,4 +1,4 @@
-export declare function Drag2({ children, onY, onX, x, y, last, onStart, onStop, }: {
+export declare function DragArea({ children, onY, onX, x, y, last, onStart, onStop, }: {
     children: React.JSX.Element;
     onX?: (x: number) => void;
     onY?: (y: number) => void;

package/lib/common/src/components/Dnd/{RNDFunc.js → DragArea.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 //
-export function Drag2({ children, onY, onX, x = 0, y = 0, last, onStart, onStop, }) {
+export function DragArea({ children, onY, onX, x = 0, y = 0, last, onStart, onStop, }) {
     const lastC = useRef(null);
     const lastT = useRef(null);
     const [a, setA] = useState(false);

package/lib/common/src/components/Dnd/{RNDFunc3.d.ts → FloatingWindow.d.ts}

@@ -12,7 +12,7 @@ type tRND = {
     position: tPosition;
     size: tSize;
 };
-export type tRndUpdate = {
+export type FloatingWindowUpdate = {
     e: MouseEvent | TouchEvent;
     dir: string;
     elementRef: HTMLElement;
@@ -26,7 +26,7 @@ type tDivRndBase = {
     zIndex?: number;
     disableDragging?: () => boolean;
     keyForSave?: string;
-    onUpdate?: (data: tRndUpdate) => void;
+    onUpdate?: (data: FloatingWindowUpdate) => void;
     position?: tPosition;
     size?: tSize;
     moveOnlyHeader?: boolean;
@@ -47,14 +47,14 @@ type tDivRndBase = {
     children: React.ReactElement | ((update: number) => React.ReactElement);
     className?: string;
 };
-export declare const ExRNDMap3: ObservableMap<string, tRND>;
-export declare const DivRnd3: typeof DivRndBase3;
+export declare const floatingWindowMap: ObservableMap<string, tRND>;
+export declare const FloatingWindow: typeof FloatingWindowBase;
 /**
  * Wrapper component around react-rnd.
  * Provides dragging and resizing, an optional header, and a close button.
  */
-export declare function DivRndBase3({ children, keyForSave: ks, position, size, overflow, zIndex, onUpdate, disableDragging, className, header, moveOnlyHeader, limit, onCLickClose, sizeByWindow }: tDivRndBase): import("react/jsx-runtime").JSX.Element;
-export type Drag2Props = {
+export declare function FloatingWindowBase({ children, keyForSave: ks, position, size, overflow, zIndex, onUpdate, disableDragging, className, header, moveOnlyHeader, limit, onCLickClose, sizeByWindow }: tDivRndBase): import("react/jsx-runtime").JSX.Element;
+export type DragBoxProps = {
     /** Child element that should be draggable */
     children: ReactNode;
     /** Callback when the X coordinate changes */
@@ -88,5 +88,5 @@ export type Drag2Props = {
  * Function only as a hook for parameter changes during movement, although it has its own component (for offset counting).
  * Returns the distance traveled when moving the child element.
  */
-export declare function Drag22({ children, onX, onY, x, y, right, last, dragging, onStart, onStop }: Drag2Props): import("react/jsx-runtime").JSX.Element;
+export declare function DragBox({ children, onX, onY, x, y, right, last, dragging, onStart, onStop }: DragBoxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/common/src/components/Dnd/{RNDFunc3.js → FloatingWindow.js}

@@ -3,25 +3,25 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Rnd } from "react-rnd";
 import { renderBy, updateBy } from "../../../updateBy";
 import { ObservableMap } from "../../utils/observableMap";
-// Map of all popup window sizes; observable - Cash marks itself dirty on its mutations
-export const ExRNDMap3 = new ObservableMap();
+// Map of all popup window sizes; observable - memoryCache marks itself dirty on its mutations
+export const floatingWindowMap = new ObservableMap();
 // limit={{x:{min:0}, y:{min:0}}}
 let k = 0;
 const openWindows = { ar: [] };
 // Freezes the subtree until update changes (intentionally ignores render closure changes) -
 // the previous useMemo-in-callback semantics, but without calling a hook from an arbitrary place
 const MemoChild = React.memo(({ update, render }) => render(update), (prev, next) => prev.update === next.update);
-export const DivRnd3 = (a) => {
+export const FloatingWindow = (a) => {
     const isFunc = typeof a.children === "function";
     const renderChild = (update) => typeof a.children === "function" ? a.children(update) : a.children;
     const ff = (update) => _jsx(MemoChild, { update: isFunc ? update : 0, render: renderChild });
-    return _jsx(DivRndBase3, { ...a, children: ff });
+    return _jsx(FloatingWindowBase, { ...a, children: ff });
 };
 /**
  * Wrapper component around react-rnd.
  * Provides dragging and resizing, an optional header, and a close button.
  */
-export function DivRndBase3({ children, keyForSave: ks, position, size, overflow = true, zIndex = 9, onUpdate, disableDragging, className, header, moveOnlyHeader, limit, onCLickClose, sizeByWindow = true }) {
+export function FloatingWindowBase({ children, keyForSave: ks, position, size, overflow = true, zIndex = 9, onUpdate, disableDragging, className, header, moveOnlyHeader, limit, onCLickClose, sizeByWindow = true }) {
     // NOTE: no implicit limit for onCLickClose windows. `limit` is parent-relative,
     // so {y:{min:0}} pinned windows to their DOM parent's top: a window opened from a
     // centered wrapper (ModalProvider / ModalWrapper at top:50%) could not be dragged
@@ -32,7 +32,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
     // If there is a key, store position and size data in the map
     let map;
     if (ks) {
-        map = ExRNDMap3.get(ks) ?? ExRNDMap3.set(ks, { size: sizeDef, position: positionDef }).get(ks);
+        map = floatingWindowMap.get(ks) ?? floatingWindowMap.set(ks, { size: sizeDef, position: positionDef }).get(ks);
     }
     position = map?.position ?? positionDef;
     size = map?.size ?? sizeDef;
@@ -101,7 +101,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
             // drag end commits geometry mutated in place - invisible to the map, so announce
             // it; a no-move click also lands here, the save-side diff turns that into a no-op
             if (ks)
-                ExRNDMap3.touch(ks);
+                floatingWindowMap.touch(ks);
         };
         // Touch
         const touchMoveHandler = (e) => {
@@ -147,7 +147,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
                 document.removeEventListener("touchmove", touchMoveHandler);
                 setB(false);
                 if (ks)
-                    ExRNDMap3.touch(ks);
+                    floatingWindowMap.touch(ks);
             }
         };
         // If mouse dragging mode is active
@@ -235,7 +235,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
             setWidth(elementRef.offsetWidth);
             setUpdate(update + 1);
             if (ks)
-                ExRNDMap3.touch(ks);
+                floatingWindowMap.touch(ks);
         }, onResize: (e, dir, elementRef, delta, pos) => {
             onUpdate?.({ e, dir, elementRef, delta, position: pos });
         }, position: { x, y }, size: { width, height }, default: {
@@ -271,7 +271,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
  * Function only as a hook for parameter changes during movement, although it has its own component (for offset counting).
  * Returns the distance traveled when moving the child element.
  */
-export function Drag22({ children, onX, onY, x = 0, y = 0, right = false, last, dragging, onStart, onStop }) {
+export function DragBox({ children, onX, onY, x = 0, y = 0, right = false, last, dragging, onStart, onStop }) {
     const offsetMouse = useRef({ x: 0, y: 0 });
     const offsetTouch = useRef(null);
     const [draggingMouse, setDraggingMouse] = useState(false);

package/lib/common/src/components/Dnd/OutlineDragDemo.d.ts

@@ -0,0 +1 @@
+export declare function OutlineDragDemo(): import("react/jsx-runtime").JSX.Element;

package/lib/common/src/components/Dnd/{DraggableOutlineDiv.js → OutlineDragDemo.js}

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 const ANIMATION_DURATION = 500; // animation duration in ms
-/** @deprecated Demo component with hardcoded content; used only by the test SubMenu. Will be removed in a major version. */
-export function DraggableOutlineDiv() {
+export function OutlineDragDemo() {
     const [isDragging, setIsDragging] = useState(false);
     const [animationFinished, setAnimationFinished] = useState(false);
     const timerRef = useRef(null);

package/lib/common/src/components/Dnd/Resizable.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Resizable } from "re-resizable";
 import { ObservableMap } from "../../utils/observableMap";
-// Memory for all column sizes; observable - Cash marks itself dirty on its mutations
+// Memory for all column sizes; observable - memoryCache marks itself dirty on its mutations
 export const mapResiReact = new ObservableMap();
 export function FResizableReact({ style, onResize, enable, children, keyForSave, onResizeStop, size = { height: 50, width: 50 }, minWidth, minHeight, maxWidth = "100%", maxHeight = "100%", moveWith = true, moveHeight = true }) {
     let obj = size;

package/lib/common/src/components/Dnd/index.d.ts

@@ -1,4 +1,4 @@
-export * from './DraggableOutlineDiv';
-export * from './RNDFunc';
+export * from './OutlineDragDemo';
+export * from './DragArea';
 export * from './Resizable';
-export * from './RNDFunc3';
+export * from './FloatingWindow';

package/lib/common/src/components/Dnd/index.js

@@ -1,4 +1,4 @@
-export * from './DraggableOutlineDiv';
-export * from './RNDFunc';
+export * from './OutlineDragDemo';
+export * from './DragArea';
 export * from './Resizable';
-export * from './RNDFunc3';
+export * from './FloatingWindow';

package/lib/common/src/components/Input.d.ts

@@ -1,22 +1,22 @@
 import React from "react";
-export declare function InputPage({ callback, name, txt }: {
+export declare function TextInputPanel({ callback, name, txt }: {
     callback: (txt: string) => void;
     name?: string;
     txt?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function InputPageModal({ callback, name, outClick, keyForSave, txt }: Parameters<typeof InputPage>[0] & {
+export declare function TextInputModal({ callback, name, outClick, keyForSave, txt }: Parameters<typeof TextInputPanel>[0] & {
     outClick: () => any;
     keyForSave?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function InputFileModal({ callback, name, outClick, keyForSave }: Parameters<typeof InputFile>[0] & {
+export declare function FileInputModal({ callback, name, outClick, keyForSave }: Parameters<typeof FileInputPanel>[0] & {
     outClick: () => any;
     keyForSave?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function InputFile({ callback, name }: {
+export declare function FileInputPanel({ callback, name }: {
     callback: (file: File | null) => void;
     name?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function PageModalFree({ outClick, children, zIndex, size, keyForSave }: {
+export declare function FreeModal({ outClick, children, zIndex, size, keyForSave }: {
     zIndex?: number;
     outClick: () => any;
     children: React.JSX.Element;

package/lib/common/src/components/Input.js

@@ -1,30 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { DivOutsideClick } from "../hooks/useOutside";
-import { DivRnd3 } from "./Dnd/RNDFunc3";
+import { OutsideClickArea } from "../hooks/useOutside";
+import { FloatingWindow } from "./Dnd/FloatingWindow";
 // Unified modal wrapper component
 function ModalWrapper({ outClick, children, zIndex, size = { height: 150, width: 300 }, keyForSave, position }) {
     const defaultPosition = position ?? { y: -(size.height / 2), x: -(size.width / 2) };
-    return _jsx(DivOutsideClick, { outsideClick: outClick, style: { position: "absolute", top: "50%", left: "50%" }, children: _jsx(DivRnd3, { keyForSave: keyForSave, size: size, zIndex: zIndex, position: defaultPosition, className: "fon border fonLight", moveOnlyHeader: true, children: children }) });
+    return _jsx(OutsideClickArea, { outsideClick: outClick, style: { position: "absolute", top: "50%", left: "50%" }, children: _jsx(FloatingWindow, { keyForSave: keyForSave, size: size, zIndex: zIndex, position: defaultPosition, className: "fon border fonLight", moveOnlyHeader: true, children: children }) });
 }
-export function InputPage({ callback, name = "", txt = "" }) {
+export function TextInputPanel({ callback, name = "", txt = "" }) {
     const txtName = useRef(txt);
     return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "text", style: { width: "100%" }, defaultValue: txtName.current, onChange: (e) => {
                     txtName.current = e.target.value;
                 } }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: () => { callback(txtName.current); }, children: "send" })] });
 }
-export function InputPageModal({ callback, name, outClick, keyForSave = "InputPage2", txt }) {
-    return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: { height: 150, width: 300 }, position: { y: -150, x: -250 }, children: _jsx(InputPage, { callback: callback, name: name, txt: txt }) });
+export function TextInputModal({ callback, name, outClick, keyForSave = "TextInputModal", txt }) {
+    return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: { height: 150, width: 300 }, position: { y: -150, x: -250 }, children: _jsx(TextInputPanel, { callback: callback, name: name, txt: txt }) });
 }
-export function InputFileModal({ callback, name, outClick, keyForSave = "InputFile2" }) {
-    return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: { height: 150, width: 300 }, position: { y: -150, x: -250 }, children: _jsx(InputFile, { callback: callback, name: name }) });
+export function FileInputModal({ callback, name, outClick, keyForSave = "FileInputModal" }) {
+    return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: { height: 150, width: 300 }, position: { y: -150, x: -250 }, children: _jsx(FileInputPanel, { callback: callback, name: name }) });
 }
-export function InputFile({ callback, name = "" }) {
+export function FileInputPanel({ callback, name = "" }) {
     const file = useRef(null);
     return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "file", style: { width: "100%" }, onChange: (e) => {
                     file.current = e.target.files?.[0] ?? null;
                 } }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: () => { callback(file.current); }, children: "send" })] });
 }
-export function PageModalFree({ outClick, children, zIndex, size = { height: 150, width: 300 }, keyForSave = "PageModalFree2" }) {
+export function FreeModal({ outClick, children, zIndex, size = { height: 150, width: 300 }, keyForSave = "FreeModal" }) {
     return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: size, zIndex: zIndex, children: children });
 }

package/lib/common/src/components/Menu/RightMenu.d.ts

@@ -1,22 +1,42 @@
 import React, { JSX } from 'react';
-import { type MenuRightPosition, type MenuRightPosition2 } from "./RightMenuStore";
+import { type MenuRightPosition, type MenuRightVerticalPosition } from "./RightMenuStore";
 export type MenuElement = {
     label: string;
     subMenuContent: () => JSX.Element;
 };
+export type MenuRightTriggerState = {
+    isOpen: boolean;
+    isFixed: boolean;
+};
+export type MenuRightTrigger = React.ReactNode | ((state: MenuRightTriggerState) => React.ReactNode);
+export type MenuRightClassNames = Partial<{
+    container: string;
+    activeContainer: string;
+    trigger: string;
+    flyout: string;
+    flyoutUp: string;
+    list: string;
+    item: string;
+    itemActive: string;
+    submenu: string;
+}>;
+export type MenuRightStyles = Partial<Record<'container' | 'trigger' | 'flyout' | 'list' | 'item' | 'submenu', React.CSSProperties>>;
 export type DropdownMenuProps = {
     elements: MenuElement[];
     style?: React.CSSProperties;
+    styles?: MenuRightStyles;
+    classNames?: MenuRightClassNames;
+    trigger?: MenuRightTrigger;
     position?: MenuRightPosition;
-    position2?: MenuRightPosition2;
+    verticalPosition?: MenuRightVerticalPosition;
     keyForSave?: string;
 };
 export type MenuRightRenderProps = Omit<DropdownMenuProps, 'elements'>;
-export declare function DropdownMenu({ elements, style, position: initialPosition, position2: initialPos2, keyForSave }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
-export declare function MenuRightApi(): {
+export declare function DropdownMenu({ elements, style, styles, classNames, trigger, position: initialPosition, verticalPosition: initialVerticalPosition, keyForSave }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function createRightMenuController(): {
     set(array: MenuElement[]): void;
     delete(array: MenuElement[]): void;
     get(): MenuElement[];
     Render(props?: MenuRightRenderProps): import("react/jsx-runtime").JSX.Element;
 };
-export declare function DropdownMenuTest(): import("react/jsx-runtime").JSX.Element;
+export declare function RightMenuDemo(): import("react/jsx-runtime").JSX.Element;