wenay-react2 1.0.40 → 1.0.42

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

@@ -2,9 +2,11 @@ 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 { 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();
+import { floatingWindowMap } from "../../utils/persistedMaps";
+import { useDraggableApi } from "../../hooks/useDraggable";
+// Map of all popup window sizes; declared in utils/persistedMaps (memoryCache registry must not
+// import the component layer) and re-exported here so the public surface is unchanged
+export { floatingWindowMap };
 // limit={{x:{min:0}, y:{min:0}}}
 let k = 0;
 const openWindows = { ar: [] };
@@ -237,8 +239,9 @@ export function useFloatingWindowController({ keyForSave: ks, position, size, zI
  * 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,
+export function FloatingWindowBase({ children, keyForSave: ks, position, size, overflow = true, zIndex = 9, onUpdate, disableDragging, className, header, moveOnlyHeader, limit, onCLickClose, onClickClose, sizeByWindow = true }) {
+    const clickClose = onClickClose ?? onCLickClose;
+    // 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
@@ -269,9 +272,9 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
             }, 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: controller.overlayZIndex
-                            } })), typeof children === "function" ? children(controller.update) : children] }), onCLickClose && (_jsx("div", { className: "wenayCloseBtn wenayWndClose", title: "Close", style: {
+                            } })), typeof children === "function" ? children(controller.update) : children] }), clickClose && (_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"))] }) }));
+                    }, onClick: clickClose, 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"))] }) }));
 }
 /**
  * Wrapper component that lets a nested element be dragged
@@ -280,111 +283,50 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
  * Function only as a hook for parameter changes during movement, although it has its own component (for offset counting).
  * Returns the distance traveled when moving the child element.
  */
-export function DragBox({ children, onX, onY, x = 0, y = 0, right = false, last, dragging, onStart, onStop }) {
-    const offsetMouse = useRef({ x: 0, y: 0 });
-    const offsetTouch = useRef(null);
-    const [draggingMouse, setDraggingMouse] = useState(false);
-    const [draggingTouch, setDraggingTouch] = useState(false);
+export function DragBox({ children, onX, onY, x = 0, y = 0, right = false, last, dragging: _dragging, // accepted for compatibility, was never read
+onStart, onStop }) {
+    // Thin adapter over useDraggableApi (A7): same observable contract as the old
+    // bespoke loop - immediate start, per-tick imperative onX/onY with the delta from
+    // the press point, NO re-render per move tick, posRef keeps the last delta after
+    // release (reset happens on the next gesture start inside the hook).
     const posRef = useRef(last?.current ?? { x, y });
-    const wasDragging = useRef(false);
     const callbacksRef = useRef({ onX, onY, onStart, onStop });
     callbacksRef.current = { onX, onY, onStart, onStop };
+    const api = useDraggableApi({
+        holdMs: 0,
+        trackState: false,
+        onDragStart() {
+            // per-gesture reset - without it repeated drags accumulated offset
+            posRef.current.x = 0;
+            posRef.current.y = 0;
+            callbacksRef.current.onStart?.();
+        },
+        onMove(p) {
+            // mutate in place: `last` shares this object (see layout effect below)
+            posRef.current.x = p.x;
+            posRef.current.y = p.y;
+            callbacksRef.current.onX?.(p.x);
+            callbacksRef.current.onY?.(p.y);
+        },
+        onDragEnd(final) {
+            posRef.current.x = final.x;
+            posRef.current.y = final.y;
+            callbacksRef.current.onStop?.();
+        },
+    });
     useLayoutEffect(() => {
         posRef.current.x = x;
         posRef.current.y = y;
     }, [x, y]);
-    useEffect(() => {
-        if (!draggingMouse && !draggingTouch) {
-            // onStop only after a real drag - previously it also fired on initial mount
-            if (wasDragging.current) {
-                wasDragging.current = false;
-                callbacksRef.current.onStop?.();
-            }
-            return;
-        }
-        wasDragging.current = true;
-        if (draggingMouse) {
-            const handleMouseMove = (e) => {
-                const newX = e.clientX + offsetMouse.current.x;
-                const newY = e.clientY + offsetMouse.current.y;
-                posRef.current = { x: newX, y: newY };
-                callbacksRef.current.onX?.(newX);
-                callbacksRef.current.onY?.(newY);
-            };
-            const handleMouseUp = () => {
-                offsetMouse.current.x = 0;
-                offsetMouse.current.y = 0;
-                document.removeEventListener("mousemove", handleMouseMove);
-                document.removeEventListener("mouseup", handleMouseUp);
-                setDraggingMouse(false);
-            };
-            document.addEventListener("mousemove", handleMouseMove);
-            document.addEventListener("mouseup", handleMouseUp);
-            callbacksRef.current.onStart?.();
-            return () => {
-                document.removeEventListener("mousemove", handleMouseMove);
-                document.removeEventListener("mouseup", handleMouseUp);
-            };
-        }
-        if (draggingTouch) {
-            const handleTouchMove = (e) => {
-                if (!offsetTouch.current)
-                    return;
-                const theTouch = Array.from(e.changedTouches).find((t) => t.identifier === offsetTouch.current?.id);
-                if (!theTouch)
-                    return;
-                const newX = theTouch.clientX + offsetTouch.current.x;
-                const newY = theTouch.clientY + offsetTouch.current.y;
-                posRef.current = { x: newX, y: newY };
-                callbacksRef.current.onX?.(newX);
-                callbacksRef.current.onY?.(newY);
-            };
-            const handleTouchEnd = (e) => {
-                if (!offsetTouch.current)
-                    return;
-                const ended = Array.from(e.changedTouches).find((t) => t.identifier === offsetTouch.current?.id);
-                if (ended) {
-                    offsetTouch.current = null;
-                    document.removeEventListener("touchmove", handleTouchMove);
-                    document.removeEventListener("touchend", handleTouchEnd);
-                    setDraggingTouch(false);
-                }
-            };
-            document.addEventListener("touchmove", handleTouchMove);
-            document.addEventListener("touchend", handleTouchEnd);
-            callbacksRef.current.onStart?.();
-            return () => {
-                document.removeEventListener("touchmove", handleTouchMove);
-                document.removeEventListener("touchend", handleTouchEnd);
-            };
-        }
-    }, [draggingMouse, draggingTouch]);
     useLayoutEffect(() => {
         if (last) {
             last.current = posRef.current;
         }
     });
-    const handleMouseDown = (e) => {
-        e.preventDefault();
-        posRef.current.x = 0;
-        posRef.current.y = 0;
-        offsetMouse.current = { x: -e.clientX, y: -e.clientY };
-        setDraggingMouse(true);
-    };
-    const handleTouchStart = (e) => {
-        const t = e.changedTouches[0];
-        if (!t)
-            return;
-        // same per-gesture reset as mouse - without it repeated touch drags accumulated offset
-        posRef.current.x = 0;
-        posRef.current.y = 0;
-        offsetTouch.current = { x: -t.clientX, y: -t.clientY, id: t.identifier };
-        setDraggingTouch(true);
-    };
     return (_jsx("div", { style: {
             position: "absolute",
             left: right ? undefined : 0,
             right: right ? 0 : undefined,
             top: 0
-        }, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: children }));
+        }, ...api.dragProps, children: children }));
 }

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

@@ -1,10 +1,7 @@
 import { ResizableProps } from "re-resizable";
-import { ObservableMap } from "../../utils/observableMap";
-type tSaveMap = {
-    height?: number | string;
-    width?: number | string;
-};
-export declare const mapResiReact: ObservableMap<string, tSaveMap>;
+import { mapResiReact, type ResizableSavedSize } from "../../utils/persistedMaps";
+type tSaveMap = ResizableSavedSize;
+export { mapResiReact };
 type t3 = Pick<ResizableProps, "style" | "enable" | "onResize" | "children" | "size" | "maxWidth" | "maxHeight" | "minWidth" | "minHeight">;
 export declare function FResizableReact({ style, onResize, enable, children, keyForSave, onResizeStop, size, minWidth, minHeight, maxWidth, maxHeight, moveWith, moveHeight }: t3 & {
     keyForSave?: string;
@@ -13,4 +10,3 @@ export declare function FResizableReact({ style, onResize, enable, children, key
     moveWith?: boolean;
     moveHeight?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Resizable } from "re-resizable";
-import { ObservableMap } from "../../utils/observableMap";
-// Memory for all column sizes; observable - memoryCache marks itself dirty on its mutations
-export const mapResiReact = new ObservableMap();
+import { mapResiReact } from "../../utils/persistedMaps";
+// Memory for all column sizes; declared in utils/persistedMaps (memoryCache registry must not
+// import the component layer) and re-exported here so the public surface is unchanged
+export { mapResiReact };
 export function FResizableReact({ style, onResize, enable, children, keyForSave, onResizeStop, size = { height: 50, width: 50 }, minWidth, minHeight, maxWidth = "100%", maxHeight = "100%", moveWith = true, moveHeight = true }) {
     let obj = size;
     if (keyForSave) {

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

@@ -125,20 +125,24 @@ export function useRightMenuController({ elements, style, styles, position: init
             ...styles?.container,
             display: 'flex'
         };
+        // runs during render: guard for DOM-less environments (SSR/tests) - Infinity makes
+        // the clamp a no-op there; on the client the behavior is unchanged
+        const vw = typeof window != 'undefined' ? window.innerWidth : Infinity;
+        const vh = typeof window != 'undefined' ? window.innerHeight : Infinity;
         if (position === 'left') {
-            computedStyle.left = Math.max(0, Math.min(computedX, window.innerWidth - 50));
+            computedStyle.left = Math.max(0, Math.min(computedX, vw - 50));
             computedStyle.right = 'auto';
         }
         else {
-            computedStyle.right = Math.max(0, Math.min(computedX, window.innerWidth - 50));
+            computedStyle.right = Math.max(0, Math.min(computedX, vw - 50));
             computedStyle.left = 'auto';
         }
         if (isTop) {
-            computedStyle.top = Math.max(0, Math.min(computedY, window.innerHeight - 50));
+            computedStyle.top = Math.max(0, Math.min(computedY, vh - 50));
             computedStyle.bottom = 'auto';
         }
         else {
-            computedStyle.bottom = Math.max(0, Math.min(computedY, window.innerHeight - 50));
+            computedStyle.bottom = Math.max(0, Math.min(computedY, vh - 50));
             computedStyle.top = 'auto';
         }
         return computedStyle;

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

@@ -8,5 +8,5 @@ export type MenuRightSavedState = {
         y: number;
     };
 };
-import { ObservableMap } from "../../utils/observableMap";
-export declare const mapRightMenu: ObservableMap<string, MenuRightSavedState>;
+import { mapRightMenu } from "../../utils/persistedMaps";
+export { mapRightMenu };

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

@@ -1,3 +1,5 @@
-import { ObservableMap } from "../../utils/observableMap";
-// observable - memoryCache marks itself dirty on its mutations (drag end re-set()s the state)
-export const mapRightMenu = new ObservableMap();
+import { mapRightMenu } from "../../utils/persistedMaps";
+// observable - memoryCache marks itself dirty on its mutations (drag end re-set()s the state);
+// declared in utils/persistedMaps (memoryCache registry must not import the component layer)
+// and re-exported here so the public surface is unchanged
+export { mapRightMenu };

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

@@ -5,7 +5,8 @@ import { createUpdateApi } from "../../../updateBy";
 import { createModalElementStore } from "./Modal";
 import { DragBox } from "../Dnd/FloatingWindow";
 function useViewport() {
-    const [width, setWidth] = useState(window.innerWidth);
+    // lazy initializer + guard: window is absent in DOM-less environments (SSR/tests)
+    const [width, setWidth] = useState(() => typeof window != 'undefined' ? window.innerWidth : 0);
     useEffect(() => {
         const handleResize = () => setWidth(window.innerWidth);
         window.addEventListener('resize', handleResize);
@@ -191,7 +192,8 @@ export function getApiLeftMenu() {
             }, children: text ?? "" }));
     };
     const createDefaultElement = ({ color, children, textB }) => {
-        const viewportWidth = window.innerWidth;
+        // guard: ApiLeftMenu is created at import time, so this must not touch window on a server
+        const viewportWidth = typeof window != 'undefined' ? window.innerWidth : 0;
         return (_jsxs("div", { className: "blur", style: {
                 minHeight: "100vh",
                 width: viewportWidth > 800 ? "100%" : "calc(100vw - 50px)",

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { OutsideClickArea } from "../../hooks/useOutside";
+import { createContext, useContext, useMemo, useState } from 'react';
 import { tokens } from "../../styles/tokens";
+import { Overlay } from "../Overlay";
 const noopModal = Object.assign(() => { }, { show() { }, open() { }, close() { }, replace() { }, set() { } });
 const ModalContext = createContext(noopModal);
 export const ModalProvider = ({ children, closeOnOutsideClick = true, closeOnEscape = true }) => {
@@ -16,21 +15,11 @@ export const ModalProvider = ({ children, closeOnOutsideClick = true, closeOnEsc
         api.set = api.replace;
         return api;
     }, []);
-    useEffect(() => {
-        if (!modal || !closeOnEscape)
-            return;
-        const onKeyDown = (e) => {
-            if (e.key == 'Escape')
-                setModal(null);
-        };
-        document.addEventListener('keydown', onKeyDown);
-        return () => document.removeEventListener('keydown', onKeyDown);
-    }, [modal, closeOnEscape]);
-    return (_jsxs(ModalContext.Provider, { value: modalApi, children: [children, modal && createPortal(_jsx("div", { style: {
+    return (_jsxs(ModalContext.Provider, { value: modalApi, children: [children, modal && (_jsx(Overlay, { scrimStyle: {
                     position: 'fixed', inset: 0, zIndex: tokens.zIndex.modal,
                     display: 'flex', alignItems: 'center', justifyContent: 'center',
                     backgroundColor: 'var(--dlg-scrim, rgba(0, 0, 0, 0.5))'
-                }, children: _jsx(OutsideClickArea, { outsideClick: () => { if (closeOnOutsideClick)
-                        setModal(null); }, status: true, children: modal }) }), document.body)] }));
+                }, onEscape: closeOnEscape ? () => setModal(null) : undefined, onOutsideClick: () => { if (closeOnOutsideClick)
+                    setModal(null); }, children: modal }))] }));
 };
 export const useModal = () => useContext(ModalContext);

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

@@ -6,5 +6,29 @@ export declare class CResizeObserver {
     add(element: Element, onResize: () => void): ObserveID;
     delete(id: ObserveID): void;
 }
+/** Subscribe an element to the shared resize observer via the returned callback ref.
+ *  `onResize` goes through a ref - a new function identity neither resubscribes nor is missed.
+ *  The native observer fires once right after observe, so the first measurement is not skipped.
+ *  `setResizeableElement` / `removeResizeableElement` below stay untouched - this is the
+ *  hook-shaped entry over the same singleton. */
+export declare function useResizeObserver<T extends Element = HTMLElement>(onResize: () => void): {
+    /** Callback ref - attach to the element to observe. */
+    ref: (el: T | null) => void;
+    /** The currently observed element (null while detached). */
+    element: () => T | null;
+};
+/** "I want the size -> I get the value/method": observed element's width/height as state
+ *  (rounded, equality-guarded - a no-op resize does not re-render) plus a live `getSize()`
+ *  getter for measurements that must not wait for a render. */
+export declare function useElementSize<T extends Element = HTMLElement>(): {
+    ref: (el: T | null) => void;
+    element: () => T | null;
+    width: number;
+    height: number;
+    getSize: () => {
+        width: number;
+        height: number;
+    };
+};
 export declare function setResizeableElement(el: HTMLElement): HTMLElement | undefined;
 export declare function removeResizeableElement(el: HTMLElement): void;

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

@@ -1,3 +1,4 @@
+import { useCallback, useRef, useState } from "react";
 // Class for tracking element size changes
 export class CResizeObserver {
     #idMap = new WeakMap();
@@ -40,6 +41,54 @@ export class CResizeObserver {
     }
 }
 const global_resizeObserver = new CResizeObserver();
+/** Subscribe an element to the shared resize observer via the returned callback ref.
+ *  `onResize` goes through a ref - a new function identity neither resubscribes nor is missed.
+ *  The native observer fires once right after observe, so the first measurement is not skipped.
+ *  `setResizeableElement` / `removeResizeableElement` below stay untouched - this is the
+ *  hook-shaped entry over the same singleton. */
+export function useResizeObserver(onResize) {
+    const cbRef = useRef(onResize);
+    cbRef.current = onResize;
+    const elRef = useRef(null);
+    const idRef = useRef(null);
+    const ref = useCallback((el) => {
+        if (idRef.current) {
+            global_resizeObserver.delete(idRef.current);
+            idRef.current = null;
+        }
+        elRef.current = el;
+        if (el)
+            idRef.current = global_resizeObserver.add(el, function emitResize() { cbRef.current(); });
+    }, []);
+    return {
+        /** Callback ref - attach to the element to observe. */
+        ref,
+        /** The currently observed element (null while detached). */
+        element: () => elRef.current,
+    };
+}
+/** "I want the size -> I get the value/method": observed element's width/height as state
+ *  (rounded, equality-guarded - a no-op resize does not re-render) plus a live `getSize()`
+ *  getter for measurements that must not wait for a render. */
+export function useElementSize() {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const obs = useResizeObserver(function readSize() {
+        const el = obs.element();
+        if (!el)
+            return;
+        const r = el.getBoundingClientRect();
+        const next = { width: Math.round(r.width), height: Math.round(r.height) };
+        setSize(prev => prev.width == next.width && prev.height == next.height ? prev : next);
+    });
+    const getSize = () => {
+        const el = obs.element();
+        if (!el)
+            return { width: 0, height: 0 };
+        const r = el.getBoundingClientRect();
+        return { width: r.width, height: r.height };
+    };
+    return { ref: obs.ref, element: obs.element, width: size.width, height: size.height, getSize };
+}
 const resizeableElementMap = new WeakMap();
 function getWidth(el) {
     return Math.ceil(el.clientWidth || el.getBoundingClientRect().width);

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

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+export type OverlayProps = {
+    children: ReactNode;
+    /** Scrim look: a CSS class (SettingsDialog: `wenayDlgScrim`) and/or inline style
+     *  (ModalProvider: flex-centered token scrim). The scrim div gets both verbatim. */
+    scrimClassName?: string;
+    scrimStyle?: React.CSSProperties;
+    /** Forwarded to the OutsideClickArea that wraps children (e.g. `wenayDlgOutside`). */
+    outsideClassName?: string;
+    outsideStatus?: boolean;
+    /** Attach a document-level Escape handler while mounted. Omit when the host owns
+     *  its own keydown logic (SettingsDialog's two-stage Escape stays in its controller). */
+    onEscape?: () => void;
+    onOutsideClick?: () => void;
+    container?: Element;
+};
+/** INTERNAL (A9): the one portal+scrim+outside-click+Escape composition for the
+ *  scrim-based modal systems - ModalProvider and SettingsDialog adapt to it.
+ *  Deliberately NOT exported from the public barrels: apps keep using
+ *  ModalProvider/useModal/SettingsDialog. The render-slot stores
+ *  (createModalElementStore) and the LeftModal drawer are not overlays and stay
+ *  separate. Keeping all scrim/portal DOM in this one leaf is also the seam for a
+ *  future react-native view layer (headless state stays in the hosts). */
+export declare function Overlay({ children, scrimClassName, scrimStyle, outsideClassName, outsideStatus, onEscape, onOutsideClick, container, }: OverlayProps): React.ReactPortal;

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { OutsideClickArea } from '../hooks/useOutside';
+/** INTERNAL (A9): the one portal+scrim+outside-click+Escape composition for the
+ *  scrim-based modal systems - ModalProvider and SettingsDialog adapt to it.
+ *  Deliberately NOT exported from the public barrels: apps keep using
+ *  ModalProvider/useModal/SettingsDialog. The render-slot stores
+ *  (createModalElementStore) and the LeftModal drawer are not overlays and stay
+ *  separate. Keeping all scrim/portal DOM in this one leaf is also the seam for a
+ *  future react-native view layer (headless state stays in the hosts). */
+export function Overlay({ children, scrimClassName, scrimStyle, outsideClassName, outsideStatus = true, onEscape, onOutsideClick, container, }) {
+    // callbacks through refs: inline closures must not resubscribe the document listener
+    const callbacksRef = useRef({ onEscape, onOutsideClick });
+    callbacksRef.current = { onEscape, onOutsideClick };
+    const hasEscape = !!onEscape;
+    useEffect(() => {
+        if (!hasEscape)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key == 'Escape')
+                callbacksRef.current.onEscape?.();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [hasEscape]);
+    return createPortal(_jsx("div", { className: scrimClassName, style: scrimStyle, children: _jsx(OutsideClickArea, { outsideClick: () => callbacksRef.current.onOutsideClick?.(), status: outsideStatus, className: outsideClassName, children: children }) }), container ?? document.body);
+}

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 import { createUpdateApi, renderBy } from "../../../updateBy";
-import { OutsideClickArea } from "../../hooks/useOutside";
 import { FloatingWindowBase } from "../Dnd/FloatingWindow";
+import { Overlay } from "../Overlay";
 import { createSearchHistory } from "../../utils/searchHistory";
 import { memoryGetOrCreate, memoryMarkDirty } from "../../utils/memoryStore";
 const settingsDialogSize = { width: 820, height: 560 };
@@ -477,24 +476,24 @@ export function SettingsDialog(props) {
                                     toggleExpanded(key);
                             } }), _jsx("span", { className: "wenayDlgTreeLabel", children: renderHighlightedLabel(node.section.name, searchTerms) })] }), hasChildren && isOpen && node.children.map(renderTreeNode)] }, key);
     }
-    return _jsxs(_Fragment, { children: [_jsx("span", { role: "button", tabIndex: 0, "aria-label": props.trigger == null ? "Open settings" : undefined, onClick: openDialog, onKeyDown: onTriggerKeyDown, style: { display: "inline-block", cursor: "pointer" }, children: props.trigger ?? _jsx(DefaultSettingsTrigger, {}) }), open && createPortal(_jsx("div", { className: "wenayDlgScrim", children: _jsx(OutsideClickArea, { outsideClick: () => setOpen(false), status: open, className: "wenayDlgOutside", children: _jsx(FloatingWindowBase, { className: "wenayDlgWindow", size: settingsDialogSize, position: settingsDialogPosition, zIndex: 10000, moveOnlyHeader: true, overflow: false, onCLickClose: () => setOpen(false), header: _jsx("div", { className: "wenayDlgHeader", children: "Settings" }), children: _jsxs("div", { className: classNames(["wenayDlg", navResizing && "wenayDlg_resizing"]), children: [_jsxs("div", { className: "wenayDlgNav", style: { width: navWidth }, children: [_jsxs("div", { className: "wenayDlgNavTop", children: [_jsxs("div", { ref: searchBoxRef, className: "wenayDlgSearchBox", onBlur: closeHistoryWhenSearchFocusLeaves, children: [_jsx("input", { ref: searchInputRef, className: "wenayDlgSearch", value: search, placeholder: "Search", "aria-label": "Search settings", onFocus: () => setHistoryOpen(searchHistory.length != 0), onChange: e => {
-                                                                setSearch(e.currentTarget.value);
-                                                                setHistoryOpen(searchHistory.length != 0);
-                                                            }, onKeyDown: e => {
-                                                                if (e.key == "Enter")
-                                                                    commitSearch();
-                                                                if (e.key == "ArrowDown" && searchHistory[0]) {
-                                                                    e.preventDefault();
-                                                                    useHistoryItem(searchHistory[0]);
-                                                                }
-                                                            } }), searchHistory.length != 0 && _jsx("button", { type: "button", className: "wenayDlgSearchHistoryBtn", title: "Search history", "aria-label": "Search history", "aria-expanded": historyOpen, onClick: () => {
-                                                                setHistoryOpen(v => !v);
-                                                                searchInputRef.current?.focus();
-                                                            }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: _jsx("path", { d: "M7 2a5 5 0 1 1-4.4 2.6M2 2v3h3M7 4v3l2 1" }) }) }), search != "" && _jsx("button", { type: "button", className: "wenayDlgSearchClear", title: "Clear search", "aria-label": "Clear search", onClick: () => {
-                                                                setSearch("");
-                                                                setHistoryOpen(searchHistory.length != 0);
-                                                                searchInputRef.current?.focus();
-                                                            }, 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" }) }) }), historyOpen && searchHistory.length != 0 && _jsxs("div", { className: "wenayDlgSearchHistory", role: "listbox", children: [searchHistory.map(item => _jsx("button", { type: "button", className: "wenayDlgSearchHistoryItem", onMouseDown: e => e.preventDefault(), onClick: () => useHistoryItem(item), children: item }, item)), _jsx("button", { type: "button", className: "wenayDlgSearchHistoryClear", onMouseDown: e => e.preventDefault(), onClick: () => {
-                                                                        clearHistory();
-                                                                    }, children: "Clear history" })] })] }), treeToolsVisible && _jsx("button", { className: classNames(["wenayDlgTreeTool", `wenayDlgTreeTool_${treeToolState}`]), type: "button", title: treeToolTitle, "aria-label": treeToolTitle, onClick: cycleTreeTool, children: _jsxs("span", { className: "wenayDlgTreeToolDots", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }) })] }), _jsxs("div", { className: "wenayDlgTree", role: "tree", children: [tree.roots.map(renderTreeNode), firstVisibleNode == null && _jsx("div", { className: "wenayDlgNoResults", children: "No settings found" })] })] }), _jsx("div", { className: "wenayDlgDivider", role: "separator", "aria-orientation": "vertical", "aria-label": "Resize settings navigation", "aria-valuemin": settingsDialogNav.min, "aria-valuemax": settingsDialogNav.max, "aria-valuenow": navWidth, tabIndex: 0, title: "Drag to resize navigation; double-click to reset", onPointerDown: beginNavResize, onDoubleClick: () => commitNavWidth(settingsDialogNav.def), onKeyDown: onNavResizeKeyDown, children: _jsx("span", {}) }), _jsx("div", { className: "wenayDlgContent", children: current?.render() })] }) }) }) }), document.body)] });
+    return _jsxs(_Fragment, { children: [_jsx("span", { role: "button", tabIndex: 0, "aria-label": props.trigger == null ? "Open settings" : undefined, onClick: openDialog, onKeyDown: onTriggerKeyDown, style: { display: "inline-block", cursor: "pointer" }, children: props.trigger ?? _jsx(DefaultSettingsTrigger, {}) }), open && (_jsx(Overlay, { scrimClassName: "wenayDlgScrim", outsideClassName: "wenayDlgOutside", outsideStatus: open, onOutsideClick: () => setOpen(false), children: _jsx(FloatingWindowBase, { className: "wenayDlgWindow", size: settingsDialogSize, position: settingsDialogPosition, zIndex: 10000, moveOnlyHeader: true, overflow: false, onClickClose: () => setOpen(false), header: _jsx("div", { className: "wenayDlgHeader", children: "Settings" }), children: _jsxs("div", { className: classNames(["wenayDlg", navResizing && "wenayDlg_resizing"]), children: [_jsxs("div", { className: "wenayDlgNav", style: { width: navWidth }, children: [_jsxs("div", { className: "wenayDlgNavTop", children: [_jsxs("div", { ref: searchBoxRef, className: "wenayDlgSearchBox", onBlur: closeHistoryWhenSearchFocusLeaves, children: [_jsx("input", { ref: searchInputRef, className: "wenayDlgSearch", value: search, placeholder: "Search", "aria-label": "Search settings", onFocus: () => setHistoryOpen(searchHistory.length != 0), onChange: e => {
+                                                            setSearch(e.currentTarget.value);
+                                                            setHistoryOpen(searchHistory.length != 0);
+                                                        }, onKeyDown: e => {
+                                                            if (e.key == "Enter")
+                                                                commitSearch();
+                                                            if (e.key == "ArrowDown" && searchHistory[0]) {
+                                                                e.preventDefault();
+                                                                useHistoryItem(searchHistory[0]);
+                                                            }
+                                                        } }), searchHistory.length != 0 && _jsx("button", { type: "button", className: "wenayDlgSearchHistoryBtn", title: "Search history", "aria-label": "Search history", "aria-expanded": historyOpen, onClick: () => {
+                                                            setHistoryOpen(v => !v);
+                                                            searchInputRef.current?.focus();
+                                                        }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: _jsx("path", { d: "M7 2a5 5 0 1 1-4.4 2.6M2 2v3h3M7 4v3l2 1" }) }) }), search != "" && _jsx("button", { type: "button", className: "wenayDlgSearchClear", title: "Clear search", "aria-label": "Clear search", onClick: () => {
+                                                            setSearch("");
+                                                            setHistoryOpen(searchHistory.length != 0);
+                                                            searchInputRef.current?.focus();
+                                                        }, 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" }) }) }), historyOpen && searchHistory.length != 0 && _jsxs("div", { className: "wenayDlgSearchHistory", role: "listbox", children: [searchHistory.map(item => _jsx("button", { type: "button", className: "wenayDlgSearchHistoryItem", onMouseDown: e => e.preventDefault(), onClick: () => useHistoryItem(item), children: item }, item)), _jsx("button", { type: "button", className: "wenayDlgSearchHistoryClear", onMouseDown: e => e.preventDefault(), onClick: () => {
+                                                                    clearHistory();
+                                                                }, children: "Clear history" })] })] }), treeToolsVisible && _jsx("button", { className: classNames(["wenayDlgTreeTool", `wenayDlgTreeTool_${treeToolState}`]), type: "button", title: treeToolTitle, "aria-label": treeToolTitle, onClick: cycleTreeTool, children: _jsxs("span", { className: "wenayDlgTreeToolDots", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }) })] }), _jsxs("div", { className: "wenayDlgTree", role: "tree", children: [tree.roots.map(renderTreeNode), firstVisibleNode == null && _jsx("div", { className: "wenayDlgNoResults", children: "No settings found" })] })] }), _jsx("div", { className: "wenayDlgDivider", role: "separator", "aria-orientation": "vertical", "aria-label": "Resize settings navigation", "aria-valuemin": settingsDialogNav.min, "aria-valuemax": settingsDialogNav.max, "aria-valuenow": navWidth, tabIndex: 0, title: "Drag to resize navigation; double-click to reset", onPointerDown: beginNavResize, onDoubleClick: () => commitNavWidth(settingsDialogNav.def), onKeyDown: onNavResizeKeyDown, children: _jsx("span", {}) }), _jsx("div", { className: "wenayDlgContent", children: current?.render() })] }) }) }))] });
 }

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

@@ -133,5 +133,6 @@ export declare function createToolbar(opts: {
         showReset: (on: boolean) => void;
         reset: () => void;
         onChange: import("wenay-common2").ListenApi<[ToolbarConfig]>;
+        dispose: () => void;
     };
 };

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

@@ -3,6 +3,7 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { listen as createListen } from 'wenay-common2';
 import { createUpdateApi } from '../../../updateBy';
 import { memoryGetOrCreate, memoryMarkDirty } from '../../utils/memoryStore';
+import { pinFixedOrder, movedOrderWithFixed } from '../../utils/fixedOrder';
 import { OutsideClickArea } from '../../hooks/useOutside';
 import { useReorder } from '../../hooks/useReorder';
 // Module singleton (closure + updateBy subscription, no React context) - same
@@ -114,8 +115,9 @@ export function createToolbar(opts) {
     const ext = opts.source;
     const sourceMode = ext ? (opts.sourceMode ?? 'orderVisible') : 'orderVisible';
     // outside edits of the external config (grid drags...) must reach the
-    // toolbar's own subscribers too; module-lifetime subscription by design
-    ext?.onChange?.(() => emitChange(normalize()));
+    // toolbar's own subscribers too; lives until dispose() (repeated factories over
+    // one key used to leak a permanent listener per call - HMR, remounts)
+    const offSource = ext?.onChange?.(() => emitChange(normalize()));
     function sameOrder(a, b) {
         return a.length == b.length && a.every((k, i) => k == b[i]);
     }
@@ -142,14 +144,11 @@ export function createToolbar(opts) {
         const rawOrder = ext && sourceMode == 'order'
             ? mergeSourceOrder(Array.isArray(st.order) ? st.order : [], Array.isArray(extRaw?.order) ? extRaw.order : [], sourceKeys)
             : Array.isArray(raw.order) ? raw.order : [];
-        const order = rawOrder.filter(k => known.has(k) && !opts.items.find(i => i.key == k)?.fixed);
+        const prelim = rawOrder.filter(k => known.has(k) && !opts.items.find(i => i.key == k)?.fixed);
         for (const it of opts.items)
-            if (!it.fixed && order.indexOf(it.key) == -1)
-                order.push(it.key);
-        opts.items.forEach(function pinFixed(it, i) {
-            if (it.fixed)
-                order.splice(Math.min(i, order.length), 0, it.key);
-        });
+            if (!it.fixed && prelim.indexOf(it.key) == -1)
+                prelim.push(it.key);
+        const order = pinFixedOrder(prelim, opts.items);
         const rawVisible = raw.visible && typeof raw.visible == 'object' ? raw.visible : {};
         const visible = {};
         for (const it of opts.items)
@@ -310,20 +309,9 @@ export function createToolbar(opts) {
         const base = p.className ?? 'wenaySegBtn';
         const activeCls = p.activeClassName ?? 'wenaySegBtnActive';
         const byKey = new Map(opts.items.map(i => [i.key, i]));
-        /** Simulated commit: splice + the same fixed pinning as normalize(). */
+        /** Simulated commit: splice + the same fixed pinning as normalize() (shared utils/fixedOrder). */
         function movedOrder(order, key, to) {
-            const next = order.slice();
-            const from = next.indexOf(key);
-            if (from == -1)
-                return next;
-            next.splice(from, 1);
-            next.splice(Math.max(0, Math.min(next.length, to)), 0, key);
-            const res = next.filter(k => !byKey.get(k)?.fixed);
-            opts.items.forEach(function pinFixed(it, i) {
-                if (it.fixed)
-                    res.splice(Math.min(i, res.length), 0, it.key);
-            });
-            return res;
+            return movedOrderWithFixed(order, key, to, opts.items);
         }
         const reorder = useReorder({
             order: cfg.order,
@@ -354,9 +342,14 @@ export function createToolbar(opts) {
                             }, onTouchStart: it.fixed ? undefined : r.props.onTouchStart, children: [_jsx("input", { type: 'checkbox', disabled: it.fixed, checked: cfg.visible[k] != false, onChange: () => setConfig({ ...cfg, visible: { ...cfg.visible, [k]: !(cfg.visible[k] != false) } }) }), _jsx("span", { className: 'wenayTbIcon', children: toolbarItemIcon(it) }), _jsx("span", { className: 'wenayTbRowTitle', children: it.title }), !it.fixed && _jsx("div", { className: 'wenayTbHandle', tabIndex: 0, title: 'Drag or arrow keys to reorder', onKeyDown: e => onHandleKey(k, e), children: "\u283F" })] }, k);
                     }) }), _jsxs("div", { className: 'wenayTbRow wenayTbRowMeta', children: [_jsx("input", { type: 'checkbox', checked: cfg.visible[SETTINGS_KEY] != false, onChange: () => setConfig({ ...cfg, visible: { ...cfg.visible, [SETTINGS_KEY]: !(cfg.visible[SETTINGS_KEY] != false) } }) }), _jsx("span", { className: 'wenayTbIcon', children: settingsIcon() }), _jsx("span", { className: 'wenayTbRowTitle', children: settingsTitle() })] }), opts.resetItem !== false && _jsxs("div", { className: 'wenayTbRow wenayTbRowMeta', children: [_jsx("input", { type: 'checkbox', checked: cfg.visible[RESET_KEY] != false, onChange: () => setConfig({ ...cfg, visible: { ...cfg.visible, [RESET_KEY]: !(cfg.visible[RESET_KEY] != false) } }) }), _jsx("span", { className: 'wenayTbIcon', children: resetIcon() }), _jsx("span", { className: 'wenayTbRowTitle', children: resetTitle() }), _jsx("button", { type: 'button', className: 'wenayTbMetaAction', title: resetTitle(), onClick: () => reset(), children: resetIcon() })] })] });
     }
+    /** Release the external-source subscription. The persisted config itself stays -
+     *  dispose() is about listener lifetime (HMR, remounts), not about state. */
+    function dispose() {
+        offSource?.();
+    }
     return {
         Bar,
         Settings,
-        api: { useConfig, useItems, getConfig, setConfig, setOrder, show, setDensity, showSettings, showReset, reset, onChange },
+        api: { useConfig, useItems, getConfig, setConfig, setOrder, show, setDensity, showSettings, showReset, reset, onChange, dispose },
     };
 }