wenay-react2 1.0.27 → 1.0.29

package/lib/common/api.d.ts

@@ -25,7 +25,10 @@ export * from "./src/components/ParametersEngine";
 export * from "./src/components/Input";
 export * from "./src/components/Modal";
 export * from "./src/components/Menu";
-export * from "./src/menu/menu";
+export * from "./src/components/Settings";
+export * from "./src/components/UiSlot";
+export { MenuBase, TimeNum, MenuElement as LegacyMenuElement } from "./src/menu/menu";
+export type { tMenuReact, tMenuReactStrictly } from "./src/menu/menu";
 export * from "./src/menu/menuMouse";
 export * from "./src/menu/menuR";
 export * from "./src/logs/logs";

package/lib/common/api.js

@@ -37,8 +37,11 @@ export * from "./src/components/Input";
 export * from "./src/components/Modal";
 // 11. Menu - depends on hooks, Dnd, and Modal
 export * from "./src/components/Menu";
+// 11b. Settings dialog + section registry; UI slot with configurable placement
+export * from "./src/components/Settings";
+export * from "./src/components/UiSlot";
 // 12. MENU - depends on components
-export * from "./src/menu/menu";
+export { MenuBase, TimeNum, MenuElement as LegacyMenuElement } from "./src/menu/menu";
 export * from "./src/menu/menuMouse";
 export * from "./src/menu/menuR";
 // 13. LOGS - depend on utils/mapMemory, menu, and components/ParametersEngine

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

@@ -21,9 +21,11 @@ export const DivRnd3 = (a) => {
  * 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 }) {
-    if (onCLickClose && !limit) {
-        limit = { y: { min: 0 } };
-    }
+    // 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 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
@@ -199,7 +201,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
             setHeight(window.innerHeight);
         }
     }, [x, y, width, height, sizeByWindow]);
-    const headerD = (_jsx("div", { ref: headerRef, onTouchStart: (e) => {
+    const headerD = (_jsx("div", { ref: headerRef, className: "wenayWndHeader", onTouchStart: (e) => {
             const t = e.changedTouches[0];
             if (t) {
                 lastT.current = {
@@ -215,14 +217,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
                 y: y - e.clientY
             };
             setA(true);
-        }, style: {
-            userSelect: "none",
-            cursor: "grabbing"
-        }, children: header ?? (_jsx("div", { style: {
-                height: 20,
-                width: "100%",
-                backgroundImage: "repeating-linear-gradient(139deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px)"
-            } })) }));
+        }, 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 }) => {
@@ -237,7 +232,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
         }, position: { x, y }, size: { width, height }, default: {
             ...position,
             ...size
-        }, children: _jsxs("div", { style: {
+        }, children: _jsxs("div", { className: "wenayWnd", style: {
                 width: "100%",
                 height: "100%",
                 display: "flex",
@@ -256,10 +251,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
             }, children: [moveOnlyHeader || header ? headerD : null, _jsxs("div", { className: "maxSize", style: { overflow: overflow ? "auto" : undefined }, children: [(a || b) && (_jsx("div", { className: "maxSize", style: {
                                 position: "absolute",
                                 zIndex: zIndexX * 2 + zIndex + 1
-                            } })), typeof children === "function" ? children(update) : children] }), onCLickClose && (_jsx("div", { className: "wenayCloseBtn", title: "Close", style: {
-                        position: "absolute",
-                        right: -12,
-                        top: -12,
+                            } })), typeof children === "function" ? children(update) : children] }), onCLickClose && (_jsx("div", { className: "wenayCloseBtn wenayWndClose", title: "Close", style: {
                         zIndex: zIndexX * 2 + zIndex + 1
                     }, 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,22 +1,22 @@
 import React, { JSX } from 'react';
-type MenuElement = {
+import { type MenuRightPosition, type MenuRightPosition2 } from "./RightMenuStore";
+export type MenuElement = {
     label: string;
     subMenuContent: () => JSX.Element;
 };
-type DropdownMenuProps = {
+export type DropdownMenuProps = {
     elements: MenuElement[];
     style?: React.CSSProperties;
-    position?: 'left' | 'right';
-    position2?: 'top' | 'bottom';
+    position?: MenuRightPosition;
+    position2?: MenuRightPosition2;
+    keyForSave?: string;
 };
-export declare function DropdownMenu({ elements, style, position: initialPosition, position2: initialPos2 }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+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(): {
     set(array: MenuElement[]): void;
     delete(array: MenuElement[]): void;
     get(): MenuElement[];
-    Render({ style }: {
-        style?: React.CSSProperties;
-    }): import("react/jsx-runtime").JSX.Element;
+    Render(props?: MenuRightRenderProps): import("react/jsx-runtime").JSX.Element;
 };
 export declare function DropdownMenuTest(): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -5,7 +5,22 @@ import { useDraggable } from "../../hooks/useDraggable";
 import { DivOutsideClick } from "../../hooks/useOutside";
 import { DraggableOutlineDiv } from "../Dnd/DraggableOutlineDiv";
 import { GetModalFuncJSX } from "../Modal/Modal";
-export function DropdownMenu({ elements, style, position: initialPosition = 'right', position2: initialPos2 = 'top' }) {
+import { mapRightMenu } from "./RightMenuStore";
+export function DropdownMenu({ elements, style, position: initialPosition = 'right', position2: initialPos2 = 'top', keyForSave }) {
+    const [initialState] = useState(() => {
+        const fallback = {
+            position: initialPosition,
+            position2: initialPos2,
+            offset: { x: 0, y: 0 }
+        };
+        if (!keyForSave)
+            return fallback;
+        const saved = mapRightMenu.get(keyForSave);
+        if (saved)
+            return saved;
+        mapRightMenu.set(keyForSave, fallback);
+        return fallback;
+    });
     const [isOpen, setIsOpen] = useState(false);
     const [isFixed, setIsFixed] = useState(false);
     const [select, setSelect] = useState(null);
@@ -13,41 +28,52 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
     // Get modal JSX functions
     const jsx = useMemo(GetModalFuncJSX, []);
     const jsxRender = useMemo(() => _jsx(jsx.Render, {}), [jsx]);
-    const [position, setPosition] = useState(initialPosition);
-    const [isTop, setIsTop] = useState(initialPos2 === 'top');
-    const positionLast = useRef({ x: 0, y: 0 });
+    const [position, setPosition] = useState(initialState.position);
+    const [isTop, setIsTop] = useState(initialState.position2 === 'top');
+    const positionLast = useRef({ ...initialState.offset });
+    const containerRef = useRef(null);
     const handleDragEnd = useCallback((finalPosition) => {
-        // Handle horizontal offset
-        if (position === 'left') {
-            positionLast.current.x += finalPosition.x;
-            if (positionLast.current.x > window.innerWidth * 0.6) {
-                positionLast.current.x = window.innerWidth - positionLast.current.x;
-                setPosition('right');
-            }
-        }
-        else if (position === 'right') {
-            positionLast.current.x -= finalPosition.x;
-            if (positionLast.current.x > window.innerWidth * 0.6) {
-                positionLast.current.x = window.innerWidth - positionLast.current.x;
-                setPosition('left');
-            }
-        }
-        // Handle vertical offset
-        if (isTop) {
-            positionLast.current.y += finalPosition.y;
-            if (positionLast.current.y > document.documentElement.clientHeight * 0.6) {
-                positionLast.current.y = document.documentElement.clientHeight - positionLast.current.y;
-                setIsTop(false);
-            }
-        }
-        else {
-            positionLast.current.y -= finalPosition.y;
-            if (positionLast.current.y > document.documentElement.clientHeight * 0.6) {
-                positionLast.current.y = document.documentElement.clientHeight - positionLast.current.y;
-                setIsTop(true);
-            }
+        // Re-anchor from the computed dropped rect. useDraggable resets its delta
+        // before React necessarily paints, so measuring the element position here
+        // can read the pre-drop corner and cause a sudden relocation.
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const parent = el.offsetParent;
+        // fixed positioning -> offsetParent is null -> viewport is the box
+        const bounds = parent?.getBoundingClientRect()
+            ?? new DOMRect(0, 0, window.innerWidth, document.documentElement.clientHeight);
+        const measured = el.getBoundingClientRect();
+        const width = measured.width;
+        const height = measured.height;
+        const baseLeft = position === 'left'
+            ? bounds.left + positionLast.current.x
+            : bounds.right - positionLast.current.x - width;
+        const baseTop = isTop
+            ? bounds.top + positionLast.current.y
+            : bounds.bottom - positionLast.current.y - height;
+        const left = baseLeft + finalPosition.x;
+        const top = baseTop + finalPosition.y;
+        const right = left + width;
+        const bottom = top + height;
+        const toLeft = left + width / 2 < bounds.left + bounds.width / 2;
+        const toTop = top + height / 2 < bounds.top + bounds.height / 2;
+        const nextPosition = toLeft ? 'left' : 'right';
+        const nextOffset = {
+            x: Math.max(0, toLeft ? left - bounds.left : bounds.right - right),
+            y: Math.max(0, toTop ? top - bounds.top : bounds.bottom - bottom)
+        };
+        positionLast.current = nextOffset;
+        setPosition(nextPosition);
+        setIsTop(toTop);
+        if (keyForSave) {
+            mapRightMenu.set(keyForSave, {
+                position: nextPosition,
+                position2: toTop ? 'top' : 'bottom',
+                offset: { ...nextOffset }
+            });
         }
-    }, [position, isTop]);
+    }, [isTop, keyForSave, position]);
     const { position: pos, dragProps } = useDraggable(0, 0, 50, handleDragEnd, () => { });
     // Click and hover handlers
     const handleClickOutside = useCallback(() => {
@@ -89,7 +115,11 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
             [position]: 0,
             right: position === 'left' ? 'auto' : 0,
             flexDirection: position === 'left' ? 'row' : 'row-reverse'
-        }, children: [_jsx("div", { className: "dropdown-content", onMouseEnter: handleContentMouseEnter, onMouseLeave: handleContentMouseLeave, children: elements.map((item, index) => (_jsx("div", { className: `menu-item ${select === index ? 'force-hover' : ''}`, onMouseEnter: () => handleSelect(item, index), onClick: () => handleSelect(item, index), children: item.label }, item.label))) }), _jsx("div", { onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: handleSubmenuMouseLeave, children: jsx.JSX ? (_jsx("div", { className: "submenu", style: { width: '40vw', minHeight: '70vh' }, children: jsxRender })) : null })] }));
+        }, children: [_jsx("div", { className: "dropdown-content", onMouseEnter: handleContentMouseEnter, onMouseLeave: handleContentMouseLeave, children: elements.map((item, index) => (_jsx("div", { className: `menu-item ${select === index ? 'force-hover' : ''}`, 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: "submenu", style: { width: '40vw', minHeight: '70vh',
+                        maxWidth: '90vw', maxHeight: '85vh', overflowY: 'auto' }, children: jsxRender })) : null })] }));
     // Calculate offsets
     const computedX = position === 'left'
         ? positionLast.current.x + pos.x
@@ -123,7 +153,7 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
         }
         return computedStyle;
     }, [style, position, isTop, computedX, computedY]);
-    return (_jsxs(DivOutsideClick, { outsideClick: handleClickOutside, className: `menu-container ${isFixed ? 'activeM' : ''}`, style: containerStyle, onMouseEnter: () => !isFixed && setIsOpen(true), onMouseLeave: () => !isFixed && setIsOpen(false), children: [_jsx("div", { ...dragProps, className: "menu-button", onClick: handleToggle, children: "\u2630" }), dop] }));
+    return (_jsxs(DivOutsideClick, { ref: containerRef, outsideClick: handleClickOutside, className: `menu-container ${isFixed ? 'activeM' : ''}`, style: containerStyle, onMouseEnter: () => !isFixed && setIsOpen(true), onMouseLeave: () => !isFixed && setIsOpen(false), children: [_jsx("div", { ...dragProps, className: "menu-button", onClick: handleToggle, children: "\u2630" }), dop] }));
 }
 export function MenuRightApi() {
     const elements = [];
@@ -147,7 +177,7 @@ export function MenuRightApi() {
         get() {
             return elements;
         },
-        Render({ style }) {
+        Render(props = {}) {
             const [el, setEl] = useState([...elements]);
             useEffect(() => {
                 render = setEl;
@@ -155,7 +185,7 @@ export function MenuRightApi() {
                     render = null;
                 };
             }, []);
-            return _jsx(DropdownMenu, { elements: el, style: style, position: "left" });
+            return _jsx(DropdownMenu, { ...props, elements: el });
         }
     };
 }

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

@@ -0,0 +1,11 @@
+export type MenuRightPosition = 'left' | 'right';
+export type MenuRightPosition2 = 'top' | 'bottom';
+export type MenuRightSavedState = {
+    position: MenuRightPosition;
+    position2: MenuRightPosition2;
+    offset: {
+        x: number;
+        y: number;
+    };
+};
+export declare const mapRightMenu: Map<string, MenuRightSavedState>;

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

@@ -0,0 +1 @@
+export const mapRightMenu = new Map();

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

@@ -1,2 +1,3 @@
 export { default as StickerMenu } from './StickerMenu';
 export * from './RightMenu';
+export * from './RightMenuStore';

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

@@ -1,2 +1,3 @@
 export { default as StickerMenu } from './StickerMenu';
 export * from './RightMenu';
+export * from './RightMenuStore';

package/lib/common/src/components/Settings/SettingsDialog.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export type tSettingsSection = {
+    key: string;
+    name: string;
+    render: () => React.ReactNode;
+};
+/** Register an external section. Re-register with the same key replaces the previous one.
+ *  The returned function removes exactly this registration (a no-op if it was replaced). */
+export declare function registerSettingsSection(s: tSettingsSection): () => void;
+/** Current external sections (static props sections are not included). */
+export declare function getSettingsSections(): readonly tSettingsSection[];
+/** Centered settings dialog: sections column on the left, active section content on the right.
+ *  Sections = props.sections (first) + everything from registerSettingsSection.
+ *  Look is themed via --dlg-* CSS variables (dark defaults), same contract as --wnd-*. */
+export declare function SettingsDialog(props: {
+    trigger: React.ReactNode;
+    sections?: tSettingsSection[];
+    defaultSection?: string;
+    /** Section buttons: apps pass their own .chip / .chipActive; defaults are minimal library styles */
+    sectionClassName?: string;
+    sectionActiveClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/common/src/components/Settings/SettingsDialog.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { renderBy, updateBy } from "../../../updateBy";
+// Module singleton (closure + updateBy subscription, no React context): any module
+// registers a section on mount and removes it on unmount; the dialog re-renders on changes.
+const registry = { list: [] };
+/** Register an external section. Re-register with the same key replaces the previous one.
+ *  The returned function removes exactly this registration (a no-op if it was replaced). */
+export function registerSettingsSection(s) {
+    const i = registry.list.findIndex(e => e.key == s.key);
+    if (i == -1)
+        registry.list.push(s);
+    else
+        registry.list.splice(i, 1, s);
+    renderBy(registry);
+    return () => {
+        const j = registry.list.indexOf(s);
+        if (j != -1) {
+            registry.list.splice(j, 1);
+            renderBy(registry);
+        }
+    };
+}
+/** Current external sections (static props sections are not included). */
+export function getSettingsSections() {
+    return registry.list;
+}
+/** Centered settings dialog: sections column on the left, active section content on the right.
+ *  Sections = props.sections (first) + everything from registerSettingsSection.
+ *  Look is themed via --dlg-* CSS variables (dark defaults), same contract as --wnd-*. */
+export function SettingsDialog(props) {
+    const [open, setOpen] = useState(false);
+    const [active, setActive] = useState(props.defaultSection);
+    updateBy(registry);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key == 'Escape')
+                setOpen(false);
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [open]);
+    const sections = [...(props.sections ?? []), ...registry.list];
+    // fall back to the first section when active was never set or its section unmounted
+    const current = sections.find(s => s.key == active) ?? sections[0];
+    const base = props.sectionClassName ?? "wenayDlgSection";
+    const activeCls = props.sectionActiveClassName ?? "wenayDlgSectionActive";
+    return _jsxs(_Fragment, { children: [_jsx("span", { onClick: () => setOpen(true), style: { display: "inline-block", cursor: "pointer" }, children: props.trigger }), open && createPortal(_jsx("div", { className: "wenayDlgScrim", onClick: e => {
+                    if (e.target == e.currentTarget)
+                        setOpen(false);
+                }, children: _jsxs("div", { className: "wenayDlg", children: [_jsx("div", { className: "wenayDlgNav", children: sections.map(s => (_jsx("div", { className: s.key == current?.key ? `${base} ${activeCls}` : base, onClick: () => setActive(s.key), children: s.name }, s.key))) }), _jsx("div", { className: "wenayDlgContent", children: current?.render() }), _jsx("div", { className: "wenayCloseBtn wenayDlgClose", title: "Close", onClick: () => setOpen(false), 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" }) }) })] }) }), document.body)] });
+}

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

@@ -0,0 +1 @@
+export * from './SettingsDialog';

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

@@ -0,0 +1 @@
+export * from './SettingsDialog';

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

@@ -0,0 +1,24 @@
+import React from "react";
+/** One UI block shown in exactly one of several mount points; the point is a persisted setting.
+ *  Persistence rides the existing staticProps -> Cash mechanics: the app calls Cash.load()/save()
+ *  the same way it does for window state (ExRNDMap3 etc.).
+ *  Mount points render <Slot place="..."> themselves and decide nothing: the slot compares
+ *  the persisted place with its own and renders children only on a match. */
+export declare function createUiSlot<Places extends string>(opts: {
+    key: string;
+    places: {
+        [P in Places]: string;
+    };
+    def: NoInfer<Places>;
+}): {
+    Slot: (p: {
+        place: Places;
+        children: React.ReactNode;
+    }) => React.JSX.Element | null;
+    PlacementSetting: (p?: {
+        className?: string;
+        activeClassName?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    getPlace: () => Places;
+    setPlace: (p: Places) => void;
+};

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

@@ -0,0 +1,33 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { renderBy, updateBy } from "../../../updateBy";
+import { staticGetAdd } from "../../utils/mapMemory";
+/** One UI block shown in exactly one of several mount points; the point is a persisted setting.
+ *  Persistence rides the existing staticProps -> Cash mechanics: the app calls Cash.load()/save()
+ *  the same way it does for window state (ExRNDMap3 etc.).
+ *  Mount points render <Slot place="..."> themselves and decide nothing: the slot compares
+ *  the persisted place with its own and renders children only on a match. */
+export function createUiSlot(opts) {
+    const st = staticGetAdd(opts.key, { place: opts.def });
+    // a stored place may no longer exist after an app update - fall back to def
+    const isPlace = (p) => typeof p == "string" && p in opts.places;
+    const getPlace = () => isPlace(st.place) ? st.place : opts.def;
+    const setPlace = (p) => {
+        if (st.place == p)
+            return;
+        st.place = p;
+        renderBy(st);
+    };
+    function Slot(p) {
+        updateBy(st);
+        return getPlace() == p.place ? _jsx(_Fragment, { children: p.children }) : null;
+    }
+    /** Segmented row over opts.places; apps pass their own .chip / .chipActive classes */
+    function PlacementSetting(p = {}) {
+        updateBy(st);
+        const cur = getPlace();
+        const base = p.className ?? "wenaySegBtn";
+        const activeCls = p.activeClassName ?? "wenaySegBtnActive";
+        return _jsx("div", { style: { display: "inline-flex", gap: 4, flexWrap: "wrap" }, children: Object.keys(opts.places).map(key => (_jsx("div", { className: key == cur ? `${base} ${activeCls}` : base, onClick: () => setPlace(key), children: opts.places[key] }, key))) });
+    }
+    return { Slot, PlacementSetting, getPlace, setPlace };
+}

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

@@ -0,0 +1 @@
+export * from './UiSlot';

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

@@ -0,0 +1 @@
+export * from './UiSlot';

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

@@ -17,6 +17,45 @@ export declare const tokens: {
         readonly itemColor: "#fff";
         readonly itemHoverColor: "#101010";
         readonly itemHoverBgColor: "#fff";
+        readonly shadow: "0 0 20px 14px rgba(34, 60, 80, 0.2)";
+    };
+    /** DivRnd3 window chrome (--wnd-*). Defaults = legacy look; apps re-skin via :root[data-theme].
+     *  --wnd-header-height/color/font-size/letter-spacing/transform are intentionally undeclared
+     *  (inherit/auto) until a theme sets them. */
+    readonly wnd: {
+        readonly bg: "transparent";
+        readonly border: "none";
+        readonly radius: "0";
+        readonly shadow: "none";
+        readonly headerBg: "transparent";
+        readonly headerStripes: "repeating-linear-gradient(139deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1) 15px, transparent 0, transparent 30px)";
+        readonly headerBorder: "none";
+        readonly headerPadding: "0";
+        readonly closeSize: "28px";
+        readonly closeTop: "-12px";
+        readonly closeRight: "-12px";
+        /** var(--color-bg-light) in CSS */
+        readonly closeBg: "#17202e";
+        /** var(--color-border-common) in CSS */
+        readonly closeBorder: "1px solid rgb(50, 62, 71)";
+        readonly closeShadow: "0 2px 6px rgba(0, 0, 0, 0.35)";
+        /** var(--color-text-base) in CSS */
+        readonly closeColor: "#c4c4c4";
+        readonly closeHover: "#fff";
+        readonly closeHoverBg: "#e5484d";
+    };
+    /** SettingsDialog chrome (--dlg-*). Dark defaults; apps re-skin via :root[data-theme]. */
+    readonly dlg: {
+        readonly scrim: "rgba(0, 0, 0, 0.5)";
+        /** var(--color-bg-dark) in CSS */
+        readonly bg: "#131821";
+        /** var(--color-border-common) in CSS */
+        readonly border: "1px solid rgb(50, 62, 71)";
+        readonly radius: "10px";
+        readonly shadow: "0 12px 40px rgba(0, 0, 0, 0.5)";
+        /** var(--color-bg-light) in CSS */
+        readonly navBg: "#17202e";
+        readonly navWidth: "168px";
     };
     readonly font: {
         readonly family: "Roboto";

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

@@ -19,6 +19,45 @@ export const tokens = {
         itemColor: '#fff',
         itemHoverColor: '#101010',
         itemHoverBgColor: '#fff',
+        shadow: '0 0 20px 14px rgba(34, 60, 80, 0.2)',
+    },
+    /** DivRnd3 window chrome (--wnd-*). Defaults = legacy look; apps re-skin via :root[data-theme].
+     *  --wnd-header-height/color/font-size/letter-spacing/transform are intentionally undeclared
+     *  (inherit/auto) until a theme sets them. */
+    wnd: {
+        bg: 'transparent',
+        border: 'none',
+        radius: '0',
+        shadow: 'none',
+        headerBg: 'transparent',
+        headerStripes: 'repeating-linear-gradient(139deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1) 15px, transparent 0, transparent 30px)',
+        headerBorder: 'none',
+        headerPadding: '0',
+        closeSize: '28px',
+        closeTop: '-12px',
+        closeRight: '-12px',
+        /** var(--color-bg-light) in CSS */
+        closeBg: '#17202e',
+        /** var(--color-border-common) in CSS */
+        closeBorder: '1px solid rgb(50, 62, 71)',
+        closeShadow: '0 2px 6px rgba(0, 0, 0, 0.35)',
+        /** var(--color-text-base) in CSS */
+        closeColor: '#c4c4c4',
+        closeHover: '#fff',
+        closeHoverBg: '#e5484d',
+    },
+    /** SettingsDialog chrome (--dlg-*). Dark defaults; apps re-skin via :root[data-theme]. */
+    dlg: {
+        scrim: 'rgba(0, 0, 0, 0.5)',
+        /** var(--color-bg-dark) in CSS */
+        bg: '#131821',
+        /** var(--color-border-common) in CSS */
+        border: '1px solid rgb(50, 62, 71)',
+        radius: '10px',
+        shadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
+        /** var(--color-bg-light) in CSS */
+        navBg: '#17202e',
+        navWidth: '168px',
     },
     font: {
         family: 'Roboto',

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

@@ -20,12 +20,16 @@ export declare const ObjectStringToDate: (obj: unknown) => void;
 export declare function CacheFuncMapBase(arr: [k: string, v: Map<string, unknown>][], Save: IServerSaveBasePromise): {
     load(): Promise<void>;
     save(): Promise<void>;
+    saveDebounced(delay?: number): void;
+    flush(): Promise<void>;
     clear(): Promise<void>;
     getArr: [k: string, v: Map<string, unknown>][];
 };
 export declare function CacheFuncMap(arr: [k: string, v: Map<string, unknown>][]): {
     load(): Promise<void>;
     save(): Promise<void>;
+    saveDebounced(delay?: number): void;
+    flush(): Promise<void>;
     clear(): Promise<void>;
     getArr: [k: string, v: Map<string, unknown>][];
 };

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

@@ -99,6 +99,43 @@ function isDate(_date) {
     return ISO_DATE_RE.test(_date);
 }
 export function CacheFuncMapBase(arr, Save) {
+    const savedPayloadByKey = new Map();
+    let saveTimer = null;
+    let runningSave = null;
+    const getPayloads = () => arr.map(([key, map]) => [key, JSON.stringify([...map.entries()])]);
+    const rememberCurrentPayloads = () => {
+        savedPayloadByKey.clear();
+        for (const [key, payload] of getPayloads())
+            savedPayloadByKey.set(key, payload);
+    };
+    const cancelDebouncedSave = () => {
+        if (saveTimer === null)
+            return;
+        clearTimeout(saveTimer);
+        saveTimer = null;
+    };
+    const saveChangedPayloads = async () => {
+        for (const [key, payload] of getPayloads()) {
+            if (savedPayloadByKey.get(key) === payload)
+                continue;
+            if (await Save.set(key, JSON.parse(payload))) {
+                savedPayloadByKey.set(key, payload);
+            }
+        }
+    };
+    const trackSave = (savePromise) => {
+        const trackedPromise = savePromise.catch(() => undefined).finally(() => {
+            if (runningSave === trackedPromise)
+                runningSave = null;
+        });
+        runningSave = trackedPromise;
+        return savePromise;
+    };
+    const queueSave = () => {
+        if (runningSave === null)
+            return trackSave(saveChangedPayloads());
+        return trackSave(runningSave.then(saveChangedPayloads, saveChangedPayloads));
+    };
     return {
         async load() {
             for (let [k, v] of arr) {
@@ -108,13 +145,25 @@ export function CacheFuncMapBase(arr, Save) {
                 ObjectStringToDate(t);
                 addDataToMap(t, v);
             }
+            rememberCurrentPayloads();
         },
         async save() {
-            for (let [k, v] of arr) {
-                await Save.set(k, [...v.entries()]);
-            }
+            await queueSave();
+        },
+        saveDebounced(delay = 800) {
+            cancelDebouncedSave();
+            saveTimer = setTimeout(() => {
+                saveTimer = null;
+                void queueSave();
+            }, delay);
+        },
+        async flush() {
+            cancelDebouncedSave();
+            await queueSave();
         },
         async clear() {
+            cancelDebouncedSave();
+            savedPayloadByKey.clear();
             for (let [k, v] of arr) {
                 await Save.delete(k);
             }

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

@@ -0,0 +1,10 @@
+/** Multiplexer for a single-slot callback API (onX(cb | null)): many subscribers share
+ *  one slot instead of silently overwriting each other.
+ *  bind(emit) is called lazily, ONCE, on the first on() - not at creation time, because
+ *  the slot may still be taken by app initialization. */
+export declare function createCallbackHub<Args extends any[]>(bind: (emit: (...a: Args) => void) => void): {
+    /** Subscribe; the returned function unsubscribes without touching other subscribers.
+     *  The callback is registered BEFORE bind runs, so it also catches synchronous emits. */
+    on(cb: (...a: Args) => void): () => void;
+    count: () => number;
+};

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

@@ -0,0 +1,23 @@
+/** Multiplexer for a single-slot callback API (onX(cb | null)): many subscribers share
+ *  one slot instead of silently overwriting each other.
+ *  bind(emit) is called lazily, ONCE, on the first on() - not at creation time, because
+ *  the slot may still be taken by app initialization. */
+export function createCallbackHub(bind) {
+    const subs = new Set();
+    let bound = false;
+    // copy before iterating: an unsubscribe from inside a callback must not skip the rest
+    const emit = (...a) => { [...subs].forEach(cb => cb(...a)); };
+    return {
+        /** Subscribe; the returned function unsubscribes without touching other subscribers.
+         *  The callback is registered BEFORE bind runs, so it also catches synchronous emits. */
+        on(cb) {
+            subs.add(cb);
+            if (!bound) {
+                bound = true;
+                bind(emit);
+            }
+            return () => { subs.delete(cb); };
+        },
+        count: () => subs.size,
+    };
+}

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

@@ -1,6 +1,7 @@
 export * from './applyTransactionAsyncUpdate';
 export * from './arrayPromise';
 export * from './cache';
+export * from './callbackHub';
 export * from './inputAutoStep';
 export * from './mapMemory';
 export * from './pageVisibilityContext';

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

@@ -1,6 +1,7 @@
 export * from './applyTransactionAsyncUpdate';
 export * from './arrayPromise';
 export * from './cache';
+export * from './callbackHub';
 export * from './inputAutoStep';
 export * from './mapMemory';
 export * from './pageVisibilityContext';

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

@@ -10,6 +10,8 @@ export declare function staticGetById<T extends object>(key: any, def: T, id: st
 export declare const Cash: {
     load(): Promise<void>;
     save(): Promise<void>;
+    saveDebounced(delay?: number): void;
+    flush(): Promise<void>;
     clear(): Promise<void>;
     getArr: [k: string, v: Map<string, unknown>][];
 };
@@ -28,5 +30,6 @@ export declare const MemoryMap: {
         height?: number | string;
         width?: number | string;
     }>;
+    rightMenu: Map<string, import("../components/Menu/RightMenuStore").MenuRightSavedState>;
     other: Map<string, object>;
 };

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

@@ -1,6 +1,7 @@
 import { deepClone } from "wenay-common2";
 import { ExRNDMap3 } from "../components/Dnd/RNDFunc3";
 import { mapResiReact } from "../components/Dnd/Resizable";
+import { mapRightMenu } from "../components/Menu/RightMenuStore";
 import { CacheFuncMap } from "./cache";
 const staticProps = new Map();
 export function staticSet(key, data) {
@@ -63,10 +64,12 @@ export function staticGetById(key, def, id) {
 export const Cash = CacheFuncMap([
     ["mapResiReact", mapResiReact],
     ["ExRNDMap3", ExRNDMap3],
+    ["mapRightMenu", mapRightMenu],
     ["staticProps", staticProps]
 ]);
 export const MemoryMap = {
     rnd: ExRNDMap3,
     resize: mapResiReact,
+    rightMenu: mapRightMenu,
     other: staticProps
 };

package/lib/style/style.css

@@ -136,11 +136,11 @@ input:invalid {
 
 /* Menu */
 .MenuR {
-  box-shadow: 0 0 20px 14px rgba(34, 60, 80, 0.2);
+  box-shadow: var(--menu-shadow);
   margin-top: 4px;
   min-width: 80px;
   width: max-content;
-  background: rgba(12, 12, 12, 0.91);
+  background: var(--menu-bg-color);
 }
 
 .maxSize {
@@ -319,28 +319,138 @@ body {
   margin-left: -1px;
 }
 
+/* DivRnd3 window chrome. All visuals go through --wnd-* tokens (tokens.css);
+   defaults reproduce the legacy look, apps re-skin via :root[data-theme] token overrides. */
+.wenayWnd {
+  background: var(--wnd-bg);
+  border: var(--wnd-border);
+  border-radius: var(--wnd-radius);
+  box-shadow: var(--wnd-shadow);
+}
+/* Header drag zone. Color/font tokens are undeclared by default: an unresolved var()
+   makes the property fall back to its inherited value, i.e. exactly the legacy look. */
+.wenayWndHeader {
+  user-select: none;
+  cursor: grabbing;
+  height: var(--wnd-header-height, auto);
+  padding: var(--wnd-header-padding);
+  background: var(--wnd-header-bg);
+  border-bottom: var(--wnd-header-border);
+  border-top-left-radius: var(--wnd-radius);
+  border-top-right-radius: var(--wnd-radius);
+  color: var(--wnd-header-color, inherit);
+  font-size: var(--wnd-header-font-size, inherit);
+  letter-spacing: var(--wnd-header-letter-spacing, inherit);
+  text-transform: var(--wnd-header-transform, inherit);
+}
+/* Default header content when no header element is passed (striped drag strip) */
+.wenayWndHeaderDef {
+  height: var(--wnd-header-height, 20px);
+  width: 100%;
+  background: var(--wnd-header-stripes);
+}
+
 /* Window close button (DivRnd3 and others) */
 .wenayCloseBtn {
-  width: 28px;
-  height: 28px;
+  width: var(--wnd-close-size, 28px);
+  height: var(--wnd-close-size, 28px);
+  /* keep the clickable zone >= 24x24 whatever the theme sets */
+  min-width: 24px;
+  min-height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: var(--color-bg-light);
-  border: 1px solid var(--color-border-common);
-  color: var(--color-text-base);
+  background: var(--wnd-close-bg, var(--color-bg-light));
+  border: var(--wnd-close-border, 1px solid var(--color-border-common));
+  color: var(--wnd-close-color, var(--color-text-base));
   cursor: pointer;
   user-select: none;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--wnd-close-shadow, 0 2px 6px rgba(0, 0, 0, 0.35));
   transition: background 0.15s, color 0.15s, transform 0.15s;
 }
 .wenayCloseBtn:hover {
-  background: #e5484d;
-  border-color: #e5484d;
-  color: #fff;
+  background: var(--wnd-close-hover-bg, #e5484d);
+  border-color: var(--wnd-close-hover-bg, #e5484d);
+  color: var(--wnd-close-hover, #fff);
   transform: scale(1.08);
 }
 .wenayCloseBtn:active {
   transform: scale(0.95);
 }
+/* Positioning of the close button inside DivRnd3. Kept separate from .wenayCloseBtn,
+   which may be used outside windows and must not become position:absolute there. */
+.wenayWndClose {
+  position: absolute;
+  top: var(--wnd-close-top, -12px);
+  right: var(--wnd-close-right, -12px);
+}
+
+/* Settings dialog (SettingsDialog). Themed via --dlg-* (tokens.css), dark defaults. */
+.wenayDlgScrim {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wenay-z-modal, 9999);
+  background: var(--dlg-scrim, rgba(0, 0, 0, 0.5));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wenayDlg {
+  position: relative;
+  display: flex;
+  width: 640px;
+  height: 420px;
+  max-width: 92vw;
+  max-height: 82vh;
+  background: var(--dlg-bg, var(--color-bg-dark));
+  border: var(--dlg-border, 1px solid var(--color-border-common));
+  border-radius: var(--dlg-radius, 10px);
+  box-shadow: var(--dlg-shadow, 0 12px 40px rgba(0, 0, 0, 0.5));
+  color: var(--color-text-base);
+  overflow: hidden;
+}
+.wenayDlgNav {
+  width: var(--dlg-nav-width, 168px);
+  flex: none;
+  background: var(--dlg-nav-bg, var(--color-bg-light));
+  padding: 10px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow-y: auto;
+}
+.wenayDlgContent {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  padding: 14px 40px 14px 16px;
+  overflow: auto;
+}
+/* Positioning of the close button in the dialog's top-right corner (over the content column).
+   A direct child of .wenayDlg, NOT of the scrollable content, so it does not scroll away. */
+.wenayDlgClose {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+/* Minimal default section/segment buttons; apps override via sectionClassName /
+   sectionActiveClassName (SettingsDialog) and className / activeClassName (PlacementSetting) */
+.wenayDlgSection,
+.wenaySegBtn {
+  padding: 6px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+  text-align: left;
+  color: inherit;
+}
+.wenayDlgSection:hover,
+.wenaySegBtn:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+.wenayDlgSectionActive,
+.wenaySegBtnActive {
+  background: rgba(255, 255, 255, 0.16);
+  color: #fff;
+}

package/lib/style/tokens.css

@@ -29,6 +29,49 @@
   --menu-item-hover-color: #101010;
   --menu-item-hover-bg-color: var(--base-color-hover);
 
+  /* Menu shadow (was a literal in .MenuR) */
+  --menu-shadow: 0 0 20px 14px rgba(34, 60, 80, 0.2);
+
+  /* Window (DivRnd3) chrome. Defaults = legacy look, so apps without themes do not change.
+     Apps re-skin via :root[data-theme='...'] overrides, same contract as --color-* / --menu-*.
+     Intentionally NOT declared here (fall back to inherit/auto until a theme declares them):
+     --wnd-header-height, --wnd-header-color, --wnd-header-font-size,
+     --wnd-header-letter-spacing, --wnd-header-transform */
+  --wnd-bg: transparent;
+  --wnd-border: none;
+  --wnd-radius: 0;
+  --wnd-shadow: none;
+
+  /* Header drag zone: wrapper background (solid in themes) vs default striped strip.
+     Themes typically set --wnd-header-bg to a panel color and --wnd-header-stripes to none. */
+  --wnd-header-bg: transparent;
+  --wnd-header-stripes: repeating-linear-gradient(139deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1) 15px, transparent 0, transparent 30px);
+  --wnd-header-border: none;
+  --wnd-header-padding: 0;
+
+  /* Close button. Legacy: floating circle at the window's top-right corner.
+     Themes move it into the header (top/right offsets) and strip the circle chrome.
+     Clickable zone is clamped to >= 24x24 in CSS regardless of --wnd-close-size. */
+  --wnd-close-size: 28px;
+  --wnd-close-top: -12px;
+  --wnd-close-right: -12px;
+  --wnd-close-bg: var(--color-bg-light);
+  --wnd-close-border: 1px solid var(--color-border-common);
+  --wnd-close-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+  --wnd-close-color: var(--color-text-base);
+  --wnd-close-hover: #fff;
+  --wnd-close-hover-bg: #e5484d;
+
+  /* Settings dialog (SettingsDialog). Dark defaults close to current apps;
+     apps re-skin via :root[data-theme='...'] overrides, same contract as --wnd-*. */
+  --dlg-scrim: rgba(0, 0, 0, 0.5);
+  --dlg-bg: var(--color-bg-dark);
+  --dlg-border: 1px solid var(--color-border-common);
+  --dlg-radius: 10px;
+  --dlg-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  --dlg-nav-bg: var(--color-bg-light);
+  --dlg-nav-width: 168px;
+
   /* Layers */
   --wenay-z-modal: 9999;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wenay-react2",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "Common react",
   "strict": true,
   "main": "dist/index.js",