wenay-react2 1.0.34 → 1.0.36

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

@@ -0,0 +1,284 @@
+import { listen as createListen } from 'wenay-common2';
+import { renderBy, updateBy } from '../../../updateBy';
+import { memoryGetOrCreate, memoryMarkDirty } from '../../utils/memoryStore';
+const SCHEMA_V = 1;
+/** Grid events that mean "the user changed the column layout / sort / filter". */
+const GRID_EVENTS = ['columnMoved', 'columnResized', 'columnVisible', 'sortChanged', 'filterChanged'];
+export function createColumnState(opts) {
+    const groupMembers = (g) => opts.columns.filter(c => c.group == g).map(c => c.key);
+    const groupKeys = [...new Set(opts.columns.map(c => c.group).filter((g) => !!g))];
+    const defConfig = () => ({
+        v: SCHEMA_V,
+        order: opts.def?.order?.slice() ?? opts.columns.map(c => c.key),
+        visible: opts.def?.visible ? { ...opts.def.visible } : Object.fromEntries(opts.columns.map(c => [c.key, c.defaultVisible != false])),
+        width: opts.def?.width ? { ...opts.def.width } : {},
+        sort: opts.def?.sort ? { ...opts.def.sort } : null,
+        filter: opts.def?.filter ? { ...opts.def.filter } : {},
+        groups: opts.def?.groups ? { ...opts.def.groups } : Object.fromEntries(groupKeys.map(g => [g, groupMembers(g)])),
+    });
+    const st = memoryGetOrCreate(opts.key, defConfig());
+    const [emitChange, onChange] = createListen();
+    /** Runtime-only, never persisted: which column keys the attached grid
+     *  actually HAS right now. null = unknown / no grid = treat all as present.
+     *  A column removed from the live grid (dynamic defs, "drop empty columns"
+     *  standards) keeps its config entry and its menu button - the button just
+     *  goes inert. The grid adapter maintains this; grid-less consumers may
+     *  call setPresent themselves. */
+    const rt = { present: null };
+    function setPresent(keys) {
+        const next = keys ? Object.fromEntries(keys.map(k => [k, true])) : null;
+        if (JSON.stringify(next) == JSON.stringify(rt.present))
+            return;
+        rt.present = next;
+        renderBy(rt);
+    }
+    const getPresent = () => rt.present;
+    const isPresent = (key) => !rt.present || rt.present[key] == true;
+    function usePresent() {
+        updateBy(rt);
+        return rt.present;
+    }
+    /** The persisted state may be stale or partial (older app version, columns
+     *  added/removed) - never crash, never drop user data that still applies:
+     *  unknown keys are filtered out, missing columns are appended
+     *  (default-visible), fixed columns are pinned back to their descriptor
+     *  index. This IS the soft migration; v covers incompatible shape changes. */
+    function normalize() {
+        const known = new Set(opts.columns.map(c => c.key));
+        const byKey = new Map(opts.columns.map(c => [c.key, c]));
+        const rawOrder = Array.isArray(st.order) ? st.order : [];
+        const order = rawOrder.filter(k => known.has(k) && !byKey.get(k)?.fixed);
+        for (const c of opts.columns)
+            if (!c.fixed && order.indexOf(c.key) == -1)
+                order.push(c.key);
+        opts.columns.forEach(function pinFixed(c, i) {
+            if (c.fixed)
+                order.splice(Math.min(i, order.length), 0, c.key);
+        });
+        const rawVisible = st.visible && typeof st.visible == 'object' ? st.visible : {};
+        const visible = {};
+        for (const c of opts.columns)
+            visible[c.key] = c.fixed ? true : (rawVisible[c.key] ?? c.defaultVisible != false);
+        const rawWidth = st.width && typeof st.width == 'object' ? st.width : {};
+        const width = {};
+        for (const [k, w] of Object.entries(rawWidth))
+            if (known.has(k) && typeof w == 'number' && isFinite(w) && w > 0)
+                width[k] = w;
+        const sort = st.sort && known.has(st.sort.key) && (st.sort.dir == 'asc' || st.sort.dir == 'desc')
+            ? { key: st.sort.key, dir: st.sort.dir } : null;
+        const rawFilter = st.filter && typeof st.filter == 'object' ? st.filter : {};
+        const filter = {};
+        for (const [k, f] of Object.entries(rawFilter))
+            if (known.has(k))
+                filter[k] = f;
+        const rawGroups = st.groups && typeof st.groups == 'object' ? st.groups : {};
+        const groups = {};
+        for (const g of groupKeys) {
+            const members = groupMembers(g);
+            groups[g] = Array.isArray(rawGroups[g]) ? rawGroups[g].filter(k => members.indexOf(k) != -1) : members;
+        }
+        return { v: SCHEMA_V, order, visible, width, sort, filter, groups };
+    }
+    /** Every edit funnels through here: mutate the persisted object in place
+     *  (identity is the updateBy/renderBy subscription key), announce, mark the
+     *  cache dirty, push to the attached grid (unless the grid IS the source),
+     *  emit outward. */
+    function commit(next, fromGrid) {
+        st.v = SCHEMA_V;
+        st.order = next.order.slice();
+        st.visible = { ...next.visible };
+        st.width = { ...next.width };
+        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);
+        memoryMarkDirty(opts.key);
+        if (!fromGrid)
+            applyToGrid();
+        emitChange(normalize());
+    }
+    const getConfig = () => normalize();
+    const setConfig = (next) => commit(next, false);
+    const reset = () => commit(defConfig(), false);
+    function useConfig() {
+        updateBy(st);
+        return normalize();
+    }
+    function show(key, on) {
+        const cfg = normalize();
+        commit({ ...cfg, visible: { ...cfg.visible, [key]: on } }, false);
+    }
+    function move(order) {
+        commit({ ...normalize(), order }, false);
+    }
+    function setSort(sort) {
+        commit({ ...normalize(), sort }, false);
+    }
+    /** The mobile "sort button" cycle over one column: asc -> desc -> off.
+     *  A different column starts its own cycle at asc; the sticky sort of
+     *  another column is simply replaced. */
+    function toggleSort(key) {
+        const cur = normalize().sort;
+        setSort(cur?.key != key ? { key, dir: 'asc' } : cur.dir == 'asc' ? { key, dir: 'desc' } : null);
+    }
+    /** The order/visibility slice of THIS config as an external list source
+     *  (structurally = Toolbar's UiListSource): plug it into
+     *  createToolbar({source}) or any order/visibility editor - the editor,
+     *  the menu and the attached grid then all mirror one another, because
+     *  they edit the SAME config. */
+    const listSource = {
+        useConfig() {
+            const c = useConfig();
+            return { order: c.order, visible: c.visible };
+        },
+        getConfig() {
+            const c = normalize();
+            return { order: c.order, visible: c.visible };
+        },
+        setConfig(next) {
+            const cfg = normalize();
+            // an editor over a SUBSET of columns must not lose the rest:
+            // unknown incoming keys are dropped by normalize, missing ones re-appended
+            commit({ ...cfg, order: next.order, visible: { ...cfg.visible, ...next.visible } }, false);
+        },
+        onChange: (cb) => onChange.on(c => cb({ order: c.order, visible: c.visible })),
+    };
+    /** Keys to render, in order. Grouped columns are additionally gated by their
+     *  group's enabled set. */
+    function visibleKeys() {
+        const cfg = normalize();
+        const byKey = new Map(opts.columns.map(c => [c.key, c]));
+        return cfg.order.filter(k => {
+            if (cfg.visible[k] == false)
+                return false;
+            const g = byKey.get(k)?.group;
+            return !g || cfg.groups[g]?.indexOf(k) != -1;
+        });
+    }
+    /* ----- grid adapter (two-way) ----- */
+    let gridApi = null;
+    let applying = false;
+    let saveTimer;
+    function toAgState(cfg) {
+        return cfg.order.map(k => ({
+            colId: k,
+            hide: cfg.visible[k] == false,
+            width: cfg.width[k], // undefined = leave the grid's current width
+            sort: cfg.sort?.key == k ? cfg.sort.dir : null,
+        }));
+    }
+    /** Store -> grid. The applying flag (plus source=='api' on events) keeps the
+     *  restore from bouncing back as a save. */
+    function applyToGrid() {
+        if (!gridApi)
+            return;
+        applying = true;
+        try {
+            const cfg = normalize();
+            gridApi.applyColumnState({ state: toAgState(cfg), applyOrder: true });
+            gridApi.setFilterModel(Object.keys(cfg.filter).length ? cfg.filter : null);
+        }
+        finally {
+            applying = false;
+        }
+    }
+    /** Grid -> store: fold the live column state back into the config. Columns
+     *  the grid does not know keep their stored values (a grid may mount a
+     *  subset). Skipped when nothing actually changed - the residual guard
+     *  against apply/save loops. */
+    function readFromGrid() {
+        if (!gridApi || gridApi.isDestroyed?.())
+            return;
+        const cfg = normalize();
+        const known = new Set(opts.columns.map(c => c.key));
+        const order = [];
+        const visible = { ...cfg.visible };
+        const width = { ...cfg.width };
+        let sort = null;
+        const gridIds = new Set();
+        for (const s of gridApi.getColumnState()) {
+            if (!s.colId)
+                continue;
+            gridIds.add(s.colId);
+            if (!known.has(s.colId))
+                continue;
+            order.push(s.colId);
+            visible[s.colId] = !s.hide;
+            if (typeof s.width == 'number' && s.width > 0)
+                width[s.colId] = s.width;
+            if (s.sort == 'asc' || s.sort == 'desc')
+                sort = { key: s.colId, dir: s.sort };
+        }
+        // the grid cannot express a sort by a column it does not currently have:
+        // keep the STICKY sort instead of folding its absence in as "off"
+        if (!sort && cfg.sort && !gridIds.has(cfg.sort.key))
+            sort = cfg.sort;
+        for (const k of cfg.order)
+            if (order.indexOf(k) == -1)
+                order.push(k);
+        const filter = (gridApi.getFilterModel() ?? {});
+        const next = { ...cfg, order, visible, width, sort, filter };
+        if (JSON.stringify(next) == JSON.stringify(cfg))
+            return;
+        commit(next, true);
+        // normalize() may have corrected the grid's move (a fixed column dragged
+        // away from its pinned index): push the corrected order back so the grid
+        // and the config never disagree
+        if (JSON.stringify(normalize().order) != JSON.stringify(next.order))
+            applyToGrid();
+    }
+    function onGridEvent(e) {
+        if (applying || e?.source == 'api')
+            return;
+        // resize/move fire per animation frame during a drag; persist the final shape only
+        if (e?.finished === false)
+            return;
+        clearTimeout(saveTimer);
+        saveTimer = setTimeout(readFromGrid, opts.saveMs ?? 300);
+    }
+    /** The grid's column SET changed (dynamic columnDefs, "drop empty columns"
+     *  standards): refresh presence; when the set really changed, re-impose the
+     *  config - a column that came BACK gets its stored order/width/visibility
+     *  again (setting columnDefs resets order to the defs' order). No loop:
+     *  applyColumnState never adds/removes columns, so it cannot re-fire this. */
+    function onGridColumns() {
+        if (!gridApi || gridApi.isDestroyed?.())
+            return;
+        const before = rt.present;
+        setPresent((gridApi.getColumns() ?? []).map(c => c.getColId()));
+        if (rt.present != before && !applying)
+            applyToGrid();
+    }
+    /** Call from onGridReady (AgGridTable forwards it on top of its own wiring) or
+     *  via controller.withApi. Restores the saved state, then watches the grid. */
+    function attach(api) {
+        detach();
+        gridApi = api;
+        applyToGrid();
+        setPresent((api.getColumns() ?? []).map(c => c.getColId()));
+        for (const t of GRID_EVENTS)
+            api.addEventListener(t, onGridEvent);
+        api.addEventListener('gridColumnsChanged', onGridColumns);
+    }
+    /** Call from onGridPreDestroyed. The config survives the grid (columnBuffer
+     *  pattern): remount + attach restores the same layout. */
+    function detach() {
+        clearTimeout(saveTimer);
+        saveTimer = undefined;
+        if (gridApi && !gridApi.isDestroyed?.()) {
+            for (const t of GRID_EVENTS)
+                gridApi.removeEventListener(t, onGridEvent);
+            gridApi.removeEventListener('gridColumnsChanged', onGridColumns);
+        }
+        gridApi = null;
+        setPresent(null);
+    }
+    return {
+        /** The column descriptors this state was created over - UI components
+         *  (dots, cards, icon menus) render from these + the config. */
+        columns: opts.columns,
+        api: { getConfig, setConfig, useConfig, onChange, reset, show, move, setSort, toggleSort, visibleKeys,
+            getPresent, usePresent, isPresent, setPresent, listSource },
+        grid: { attach, detach },
+    };
+}

package/lib/common/src/grid/columnState/index.d.ts

@@ -0,0 +1,4 @@
+export * from './columnState';
+export * from './ColumnsMenu';
+export * from './ColumnDots';
+export * from './CardList';

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

@@ -0,0 +1,4 @@
+export * from './columnState';
+export * from './ColumnsMenu';
+export * from './ColumnDots';
+export * from './CardList';

package/lib/common/src/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export * from './useAddDownAnyKey';
+export * from './useKeyboard';
 export * from './useDraggable';
 export * from './useReorder';
 export * from './useReorderBoard';

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

@@ -1,4 +1,4 @@
-export * from './useAddDownAnyKey';
+export * from './useKeyboard';
 export * from './useDraggable';
 export * from './useReorder';
 export * from './useReorderBoard';

package/lib/common/src/hooks/useKeyboard.d.ts

@@ -0,0 +1,18 @@
+export declare const keyboardState: {
+    key: string;
+};
+export type KeyboardApi = {
+    readonly key: string;
+    getKey(): string;
+    get(): string;
+    clear(): void;
+    reset(): void;
+    subscribe(listener: (key: string, event?: KeyboardEvent) => void): () => void;
+    on(listener: (key: string, event?: KeyboardEvent) => void): () => void;
+};
+export declare const keyboard: KeyboardApi;
+export declare function useKeyboard(options?: {
+    enabled?: boolean;
+    target?: Document | HTMLElement;
+    onKeyDown?: (key: string, event: KeyboardEvent) => void;
+}): KeyboardApi;

package/lib/common/src/hooks/{useAddDownAnyKey.js → useKeyboard.js}

@@ -1,30 +1,30 @@
 import { useEffect, useRef } from "react";
 import { renderBy } from "../../updateBy";
-import { UseListen } from "wenay-common2";
-export const KeyDown = {
+import { listen as createListen } from "wenay-common2";
+export const keyboardState = {
     key: ""
 };
-const [emitKeyDown, keyDownListen] = UseListen();
-export const keyDownApi = {
-    get key() { return KeyDown.key; },
-    getKey() { return KeyDown.key; },
-    get() { return KeyDown.key; },
+const [emitKeyDown, keyboardListen] = createListen();
+export const keyboard = {
+    get key() { return keyboardState.key; },
+    getKey() { return keyboardState.key; },
+    get() { return keyboardState.key; },
     clear() {
-        KeyDown.key = "";
-        renderBy(KeyDown);
+        keyboardState.key = "";
+        renderBy(keyboardState);
         emitKeyDown("", undefined);
     },
     reset() {
-        keyDownApi.clear();
+        keyboard.clear();
     },
     subscribe(listener) {
-        return keyDownListen.on(listener);
+        return keyboardListen.on(listener);
     },
     on(listener) {
-        return keyDownListen.on(listener);
+        return keyboardListen.on(listener);
     }
 };
-export function useAddDownAnyKey(options = {}) {
+export function useKeyboard(options = {}) {
     const { enabled = true, target } = options;
     const onKeyDownRef = useRef(options.onKeyDown);
     onKeyDownRef.current = options.onKeyDown;
@@ -37,8 +37,8 @@ export function useAddDownAnyKey(options = {}) {
         const func = (event) => {
             if (!(event instanceof KeyboardEvent))
                 return;
-            KeyDown.key = event.key;
-            renderBy(KeyDown);
+            keyboardState.key = event.key;
+            renderBy(keyboardState);
             emitKeyDown(event.key, event);
             onKeyDownRef.current?.(event.key, event);
         };
@@ -47,13 +47,5 @@ export function useAddDownAnyKey(options = {}) {
             currentTarget.removeEventListener("keydown", func);
         };
     }, [enabled, target]);
-    return keyDownApi;
+    return keyboard;
 }
-export const useKeyDown = useAddDownAnyKey;
-export const useAnyKey = useAddDownAnyKey;
-/** @deprecated Use `useKeyDown(options)` or `useAnyKey(options)`. */
-export function addDownAnyKey() {
-    return useAddDownAnyKey();
-}
-/** @deprecated Use `useKeyDown(options)` or `useAnyKey(options)`. */
-export const useAddDownAnyKeyOld = useAddDownAnyKey;

package/lib/common/src/hooks/useObserveStore.d.ts

@@ -1,12 +1,13 @@
-import { ObserveAll2 } from "wenay-common2";
-type StoreChange = ObserveAll2.StoreChange;
-type StoreSubOpts = ObserveAll2.StoreSubOpts;
-type StoreSyncOpts = ObserveAll2.StoreSyncOpts;
-type StoreDrain = ObserveAll2.StoreDrain;
-type StoreMask<T> = ObserveAll2.StoreMask<T>;
-type StorePick<T, M> = ObserveAll2.StorePick<T, M>;
-type StoreNode<T> = ObserveAll2.StoreNode<T>;
-type StoreSelection<T, M> = ObserveAll2.StoreSelection<T, M>;
+import { Observe } from "wenay-common2";
+type StoreChange = Observe.StoreChange;
+type StoreEachCtx = Observe.StoreEachCtx;
+type StoreSubOpts = Observe.StoreSubOpts;
+type StoreSyncOpts = Observe.StoreSyncOpts;
+type StoreDrain = Observe.StoreDrain;
+type StoreMask<T> = Observe.StoreMask<T>;
+type StorePick<T, M> = Observe.StorePick<T, M>;
+type StoreNode<T> = Observe.StoreNode<T>;
+type StoreSelection<T, M> = Observe.StoreSelection<T, M>;
 export type ListenLike<TArgs extends readonly unknown[] = readonly unknown[]> = {
     on(cb: (...args: TArgs) => void, opts?: {
         key?: string | symbol;
@@ -55,6 +56,20 @@ export type StoreKeysController<T extends object = any> = {
 };
 export declare function useStoreKeys<T extends object>(node: StoreNode<T>, options?: Omit<UseStoreNodeOptions<T>, "mode">): StoreKeysController<T>;
 export declare function useStoreSelect<T, M extends StoreMask<T>>(selection: StoreSelection<T, M>, options?: UseStoreSelectOptions<StorePick<T, M>>): StoreSelectionController<T, M>;
+export type UseStoreEachOptions = {
+    /** false = do not subscribe (and drop the current subscription). Default true. */
+    enabled?: boolean;
+};
+/**
+ * Per-changed-top-level-key feed of a store (`store.each()` of wenay-common2): cb fires once per
+ * CHANGED key per drain window with the current `store.state[key]` (`undefined` = key deleted);
+ * a root replace (store.replace / mirror keyframe) EXPANDS into one call per key, so cold start
+ * is not a special case for per-key consumers (grid rows, canvas layers, ...). The fold target
+ * should live outside React state (ref/store/grid api) — this hook renders nothing by itself.
+ * cb goes through a ref — a new identity does not resubscribe.
+ * The remote (wire) counterpart is useStoreReplayEach in useReplay.ts.
+ */
+export declare function useStoreEach<T extends object>(store: Observe.Store<T> | null | undefined, cb: (key: string, value: T[keyof T] | undefined, ctx: StoreEachCtx) => void, options?: UseStoreEachOptions): void;
 export type RemoteStoreLike<T extends object> = {
     get(mask?: any): T | Promise<T>;
     changed: ListenLike<readonly []>;
@@ -65,7 +80,7 @@ export type UseStoreMirrorOptions<T extends object, M extends StoreMask<T>> = St
     auto?: boolean;
 };
 export type StoreMirrorController<T extends object, M extends StoreMask<T>> = {
-    readonly store: ObserveAll2.Store<T> & {
+    readonly store: Observe.Store<T> & {
         sync(mask: M, subOpts?: StoreSyncOpts): Promise<() => void>;
     };
     readonly value: StorePick<T, M>;
@@ -102,4 +117,4 @@ export declare function useListenValue<T, TArgs extends readonly unknown[] = rea
     current?: boolean | (() => TArgs | undefined);
     map?: (...args: TArgs) => T;
 }): T | undefined;
-export type { StoreChange, StoreDrain, StoreMask, StoreNode, StorePick, StoreSelection, StoreSubOpts, StoreSyncOpts };
+export type { StoreChange, StoreDrain, StoreEachCtx, StoreMask, StoreNode, StorePick, StoreSelection, StoreSubOpts, StoreSyncOpts };

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ObserveAll2 } from "wenay-common2";
+import { Observe } from "wenay-common2";
 function readNode(node, options) {
     if (!node.has())
         return options?.fallback;
@@ -96,6 +96,25 @@ export function useStoreSelect(selection, options = {}) {
         get: () => selection.get(),
     }), [selection, value, refresh]);
 }
+/**
+ * Per-changed-top-level-key feed of a store (`store.each()` of wenay-common2): cb fires once per
+ * CHANGED key per drain window with the current `store.state[key]` (`undefined` = key deleted);
+ * a root replace (store.replace / mirror keyframe) EXPANDS into one call per key, so cold start
+ * is not a special case for per-key consumers (grid rows, canvas layers, ...). The fold target
+ * should live outside React state (ref/store/grid api) — this hook renders nothing by itself.
+ * cb goes through a ref — a new identity does not resubscribe.
+ * The remote (wire) counterpart is useStoreReplayEach in useReplay.ts.
+ */
+export function useStoreEach(store, cb, options = {}) {
+    const { enabled = true } = options;
+    const cbRef = useLatestRef(cb);
+    useEffect(() => {
+        if (!store || !enabled)
+            return;
+        // each() is created lazily per subscription: it runs while it has subscribers and closes on off()
+        return store.each().on((key, value, ctx) => cbRef.current(key, value, ctx));
+    }, [store, enabled, cbRef]);
+}
 export function useStoreMirror(remote, initial, options) {
     const { mask, auto = true, current = true, drain, key, partial, onError } = options;
     const stableMask = useStableStoreMask(mask);
@@ -109,7 +128,7 @@ export function useStoreMirror(remote, initial, options) {
     if (!storeRef.current || storeRef.current.remote !== remote) {
         storeRef.current = {
             remote,
-            store: ObserveAll2.createStoreMirror(remote, initial),
+            store: Observe.createStoreMirror(remote, initial),
         };
     }
     const store = storeRef.current.store;

package/lib/common/src/hooks/useOutside.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 export declare const StyleOtherRow: React.CSSProperties;
-export declare const StyleOtherColum: React.CSSProperties;
+export declare const StyleOtherColumn: React.CSSProperties;
 export type UseOutsideOptions<T extends HTMLElement = HTMLDivElement> = {
     ref?: React.RefObject<T | null>;
     outsideClick?: () => void;
@@ -24,37 +24,30 @@ export type UseOutsideApi<T extends HTMLElement = HTMLDivElement> = {
 };
 export declare function useOutsideApi<T extends HTMLElement = HTMLDivElement>(options: UseOutsideOptions<T>): UseOutsideApi<T>;
 export declare function useOutside<T extends HTMLElement = HTMLDivElement>(options: UseOutsideOptions<T>): UseOutsideApi<T>;
-/** @deprecated Use `useOutside(options)` and read `api.ref`, `api.props`, or `api.current`. */
-export declare function useOutsideOld<T extends HTMLElement = HTMLDivElement>(options: UseOutsideOptions<T>): React.RefObject<T | null>;
-type tChildrenFunc = (api: {
+export declare function useOutsideRef<T extends HTMLElement = HTMLDivElement>(options: UseOutsideOptions<T>): React.RefObject<T | null>;
+type ChildrenFunc = (api: {
     onClose: () => void;
 }) => ReactElement | React.JSX.Element;
-type tChildrenEl = ReactElement | React.ReactNode;
-type tChildren = tChildrenEl | tChildrenFunc;
-type tButtonBase = {
-    children: tChildren;
+type ButtonChildren = ReactElement | React.ReactNode | ChildrenFunc;
+type ButtonBaseProps = {
+    children: ButtonChildren;
     button: ReactElement | ((status: boolean) => ReactElement);
     style?: React.CSSProperties;
     className?: string;
 };
-type tButton = tButtonBase & {
+type ButtonProps = ButtonBaseProps & {
     statusDef?: boolean;
     keySave?: string;
     outClick?: boolean | (() => void);
     zIndex?: number;
 };
-export declare const DivOutsideClick: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+export declare const OutsideClickArea: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     outsideClick: () => void;
     status?: boolean;
     zIndex?: number;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const DivOutsideClick2: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    outsideClick: () => void;
-    status?: boolean;
-    zIndex?: number;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare function Button({ keySave, statusDef, outClick, ...data }: tButton): import("react/jsx-runtime").JSX.Element;
-export declare function ButtonHover(props: tButtonBase): import("react/jsx-runtime").JSX.Element;
-export declare const ButtonOutClick: typeof Button;
-export declare function ButtonAbs(props: Parameters<typeof Button>[0]): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ keySave, statusDef, outClick, ...data }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function HoverButton(props: ButtonBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare const OutsideButton: typeof Button;
+export declare function AbsoluteButton(props: Parameters<typeof Button>[0]): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 export const StyleOtherRow = { display: "flex", flexDirection: "row", flex: "auto 1 1" };
-export const StyleOtherColum = { display: "flex", flexDirection: "column", flex: "auto 0 1" };
+export const StyleOtherColumn = { display: "flex", flexDirection: "column", flex: "auto 0 1" };
 export function useOutsideApi(options) {
     const { outsideClick, onOutside, ref, status = options.enabled ?? true } = options;
-    const internalRef = useRef(null); // useRef is always inside the body, not in a default parameter - otherwise it breaks the Rules of Hooks
+    const internalRef = useRef(null);
     const r = ref ?? internalRef;
     const outsideClickRef = useRef(outsideClick ?? onOutside);
     const [enabled, setEnabled] = useState(status);
@@ -52,15 +52,12 @@ export function useOutsideApi(options) {
 export function useOutside(options) {
     return useOutsideApi(options);
 }
-/** @deprecated Use `useOutside(options)` and read `api.ref`, `api.props`, or `api.current`. */
-export function useOutsideOld(options) {
+export function useOutsideRef(options) {
     return useOutsideApi(options).ref;
 }
-export const DivOutsideClick = React.forwardRef(({ children, outsideClick, zIndex, style = {}, status = true, ...other }, forwardedRef) => {
+export const OutsideClickArea = React.forwardRef(({ children, outsideClick, zIndex, style = {}, status = true, ...other }, forwardedRef) => {
     const style2 = zIndex ? { ...style, zIndex } : style;
-    const internalRef = useOutside({ outsideClick: outsideClick, status });
-    // Combine refs if forwardedRef is provided; stable identity, otherwise React
-    // re-runs the ref (null + node) on every render
+    const internalRef = useOutside({ outsideClick, status });
     const combinedRef = React.useCallback((node) => {
         internalRef.current = node;
         if (typeof forwardedRef === 'function') {
@@ -72,15 +69,11 @@ export const DivOutsideClick = React.forwardRef(({ children, outsideClick, zInde
     }, [forwardedRef, internalRef]);
     return _jsx("div", { ref: forwardedRef ? combinedRef : internalRef, style: style2, ...other, children: children });
 });
-// Deprecated: Use DivOutsideClick instead
-export const DivOutsideClick2 = DivOutsideClick;
 function ButtonBase({ children, button, style = {}, className = "", state: [a, setA] }) {
     return _jsxs("div", { style: { position: "relative", width: "min-content", ...style }, className: className, children: [_jsx("div", { onClick: () => setA(!a), children: typeof button == "function" ? button(a) : button }), a && (typeof children == "function" ? children({ onClose: () => setA(!a) }) : children)] });
 }
 const saveStatus = {};
 export function Button({ keySave, statusDef, outClick, ...data }) {
-    // The keySave feature was dead: saveStatus was read but not written. Now status
-    // persists in memory for the session on each toggle.
     if (keySave && saveStatus[keySave] != null)
         statusDef = saveStatus[keySave];
     const [status, setStatusRaw] = useState(statusDef ?? false);
@@ -98,15 +91,15 @@ export function Button({ keySave, statusDef, outClick, ...data }) {
         if (typeof outClick == "function")
             outClick();
     };
-    return outClick ? (_jsx(DivOutsideClick, { status: state[0], outsideClick: handleOutsideClick, children: _jsx(ButtonBase, { ...data, state: state }) })) : (_jsx(ButtonBase, { ...data, state: state }));
+    return outClick ? (_jsx(OutsideClickArea, { status: state[0], outsideClick: handleOutsideClick, children: _jsx(ButtonBase, { ...data, state: state }) })) : (_jsx(ButtonBase, { ...data, state: state }));
 }
-export function ButtonHover(props) {
+export function HoverButton(props) {
     const [hover, setHover] = useState(false);
     return _jsxs("div", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: { position: "relative", width: "min-content" }, children: [typeof props.button == "function" ? props.button(hover) : props.button, hover &&
                 _jsx("div", { style: { position: "absolute" }, children: typeof props.children == "function" ? props.children({ onClose: () => setHover(false) }) : props.children })] });
 }
-export const ButtonOutClick = ({ outClick = true, ...a }) => Button({ ...a, outClick });
-export function ButtonAbs(props) {
+export const OutsideButton = ({ outClick = true, ...a }) => Button({ ...a, outClick });
+export function AbsoluteButton(props) {
     const children = (api) => _jsx("div", { style: { position: "relative" }, children: _jsx("div", { style: {
                 position: "absolute",
                 zIndex: props.zIndex ?? 9

package/lib/common/src/hooks/useReorder.d.ts

@@ -7,7 +7,7 @@ import React from 'react';
  *  the container's children.
  *  NOT a dnd framework: no nesting, no cross-container moves, no spans or
  *  collision packing - when that day comes, take a ready-made library. */
-export type tReorderOptions = {
+export type ReorderOptions = {
     /** keys in render order; the container's children must correspond 1:1 */
     order: string[];
     /** ONE commit on drop; skipped when nothing moved */
@@ -28,7 +28,7 @@ export type tReorderOptions = {
     /** hold before the drag starts (touch-friendly fields); default 0 */
     holdMs?: number;
 };
-export type tReorderItem = {
+export type ReorderItem = {
     /** spread on the block element */
     props: {
         onMouseDown: React.MouseEventHandler<HTMLElement>;
@@ -41,9 +41,9 @@ export type tReorderItem = {
     /** some drag is active - the consumer adds its transition class/style on non-dragged blocks */
     active: boolean;
 };
-export declare function useReorder<E extends HTMLElement = HTMLDivElement>(o: tReorderOptions): {
+export declare function useReorder<E extends HTMLElement = HTMLDivElement>(o: ReorderOptions): {
     listRef: React.RefObject<E | null>;
-    item: (key: string) => tReorderItem;
+    item: (key: string) => ReorderItem;
     dragKey: string | null;
     preview: string[] | null;
 };