wenay-react2 1.0.36 → 1.0.38

package/README.md

@@ -4,11 +4,12 @@ Documentation index only.
 
 - Brief API guide: [doc/wenay-react2.md](doc/wenay-react2.md)
 - Detailed / rare API guide: [doc/wenay-react2-rare.md](doc/wenay-react2-rare.md)
+- Project functionality map: [doc/PROJECT_FUNCTIONALITY.md](doc/PROJECT_FUNCTIONALITY.md)
+- Example usage standards: [doc/EXAMPLE_USAGE.md](doc/EXAMPLE_USAGE.md)
 - wenay-react2 rename map: [doc/WENAY_REACT2_RENAMES.md](doc/WENAY_REACT2_RENAMES.md)
-- Pulled wenay-common2 brief guide: [doc/wenay-common2.md](doc/wenay-common2.md)
-- Pulled wenay-common2 detailed / rare guide: [doc/wenay-common2-rare.md](doc/wenay-common2-rare.md)
-- Pulled wenay-common2 rename map: [doc/NAMING_RENAMES.md](doc/NAMING_RENAMES.md)
 - Project rules for maintainers and AI agents: [doc/PROJECT_RULES.md](doc/PROJECT_RULES.md)
 - Recent version changes: [doc/changes/](doc/changes/)
 
-Feature-specific docs may also live next to their code, for example agGrid4 docs under `src/common/src/grid/agGrid4/`.
+`wenay-common2` is an external dependency. Read its current docs from the installed module/package when needed; keep this README focused on `wenay-react2` documentation.
+
+Feature-specific docs may also live next to their code, for example agGrid4 docs under `src/common/src/grid/agGrid4/`.

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

@@ -29,7 +29,7 @@ export const ModalProvider = ({ children, closeOnOutsideClick = true, closeOnEsc
     return (_jsxs(ModalContext.Provider, { value: modalApi, children: [children, modal && createPortal(_jsx("div", { style: {
                     position: 'fixed', inset: 0, zIndex: tokens.zIndex.modal,
                     display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    backgroundColor: 'rgba(0,0,0,0.5)'
+                    backgroundColor: 'var(--dlg-scrim, rgba(0, 0, 0, 0.5))'
                 }, children: _jsx(OutsideClickArea, { outsideClick: () => { if (closeOnOutsideClick)
                         setModal(null); }, status: true, children: modal }) }), document.body)] }));
 };

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

@@ -1,19 +1,29 @@
 import React from "react";
+export type SettingsSearchSource = React.ReactNode | readonly React.ReactNode[] | (() => React.ReactNode | readonly React.ReactNode[]);
 export type SettingsSection = {
     key: string;
     name: string;
     render: () => React.ReactNode;
+    /** Nested sections for the left settings tree. Flat sections remain roots. */
+    children?: SettingsSection[];
+    /** Attach this section under another section key, useful for registered external sections. */
+    parentKey?: string;
+    /** Extra searchable text for content that cannot be extracted from React children. */
+    searchText?: SettingsSearchSource;
+    /** Semantic aliases: commands, domain terms, translated labels, etc. */
+    keywords?: readonly 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: sections column on the left, active section content on the right.
+/** 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: {
-    trigger: React.ReactNode;
+    trigger?: React.ReactNode;
     sections?: SettingsSection[];
     defaultSection?: string;
     /** Section buttons: apps pass their own .chip / .chipActive; defaults are minimal library styles */

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

@@ -1,10 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { renderBy, updateBy } from "../../../updateBy";
+import { OutsideClickArea } from "../../hooks/useOutside";
+import { FloatingWindowBase } from "../Dnd/FloatingWindow";
+import { createSearchHistory } from "../../utils/searchHistory";
+import { memoryGetOrCreate, memoryMarkDirty } from "../../utils/memoryStore";
+const settingsDialogSize = { width: 820, height: 560 };
+const settingsDialogPosition = { x: -settingsDialogSize.width / 2, y: -settingsDialogSize.height / 2 };
+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 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.
  *  The returned function removes exactly this registration (a no-op if it was replaced). */
 export function registerSettingsSection(s) {
@@ -26,30 +35,406 @@ export function registerSettingsSection(s) {
 export function getSettingsSections() {
     return registry.list;
 }
-/** Centered settings dialog: sections column on the left, active section content on the right.
+function classNames(parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function clampSettingsNavWidth(value) {
+    return Math.max(settingsDialogNav.min, Math.min(settingsDialogNav.max, Math.round(value)));
+}
+function DefaultSettingsTrigger() {
+    return _jsx("span", { className: "wenayTb wenayDlgTriggerBar", title: "Open settings", "aria-hidden": "true", children: _jsx("span", { className: "wenayTbItem wenayDlgTriggerItem", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: [_jsx("circle", { cx: "3", cy: "7", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "7", cy: "7", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "11", cy: "7", r: "1.25", fill: "currentColor" })] }) }) });
+}
+function buildSettingsTree(sections) {
+    const roots = [];
+    const ordered = [];
+    const byKey = new Map();
+    const parentByKey = new Map();
+    function collect(section, nestedParentKey) {
+        if (byKey.has(section.key))
+            return;
+        const node = { section, children: [], depth: 0 };
+        byKey.set(section.key, node);
+        ordered.push(node);
+        parentByKey.set(section.key, section.parentKey ?? nestedParentKey);
+        section.children?.forEach(child => collect(child, section.key));
+    }
+    sections.forEach(section => collect(section));
+    ordered.forEach(node => {
+        const parentKey = parentByKey.get(node.section.key);
+        const parent = parentKey == null ? undefined : byKey.get(parentKey);
+        if (parent != null && parent != node) {
+            node.parent = parent;
+            parent.children.push(node);
+        }
+        else {
+            roots.push(node);
+        }
+    });
+    function assignDepth(nodes, depth) {
+        nodes.forEach(node => {
+            node.depth = depth;
+            assignDepth(node.children, depth + 1);
+        });
+    }
+    assignDepth(roots, 0);
+    return { roots, ordered, byKey };
+}
+function getTreeSignature(nodes) {
+    return nodes.map(node => `${node.section.key}:${node.parent?.section.key ?? ""}:${node.children.map(child => child.section.key).join(",")}`).join("|");
+}
+function getBranchKeys(nodes) {
+    return nodes.filter(node => node.children.length != 0).map(node => node.section.key);
+}
+function normalizeSearch(value) {
+    return value.toLocaleLowerCase().replace(/\s+/g, " ").trim();
+}
+const enKeyboard = "`qwertyuiop[]asdfghjkl;'zxcvbnm,./";
+const ruKeyboard = "ёйцукенгшщзхъфывапролджэячсмитьбю.";
+const ruToEnKeyboard = new Map(Array.from(ruKeyboard).map((char, i) => [char, enKeyboard[i]]));
+const enToRuKeyboard = new Map(Array.from(enKeyboard).map((char, i) => [char, ruKeyboard[i]]));
+function convertKeyboardLayout(value, map) {
+    return Array.from(value).map(char => map.get(char) ?? char).join("");
+}
+function uniqueSearchVariants(token) {
+    return Array.from(new Set([
+        token,
+        convertKeyboardLayout(token, ruToEnKeyboard),
+        convertKeyboardLayout(token, enToRuKeyboard),
+    ].filter(Boolean)));
+}
+function getSearchTerms(value) {
+    return normalizeSearch(value).split(" ").filter(Boolean).map(text => ({
+        variants: uniqueSearchVariants(text),
+    }));
+}
+function isIterableNode(value) {
+    return typeof value == "object" && value != null && Symbol.iterator in value;
+}
+function reactNodeText(node) {
+    if (node == null || typeof node == "boolean")
+        return "";
+    if (typeof node == "string" || typeof node == "number" || typeof node == "bigint")
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(reactNodeText).join(" ");
+    if (React.isValidElement(node)) {
+        const props = node.props;
+        return [props.title, props["aria-label"], props.label, props.children].map(reactNodeText).join(" ");
+    }
+    if (isIterableNode(node))
+        return Array.from(node).map(reactNodeText).join(" ");
+    return "";
+}
+function searchSourceText(source) {
+    const value = typeof source == "function" ? source() : source;
+    return reactNodeText(value);
+}
+function sectionSearchText(section) {
+    const parts = [section.key, section.name, ...(section.keywords ?? [])];
+    if (section.searchText != null)
+        parts.push(searchSourceText(section.searchText));
+    try {
+        parts.push(reactNodeText(section.render()));
+    }
+    catch {
+        // Search should not break the dialog if a consumer render throws outside its normal path.
+    }
+    return normalizeSearch(parts.join(" "));
+}
+function sectionMatches(section, terms) {
+    const text = sectionSearchText(section);
+    return terms.every(term => term.variants.some(variant => text.includes(variant)));
+}
+function getCurrentBranchKeys(node) {
+    const keys = new Set();
+    let current = node;
+    while (current != null) {
+        if (current.children.length != 0)
+            keys.add(current.section.key);
+        current = current.parent;
+    }
+    return keys;
+}
+function getLabelMatchRanges(label, terms) {
+    const lowerLabel = label.toLocaleLowerCase();
+    const ranges = [];
+    terms.forEach(term => {
+        const match = term.variants.reduce((best, variant) => {
+            const start = lowerLabel.indexOf(variant);
+            if (start == -1)
+                return best;
+            const range = { start, end: start + variant.length };
+            if (best == null || range.start < best.start || (range.start == best.start && range.end > best.end))
+                return range;
+            return best;
+        }, undefined);
+        if (match != null)
+            ranges.push(match);
+    });
+    ranges.sort((a, b) => a.start - b.start || b.end - a.end);
+    return ranges.reduce((acc, range) => {
+        const last = acc[acc.length - 1];
+        if (last == null || range.start > last.end)
+            acc.push({ ...range });
+        else if (range.end > last.end)
+            last.end = range.end;
+        return acc;
+    }, []);
+}
+function renderHighlightedLabel(label, terms) {
+    const ranges = getLabelMatchRanges(label, terms);
+    if (ranges.length == 0)
+        return label;
+    const parts = [];
+    let offset = 0;
+    ranges.forEach((range, i) => {
+        if (range.start > offset)
+            parts.push(label.slice(offset, range.start));
+        parts.push(_jsx("mark", { className: "wenayDlgTreeMark", children: label.slice(range.start, range.end) }, `${range.start}-${range.end}-${i}`));
+        offset = range.end;
+    });
+    if (offset < label.length)
+        parts.push(label.slice(offset));
+    return parts;
+}
+function filterSettingsTree(roots, terms) {
+    const visibleKeys = new Set();
+    const matchedKeys = new Set();
+    const expandedKeys = new Set();
+    function visit(node) {
+        const selfMatches = terms.length == 0 || sectionMatches(node.section, terms);
+        let childVisible = false;
+        node.children.forEach(child => {
+            if (visit(child))
+                childVisible = true;
+        });
+        const visible = terms.length == 0 || selfMatches || childVisible;
+        if (visible)
+            visibleKeys.add(node.section.key);
+        if (terms.length != 0 && selfMatches)
+            matchedKeys.add(node.section.key);
+        if (terms.length != 0 && childVisible)
+            expandedKeys.add(node.section.key);
+        return visible;
+    }
+    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) {
     const [open, setOpen] = useState(false);
     const [active, setActive] = useState(props.defaultSection);
+    const [search, setSearch] = useState("");
+    const [expanded, setExpanded] = useState(() => new Set());
+    const [historyOpen, setHistoryOpen] = useState(false);
+    const [navWidth, setNavWidth] = useState(() => clampSettingsNavWidth(settingsDialogLayout.navWidth));
+    const [navResizing, setNavResizing] = useState(false);
+    const searchInputRef = useRef(null);
+    const navResizeRef = useRef(null);
+    const navWidthRef = useRef(navWidth);
     updateBy(registry);
+    const searchHistory = settingsSearchHistory.use();
+    const sections = [...(props.sections ?? []), ...registry.list];
+    const tree = buildSettingsTree(sections);
+    const treeSignature = getTreeSignature(tree.ordered);
+    const branchKeys = getBranchKeys(tree.ordered);
+    const searchTerms = getSearchTerms(search);
+    const filtered = filterSettingsTree(tree.roots, searchTerms);
+    const activeNode = active == null ? undefined : tree.byKey.get(active);
+    const defaultNode = props.defaultSection == null ? undefined : tree.byKey.get(props.defaultSection);
+    const firstVisibleNode = tree.ordered.find(node => filtered.visibleKeys.has(node.section.key));
+    const firstMatchedNode = tree.ordered.find(node => filtered.matchedKeys.has(node.section.key));
+    const fallbackNode = defaultNode ?? tree.ordered[0];
+    const currentNode = searchTerms.length != 0
+        ? (activeNode != null && filtered.matchedKeys.has(activeNode.section.key) ? activeNode : firstMatchedNode ?? firstVisibleNode ?? activeNode ?? fallbackNode)
+        : activeNode ?? fallbackNode;
+    const current = currentNode?.section;
+    const base = props.sectionClassName ?? "wenayDlgSection";
+    const activeCls = props.sectionActiveClassName ?? "wenayDlgSectionActive";
+    const branchOpenCount = branchKeys.filter(key => expanded.has(key)).length;
+    const treeToolsVisible = branchKeys.length > 1;
+    const treeToolState = branchOpenCount == 0 ? "collapsed" : branchOpenCount == branchKeys.length ? "expanded" : "branch";
+    const treeToolTitle = treeToolState == "expanded" ? "Show current branch only" : treeToolState == "branch" ? "Collapse tree" : "Expand tree";
+    useEffect(() => {
+        navWidthRef.current = navWidth;
+    }, [navWidth]);
+    useEffect(() => {
+        if (!open)
+            return;
+        setExpanded(new Set(branchKeys));
+    }, [open, treeSignature]);
+    useEffect(() => {
+        if (!navResizing)
+            return;
+        const onPointerMove = (e) => {
+            const drag = navResizeRef.current;
+            if (drag == null)
+                return;
+            setNavWidth(clampSettingsNavWidth(drag.startWidth + e.clientX - drag.startX));
+        };
+        const onPointerUp = () => {
+            commitNavWidth(navWidthRef.current);
+            navResizeRef.current = null;
+            setNavResizing(false);
+        };
+        document.addEventListener("pointermove", onPointerMove);
+        document.addEventListener("pointerup", onPointerUp);
+        return () => {
+            document.removeEventListener("pointermove", onPointerMove);
+            document.removeEventListener("pointerup", onPointerUp);
+        };
+    }, [navResizing]);
     useEffect(() => {
         if (!open)
             return;
         const onKeyDown = (e) => {
-            if (e.key == 'Escape')
-                setOpen(false);
+            if (e.key != "Escape" || e.isComposing)
+                return;
+            if (search != "") {
+                e.preventDefault();
+                setSearch("");
+                searchInputRef.current?.focus();
+                return;
+            }
+            setOpen(false);
         };
-        document.addEventListener('keydown', onKeyDown);
-        return () => document.removeEventListener('keydown', onKeyDown);
-    }, [open]);
-    const sections = [...(props.sections ?? []), ...registry.list];
-    // fall back to the first section when active was never set or its section unmounted
-    const current = sections.find(s => s.key == active) ?? sections[0];
-    const base = props.sectionClassName ?? "wenayDlgSection";
-    const activeCls = props.sectionActiveClassName ?? "wenayDlgSectionActive";
-    return _jsxs(_Fragment, { children: [_jsx("span", { onClick: () => setOpen(true), style: { display: "inline-block", cursor: "pointer" }, children: props.trigger }), open && createPortal(_jsx("div", { className: "wenayDlgScrim", onClick: e => {
-                    if (e.target == e.currentTarget)
-                        setOpen(false);
-                }, children: _jsxs("div", { className: "wenayDlg", children: [_jsx("div", { className: "wenayDlgNav", children: sections.map(s => (_jsx("div", { className: s.key == current?.key ? `${base} ${activeCls}` : base, onClick: () => setActive(s.key), children: s.name }, s.key))) }), _jsx("div", { className: "wenayDlgContent", children: current?.render() }), _jsx("div", { className: "wenayCloseBtn wenayDlgClose", title: "Close", onClick: () => setOpen(false), children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2 2 L10 10 M10 2 L2 10", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) })] }) }), document.body)] });
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [open, search]);
+    function openDialog() {
+        setSearch("");
+        setHistoryOpen(false);
+        setOpen(true);
+    }
+    function onTriggerKeyDown(e) {
+        if (e.key != "Enter" && e.key != " ")
+            return;
+        e.preventDefault();
+        openDialog();
+    }
+    function toggleExpanded(key) {
+        setExpanded(prev => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }
+    function expandAll() {
+        setExpanded(new Set(branchKeys));
+    }
+    function collapseAll() {
+        setExpanded(new Set());
+    }
+    function collapseOutsideCurrent() {
+        setExpanded(getCurrentBranchKeys(currentNode));
+    }
+    function commitSearch(value = search) {
+        settingsSearchHistory.add(value);
+        setHistoryOpen(false);
+    }
+    function commitNavWidth(value) {
+        const next = clampSettingsNavWidth(value);
+        settingsDialogLayout.navWidth = next;
+        setNavWidth(next);
+        renderBy(settingsDialogLayout);
+        memoryMarkDirty("SettingsDialog.layout");
+    }
+    function beginNavResize(e) {
+        e.preventDefault();
+        navResizeRef.current = { startX: e.clientX, startWidth: navWidth };
+        setHistoryOpen(false);
+        setNavResizing(true);
+    }
+    function onNavResizeKeyDown(e) {
+        if (e.key == "ArrowLeft") {
+            e.preventDefault();
+            commitNavWidth(navWidth - 16);
+        }
+        else if (e.key == "ArrowRight") {
+            e.preventDefault();
+            commitNavWidth(navWidth + 16);
+        }
+        else if (e.key == "Home") {
+            e.preventDefault();
+            commitNavWidth(settingsDialogNav.min);
+        }
+        else if (e.key == "End") {
+            e.preventDefault();
+            commitNavWidth(settingsDialogNav.max);
+        }
+        else if (e.key == "Enter" || e.key == " ") {
+            e.preventDefault();
+            commitNavWidth(settingsDialogNav.def);
+        }
+    }
+    function useHistoryItem(value) {
+        setSearch(value);
+        settingsSearchHistory.add(value);
+        setHistoryOpen(false);
+        searchInputRef.current?.focus();
+    }
+    function cycleTreeTool() {
+        if (treeToolState == "expanded")
+            collapseOutsideCurrent();
+        else if (treeToolState == "branch")
+            collapseAll();
+        else
+            expandAll();
+    }
+    function renderTreeNode(node) {
+        if (!filtered.visibleKeys.has(node.section.key))
+            return null;
+        const key = node.section.key;
+        const hasChildren = node.children.length != 0;
+        const isOpen = expanded.has(key) || (searchTerms.length != 0 && filtered.expandedKeys.has(key));
+        const isActive = key == current?.key;
+        const rowClass = classNames(["wenayDlgTreeRow", base, isActive && activeCls]);
+        function onRowKeyDown(e) {
+            if (e.key == "Enter" || e.key == " ") {
+                e.preventDefault();
+                setActive(key);
+            }
+            if (e.key == "ArrowRight" && hasChildren && !isOpen) {
+                e.preventDefault();
+                toggleExpanded(key);
+            }
+            if (e.key == "ArrowLeft" && hasChildren && isOpen) {
+                e.preventDefault();
+                toggleExpanded(key);
+            }
+        }
+        return _jsxs(React.Fragment, { children: [_jsxs("div", { role: "treeitem", "aria-level": node.depth + 1, "aria-expanded": hasChildren ? isOpen : undefined, "aria-selected": isActive, tabIndex: 0, className: rowClass, style: { paddingLeft: 6 + node.depth * 14 }, onClick: () => setActive(key), onKeyDown: onRowKeyDown, children: [_jsx("button", { type: "button", className: classNames(["wenayDlgTreeToggle", !hasChildren && "wenayDlgTreeToggleEmpty", isOpen && "wenayDlgTreeToggleOpen"]), disabled: !hasChildren, "aria-label": isOpen ? "Collapse" : "Expand", onClick: e => {
+                                e.stopPropagation();
+                                if (hasChildren)
+                                    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 => {
+                                                                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: () => {
+                                                                        settingsSearchHistory.clear();
+                                                                        setHistoryOpen(false);
+                                                                        searchInputRef.current?.focus();
+                                                                    }, 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)] });
 }

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

@@ -42,10 +42,11 @@ export type UiListConfig = {
         [key: string]: boolean;
     };
 };
+export type ToolbarSourceMode = 'orderVisible' | 'order';
 /** An external owner of order/visibility that a Toolbar can run on instead of
  *  its own store - e.g. columnState's listSource: the SAME config the grid
  *  syncs with, so dragging a column in the grid reorders the toolbar and
- *  vice versa. Density and the gear flag stay toolbar-local (persisted under
+ *  vice versa. Density and the gear/reset flags stay toolbar-local (persisted under
  *  the toolbar's own key). useConfig must be a React hook (subscription). */
 export type UiListSource = {
     useConfig: () => UiListConfig;
@@ -87,16 +88,29 @@ export declare function createToolbar(opts: {
         title?: string;
         icon?: React.ReactNode;
     };
+    /** reset button face. The reset feature exists by default, but the bar
+     *  button is hidden until Settings/showReset enables it; pass false to
+     *  remove the feature. */
+    resetItem?: false | {
+        title?: string;
+        icon?: React.ReactNode;
+        defaultVisible?: boolean;
+    };
     /** external owner of order/visibility (columnState.api.listSource etc.):
      *  the toolbar becomes a VIEW over that config - Bar/Settings edit it, and
      *  outside changes (a column dragged in the grid) reorder the toolbar.
-     *  Item keys should match the source's keys 1:1. Density and the gear flag
+     *  Item keys should match the source's keys 1:1. Density and the gear/reset flags
      *  remain in the toolbar's own store under `key`. Default: own store. */
     source?: UiListSource;
+    /** Default 'orderVisible': source owns both item order and item visibility.
+     *  'order': source owns only the relative order of source keys; item membership,
+     *  density, pseudo-controls, and extra non-source item positions stay local. */
+    sourceMode?: ToolbarSourceMode;
 }): {
     Bar: (p?: {
         className?: string;
         settings?: boolean;
+        reset?: boolean;
         popAlign?: "left" | "right";
     }) => import("react/jsx-runtime").JSX.Element;
     Settings: (p?: {
@@ -112,6 +126,11 @@ export declare function createToolbar(opts: {
         }[];
         getConfig: () => ToolbarConfig;
         setConfig: (next: ToolbarConfig) => void;
+        setOrder: (order: string[]) => void;
+        show: (key: string, on: boolean) => void;
+        setDensity: (density: string) => void;
+        showSettings: (on: boolean) => void;
+        showReset: (on: boolean) => void;
         reset: () => void;
         onChange: import("wenay-common2").ListenApi<[ToolbarConfig]>;
     };