wenay-react2 1.0.27 → 1.0.28

package/lib/common/api.d.ts

@@ -25,7 +25,8 @@ 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 { 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

@@ -38,7 +38,7 @@ export * from "./src/components/Modal";
 // 11. Menu - depends on hooks, Dnd, and Modal
 export * from "./src/components/Menu";
 // 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/styles/tokens.d.ts

@@ -17,6 +17,32 @@ 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";
     };
     readonly font: {
         readonly family: "Roboto";

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

@@ -19,6 +19,32 @@ 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',
     },
     font: {
         family: 'Roboto',

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

@@ -28,5 +28,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,69 @@ 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);
+}

package/lib/style/tokens.css

@@ -29,6 +29,39 @@
   --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;
+
   /* Layers */
   --wenay-z-modal: 9999;
 }

package/package.json

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