wenay-react2 1.0.34 → 1.0.36

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

@@ -2,15 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { sleepAsync } from 'wenay-common2';
 import { useDraggable } from "../../hooks/useDraggable";
-import { DivOutsideClick } from "../../hooks/useOutside";
-import { DraggableOutlineDiv } from "../Dnd/DraggableOutlineDiv";
-import { GetModalFuncJSX } from "../Modal/Modal";
+import { OutsideClickArea } from "../../hooks/useOutside";
+import { OutlineDragDemo } from "../Dnd/OutlineDragDemo";
+import { createModalRenderStore } from "../Modal/Modal";
 import { mapRightMenu } from "./RightMenuStore";
-export function DropdownMenu({ elements, style, position: initialPosition = 'right', position2: initialPos2 = 'top', keyForSave }) {
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+function renderTrigger(trigger, state) {
+    return typeof trigger == 'function' ? trigger(state) : trigger;
+}
+export function DropdownMenu({ elements, style, styles, classNames = {}, trigger = '☰', position: initialPosition = 'right', verticalPosition: initialVerticalPosition = 'top', keyForSave }) {
     const [initialState] = useState(() => {
         const fallback = {
             position: initialPosition,
-            position2: initialPos2,
+            verticalPosition: initialVerticalPosition,
             offset: { x: 0, y: 0 }
         };
         if (!keyForSave)
@@ -26,10 +32,10 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
     const [select, setSelect] = useState(null);
     const data = useRef({ m1: false, m2: false });
     // Get modal JSX functions
-    const jsx = useMemo(GetModalFuncJSX, []);
+    const jsx = useMemo(createModalRenderStore, []);
     const jsxRender = useMemo(() => _jsx(jsx.Render, {}), [jsx]);
     const [position, setPosition] = useState(initialState.position);
-    const [isTop, setIsTop] = useState(initialState.position2 === 'top');
+    const [isTop, setIsTop] = useState(initialState.verticalPosition === 'top');
     const positionLast = useRef({ ...initialState.offset });
     const containerRef = useRef(null);
     const handleDragEnd = useCallback((finalPosition) => {
@@ -70,7 +76,7 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
             // mapRightMenu is observable: set() itself marks the cache dirty
             mapRightMenu.set(keyForSave, {
                 position: nextPosition,
-                position2: toTop ? 'top' : 'bottom',
+                verticalPosition: toTop ? 'top' : 'bottom',
                 offset: { ...nextOffset }
             });
         }
@@ -111,16 +117,17 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
         }
     }, [jsx]);
     // Render dropdown menu (dop)
-    const dop = (isFixed || isOpen) && (_jsxs("div", { onMouseEnter: handleContentMouseEnter, onMouseLeave: handleContentMouseLeave, className: `dropdown-content2 ${!isTop ? 'dropdown-up' : ''}`, style: {
+    const dop = (isFixed || isOpen) && (_jsxs("div", { onMouseEnter: handleContentMouseEnter, onMouseLeave: handleContentMouseLeave, className: cx(classNames.flyout ?? 'dropdown-content2', !isTop ? (classNames.flyoutUp ?? 'dropdown-up') : undefined), style: {
             display: 'flex',
             [position]: 0,
             right: position === 'left' ? 'auto' : 0,
-            flexDirection: position === 'left' ? 'row' : 'row-reverse'
-        }, 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 ? (
+            flexDirection: position === 'left' ? 'row' : 'row-reverse',
+            ...styles?.flyout
+        }, children: [_jsx("div", { className: classNames.list ?? "dropdown-content", style: styles?.list, onMouseEnter: handleContentMouseEnter, onMouseLeave: handleContentMouseLeave, children: elements.map((item, index) => (_jsx("div", { className: cx(classNames.item ?? 'menu-item', select === index ? (classNames.itemActive ?? 'force-hover') : undefined), style: styles?.item, onMouseEnter: () => handleSelect(item, index), onClick: () => handleSelect(item, index), children: item.label }, item.label))) }), _jsx("div", { onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: handleSubmenuMouseLeave, children: jsx.JSX ? (
                 // clamp to the viewport: with hard 40vw/70vh the submenu ran
                 // off screen when the menu sat near a bottom/side edge
-                _jsx("div", { className: "submenu", style: { width: '40vw', minHeight: '70vh',
-                        maxWidth: '90vw', maxHeight: '85vh', overflowY: 'auto' }, children: jsxRender })) : null })] }));
+                _jsx("div", { className: classNames.submenu ?? "submenu", style: { width: '40vw', minHeight: '70vh',
+                        maxWidth: '90vw', maxHeight: '85vh', overflowY: 'auto', ...styles?.submenu }, children: jsxRender })) : null })] }));
     // Calculate offsets
     const computedX = position === 'left'
         ? positionLast.current.x + pos.x
@@ -132,6 +139,7 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
     const containerStyle = useMemo(() => {
         const computedStyle = {
             ...style,
+            ...styles?.container,
             display: 'flex'
         };
         // Horizontal positioning
@@ -153,10 +161,10 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
             computedStyle.top = 'auto';
         }
         return computedStyle;
-    }, [style, position, isTop, computedX, computedY]);
-    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] }));
+    }, [style, styles?.container, position, isTop, computedX, computedY]);
+    return (_jsxs(OutsideClickArea, { ref: containerRef, outsideClick: handleClickOutside, className: cx(classNames.container ?? 'menu-container', isFixed ? (classNames.activeContainer ?? 'activeM') : undefined), style: containerStyle, onMouseEnter: () => !isFixed && setIsOpen(true), onMouseLeave: () => !isFixed && setIsOpen(false), children: [_jsx("div", { ...dragProps, className: classNames.trigger ?? "menu-button", style: styles?.trigger, onClick: handleToggle, children: renderTrigger(trigger, { isOpen, isFixed }) }), dop] }));
 }
-export function MenuRightApi() {
+export function createRightMenuController() {
     const elements = [];
     let render = null;
     return {
@@ -190,20 +198,20 @@ export function MenuRightApi() {
         }
     };
 }
-export function DropdownMenuTest() {
+export function RightMenuDemo() {
     const testData = [
         { label: "Item 1", subMenuContent: () => _jsx(SubMenu, {}) },
         { label: "Item 2", subMenuContent: () => _jsx(SubMenu2, {}) },
         { label: "Item 3", subMenuContent: () => _jsx(SubMenu, {}) }
     ];
-    const menu = useMemo(MenuRightApi, []);
+    const menu = useMemo(createRightMenuController, []);
     useEffect(() => {
         menu.set(testData);
     }, []);
     return _jsx(menu.Render, {});
 }
 const SubMenu = () => {
-    return (_jsxs("div", { className: "maxSize", children: [_jsx(DraggableOutlineDiv, {}), _jsx("div", { className: "submenu-item", children: "Subitem 1" }), _jsx("div", { className: "submenu-item", children: "Subitem 2" }), _jsx("div", { className: "submenu-item", children: "Subitem 3" })] }));
+    return (_jsxs("div", { className: "maxSize", children: [_jsx(OutlineDragDemo, {}), _jsx("div", { className: "submenu-item", children: "Subitem 1" }), _jsx("div", { className: "submenu-item", children: "Subitem 2" }), _jsx("div", { className: "submenu-item", children: "Subitem 3" })] }));
 };
 const SubMenu2 = () => {
     return (_jsxs("div", { children: [_jsx("div", { className: "submenu-item", children: "Subitem 33331" }), _jsx("div", { className: "submenu-item", children: "Subitem 33332" }), _jsx("div", { className: "submenu-item", children: "Subitem 33333" })] }));

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

@@ -1,8 +1,8 @@
 export type MenuRightPosition = 'left' | 'right';
-export type MenuRightPosition2 = 'top' | 'bottom';
+export type MenuRightVerticalPosition = 'top' | 'bottom';
 export type MenuRightSavedState = {
     position: MenuRightPosition;
-    position2: MenuRightPosition2;
+    verticalPosition: MenuRightVerticalPosition;
     offset: {
         x: number;
         y: number;

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

@@ -1,3 +1,3 @@
 import { ObservableMap } from "../../utils/observableMap";
-// observable - Cash marks itself dirty on its mutations (drag end re-set()s the state)
+// observable - memoryCache marks itself dirty on its mutations (drag end re-set()s the state)
 export const mapRightMenu = new ObservableMap();

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

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from "react";
 import { colorGenerator2, sleepAsync } from "wenay-common2";
 import { renderBy, updateBy } from "../../../updateBy";
-import { GetModalJSX } from "./Modal";
-import { Drag22 } from "../Dnd/RNDFunc3";
+import { createModalElementStore } from "./Modal";
+import { DragBox } from "../Dnd/FloatingWindow";
 function useViewport() {
     const [width, setWidth] = useState(window.innerWidth);
     useEffect(() => {
@@ -172,7 +172,7 @@ export function LeftModal({ arr, zIndex }) {
     const sidebarComponent = useMemo(() => (_jsx(SidebarMenuComponent, { arr: arr, zIndex: zIndex, api: (apiInstance) => {
             menuApiRef.current = apiInstance;
         }, x_: currentPos.current.x, y_: currentPos.current.y })), [arr, zIndex]);
-    const draggableWrapper = useMemo(() => (_jsx(Drag22, { onX: (xNew) => menuApiRef.current?.x(xNew), right: true, onY: (yNew) => menuApiRef.current?.y(yNew), x: 0, y: 0, onStart: () => menuApiRef.current?.start?.(), onStop: () => menuApiRef.current?.stop?.(), children: sidebarComponent })), [sidebarComponent]);
+    const draggableWrapper = useMemo(() => (_jsx(DragBox, { onX: (xNew) => menuApiRef.current?.x(xNew), right: true, onY: (yNew) => menuApiRef.current?.y(yNew), x: 0, y: 0, onStart: () => menuApiRef.current?.start?.(), onStop: () => menuApiRef.current?.stop?.(), children: sidebarComponent })), [sidebarComponent]);
     return _jsx("div", { className: "maxSize", children: draggableWrapper });
 }
 function LeftMenuComponent({ api, menu = [], zIndex }) {
@@ -247,7 +247,7 @@ export function getApiLeftMenu() {
         updateBy(menuStore);
         return (_jsxs("div", { className: "maxSize", style: { position: "absolute", zIndex: zIndex0 }, children: [_jsx(modal.Render, {}), _jsx(LeftMenuComponent, { zIndex: zIndex, api: () => { }, menu: getAllMenuItems() })] }));
     }
-    const modal = GetModalJSX();
+    const modal = createModalElementStore();
     return {
         modal,
         renderBy() { renderBy(menuStore); },

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

@@ -1,26 +1,23 @@
 import React from "react";
 import type { ModalApi } from "./ModalContextProvider";
-type LegacyModalSetter = (jsx: React.ReactNode | null) => void;
-type ModalTarget = LegacyModalSetter | ModalApi;
-export declare function inputModal({ setModalJSX, func, name, txt }: {
+type ModalSetter = (jsx: React.ReactNode | null) => void;
+type ModalTarget = ModalSetter | ModalApi;
+export declare function inputModal({ modal, func, name, txt }: {
     txt?: string;
     name?: string;
     /** Any modal setter: setState/useModal or ModalApi from useModal */
-    setModalJSX: ModalTarget;
+    modal: ModalTarget;
     func: (txt: string) => void;
 }): void;
-export declare function confirmModal({ setModalJSX, func, password }: {
+export declare function confirmModal({ modal, func, password }: {
     /** Any modal setter: setState/useModal or ModalApi from useModal */
-    setModalJSX: ModalTarget;
+    modal: ModalTarget;
     func: () => any;
-    /** Confirmation code word. Default "111" is kept for compatibility; pass your own. */
+    /** Confirmation code word. Default is "111"; pass your own for app flows. */
     password?: string;
 }): void;
-/**
- * @deprecated Imperative JSX storage based on updateBy/renderBy.
- * Use `ModalProvider`/`useModal` (ModalContextProvider): context plus portal.
- */
-export declare function GetModalJSX(): {
+/** Low-level imperative JSX storage based on updateBy/renderBy. Prefer `ModalProvider`/`useModal` for app modals. */
+export declare function createModalElementStore(): {
     set(jsx: React.JSX.Element | null): void;
     JSX: React.JSX.Element | null;
     Render(): React.JSX.Element | null;
@@ -29,11 +26,8 @@ export declare function GetModalJSX(): {
     readonly arrJSX: (import("react/jsx-runtime").JSX.Element | null)[];
     RenderArr(): (import("react/jsx-runtime").JSX.Element | null)[];
 };
-/**
- * @deprecated Imperative JSX storage based on updateBy/renderBy.
- * Use `ModalProvider`/`useModal` (ModalContextProvider): context plus portal.
- */
-export declare function GetModalFuncJSX(): {
+/** Low-level imperative JSX storage based on updateBy/renderBy. Prefer `ModalProvider`/`useModal` for app modals. */
+export declare function createModalRenderStore(): {
     set(jsx: (() => React.JSX.Element | null) | null): void;
     JSX: (() => React.JSX.Element | null) | null;
     Render(): React.JSX.Element | null;

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

@@ -1,28 +1,28 @@
 import { jsx as _jsx_1 } from "react/jsx-runtime";
 import { renderBy, updateBy } from "../../../updateBy";
-import { InputPageModal } from "../Input";
+import { TextInputModal } from "../Input";
 function setModalTarget(target, jsx) {
     if (typeof target == "function")
         target(jsx);
     else
         target.replace(jsx);
 }
-export function inputModal({ setModalJSX, func, name, txt }) {
-    setModalTarget(setModalJSX, _jsx_1(InputPageModal, { callback: txt => {
+export function inputModal({ modal, func, name, txt }) {
+    setModalTarget(modal, _jsx_1(TextInputModal, { callback: txt => {
             func(txt);
-            setModalTarget(setModalJSX, null);
-        }, outClick: () => setModalTarget(setModalJSX, null), name: name ?? "name", txt: txt }));
+            setModalTarget(modal, null);
+        }, outClick: () => setModalTarget(modal, null), name: name ?? "name", txt: txt }));
 }
-export function confirmModal({ setModalJSX, func, password = "111" }) {
-    // Do not expose custom passwords in the hint; show the legacy default as before.
+export function confirmModal({ modal, func, password = "111" }) {
+    // Do not expose custom passwords in the hint; show only the default hint.
     const hint = password == "111" ? "password 111" : "password";
-    setModalTarget(setModalJSX, _jsx_1(InputPageModal, { callback: txt => {
+    setModalTarget(modal, _jsx_1(TextInputModal, { callback: txt => {
             if (txt == password)
                 func();
-            setModalTarget(setModalJSX, null);
-        }, outClick: () => setModalTarget(setModalJSX, null), name: hint }));
+            setModalTarget(modal, null);
+        }, outClick: () => setModalTarget(modal, null), name: hint }));
 }
-// Shared store for GetModalJSX/GetModalFuncJSX: identical logic, the only
+// Shared store for createModalElementStore/createModalRenderStore: identical logic, the only
 // difference is how a stored value turns into an element (renderItem)
 function createJsxStore(renderItem) {
     let _jsx = null;
@@ -65,17 +65,11 @@ function createJsxStore(renderItem) {
     };
     return data;
 }
-/**
- * @deprecated Imperative JSX storage based on updateBy/renderBy.
- * Use `ModalProvider`/`useModal` (ModalContextProvider): context plus portal.
- */
-export function GetModalJSX() {
+/** Low-level imperative JSX storage based on updateBy/renderBy. Prefer `ModalProvider`/`useModal` for app modals. */
+export function createModalElementStore() {
     return createJsxStore(jsx => jsx);
 }
-/**
- * @deprecated Imperative JSX storage based on updateBy/renderBy.
- * Use `ModalProvider`/`useModal` (ModalContextProvider): context plus portal.
- */
-export function GetModalFuncJSX() {
+/** Low-level imperative JSX storage based on updateBy/renderBy. Prefer `ModalProvider`/`useModal` for app modals. */
+export function createModalRenderStore() {
     return createJsxStore(f => f());
 }

package/lib/common/src/components/Modal/ModalContextProvider.d.ts

@@ -9,14 +9,8 @@ export type ModalApi = {
 export type ModalController = ((jsx: ReactNode | null) => void) & ModalApi;
 export type ModalProviderProps = {
     children: ReactNode;
-    /** Close on click outside the modal. Defaults to true for legacy behavior. */
     closeOnOutsideClick?: boolean;
-    /** Close on Escape. Defaults to true. */
     closeOnEscape?: boolean;
 };
 export declare const ModalProvider: ({ children, closeOnOutsideClick, closeOnEscape }: ModalProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useModal: () => ModalController;
-/** @deprecated Use `useModal()`; it is callable and also has show/open/close/set methods. */
-export declare const useModalOld: () => ModalController;
-/** @deprecated Use `useModal()` directly. */
-export declare function useModalApi(): ModalApi;

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

@@ -1,7 +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 { DivOutsideClick } from "../../hooks/useOutside";
+import { OutsideClickArea } from "../../hooks/useOutside";
 import { tokens } from "../../styles/tokens";
 const noopModal = Object.assign(() => { }, { show() { }, open() { }, close() { }, replace() { }, set() { } });
 const ModalContext = createContext(noopModal);
@@ -30,14 +30,7 @@ export const ModalProvider = ({ children, closeOnOutsideClick = true, closeOnEsc
                     position: 'fixed', inset: 0, zIndex: tokens.zIndex.modal,
                     display: 'flex', alignItems: 'center', justifyContent: 'center',
                     backgroundColor: 'rgba(0,0,0,0.5)'
-                }, children: _jsx(DivOutsideClick, { outsideClick: () => { if (closeOnOutsideClick)
+                }, children: _jsx(OutsideClickArea, { outsideClick: () => { if (closeOnOutsideClick)
                         setModal(null); }, status: true, children: modal }) }), document.body)] }));
 };
-// Callable for legacy code, controller-style for new code.
 export const useModal = () => useContext(ModalContext);
-/** @deprecated Use `useModal()`; it is callable and also has show/open/close/set methods. */
-export const useModalOld = () => useContext(ModalContext);
-/** @deprecated Use `useModal()` directly. */
-export function useModalApi() {
-    return useContext(ModalContext);
-}

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

@@ -1,9 +1,9 @@
 import { Params } from "wenay-common2";
-export declare function EditParams2<TParams extends Params.IParamsExpandableReadonly = Params.IParamsExpandableReadonly>({ onSave, params: paramsDef }: {
+export declare function ParamsEdit<TParams extends Params.IParamsExpandableReadonly = Params.IParamsExpandableReadonly>({ onSave, params: paramsDef }: {
     params: () => Promise<TParams>;
     onSave?: (params: TParams) => any;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function EditParams3<TParams extends Params.IParamsExpandableReadonly = Params.IParamsExpandableReadonly>({ onSave, params: paramsDef }: {
+export declare function ParamsArrayEdit<TParams extends Params.IParamsExpandableReadonly = Params.IParamsExpandableReadonly>({ onSave, params: paramsDef }: {
     params: () => Promise<TParams[]>;
     onSave?: (params: TParams[]) => any;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { ParametersReact } from "./ParametersEngine";
-export function EditParams2({ onSave, params: paramsDef }) {
+import { ParamsEditor } from "./ParamsEditor";
+export function ParamsEdit({ onSave, params: paramsDef }) {
     useEffect(() => {
         paramsDef().then(e => {
             setParamsD(e);
@@ -9,20 +9,20 @@ export function EditParams2({ onSave, params: paramsDef }) {
     }, []);
     const [paramsD, setParamsD] = useState(null);
     const params = useRef(null);
-    return _jsxs("div", { className: "maxSize", children: [paramsD && _jsx(ParametersReact, { params: paramsD, onChange: e => params.current = e }), onSave && _jsx("div", { className: "msTradeActive msTradeAlt", onClick: async () => {
+    return _jsxs("div", { className: "maxSize", children: [paramsD && _jsx(ParamsEditor, { params: paramsD, onChange: e => params.current = e }), onSave && _jsx("div", { className: "msTradeActive msTradeAlt", onClick: async () => {
                     const t = params.current || paramsD;
                     if (t)
                         onSave(t);
                 }, children: "save" })] });
 }
-export function EditParams3({ onSave, params: paramsDef }) {
+export function ParamsArrayEdit({ onSave, params: paramsDef }) {
     useEffect(() => {
         paramsDef().then(e => {
             setParams(e);
         });
     }, []);
     const [params, setParams] = useState(null);
-    return _jsxs("div", { className: "maxSize", children: [params && params.map((z, i) => _jsx(ParametersReact, { params: z, onChange: e => {
+    return _jsxs("div", { className: "maxSize", children: [params && params.map((z, i) => _jsx(ParamsEditor, { params: z, onChange: e => {
                     params[i] = e;
                     setParams(params);
                 } }, i)), onSave && _jsx("div", { className: "msTradeActive msTradeAlt", onClick: async () => {

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

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
-export declare function FButton(name: string | ReactElement): import("react/jsx-runtime").JSX.Element;
-export declare function FNameButton(type: boolean, name: string | ReactElement): import("react/jsx-runtime").JSX.Element;
-export declare function CParameter(props: {
+export declare function ParamLabelContent(name: string | ReactElement): import("react/jsx-runtime").JSX.Element;
+export declare function ParamToggleLabel(type: boolean, name: string | ReactElement): import("react/jsx-runtime").JSX.Element;
+export declare function ParamRow(props: {
     name: ReactElement | string;
     children?: React.ReactNode | readonly React.ReactNode[];
     style?: React.CSSProperties | undefined;

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

@@ -1,12 +1,12 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 // Button view
-export function FButton(name) {
+export function ParamLabelContent(name) {
     return _jsxs("div", { className: "", style: { width: "100%" }, children: [" ", name] });
 }
 // Arrow for the button
-export function FNameButton(type, name) { return FButton(_jsx("p", { className: "toPTextIndicator", children: (type ? "▼ " : "▶ ") + name })); }
-export function CParameter(props) {
+export function ParamToggleLabel(type, name) { return ParamLabelContent(_jsx("p", { className: "toPTextIndicator", children: (type ? "▼ " : "▶ ") + name })); }
+export function ParamRow(props) {
     const [hovered, setHovered] = React.useState(false); // Tracks mouse hover state
     return (_jsxs("div", { className: "toLine LeftMenuParameters toIndicatorMenuButton", style: { position: "relative" }, children: [_jsx("div", { className: "toLine", style: { width: "auto", ...props.style }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: props.name }), _jsx("div", { className: "toLine toRight", style: props.enabled === false ? { opacity: 0.5 } : {}, children: props.children }), hovered && props.commentary && props.commentary.length > 0 && (_jsx("div", { className: "commentary", style: {
                     marginTop: "5px",

package/lib/common/src/components/{ParametersEngine.d.ts → ParamsEditor.d.ts}

@@ -1,5 +1,5 @@
 import { Params } from "wenay-common2";
-export declare function ParametersReact<TParams extends Params.IParamsExpandableReadonly = Params.IParamsExpandableReadonly>(data: {
+export declare function ParamsEditor<TParams extends Params.IParamsExpandableReadonly = Params.IParamsExpandableReadonly>(data: {
     params: TParams;
     expandStatus?: boolean;
     expandStatusLvl?: number;

package/lib/common/src/components/{ParametersEngine.js → ParamsEditor.js}

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from "react";
 import { deepCloneMutable, isDate, TF, timeLocalToStr_yyyymmdd, timeLocalToStr_yyyymmdd_hhmm, timeLocalToStr_yyyymmdd_hhmmss, timeLocalToStr_yyyymmdd_hhmmss_ms } from "wenay-common2";
 import { setResizeableElement, removeResizeableElement } from "./MyResizeObserver";
-import { CParameter, FNameButton } from "./Parameters";
-import { SetAutoStepForElement } from "../utils";
+import { ParamRow, ParamToggleLabel } from "./Parameters";
+import { setAutoStepForElement } from "../utils";
 function timeToStr(time, step) {
     function getTimeStep(time) {
         return [TF.D1.msec, TF.M1.msec, TF.S1.msec, 1].find(period => time % period == 0);
@@ -137,7 +137,7 @@ function InputNumber(set, value, range) {
                     if (ref) {
                         _ref = ref;
                         ref.step = step + "";
-                        SetAutoStepForElement(ref, { minStep: range.step });
+                        setAutoStepForElement(ref, { minStep: range.step });
                     }
                 } })] });
 }
@@ -163,17 +163,17 @@ function InputListArray(set, values, range, rangeLabels) {
             return _jsx("option", { value: String(a), label: rangeLabels?.at(i) ?? String(a), children: a }, String(a));
         }) });
 }
-export function ParametersReact(data) {
+export function ParamsEditor(data) {
     // callbacks live in a ref: useMemo below intentionally freezes the element until
     // params identity changes, and would otherwise freeze a stale onChange/onExpand with it
     const callbacks = useRef({ onChange: data.onChange, onExpand: data.onExpand });
     callbacks.current = { onChange: data.onChange, onExpand: data.onExpand };
     const result = useMemo(() => {
-        return _jsx(ParametersBaseReact, { params: data.params, onChange: (p) => callbacks.current.onChange(p), onExpand: (p) => callbacks.current.onExpand?.(p), expandStatus: data.expandStatus, expandStatusLvl: data.expandStatusLvl });
+        return _jsx(ParamsEditorBase, { params: data.params, onChange: (p) => callbacks.current.onChange(p), onExpand: (p) => callbacks.current.onExpand?.(p), expandStatus: data.expandStatus, expandStatusLvl: data.expandStatusLvl });
     }, [data.params]);
     return result;
 }
-function ParametersBaseReact(data) {
+function ParamsEditorBase(data) {
     const [_, setUpdate] = useState(0);
     function Refresh() { setUpdate(e => ++e); }
     const styleColorDisable = "rgb(146,146,146)";
@@ -232,7 +232,7 @@ function ParametersBaseReact(data) {
                         obj[key] = data; // this branch only renders boolean/string params
                         onSetValue(data);
                     };
-                    return _jsx(CParameter, { name: key, enabled: parentEnabled, children: Param(set, param) }, key + "#" + typeof (param));
+                    return _jsx(ParamRow, { name: key, enabled: parentEnabled, children: Param(set, param) }, key + "#" + typeof (param));
                 }
             if (typeof (param) == "function") {
                 return null;
@@ -241,7 +241,7 @@ function ParametersBaseReact(data) {
                 if (param.hidden)
                     return null;
                 const { value, range, name = key, enabled } = param;
-                const nameButton = (type) => FNameButton(type, name);
+                const nameButton = (type) => ParamToggleLabel(type, name);
                 const nameT = _jsx("p", { className: "toPTextIndicator", children: name });
                 const set = (a) => {
                     const aa = param.value instanceof Date ? new Date(a) : a;
@@ -256,7 +256,7 @@ function ParametersBaseReact(data) {
                 const simpleParameter = (element) => {
                     if (!element)
                         return null;
-                    return _jsxs(CParameter, { name: nameT, enabled: parentEnabled && enabled != false, commentary: param.commentary, children: [element, enabled != null ?
+                    return _jsxs(ParamRow, { name: nameT, enabled: parentEnabled && enabled != false, commentary: param.commentary, children: [element, enabled != null ?
                                 CheckBox((flag) => {
                                     param.enabled = flag;
                                     onSetValue(flag);
@@ -320,7 +320,7 @@ function ParametersBaseReact(data) {
                                 array.splice(index, 1, data);
                                 set(array);
                             }
-                            const paramL = (hover) => _jsxs(CParameter, { name: _jsxs(_Fragment, { children: [hover && !param.constLength && onHoverElement, nameElement] }), commentary: param.commentary, children: [Param(onSet, itemVal, type, range, param.labels), param.elementsEnabled != null ?
+                            const paramL = (hover) => _jsxs(ParamRow, { name: _jsxs(_Fragment, { children: [hover && !param.constLength && onHoverElement, nameElement] }), commentary: param.commentary, children: [Param(onSet, itemVal, type, range, param.labels), param.elementsEnabled != null ?
                                         CheckBox((flag) => {
                                             if (!Array.isArray(param.elementsEnabled))
                                                 param.elementsEnabled = new Array(array.length).fill(param.elementsEnabled == true);

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

@@ -1,20 +1,20 @@
 import React from "react";
-export type tSettingsSection = {
+export type SettingsSection = {
     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;
+export declare function registerSettingsSection(s: SettingsSection): () => void;
 /** Current external sections (static props sections are not included). */
-export declare function getSettingsSections(): readonly tSettingsSection[];
+export declare function getSettingsSections(): readonly SettingsSection[];
 /** 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[];
+    sections?: SettingsSection[];
     defaultSection?: string;
     /** Section buttons: apps pass their own .chip / .chipActive; defaults are minimal library styles */
     sectionClassName?: string;