wenay-react2 1.0.39 → 1.0.41

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Rnd } from "react-rnd";
-import { renderBy, updateBy } from "../../../updateBy";
+import { createUpdateApi } from "../../../updateBy";
 import { ObservableMap } from "../../utils/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: [] };
+const openWindowsApi = createUpdateApi(openWindows);
 // 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);
@@ -17,25 +18,15 @@ export const FloatingWindow = (a) => {
     const ff = (update) => _jsx(MemoChild, { update: isFunc ? update : 0, render: renderChild });
     return _jsx(FloatingWindowBase, { ...a, children: ff });
 };
-/**
- * Wrapper component around react-rnd.
- * Provides dragging and resizing, an optional header, and a close button.
- */
-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
-    // above mid-screen. Keeping the window on screen is already handled by the
-    // viewport clamp below (header rect vs viewport in useLayoutEffect).
+export function useFloatingWindowController({ keyForSave: ks, position, size, zIndex = 9, onUpdate, limit, sizeByWindow = true } = {}) {
     const positionDef = { x: 0, y: 0, ...(position ?? {}) };
     const sizeDef = { height: 0, width: 0, ...(size ?? {}) };
-    // If there is a key, store position and size data in the map
     let map;
     if (ks) {
         map = floatingWindowMap.get(ks) ?? floatingWindowMap.set(ks, { size: sizeDef, position: positionDef }).get(ks);
     }
-    position = map?.position ?? positionDef;
-    size = map?.size ?? sizeDef;
+    const savedPosition = map?.position ?? positionDef;
+    const savedSize = map?.size ?? sizeDef;
     const id2 = useRef({ k: k++ });
     const id = id2.current;
     const [zIndexX, setZIndexX] = useState(0);
@@ -43,32 +34,24 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
     const lastT = useRef(null);
     const [a, setA] = useState(false);
     const [b, setB] = useState(false);
-    const [x, setX] = useState(position.x);
-    const [y, setY] = useState(position.y);
-    const [width, setWidth] = useState(size.width);
-    const [height, setHeight] = useState(size.height);
+    const [x, setX] = useState(savedPosition.x);
+    const [y, setY] = useState(savedPosition.y);
+    const [width, setWidth] = useState(savedSize.width);
+    const [height, setHeight] = useState(savedSize.height);
     const [update, setUpdate] = useState(0);
     const zindex = useRef(zIndexX);
     zindex.current = zIndexX;
-    // Update the window zIndex if it was brought to the top
-    updateBy(openWindows, () => {
+    openWindowsApi.use(() => {
         const z = openWindows.ar.findIndex((v) => v.k === id.k);
         if (z >= 0 && z !== zindex.current) {
             setZIndexX(z);
         }
     });
-    // limit via ref: an inline object in props must not resubscribe document listeners on every render
     const limitRef = useRef(limit);
     useLayoutEffect(() => { limitRef.current = limit; });
-    /**
-     * Hook for mouse dragging (a) and touch-device dragging (b).
-     * Remove subscriptions on unmount and when dependencies change (a/b).
-     */
     useEffect(() => {
-        // Mouse
         const mouseMoveHandler = (e) => {
             e.stopPropagation();
-            // mousedown always sets lastC before this subscription exists
             if (lastC.current == null)
                 return;
             const data = lastC.current;
@@ -98,12 +81,9 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
             document.removeEventListener("mousemove", mouseMoveHandler);
             lastC.current = null;
             setA(false);
-            // 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)
                 floatingWindowMap.touch(ks);
         };
-        // Touch
         const touchMoveHandler = (e) => {
             const data = lastT.current;
             if (!data)
@@ -150,17 +130,14 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
                     floatingWindowMap.touch(ks);
             }
         };
-        // If mouse dragging mode is active
         if (a) {
             document.addEventListener("mousemove", mouseMoveHandler);
             document.addEventListener("mouseup", mouseUpHandler);
         }
-        // If touch-event dragging mode is active
         if (b) {
             document.addEventListener("touchmove", touchMoveHandler);
             document.addEventListener("touchend", touchEndHandler);
         }
-        // Return the cleanup function for unmount and a/b changes:
         return () => {
             document.removeEventListener("mousemove", mouseMoveHandler);
             document.removeEventListener("mouseup", mouseUpHandler);
@@ -168,30 +145,22 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
             document.removeEventListener("touchend", touchEndHandler);
         };
     }, [a, b]);
-    // On the first render, add the window to the array; remove it on unmount
     useEffect(() => {
         openWindows.ar.push(id);
-        renderBy(openWindows);
+        openWindowsApi.render();
         return () => {
             const z = openWindows.ar.findIndex((v) => v.k === id.k);
             if (z >= 0) {
                 openWindows.ar.splice(z, 1);
-                renderBy(openWindows);
+                openWindowsApi.render();
             }
         };
     }, []);
-    // Update coordinates and size in the map if keyForSave is set
-    if (size) {
-        size.height = height;
-        size.width = width;
-    }
-    if (position) {
-        position.x = x;
-        position.y = y;
-    }
+    savedSize.height = height;
+    savedSize.width = width;
+    savedPosition.x = x;
+    savedPosition.y = y;
     const headerRef = useRef(null);
-    // clamp to the viewport in a layout effect: an inline ref-callback ran twice per render
-    // (null + element) with a forced reflow from getBoundingClientRect on each call
     useLayoutEffect(() => {
         const el = headerRef.current;
         if (!el || !sizeByWindow)
@@ -208,39 +177,88 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
             setHeight(window.innerHeight);
         }
     }, [x, y, width, height, sizeByWindow]);
-    const headerD = (_jsx("div", { ref: headerRef, className: "wenayWndHeader", onTouchStart: (e) => {
-            const t = e.changedTouches[0];
-            if (t) {
-                lastT.current = {
-                    x: x - t.clientX,
-                    y: y - t.clientY,
-                    id: t.identifier
-                };
-            }
-            setB(true);
-        }, onMouseDown: (e) => {
-            lastC.current = {
-                x: x - e.clientX,
-                y: y - e.clientY
+    const onHeaderTouchStart = (e) => {
+        const t = e.changedTouches[0];
+        if (t) {
+            lastT.current = {
+                x: x - t.clientX,
+                y: y - t.clientY,
+                id: t.identifier
             };
-            setA(true);
-        }, children: header ?? _jsx("div", { className: "wenayWndHeaderDef" }) }));
+        }
+        setB(true);
+    };
+    const onHeaderMouseDown = (e) => {
+        lastC.current = {
+            x: x - e.clientX,
+            y: y - e.clientY
+        };
+        setA(true);
+    };
+    const onWindowMouseDown = () => {
+        const z = openWindows.ar.findIndex((v) => v === id);
+        if (z !== openWindows.ar.length - 1 || zindex.current !== z) {
+            const buf = openWindows.ar[z];
+            openWindows.ar.splice(z, 1);
+            openWindows.ar.push(buf);
+            openWindowsApi.render();
+        }
+    };
+    const onResizeStop = (e, dir, elementRef, delta, { x: nx, y: ny }) => {
+        setX(nx);
+        setY(ny);
+        setHeight(elementRef.offsetHeight);
+        setWidth(elementRef.offsetWidth);
+        setUpdate(update + 1);
+        if (ks)
+            floatingWindowMap.touch(ks);
+    };
+    const onResize = (e, dir, elementRef, delta, pos) => {
+        onUpdate?.({ e, dir, elementRef, delta, position: pos });
+    };
+    const windowZIndex = zIndexX * 2 + zIndex;
+    return {
+        position: { x, y },
+        size: { width, height },
+        update,
+        stackIndex: zIndexX,
+        zIndex: windowZIndex,
+        overlayZIndex: windowZIndex + 1,
+        dragging: a || b,
+        headerRef,
+        onHeaderTouchStart,
+        onHeaderMouseDown,
+        onWindowMouseDown,
+        onResize,
+        onResizeStop,
+    };
+}
+/**
+ * Wrapper component around react-rnd.
+ * Provides dragging and resizing, an optional header, and a close button.
+ */
+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
+    // above mid-screen. Keeping the window on screen is already handled by the
+    // viewport clamp below (header rect vs viewport in useLayoutEffect).
+    const controller = useFloatingWindowController({
+        keyForSave: ks,
+        position,
+        size,
+        zIndex,
+        onUpdate,
+        disableDragging,
+        limit,
+        sizeByWindow,
+    });
+    const headerD = (_jsx("div", { ref: controller.headerRef, className: "wenayWndHeader", onTouchStart: controller.onHeaderTouchStart, onMouseDown: controller.onHeaderMouseDown, children: header ?? _jsx("div", { className: "wenayWndHeaderDef" }) }));
     return (_jsx(Rnd, { disableDragging: true, style: {
-            zIndex: zIndexX * 2 + zIndex
-        }, className: className, onResizeStop: (e, dir, elementRef, delta, { x: nx, y: ny }) => {
-            setX(nx);
-            setY(ny);
-            // actual element size: `+height + delta.height` gave NaN for string sizes like "100%"
-            setHeight(elementRef.offsetHeight);
-            setWidth(elementRef.offsetWidth);
-            setUpdate(update + 1);
-            if (ks)
-                floatingWindowMap.touch(ks);
-        }, onResize: (e, dir, elementRef, delta, pos) => {
-            onUpdate?.({ e, dir, elementRef, delta, position: pos });
-        }, position: { x, y }, size: { width, height }, default: {
-            ...position,
-            ...size
+            zIndex: controller.zIndex
+        }, className: className, onResizeStop: controller.onResizeStop, onResize: controller.onResize, position: controller.position, size: controller.size, default: {
+            ...controller.position,
+            ...controller.size
         }, children: _jsxs("div", { className: "wenayWnd", style: {
                 width: "100%",
                 height: "100%",
@@ -248,20 +266,11 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
                 flexDirection: "column",
                 position: "relative",
                 flex: "auto"
-            }, onMouseDown: () => {
-                // Bring the window to the top
-                const z = openWindows.ar.findIndex((v) => v === id);
-                if (z !== openWindows.ar.length - 1 || zindex.current !== z) {
-                    const buf = openWindows.ar[z];
-                    openWindows.ar.splice(z, 1);
-                    openWindows.ar.push(buf);
-                    renderBy(openWindows);
-                }
-            }, children: [moveOnlyHeader || header ? headerD : null, _jsxs("div", { className: "maxSize", style: { overflow: overflow ? "auto" : undefined }, children: [(a || b) && (_jsx("div", { className: "maxSize", style: {
+            }, onMouseDown: controller.onWindowMouseDown, children: [moveOnlyHeader || header ? headerD : null, _jsxs("div", { className: "maxSize", style: { overflow: overflow ? "auto" : undefined }, children: [controller.dragging && (_jsx("div", { className: "maxSize", style: {
                                 position: "absolute",
-                                zIndex: zIndexX * 2 + zIndex + 1
-                            } })), typeof children === "function" ? children(update) : children] }), onCLickClose && (_jsx("div", { className: "wenayCloseBtn wenayWndClose", title: "Close", style: {
-                        zIndex: zIndexX * 2 + zIndex + 1
+                                zIndex: controller.overlayZIndex
+                            } })), typeof children === "function" ? children(controller.update) : children] }), onCLickClose && (_jsx("div", { className: "wenayCloseBtn wenayWndClose", title: "Close", style: {
+                        zIndex: controller.overlayZIndex
                     }, onClick: onCLickClose, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2 2 L10 10 M10 2 L2 10", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) }, "323"))] }) }));
 }
 /**

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

@@ -1,4 +1,5 @@
 import React, { JSX } from 'react';
+import { useDraggable } from "../../hooks/useDraggable";
 import { type MenuRightPosition, type MenuRightVerticalPosition } from "./RightMenuStore";
 export type MenuElement = {
     label: string;
@@ -32,7 +33,33 @@ export type DropdownMenuProps = {
     keyForSave?: string;
 };
 export type MenuRightRenderProps = Omit<DropdownMenuProps, 'elements'>;
-export declare function DropdownMenu({ elements, style, styles, classNames, trigger, position: initialPosition, verticalPosition: initialVerticalPosition, keyForSave }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export type UseRightMenuControllerOptions = Pick<DropdownMenuProps, 'elements' | 'style' | 'styles' | 'position' | 'verticalPosition' | 'keyForSave'>;
+export type RightMenuController = {
+    elements: MenuElement[];
+    isOpen: boolean;
+    isFixed: boolean;
+    select: number | null;
+    position: MenuRightPosition;
+    isTop: boolean;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    dragProps: ReturnType<typeof useDraggable>['dragProps'];
+    triggerState: MenuRightTriggerState;
+    containerStyle: React.CSSProperties;
+    flyoutStyle: React.CSSProperties;
+    submenuRender: React.ReactElement;
+    hasSubmenu: boolean;
+    open(): void;
+    close(): void;
+    toggleFixed(): void;
+    setOpen(open: boolean): void;
+    selectItem(item: MenuElement, index: number): void;
+    contentMouseEnter(): void;
+    contentMouseLeave(): Promise<void>;
+    submenuMouseEnter(): void;
+    submenuMouseLeave(): Promise<void>;
+};
+export declare function useRightMenuController({ elements, style, styles, position: initialPosition, verticalPosition: initialVerticalPosition, keyForSave }: UseRightMenuControllerOptions): RightMenuController;
+export declare function DropdownMenu({ elements, style, styles, classNames, trigger, position, verticalPosition, keyForSave }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 export declare function createRightMenuController(): {
     set(array: MenuElement[]): void;
     delete(array: MenuElement[]): void;

package/lib/common/src/components/Menu/RightMenu.js

@@ -12,7 +12,7 @@ function cx(...parts) {
 function renderTrigger(trigger, state) {
     return typeof trigger == 'function' ? trigger(state) : trigger;
 }
-export function DropdownMenu({ elements, style, styles, classNames = {}, trigger = '☰', position: initialPosition = 'right', verticalPosition: initialVerticalPosition = 'top', keyForSave }) {
+export function useRightMenuController({ elements, style, styles, position: initialPosition = 'right', verticalPosition: initialVerticalPosition = 'top', keyForSave }) {
     const [initialState] = useState(() => {
         const fallback = {
             position: initialPosition,
@@ -31,9 +31,8 @@ export function DropdownMenu({ elements, style, styles, classNames = {}, trigger
     const [isFixed, setIsFixed] = useState(false);
     const [select, setSelect] = useState(null);
     const data = useRef({ m1: false, m2: false });
-    // Get modal JSX functions
     const jsx = useMemo(createModalRenderStore, []);
-    const jsxRender = useMemo(() => _jsx(jsx.Render, {}), [jsx]);
+    const submenuRender = useMemo(() => _jsx(jsx.Render, {}), [jsx]);
     const [position, setPosition] = useState(initialState.position);
     const [isTop, setIsTop] = useState(initialState.verticalPosition === 'top');
     const positionLast = useRef({ ...initialState.offset });
@@ -82,67 +81,50 @@ export function DropdownMenu({ elements, style, styles, classNames = {}, trigger
         }
     }, [isTop, keyForSave, position]);
     const { position: pos, dragProps } = useDraggable(0, 0, 50, handleDragEnd, () => { });
-    // Click and hover handlers
-    const handleClickOutside = useCallback(() => {
+    const close = useCallback(() => {
         setIsOpen(false);
     }, []);
-    const handleToggle = useCallback(() => {
+    const toggleFixed = useCallback(() => {
         setIsFixed((prev) => !prev);
         setIsOpen((prev) => !prev);
     }, []);
-    const handleSelect = useCallback((item, index) => {
+    const selectItem = useCallback((item, index) => {
         jsx.set(item.subMenuContent);
         setSelect(index);
     }, [jsx]);
-    const handleContentMouseEnter = useCallback(() => {
+    const contentMouseEnter = useCallback(() => {
         data.current.m1 = true;
     }, []);
-    const handleContentMouseLeave = useCallback(async () => {
-        data.current.m1 = false;
+    const clearSelectIfIdle = useCallback(async () => {
         await sleepAsync(50);
         if (!data.current.m1 && !data.current.m2) {
             jsx.set(null);
             setSelect(null);
         }
     }, [jsx]);
-    const handleSubmenuMouseEnter = useCallback(() => {
+    const contentMouseLeave = useCallback(async () => {
+        data.current.m1 = false;
+        await clearSelectIfIdle();
+    }, [clearSelectIfIdle]);
+    const submenuMouseEnter = useCallback(() => {
         data.current.m2 = true;
     }, []);
-    const handleSubmenuMouseLeave = useCallback(async () => {
+    const submenuMouseLeave = useCallback(async () => {
         data.current.m2 = false;
-        await sleepAsync(50);
-        if (!data.current.m1 && !data.current.m2) {
-            jsx.set(null);
-            setSelect(null);
-        }
-    }, [jsx]);
-    // Render dropdown menu (dop)
-    const dop = (isFixed || isOpen) && (_jsxs("div", { onMouseEnter: handleContentMouseEnter, onMouseLeave: handleContentMouseLeave, className: cx(classNames.flyout ?? 'dropdown-content2', !isTop ? (classNames.flyoutUp ?? 'dropdown-up') : undefined), style: {
-            display: 'flex',
-            [position]: 0,
-            right: position === 'left' ? 'auto' : 0,
-            flexDirection: position === 'left' ? 'row' : 'row-reverse',
-            ...styles?.flyout
-        }, children: [_jsx("div", { className: classNames.list ?? "dropdown-content", style: styles?.list, onMouseEnter: handleContentMouseEnter, onMouseLeave: handleContentMouseLeave, children: elements.map((item, index) => (_jsx("div", { className: cx(classNames.item ?? 'menu-item', select === index ? (classNames.itemActive ?? 'force-hover') : undefined), style: styles?.item, onMouseEnter: () => handleSelect(item, index), onClick: () => handleSelect(item, index), children: item.label }, item.label))) }), _jsx("div", { onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: handleSubmenuMouseLeave, children: jsx.JSX ? (
-                // clamp to the viewport: with hard 40vw/70vh the submenu ran
-                // off screen when the menu sat near a bottom/side edge
-                _jsx("div", { className: classNames.submenu ?? "submenu", style: { width: '40vw', minHeight: '70vh',
-                        maxWidth: '90vw', maxHeight: '85vh', overflowY: 'auto', ...styles?.submenu }, children: jsxRender })) : null })] }));
-    // Calculate offsets
+        await clearSelectIfIdle();
+    }, [clearSelectIfIdle]);
     const computedX = position === 'left'
         ? positionLast.current.x + pos.x
         : positionLast.current.x - pos.x;
     const computedY = isTop
         ? positionLast.current.y + pos.y
         : positionLast.current.y - pos.y;
-    // Calculate menu container styles
     const containerStyle = useMemo(() => {
         const computedStyle = {
             ...style,
             ...styles?.container,
             display: 'flex'
         };
-        // Horizontal positioning
         if (position === 'left') {
             computedStyle.left = Math.max(0, Math.min(computedX, window.innerWidth - 50));
             computedStyle.right = 'auto';
@@ -151,7 +133,6 @@ export function DropdownMenu({ elements, style, styles, classNames = {}, trigger
             computedStyle.right = Math.max(0, Math.min(computedX, window.innerWidth - 50));
             computedStyle.left = 'auto';
         }
-        // Vertical positioning
         if (isTop) {
             computedStyle.top = Math.max(0, Math.min(computedY, window.innerHeight - 50));
             computedStyle.bottom = 'auto';
@@ -162,7 +143,53 @@ export function DropdownMenu({ elements, style, styles, classNames = {}, trigger
         }
         return computedStyle;
     }, [style, styles?.container, position, isTop, computedX, computedY]);
-    return (_jsxs(OutsideClickArea, { ref: containerRef, outsideClick: handleClickOutside, className: cx(classNames.container ?? 'menu-container', isFixed ? (classNames.activeContainer ?? 'activeM') : undefined), style: containerStyle, onMouseEnter: () => !isFixed && setIsOpen(true), onMouseLeave: () => !isFixed && setIsOpen(false), children: [_jsx("div", { ...dragProps, className: classNames.trigger ?? "menu-button", style: styles?.trigger, onClick: handleToggle, children: renderTrigger(trigger, { isOpen, isFixed }) }), dop] }));
+    const flyoutStyle = useMemo(() => ({
+        display: 'flex',
+        [position]: 0,
+        right: position === 'left' ? 'auto' : 0,
+        flexDirection: position === 'left' ? 'row' : 'row-reverse',
+        ...styles?.flyout
+    }), [position, styles?.flyout]);
+    return {
+        elements,
+        isOpen,
+        isFixed,
+        select,
+        position,
+        isTop,
+        containerRef,
+        dragProps,
+        triggerState: { isOpen, isFixed },
+        containerStyle,
+        flyoutStyle,
+        submenuRender,
+        hasSubmenu: !!jsx.JSX,
+        open: () => setIsOpen(true),
+        close,
+        toggleFixed,
+        setOpen: setIsOpen,
+        selectItem,
+        contentMouseEnter,
+        contentMouseLeave,
+        submenuMouseEnter,
+        submenuMouseLeave,
+    };
+}
+export function DropdownMenu({ elements, style, styles, classNames = {}, trigger = '☰', position, verticalPosition, keyForSave }) {
+    const controller = useRightMenuController({
+        elements,
+        style,
+        styles,
+        position,
+        verticalPosition,
+        keyForSave,
+    });
+    const dop = (controller.isFixed || controller.isOpen) && (_jsxs("div", { onMouseEnter: controller.contentMouseEnter, onMouseLeave: controller.contentMouseLeave, className: cx(classNames.flyout ?? 'dropdown-content2', !controller.isTop ? (classNames.flyoutUp ?? 'dropdown-up') : undefined), style: controller.flyoutStyle, children: [_jsx("div", { className: classNames.list ?? "dropdown-content", style: styles?.list, onMouseEnter: controller.contentMouseEnter, onMouseLeave: controller.contentMouseLeave, children: elements.map((item, index) => (_jsx("div", { className: cx(classNames.item ?? 'menu-item', controller.select === index ? (classNames.itemActive ?? 'force-hover') : undefined), style: styles?.item, onMouseEnter: () => controller.selectItem(item, index), onClick: () => controller.selectItem(item, index), children: item.label }, item.label))) }), _jsx("div", { onMouseEnter: controller.submenuMouseEnter, onMouseLeave: controller.submenuMouseLeave, children: controller.hasSubmenu ? (
+                // clamp to the viewport: with hard 40vw/70vh the submenu ran
+                // off screen when the menu sat near a bottom/side edge
+                _jsx("div", { className: classNames.submenu ?? "submenu", style: { width: '40vw', minHeight: '70vh',
+                        maxWidth: '90vw', maxHeight: '85vh', overflowY: 'auto', ...styles?.submenu }, children: controller.submenuRender })) : null })] }));
+    return (_jsxs(OutsideClickArea, { ref: controller.containerRef, outsideClick: controller.close, className: cx(classNames.container ?? 'menu-container', controller.isFixed ? (classNames.activeContainer ?? 'activeM') : undefined), style: controller.containerStyle, onMouseEnter: () => !controller.isFixed && controller.setOpen(true), onMouseLeave: () => !controller.isFixed && controller.setOpen(false), children: [_jsx("div", { ...controller.dragProps, className: classNames.trigger ?? "menu-button", style: styles?.trigger, onClick: controller.toggleFixed, children: renderTrigger(trigger, controller.triggerState) }), dop] }));
 }
 export function createRightMenuController() {
     const elements = [];

package/lib/common/src/components/Modal/LeftModal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { colorGenerator2, sleepAsync } from "wenay-common2";
-import { renderBy, updateBy } from "../../../updateBy";
+import { createUpdateApi } from "../../../updateBy";
 import { createModalElementStore } from "./Modal";
 import { DragBox } from "../Dnd/FloatingWindow";
 function useViewport() {
@@ -206,6 +206,7 @@ export function getApiLeftMenu() {
                     }, children: textB })), children()] }));
     };
     const menuStore = new Map();
+    const menuStoreApi = createUpdateApi(menuStore);
     const setMenu = (items, key = "base") => {
         const colorGen = colorGenerator2({ min: 0, max: 90 });
         // exclude this key's old items, otherwise a repeated setMenu shifts default colors
@@ -242,15 +243,15 @@ export function getApiLeftMenu() {
                 return;
             lastSet.current = { menu, menuKey };
             setMenu(menu, menuKey);
-            renderBy(menuStore);
+            menuStoreApi.render();
         }, [menu, menuKey]);
-        updateBy(menuStore);
+        menuStoreApi.use();
         return (_jsxs("div", { className: "maxSize", style: { position: "absolute", zIndex: zIndex0 }, children: [_jsx(modal.Render, {}), _jsx(LeftMenuComponent, { zIndex: zIndex, api: () => { }, menu: getAllMenuItems() })] }));
     }
     const modal = createModalElementStore();
     return {
         modal,
-        renderBy() { renderBy(menuStore); },
+        renderBy() { menuStoreApi.render(); },
         getMenu: () => menuStore,
         setMenu: setMenu,
         Modal2: Modal2

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx_1 } from "react/jsx-runtime";
-import { renderBy, updateBy } from "../../../updateBy";
+import { createUpdateApi } from "../../../updateBy";
 import { TextInputModal } from "../Input";
 function setModalTarget(target, jsx) {
     if (typeof target == "function")
@@ -32,21 +32,21 @@ function createJsxStore(renderItem) {
     const data = {
         set(jsx) {
             _jsx = jsx;
-            renderBy(data);
+            dataApi.render();
         },
         set JSX(jsx) {
             _jsx = jsx;
-            renderBy(data);
+            dataApi.render();
         },
         get JSX() { return _jsx; },
         Render() {
-            updateBy(data);
+            dataApi.use();
             return _jsx && renderItem(_jsx);
         },
         addJSX(jsx) {
             if (check(jsx) == -1) {
                 _jsxArr.push({ jsx, key: key++ });
-                renderBy(data);
+                dataApi.render();
             }
             return jsx;
         },
@@ -54,15 +54,16 @@ function createJsxStore(renderItem) {
             const c = check(jsx);
             if (c != -1) {
                 _jsxArr.splice(c, 1);
-                renderBy(data);
+                dataApi.render();
             }
         },
         get arrJSX() { return _jsxArr.map(e => e.jsx && _jsx_1("div", { children: renderItem(e.jsx) }, e.key)); },
         RenderArr() {
-            updateBy(data);
+            dataApi.use();
             return data.arrJSX;
         }
     };
+    const dataApi = createUpdateApi(data);
     return data;
 }
 /** Low-level imperative JSX storage based on updateBy/renderBy. Prefer `ModalProvider`/`useModal` for app modals. */

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

@@ -1,4 +1,19 @@
+import React from "react";
 import { Params } from "wenay-common2";
+export type ParamsEditorControllerOptions<TParams extends Params.IParamsExpandableReadonly = Params.IParamsExpandableReadonly> = {
+    params: TParams;
+    onChange: (params: TParams) => void;
+    onExpand?: (params: TParams) => void;
+};
+export type ParamsEditorController<TParams extends Params.IParamsExpandableReadonly = Params.IParamsExpandableReadonly> = {
+    paramsRef: React.MutableRefObject<TParams>;
+    params: TParams;
+    refresh(): void;
+    notifyChange(): void;
+    notifyChangeDelayed(): void;
+    notifyExpand(): void;
+};
+export declare function useParamsEditorController<TParams extends Params.IParamsExpandableReadonly = Params.IParamsExpandableReadonly>({ params, onChange, onExpand }: ParamsEditorControllerOptions<TParams>): ParamsEditorController<TParams>;
 export declare function ParamsEditor<TParams extends Params.IParamsExpandableReadonly = Params.IParamsExpandableReadonly>(data: {
     params: TParams;
     expandStatus?: boolean;