wenay-react2 1.0.39 → 1.0.41

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("");
@@ -236,7 +233,7 @@ export function SettingsDialog(props) {
     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);
@@ -310,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;
@@ -380,6 +380,11 @@ 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))
@@ -398,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;
@@ -444,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)] });
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { listen as createListen } from 'wenay-common2';
-import { renderBy, updateBy } from '../../../updateBy';
+import { createUpdateApi } from '../../../updateBy';
 import { memoryGetOrCreate, memoryMarkDirty } from '../../utils/memoryStore';
 import { OutsideClickArea } from '../../hooks/useOutside';
 import { useReorder } from '../../hooks/useReorder';
@@ -12,6 +12,7 @@ const densities = { list: [
         { key: 'icon', name: 'Icons', renderItem: itemIconOnly },
         { key: 'label', name: 'Icons + labels' },
     ] };
+const densitiesApi = createUpdateApi(densities);
 /** Icon with a text fallback: no glyph = the first letters of short/title
  *  (an "PR"-style pseudo-icon), so icon densities work for icon-less items. */
 export function toolbarItemIcon(item) {
@@ -30,12 +31,12 @@ export function registerToolbarDensity(d) {
         densities.list.push(d);
     else
         densities.list.splice(i, 1, d);
-    renderBy(densities);
+    densitiesApi.render();
     return function offToolbarDensity() {
         const j = densities.list.indexOf(d);
         if (j != -1) {
             densities.list.splice(j, 1);
-            renderBy(densities);
+            densitiesApi.render();
         }
     };
 }
@@ -55,6 +56,49 @@ function itemContent(item, densityKey) {
  *  order (the gear always sits at the bar edge), but toggleable like an item. */
 const SETTINGS_KEY = '__settings';
 const RESET_KEY = '__reset';
+function useToolbarFlip(layoutKey) {
+    const itemRefs = useRef(new Map());
+    const prevRects = useRef(new Map());
+    const rafs = useRef([]);
+    useLayoutEffect(() => {
+        const prev = prevRects.current;
+        const next = new Map();
+        rafs.current.forEach(cancelAnimationFrame);
+        rafs.current = [];
+        itemRefs.current.forEach((node, key) => {
+            const rect = node.getBoundingClientRect();
+            next.set(key, { left: rect.left, top: rect.top });
+            const old = prev.get(key);
+            if (old == null)
+                return;
+            const dx = old.left - rect.left;
+            const dy = old.top - rect.top;
+            if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)
+                return;
+            node.style.transition = 'none';
+            node.style.transform = `translate(${dx}px, ${dy}px)`;
+            node.getBoundingClientRect();
+            const raf = requestAnimationFrame(() => {
+                node.style.transition = 'transform 180ms ease';
+                node.style.transform = '';
+            });
+            rafs.current.push(raf);
+        });
+        prevRects.current = next;
+        return () => {
+            rafs.current.forEach(cancelAnimationFrame);
+            rafs.current = [];
+        };
+    }, [layoutKey]);
+    return function bind(key) {
+        return (node) => {
+            if (node)
+                itemRefs.current.set(key, node);
+            else
+                itemRefs.current.delete(key);
+        };
+    };
+}
 export function createToolbar(opts) {
     const resetDefaultVisible = () => opts.resetItem !== false && opts.resetItem?.defaultVisible === true;
     const defConfig = () => ({
@@ -63,6 +107,7 @@ export function createToolbar(opts) {
         density: opts.def?.density ?? densities.list[0].key,
     });
     const st = memoryGetOrCreate(opts.key, defConfig());
+    const stApi = createUpdateApi(st);
     const [emitChange, onChange] = createListen();
     // ext is fixed for the controller's lifetime, so hook call order inside
     // useConfig/Bar/Settings never changes for a given toolbar instance
@@ -137,7 +182,7 @@ export function createToolbar(opts) {
                 [RESET_KEY]: metaVisible(next, RESET_KEY, resetDefaultVisible()),
             };
             st.density = next.density;
-            renderBy(st);
+            stApi.render();
             memoryMarkDirty(opts.key);
             ext.setConfig({ order: next.order.slice(), visible });
             // the source's own onChange already re-emitted; emit only when it can't
@@ -153,7 +198,7 @@ export function createToolbar(opts) {
             st.order = next.order.slice();
             st.visible = { ...next.visible };
             st.density = next.density;
-            renderBy(st);
+            stApi.render();
             memoryMarkDirty(opts.key);
             const orderChanged = !sameOrder(curSourceOrder, nextSourceOrder);
             if (orderChanged)
@@ -168,7 +213,7 @@ export function createToolbar(opts) {
             st.order = next.order.slice();
             st.visible = { ...next.visible };
             st.density = next.density;
-            renderBy(st);
+            stApi.render();
             memoryMarkDirty(opts.key);
             emitChange(normalize());
         }
@@ -176,7 +221,7 @@ export function createToolbar(opts) {
     const getConfig = () => normalize();
     /** subscription to everything the toolbar renders from (hook) */
     function useSubscribe() {
-        updateBy(st);
+        stApi.use();
         ext?.useConfig(); // ext is per-instance constant - hook order is stable
     }
     function useConfig() {
@@ -191,7 +236,7 @@ export function createToolbar(opts) {
      *  someone else's nodes.) */
     function useItems() {
         useSubscribe();
-        updateBy(densities);
+        densitiesApi.use();
         const cfg = normalize();
         const byKey = new Map(opts.items.map(i => [i.key, i]));
         return cfg.order
@@ -238,18 +283,18 @@ export function createToolbar(opts) {
      *  the popover sticks to - 'right' (default, for bars in a top-right corner)
      *  or 'left'. */
     function Bar(p = {}) {
-        useSubscribe();
-        updateBy(densities);
+        const items = useItems();
         const cfg = normalize();
         const [open, setOpen] = useState(false);
-        const byKey = new Map(opts.items.map(i => [i.key, i]));
         const resetOn = opts.resetItem !== false && (p.reset ?? p.settings ?? false) && cfg.visible[RESET_KEY] != false;
-        return _jsxs("div", { className: p.className ?? 'wenayTb', children: [cfg.order.map(k => {
-                    const it = byKey.get(k);
-                    if (!it || cfg.visible[k] == false)
-                        return null;
-                    return _jsx("div", { className: 'wenayTbItem', title: cfg.density == 'icon' ? it.title : undefined, onClick: it.onClick, children: itemContent(it, cfg.density) }, k);
-                }), resetOn && _jsx("div", { className: 'wenayTbItem', title: resetTitle(), onClick: () => reset(), children: resetIcon() }), p.settings && cfg.visible[SETTINGS_KEY] != false && _jsxs(OutsideClickArea, { className: 'wenayTbGear', status: open, outsideClick: () => setOpen(false), children: [_jsx("div", { className: 'wenayTbItem', title: settingsTitle(), onClick: () => setOpen(v => !v), children: settingsIcon() }), open && _jsx("div", { className: p.popAlign == 'left' ? 'wenayTbPop wenayTbPopLeft' : 'wenayTbPop', children: _jsx(Settings, {}) })] })] });
+        const settingsOn = !!p.settings && cfg.visible[SETTINGS_KEY] != false;
+        const layoutKey = [
+            ...items.map(x => `${x.item.key}:${x.density}`),
+            resetOn ? `${RESET_KEY}:on` : '',
+            settingsOn ? `${SETTINGS_KEY}:on` : '',
+        ].join('|');
+        const bindFlip = useToolbarFlip(layoutKey);
+        return _jsxs("div", { className: p.className ?? 'wenayTb', children: [items.map(x => _jsx("div", { ref: bindFlip(x.item.key), className: 'wenayTbItem', title: x.density == 'icon' ? x.item.title : undefined, onClick: x.item.onClick, children: x.content }, x.item.key)), resetOn && _jsx("div", { ref: bindFlip(RESET_KEY), className: 'wenayTbItem', title: resetTitle(), onClick: () => reset(), children: resetIcon() }), settingsOn && _jsxs(OutsideClickArea, { className: 'wenayTbGear', status: open, outsideClick: () => setOpen(false), children: [_jsx("div", { ref: bindFlip(SETTINGS_KEY), className: 'wenayTbItem', title: settingsTitle(), onClick: () => setOpen(v => !v), children: settingsIcon() }), open && _jsx("div", { className: p.popAlign == 'left' ? 'wenayTbPop wenayTbPopLeft' : 'wenayTbPop', children: _jsx(Settings, {}) })] })] });
     }
     /** The pure editor over config: density segments + one row per item
      *  (visibility checkbox, icon preview, title, drag handle). Reorder rides the
@@ -260,7 +305,7 @@ export function createToolbar(opts) {
      *  Plus arrow keys on the focused handle; fixed rows have neither. */
     function Settings(p = {}) {
         useSubscribe();
-        updateBy(densities);
+        densitiesApi.use();
         const cfg = normalize();
         const base = p.className ?? 'wenaySegBtn';
         const activeCls = p.activeClassName ?? 'wenaySegBtnActive';

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

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { renderBy, updateBy } from "../../../updateBy";
+import { createUpdateApi } from "../../../updateBy";
 import { memoryGetOrCreate, memoryMarkDirty } from "../../utils/memoryStore";
 /** One UI block shown in exactly one of several mount points; the point is a persisted setting.
  *  Persistence rides the existing memoryProps -> memoryCache mechanics: memoryProps is observable,
@@ -9,6 +9,7 @@ import { memoryGetOrCreate, memoryMarkDirty } from "../../utils/memoryStore";
  *  the persisted place with its own and renders children only on a match. */
 export function createUiSlot(opts) {
     const st = memoryGetOrCreate(opts.key, { place: opts.def });
+    const stApi = createUpdateApi(st);
     // a stored place may no longer exist after an app update - fall back to def
     const isPlace = (p) => typeof p == "string" && p in opts.places;
     const getPlace = () => isPlace(st.place) ? st.place : opts.def;
@@ -16,16 +17,16 @@ export function createUiSlot(opts) {
         if (st.place == p)
             return;
         st.place = p;
-        renderBy(st);
+        stApi.render();
         memoryMarkDirty(opts.key);
     };
     function Slot(p) {
-        updateBy(st);
+        stApi.use();
         return getPlace() == p.place ? _jsx(_Fragment, { children: p.children }) : null;
     }
     /** Segmented row over opts.places; apps pass their own .chip / .chipActive classes */
     function PlacementSetting(p = {}) {
-        updateBy(st);
+        stApi.use();
         const cur = getPlace();
         const base = p.className ?? "wenaySegBtn";
         const activeCls = p.activeClassName ?? "wenaySegBtnActive";

package/lib/common/src/grid/columnState/columnState.js

@@ -1,5 +1,5 @@
 import { listen as createListen } from 'wenay-common2';
-import { renderBy, updateBy } from '../../../updateBy';
+import { createUpdateApi } from '../../../updateBy';
 import { memoryGetOrCreate, memoryMarkDirty } from '../../utils/memoryStore';
 const SCHEMA_V = 1;
 /** Grid events that mean "the user changed the column layout / sort / filter". */
@@ -17,6 +17,7 @@ export function createColumnState(opts) {
         groups: opts.def?.groups ? { ...opts.def.groups } : Object.fromEntries(groupKeys.map(g => [g, groupMembers(g)])),
     });
     const st = memoryGetOrCreate(opts.key, defConfig());
+    const stApi = createUpdateApi(st);
     const [emitChange, onChange] = createListen();
     /** Runtime-only, never persisted: actual = which keys the attached grid has;
      *  gate = optional app-level availability over a stable grid schema (standards,
@@ -25,6 +26,7 @@ export function createColumnState(opts) {
         present: null,
         presentGate: null,
     };
+    const rtApi = createUpdateApi(rt);
     const keyMap = (keys) => keys ? Object.fromEntries(keys.map(k => [k, true])) : null;
     const sameMap = (a, b) => JSON.stringify(a) == JSON.stringify(b);
     function combinedPresent() {
@@ -42,14 +44,14 @@ export function createColumnState(opts) {
         if (sameMap(next, rt.present))
             return;
         rt.present = next;
-        renderBy(rt);
+        rtApi.render();
     }
     function setPresentGate(keys) {
         const next = keyMap(keys);
         if (sameMap(next, rt.presentGate))
             return;
         rt.presentGate = next;
-        renderBy(rt);
+        rtApi.render();
         applyToGrid();
     }
     const getPresent = combinedPresent;
@@ -60,7 +62,7 @@ export function createColumnState(opts) {
     };
     const passesPresentGate = (key) => !rt.presentGate || rt.presentGate[key] == true;
     function usePresent() {
-        updateBy(rt);
+        rtApi.use();
         return combinedPresent();
     }
     /** The persisted state may be stale or partial (older app version, columns
@@ -116,7 +118,7 @@ export function createColumnState(opts) {
         st.sort = next.sort ? { ...next.sort } : null;
         st.filter = { ...next.filter };
         st.groups = Object.fromEntries(Object.entries(next.groups).map(([g, keys]) => [g, keys.slice()]));
-        renderBy(st);
+        stApi.render();
         memoryMarkDirty(opts.key);
         if (!fromGrid)
             applyToGrid();
@@ -126,7 +128,7 @@ export function createColumnState(opts) {
     const setConfig = (next) => commit(next, false);
     const reset = () => commit(defConfig(), false);
     function useConfig() {
-        updateBy(st);
+        stApi.use();
         return normalize();
     }
     function show(key, on) {

package/lib/common/src/hooks/useKeyboard.js

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from "react";
-import { renderBy } from "../../updateBy";
+import { createUpdateApi } from "../../updateBy";
 import { listen as createListen } from "wenay-common2";
 export const keyboardState = {
     key: ""
 };
+const keyboardStateApi = createUpdateApi(keyboardState);
 const [emitKeyDown, keyboardListen] = createListen();
 export const keyboard = {
     get key() { return keyboardState.key; },
@@ -11,7 +12,7 @@ export const keyboard = {
     get() { return keyboardState.key; },
     clear() {
         keyboardState.key = "";
-        renderBy(keyboardState);
+        keyboardStateApi.render();
         emitKeyDown("", undefined);
     },
     reset() {
@@ -38,7 +39,7 @@ export function useKeyboard(options = {}) {
             if (!(event instanceof KeyboardEvent))
                 return;
             keyboardState.key = event.key;
-            renderBy(keyboardState);
+            keyboardStateApi.render();
             emitKeyDown(event.key, event);
             onKeyDownRef.current?.(event.key, event);
         };