wenay-react2 1.0.38 → 1.0.40

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, 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 { ParamRow, ParamToggleLabel } from "./Parameters";
@@ -163,6 +163,44 @@ function InputListArray(set, values, range, rangeLabels) {
             return _jsx("option", { value: String(a), label: rangeLabels?.at(i) ?? String(a), children: a }, String(a));
         }) });
 }
+export function useParamsEditorController({ params, onChange, onExpand }) {
+    const [, setUpdate] = useState(0);
+    const cloned = useMemo(() => deepCloneMutable(params), [params]);
+    const paramsRef = useRef(cloned);
+    if (paramsRef.current !== cloned)
+        paramsRef.current = cloned;
+    const callbacks = useRef({ onChange, onExpand });
+    callbacks.current = { onChange, onExpand };
+    const timeoutId = useRef(null);
+    useEffect(() => () => {
+        if (timeoutId.current != null)
+            clearTimeout(timeoutId.current);
+    }, []);
+    const refresh = useCallback(() => {
+        setUpdate(e => e + 1);
+    }, []);
+    const notifyChange = useCallback(() => {
+        callbacks.current.onChange(paramsRef.current);
+    }, []);
+    const notifyChangeDelayed = useCallback(() => {
+        if (timeoutId.current != null)
+            clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(() => {
+            notifyChange();
+        }, 200);
+    }, [notifyChange]);
+    const notifyExpand = useCallback(() => {
+        callbacks.current.onExpand?.(paramsRef.current);
+    }, []);
+    return {
+        paramsRef,
+        params: paramsRef.current,
+        refresh,
+        notifyChange,
+        notifyChangeDelayed,
+        notifyExpand,
+    };
+}
 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
@@ -174,26 +212,15 @@ export function ParamsEditor(data) {
     return result;
 }
 function ParamsEditorBase(data) {
-    const [_, setUpdate] = useState(0);
-    function Refresh() { setUpdate(e => ++e); }
+    const controller = useParamsEditorController(data);
+    const myParams = controller.paramsRef;
+    function Refresh() { controller.refresh(); }
     const styleColorDisable = "rgb(146,146,146)";
-    const p = useMemo(() => deepCloneMutable(data.params), [data.params]);
-    const myParams = useRef(p);
-    // sync during render: the effect+Refresh variant committed a frame of stale params first
-    if (myParams.current !== p)
-        myParams.current = p;
-    const timeoutId = useRef(null);
-    useEffect(() => () => { if (timeoutId.current != null)
-        clearTimeout(timeoutId.current); }, []);
     function refreshIndicator() {
-        data.onChange(myParams.current);
+        controller.notifyChange();
     }
     function refreshIndicatorDelayed() {
-        if (timeoutId.current != null)
-            clearTimeout(timeoutId.current);
-        timeoutId.current = setTimeout(() => {
-            refreshIndicator();
-        }, 200);
+        controller.notifyChangeDelayed();
     }
     function Param(//<T extends boolean|number|string|const_Date>(
     set, val, type, range, labels) {
@@ -218,7 +245,7 @@ function ParamsEditorBase(data) {
                 refreshIndicator(); // process without delay
     }
     function onExpandA(param, flag) {
-        data.onExpand?.(myParams.current);
+        controller.notifyExpand();
     }
     function ListParams(obj, parentEnabled = true, expandLevel = 0) {
         return Object.entries(obj).map(([key, param]) => {

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

@@ -13,20 +13,82 @@ export type SettingsSection = {
     /** Semantic aliases: commands, domain terms, translated labels, etc. */
     keywords?: readonly string[];
 };
+type SettingsTreeNode = {
+    section: SettingsSection;
+    children: SettingsTreeNode[];
+    parent?: SettingsTreeNode;
+    depth: number;
+};
+type SettingsTree = {
+    roots: SettingsTreeNode[];
+    ordered: SettingsTreeNode[];
+    byKey: Map<string, SettingsTreeNode>;
+};
+type SettingsTreeFilter = {
+    visibleKeys: Set<string>;
+    matchedKeys: Set<string>;
+    expandedKeys: Set<string>;
+};
+type SettingsSearchTerm = {
+    variants: string[];
+};
 /** 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: SettingsSection): () => void;
 /** Current external sections (static props sections are not included). */
 export declare function getSettingsSections(): readonly SettingsSection[];
-/** Centered settings dialog with a searchable JetBrains-style settings tree on the left.
- *  Sections = props.sections (first) + everything from registerSettingsSection.
- *  Flat {key, name, render} sections remain valid; use children/parentKey for hierarchy.
- *  Look is themed via --dlg-* CSS variables (dark defaults), same contract as --wnd-*. */
-export declare function SettingsDialog(props: {
+export type SettingsDialogProps = {
     trigger?: React.ReactNode;
     sections?: SettingsSection[];
     defaultSection?: string;
     /** Section buttons: apps pass their own .chip / .chipActive; defaults are minimal library styles */
     sectionClassName?: string;
     sectionActiveClassName?: string;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export type SettingsDialogTreeToolState = "collapsed" | "expanded" | "branch";
+export type SettingsDialogController = {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    active?: string;
+    setActive: React.Dispatch<React.SetStateAction<string | undefined>>;
+    search: string;
+    setSearch: React.Dispatch<React.SetStateAction<string>>;
+    expanded: Set<string>;
+    historyOpen: boolean;
+    setHistoryOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    navWidth: number;
+    navResizing: boolean;
+    searchInputRef: React.RefObject<HTMLInputElement | null>;
+    searchBoxRef: React.RefObject<HTMLDivElement | null>;
+    tree: SettingsTree;
+    filtered: SettingsTreeFilter;
+    current?: SettingsSection;
+    currentNode?: SettingsTreeNode;
+    firstVisibleNode?: SettingsTreeNode;
+    searchTerms: SettingsSearchTerm[];
+    searchHistory: readonly string[];
+    base: string;
+    activeCls: string;
+    treeToolsVisible: boolean;
+    treeToolState: SettingsDialogTreeToolState;
+    treeToolTitle: string;
+    openDialog(): void;
+    closeDialog(): void;
+    onTriggerKeyDown(e: React.KeyboardEvent<HTMLSpanElement>): void;
+    toggleExpanded(key: string): void;
+    commitSearch(value?: string): void;
+    useHistoryItem(value: string): void;
+    clearHistory(): void;
+    commitNavWidth(value: number): void;
+    beginNavResize(e: React.PointerEvent<HTMLDivElement>): void;
+    onNavResizeKeyDown(e: React.KeyboardEvent<HTMLDivElement>): void;
+    closeHistoryWhenSearchFocusLeaves(e: React.FocusEvent<HTMLDivElement>): void;
+    cycleTreeTool(): void;
+};
+export declare function useSettingsDialogController(props: SettingsDialogProps): SettingsDialogController;
+/** Centered settings dialog with a searchable JetBrains-style settings tree on the left.
+ *  Sections = props.sections (first) + everything from registerSettingsSection.
+ *  Flat {key, name, render} sections remain valid; use children/parentKey for hierarchy.
+ *  Look is themed via --dlg-* CSS variables (dark defaults), same contract as --wnd-*. */
+export declare function SettingsDialog(props: SettingsDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,7 +1,7 @@
 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 { renderBy, updateBy } from "../../../updateBy";
+import { createUpdateApi, renderBy } from "../../../updateBy";
 import { OutsideClickArea } from "../../hooks/useOutside";
 import { FloatingWindowBase } from "../Dnd/FloatingWindow";
 import { createSearchHistory } from "../../utils/searchHistory";
@@ -12,6 +12,7 @@ const settingsDialogNav = { min: 160, def: 220, max: 360 };
 // Module singleton (closure + updateBy subscription, no React context): any module
 // registers a section on mount and removes it on unmount; the dialog re-renders on changes.
 const registry = { list: [] };
+const registryApi = createUpdateApi(registry);
 const settingsSearchHistory = createSearchHistory({ key: "SettingsDialog.searchHistory", max: 8 });
 const settingsDialogLayout = memoryGetOrCreate("SettingsDialog.layout", { navWidth: settingsDialogNav.def });
 /** Register an external section. Re-register with the same key replaces the previous one.
@@ -22,12 +23,12 @@ export function registerSettingsSection(s) {
         registry.list.push(s);
     else
         registry.list.splice(i, 1, s);
-    renderBy(registry);
+    registryApi.render();
     return () => {
         const j = registry.list.indexOf(s);
         if (j != -1) {
             registry.list.splice(j, 1);
-            renderBy(registry);
+            registryApi.render();
         }
     };
 }
@@ -220,11 +221,7 @@ function filterSettingsTree(roots, terms) {
     roots.forEach(visit);
     return { visibleKeys, matchedKeys, expandedKeys };
 }
-/** Centered settings dialog with a searchable JetBrains-style settings tree on the left.
- *  Sections = props.sections (first) + everything from registerSettingsSection.
- *  Flat {key, name, render} sections remain valid; use children/parentKey for hierarchy.
- *  Look is themed via --dlg-* CSS variables (dark defaults), same contract as --wnd-*. */
-export function SettingsDialog(props) {
+export function useSettingsDialogController(props) {
     const [open, setOpen] = useState(false);
     const [active, setActive] = useState(props.defaultSection);
     const [search, setSearch] = useState("");
@@ -233,9 +230,10 @@ export function SettingsDialog(props) {
     const [navWidth, setNavWidth] = useState(() => clampSettingsNavWidth(settingsDialogLayout.navWidth));
     const [navResizing, setNavResizing] = useState(false);
     const searchInputRef = useRef(null);
+    const searchBoxRef = useRef(null);
     const navResizeRef = useRef(null);
     const navWidthRef = useRef(navWidth);
-    updateBy(registry);
+    registryApi.use();
     const searchHistory = settingsSearchHistory.use();
     const sections = [...(props.sections ?? []), ...registry.list];
     const tree = buildSettingsTree(sections);
@@ -309,6 +307,9 @@ export function SettingsDialog(props) {
         setHistoryOpen(false);
         setOpen(true);
     }
+    function closeDialog() {
+        setOpen(false);
+    }
     function onTriggerKeyDown(e) {
         if (e.key != "Enter" && e.key != " ")
             return;
@@ -379,6 +380,21 @@ export function SettingsDialog(props) {
         setHistoryOpen(false);
         searchInputRef.current?.focus();
     }
+    function clearHistory() {
+        settingsSearchHistory.clear();
+        setHistoryOpen(false);
+        searchInputRef.current?.focus();
+    }
+    function closeHistoryWhenSearchFocusLeaves(e) {
+        const next = e.relatedTarget;
+        if (next && e.currentTarget.contains(next))
+            return;
+        window.setTimeout(() => {
+            const box = searchBoxRef.current;
+            if (box == null || !box.contains(document.activeElement))
+                setHistoryOpen(false);
+        }, 0);
+    }
     function cycleTreeTool() {
         if (treeToolState == "expanded")
             collapseOutsideCurrent();
@@ -387,6 +403,52 @@ export function SettingsDialog(props) {
         else
             expandAll();
     }
+    return {
+        open,
+        setOpen,
+        active,
+        setActive,
+        search,
+        setSearch,
+        expanded,
+        historyOpen,
+        setHistoryOpen,
+        navWidth,
+        navResizing,
+        searchInputRef,
+        searchBoxRef,
+        tree,
+        filtered,
+        current,
+        currentNode,
+        firstVisibleNode,
+        searchTerms,
+        searchHistory,
+        base,
+        activeCls,
+        treeToolsVisible,
+        treeToolState,
+        treeToolTitle,
+        openDialog,
+        closeDialog,
+        onTriggerKeyDown,
+        toggleExpanded,
+        commitSearch,
+        useHistoryItem,
+        clearHistory,
+        commitNavWidth,
+        beginNavResize,
+        onNavResizeKeyDown,
+        closeHistoryWhenSearchFocusLeaves,
+        cycleTreeTool,
+    };
+}
+/** Centered settings dialog with a searchable JetBrains-style settings tree on the left.
+ *  Sections = props.sections (first) + everything from registerSettingsSection.
+ *  Flat {key, name, render} sections remain valid; use children/parentKey for hierarchy.
+ *  Look is themed via --dlg-* CSS variables (dark defaults), same contract as --wnd-*. */
+export function SettingsDialog(props) {
+    const { open, setOpen, setActive, search, setSearch, expanded, historyOpen, setHistoryOpen, navWidth, navResizing, searchInputRef, searchBoxRef, tree, filtered, current, firstVisibleNode, searchTerms, searchHistory, base, activeCls, treeToolsVisible, treeToolState, treeToolTitle, openDialog, onTriggerKeyDown, toggleExpanded, commitSearch, useHistoryItem, clearHistory, commitNavWidth, beginNavResize, onNavResizeKeyDown, closeHistoryWhenSearchFocusLeaves, cycleTreeTool, } = useSettingsDialogController(props);
     function renderTreeNode(node) {
         if (!filtered.visibleKeys.has(node.section.key))
             return null;
@@ -415,7 +477,7 @@ 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", { className: "wenayDlgSearchBox", children: [_jsx("input", { ref: searchInputRef, className: "wenayDlgSearch", value: search, placeholder: "Search", "aria-label": "Search settings", onFocus: () => setHistoryOpen(searchHistory.length != 0), onChange: e => {
+    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 => {
@@ -433,8 +495,6 @@ export function SettingsDialog(props) {
                                                                 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: () => {
-                                                                        settingsSearchHistory.clear();
-                                                                        setHistoryOpen(false);
-                                                                        searchInputRef.current?.focus();
+                                                                        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)] });
 }