wenay-react2 1.0.41 → 1.0.42

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

@@ -22,6 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // comes back to life when the column returns. No ag-grid, no storage here.
 import { useRef } from 'react';
 import { useReorder } from '../../hooks/useReorder';
+import { movedOrderWithFixed } from '../../utils/fixedOrder';
 function colsMenuClass(parts) {
     return parts.filter(Boolean).join(' ');
 }
@@ -96,20 +97,10 @@ export function ColumnsMenu(p) {
         p.state.api.show(key, cfg.visible[key] == false);
     }
     /** Simulated drop with the same fixed pinning as the config's normalize():
-     *  the drag preview never disagrees with where the button actually lands. */
+     *  the drag preview never disagrees with where the button actually lands -
+     *  both sides now share utils/fixedOrder. */
     function movedOrder(order, key, to) {
-        const next = order.slice();
-        const from = next.indexOf(key);
-        if (from == -1)
-            return next;
-        next.splice(from, 1);
-        next.splice(Math.max(0, Math.min(next.length, to)), 0, key);
-        const res = next.filter(k => !byKey.get(k)?.fixed);
-        p.state.columns.forEach(function pinFixed(c, i) {
-            if (c.fixed)
-                res.splice(Math.min(i, res.length), 0, c.key);
-        });
-        return res;
+        return movedOrderWithFixed(order, key, to, p.state.columns);
     }
     return _jsx(MenuStrip, { items: items, tail: p.tail, onItem: onItem, onMove: p.reorder == false ? undefined : order => p.state.api.move(order), move: movedOrder, holdMs: p.holdMs, compact: p.compact, className: p.className, style: p.style });
 }

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import type { ColDef, ColGroupDef, GridPreDestroyedEvent, GridReadyEvent } from 'ag-grid-community';
+import type { AgGridReactProps } from 'ag-grid-react';
+import { type AgGridTableProps } from '../agGrid4';
+import { createToolbar, type ToolbarConfig, type ToolbarItem, type ToolbarSourceMode } from '../../components/Toolbar';
+import { CardList } from './CardList';
+import { ColumnDots } from './ColumnDots';
+import { ColumnsMenu } from './ColumnsMenu';
+import { type ColumnMeta, type ColumnsConfig, type ColumnStateController } from './columnState';
+export type ColumnGridColumnDef<T extends object> = ColDef<T> | ColGroupDef<T>;
+export type ColumnGridColumn = Partial<Omit<ColumnMeta, 'key'>> & {
+    key: string;
+};
+export type ColumnGridToolbarOptions = {
+    key?: string;
+    items?: ToolbarItem[];
+    def?: Partial<ToolbarConfig>;
+    settingsItem?: {
+        title?: string;
+        icon?: React.ReactNode;
+    };
+    resetItem?: false | {
+        title?: string;
+        icon?: React.ReactNode;
+        defaultVisible?: boolean;
+    };
+    sourceMode?: ToolbarSourceMode;
+};
+export type ColumnGridOptions<T extends object> = {
+    /** Shared persistence key for the column config. */
+    key: string;
+    /** ag-grid defs. Leaf defs become ColumnMeta automatically by colId/field/headerName. */
+    columnDefs?: readonly ColumnGridColumnDef<T>[];
+    /** Optional metadata overrides, keyed by colId/field. Missing fields are inferred from columnDefs. */
+    columns?: readonly ColumnGridColumn[];
+    def?: Partial<ColumnsConfig>;
+    /** Optional default data for View; per-render props still override it. */
+    data?: readonly T[];
+    /** Optional default row id getter for View/CardList and simple table wiring. */
+    getId?: (row: T, index: number) => string;
+    /** Optional sizeColumnsToFit when the visible column count changes. */
+    autoSizeOnColumnCountChange?: boolean;
+    saveMs?: number;
+    /** Built by default over the same columnState list source; pass false to skip it. */
+    toolbar?: false | ColumnGridToolbarOptions;
+};
+export type ColumnGridTableProps<T extends object> = Omit<AgGridTableProps<T>, 'columnDefs' | 'autoSizeColumns' | 'onGridReady' | 'onGridPreDestroyed'> & {
+    columnDefs?: AgGridReactProps<T>['columnDefs'];
+    /** Defaults to false because columnState restores/persists widths. */
+    autoSizeColumns?: boolean;
+    onGridReady?: (event: GridReadyEvent<T>) => void;
+    onGridPreDestroyed?: (event: GridPreDestroyedEvent<T>) => void;
+    /** Defaults from createColumnGrid(opts); fits once when visible column count changes. */
+    autoSizeOnColumnCountChange?: boolean;
+};
+export type ColumnGridMenuProps = Omit<React.ComponentProps<typeof ColumnsMenu>, 'state'>;
+export type ColumnGridDotsProps = Omit<React.ComponentProps<typeof ColumnDots>, 'state'>;
+export type ColumnGridCardsProps<T extends object> = Omit<React.ComponentProps<typeof CardList<T>>, 'state'>;
+export type ColumnGridViewMode = 'table' | 'cards';
+export type ColumnGridControls = false | 'auto' | 'toolbar' | 'menu' | 'dots';
+export type ColumnGridToolbar = ReturnType<typeof createToolbar>;
+export type ColumnGridToolbarBarProps = React.ComponentProps<ColumnGridToolbar['Bar']>;
+export type ColumnGridToolbarSettingsProps = React.ComponentProps<ColumnGridToolbar['Settings']>;
+export type ColumnGridViewProps<T extends object> = {
+    mode?: ColumnGridViewMode;
+    data?: readonly T[];
+    getId?: (row: T, index: number) => string;
+    controls?: ColumnGridControls;
+    table?: ColumnGridTableProps<T>;
+    cards?: Omit<ColumnGridCardsProps<T>, 'data'>;
+    menu?: ColumnGridMenuProps;
+    dots?: ColumnGridDotsProps;
+    toolbar?: ColumnGridToolbarBarProps;
+    className?: string;
+    style?: React.CSSProperties;
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+    tableHeight?: React.CSSProperties['height'];
+};
+export type ColumnGridController<T extends object> = {
+    state: ColumnStateController;
+    toolbar: ColumnGridToolbar | null;
+    columns: readonly ColumnMeta[];
+    columnDefs: AgGridReactProps<T>['columnDefs'];
+    api: ColumnStateController['api'] & {
+        tableProps: (props?: ColumnGridTableProps<T>) => AgGridTableProps<T>;
+    };
+    grid: ColumnStateController['grid'];
+    tableProps: (props?: ColumnGridTableProps<T>) => AgGridTableProps<T>;
+    Table: (props: ColumnGridTableProps<T>) => React.JSX.Element;
+    Menu: (props?: ColumnGridMenuProps) => React.JSX.Element;
+    Dots: (props?: ColumnGridDotsProps) => React.JSX.Element;
+    Cards: (props: ColumnGridCardsProps<T>) => React.JSX.Element;
+    Toolbar: (props?: ColumnGridToolbarBarProps) => React.JSX.Element | null;
+    Settings: (props?: ColumnGridToolbarSettingsProps) => React.JSX.Element | null;
+    View: (props: ColumnGridViewProps<T>) => React.JSX.Element;
+    /** Release factory-lifetime subscriptions; persisted config is untouched. */
+    dispose: () => void;
+};
+/** High-level column kit for the common case: one keyed config drives a grid,
+ *  compact menu, toolbar settings, mobile dots, and card/table views. */
+export declare function createColumnGrid<T extends object>(opts: ColumnGridOptions<T>): ColumnGridController<T>;
+export declare function useColumnGrid<T extends object>(opts: ColumnGridOptions<T>): ColumnGridController<T>;

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

@@ -0,0 +1,231 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AgGridTable } from '../agGrid4';
+import { createToolbar } from '../../components/Toolbar';
+import { CardList } from './CardList';
+import { ColumnDots } from './ColumnDots';
+import { ColumnsMenu } from './ColumnsMenu';
+import { createColumnState } from './columnState';
+function isGroupDef(def) {
+    return Array.isArray(def.children);
+}
+function textOrUndefined(v) {
+    if (v == null || v === '')
+        return undefined;
+    return String(v);
+}
+function titleFromKey(key) {
+    return key
+        .replace(/[_-]+/g, ' ')
+        .replace(/\b\w/g, s => s.toUpperCase());
+}
+function collectColumnMetas(defs, parentGroup) {
+    const res = [];
+    for (const def of defs ?? []) {
+        if (isGroupDef(def)) {
+            const group = textOrUndefined(def.groupId) ?? textOrUndefined(def.headerName) ?? parentGroup;
+            res.push(...collectColumnMetas(def.children, group));
+            continue;
+        }
+        const key = textOrUndefined(def.colId) ?? textOrUndefined(def.field);
+        if (!key)
+            continue;
+        res.push({
+            key,
+            title: textOrUndefined(def.headerName) ?? titleFromKey(key),
+            group: parentGroup,
+        });
+    }
+    return res;
+}
+function resolveColumns(opts) {
+    const auto = collectColumnMetas(opts.columnDefs);
+    const overrides = new Map((opts.columns ?? []).map(c => [c.key, c]));
+    const used = new Set();
+    const res = [];
+    for (const base of auto) {
+        if (used.has(base.key))
+            continue;
+        const patch = overrides.get(base.key);
+        used.add(base.key);
+        res.push({ ...base, ...patch, key: base.key, title: patch?.title ?? base.title });
+    }
+    for (const patch of opts.columns ?? []) {
+        if (used.has(patch.key))
+            continue;
+        used.add(patch.key);
+        res.push({ ...patch, key: patch.key, title: patch.title ?? titleFromKey(patch.key) });
+    }
+    return res;
+}
+function cx(parts) {
+    return parts.filter(Boolean).join(' ');
+}
+function mergeClass(a, b) {
+    return a ? b + ' ' + a : b;
+}
+/** High-level column kit for the common case: one keyed config drives a grid,
+ *  compact menu, toolbar settings, mobile dots, and card/table views. */
+export function createColumnGrid(opts) {
+    const columnDefs = (opts.columnDefs ?? []);
+    const state = createColumnState({
+        key: opts.key,
+        columns: resolveColumns(opts),
+        def: opts.def,
+        saveMs: opts.saveMs,
+    });
+    let gridApiForFit = null;
+    let fitOnCountChange = opts.autoSizeOnColumnCountChange === true;
+    let visibleCount = state.api.visibleKeys().length;
+    let fitRaf = 0;
+    function scheduleFit() {
+        if (!gridApiForFit)
+            return;
+        cancelAnimationFrame(fitRaf);
+        fitRaf = requestAnimationFrame(() => gridApiForFit?.sizeColumnsToFit());
+    }
+    const offConfigChange = state.api.onChange.on(() => {
+        const next = state.api.visibleKeys().length;
+        if (next == visibleCount)
+            return;
+        visibleCount = next;
+        if (fitOnCountChange)
+            scheduleFit();
+    });
+    const toolbar = opts.toolbar === false ? null : createToolbar({
+        key: opts.toolbar?.key ?? `${opts.key}.toolbar`,
+        items: opts.toolbar?.items ?? state.columns.map(c => ({
+            key: c.key,
+            title: c.title,
+            short: c.short,
+            icon: c.icon,
+            fixed: c.fixed,
+            defaultVisible: c.defaultVisible,
+            onClick: () => {
+                const present = state.api.getPresent();
+                if (c.fixed || (present && !present[c.key]))
+                    return;
+                const cfg = state.api.getConfig();
+                state.api.show(c.key, cfg.visible[c.key] == false);
+            },
+        })),
+        def: opts.toolbar?.def,
+        settingsItem: opts.toolbar?.settingsItem,
+        resetItem: opts.toolbar?.resetItem,
+        source: state.api.listSource,
+        sourceMode: opts.toolbar?.sourceMode,
+    });
+    function tableProps(props = {}) {
+        const { onGridReady, onGridPreDestroyed, autoSizeColumns = false, autoSizeOnColumnCountChange = opts.autoSizeOnColumnCountChange === true, columnDefs: localDefs = columnDefs, ...rest } = props;
+        return {
+            ...rest,
+            columnDefs: localDefs,
+            autoSizeColumns,
+            onGridReady(event) {
+                gridApiForFit = event.api;
+                fitOnCountChange = autoSizeOnColumnCountChange;
+                state.grid.attach(event.api);
+                // re-seed: the column count may have changed while no grid was attached,
+                // and the first post-remount onChange must not mis-skip the auto-fit
+                visibleCount = state.api.visibleKeys().length;
+                if (fitOnCountChange)
+                    scheduleFit();
+                onGridReady?.(event);
+            },
+            onGridPreDestroyed(event) {
+                if (gridApiForFit === event.api)
+                    gridApiForFit = null;
+                cancelAnimationFrame(fitRaf);
+                fitRaf = 0;
+                state.grid.detach();
+                onGridPreDestroyed?.(event);
+            },
+        };
+    }
+    function Table(props) {
+        return _jsx(AgGridTable, { ...tableProps(props) });
+    }
+    function Menu(props = {}) {
+        return _jsx(ColumnsMenu, { ...props, state: state });
+    }
+    function Dots(props = {}) {
+        return _jsx(ColumnDots, { ...props, max: props.max ?? state.columns.length, className: mergeClass(props.className, 'wenayColumnGridDots'), state: state });
+    }
+    function Cards(props) {
+        return _jsx(CardList, { ...props, state: state });
+    }
+    function Toolbar(props = {}) {
+        if (!toolbar)
+            return null;
+        const Bar = toolbar.Bar;
+        return _jsx(Bar, { ...props });
+    }
+    function Settings(props = {}) {
+        if (!toolbar)
+            return null;
+        const ToolbarSettings = toolbar.Settings;
+        return _jsx(ToolbarSettings, { ...props });
+    }
+    function controlKind(mode, controls) {
+        if (controls === false)
+            return null;
+        if (!controls || controls == 'auto')
+            return 'dots';
+        return controls;
+    }
+    function renderControls(kind, p) {
+        if (!kind)
+            return null;
+        if (kind == 'dots')
+            return _jsx(Dots, { ...p.dots });
+        if (kind == 'toolbar')
+            return _jsx(Toolbar, { settings: true, popAlign: "left", ...p.toolbar });
+        return _jsx(Menu, { compact: true, ...p.menu });
+    }
+    function View(p) {
+        const mode = p.mode ?? 'table';
+        const kind = controlKind(mode, p.controls);
+        const controls = renderControls(kind, p);
+        const data = p.data ?? opts.data ?? [];
+        const getId = p.getId ?? opts.getId;
+        const bodyStyle = mode == 'table'
+            ? { height: p.tableHeight ?? 240, minHeight: 0, ...p.bodyStyle }
+            : { ...p.bodyStyle };
+        const tableGetRowId = p.table?.getRowId ?? (getId
+            ? ((params) => getId(params.data, 0))
+            : undefined);
+        return _jsxs("div", { className: cx(['wenayColumnGrid', `wenayColumnGrid_${mode}`, kind && `wenayColumnGrid_controls_${kind}`, p.className]), style: p.style, children: [_jsx("div", { className: cx(['wenayColumnGridBody', p.bodyClassName]), style: bodyStyle, children: mode == 'cards'
+                        ? _jsx(Cards, { ...p.cards, data: data, getId: p.cards?.getId ?? getId })
+                        : _jsx(Table, { ...p.table, rowData: (p.table?.rowData ?? data), getRowId: tableGetRowId }) }), controls && _jsx("div", { className: cx(['wenayColumnGridControls', kind && `wenayColumnGridControls_${kind}`]), children: controls })] });
+    }
+    /** Release factory-lifetime subscriptions (config onChange, toolbar source, pending fit).
+     *  Persisted config stays; this is listener lifetime only (HMR, repeated factories). */
+    function dispose() {
+        offConfigChange();
+        toolbar?.api.dispose();
+        cancelAnimationFrame(fitRaf);
+        fitRaf = 0;
+        gridApiForFit = null;
+    }
+    return {
+        state,
+        toolbar,
+        columns: state.columns,
+        columnDefs,
+        api: { ...state.api, tableProps },
+        grid: state.grid,
+        tableProps,
+        Table,
+        Menu,
+        Dots,
+        Cards,
+        Toolbar,
+        Settings,
+        View,
+        dispose,
+    };
+}
+export function useColumnGrid(opts) {
+    const [grid] = useState(() => createColumnGrid(opts));
+    return grid;
+}

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

@@ -1,6 +1,8 @@
 import { listen as createListen } from 'wenay-common2';
 import { createUpdateApi } from '../../../updateBy';
 import { memoryGetOrCreate, memoryMarkDirty } from '../../utils/memoryStore';
+import { pinFixedOrder } from '../../utils/fixedOrder';
+import { structEqual } from '../../utils/structEqual';
 const SCHEMA_V = 1;
 /** Grid events that mean "the user changed the column layout / sort / filter". */
 const GRID_EVENTS = ['columnMoved', 'columnResized', 'columnVisible', 'sortChanged', 'filterChanged'];
@@ -74,14 +76,11 @@ export function createColumnState(opts) {
         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);
+        const prelim = 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);
-        });
+            if (!c.fixed && prelim.indexOf(c.key) == -1)
+                prelim.push(c.key);
+        const order = pinFixedOrder(prelim, opts.columns);
         const rawVisible = st.visible && typeof st.visible == 'object' ? st.visible : {};
         const visible = {};
         for (const c of opts.columns)
@@ -245,13 +244,15 @@ export function createColumnState(opts) {
                 order.push(k);
         const filter = (gridApi.getFilterModel() ?? {});
         const next = { ...cfg, order, visible, width, sort, filter };
-        if (JSON.stringify(next) == JSON.stringify(cfg))
+        // structural compare: the grid returns filter models with its own key order,
+        // which must not count as a change (stringify used to false-positive here)
+        if (structEqual(next, 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))
+        if (!structEqual(normalize().order, next.order))
             applyToGrid();
     }
     function onGridEvent(e) {

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

@@ -1,3 +1,6 @@
+// Grid-less barrel: columnState/ColumnsMenu/ColumnDots/CardList must stay importable without
+// pulling ag-grid runtime (mobile/card consumers). createColumnGrid lives in './columnGrid'
+// (it imports AgGridTable + createToolbar) and is exported from the root api, not from here.
 export * from './columnState';
 export * from './ColumnsMenu';
 export * from './ColumnDots';

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

@@ -8,6 +8,14 @@ export type UseDraggableOptions = {
     holdMs?: number;
     onDragEnd?: DragEndCallback;
     onDragStart?: DragStartCallback;
+    /** Imperative per-move-tick callback: fires with the current delta on every
+     *  mousemove/touchmove of an active drag - NOT on setPosition/resetPosition/cancelDrag
+     *  and not on release. Goes through a ref, an inline closure does not resubscribe. */
+    onMove?: (position: Position) => void;
+    /** When false, position lives only in positionRef/onMove and the hook does NOT
+     *  re-render per move tick (imperative consumers, e.g. the DragBox adapter).
+     *  isDragging start/end re-renders remain. Default true. */
+    trackState?: boolean;
 };
 export interface UseDraggableReturn {
     readonly position: Position;

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 export function useDraggableApi(options = {}) {
-    const { initialPosition = { x: 0, y: 0 }, holdMs = 500, onDragEnd, onDragStart } = options;
+    const { initialPosition = { x: 0, y: 0 }, holdMs = 500, onDragEnd, onDragStart, onMove, trackState = true } = options;
     const [position, setPositionState] = useState(initialPosition);
     const positionRef = useRef(position);
     const holdMsRef = useRef(holdMs);
@@ -11,17 +11,22 @@ export function useDraggableApi(options = {}) {
     const draggingRef = useRef(false);
     const onDragEndRef = useRef(onDragEnd);
     const onDragStartRef = useRef(onDragStart);
+    const onMoveRef = useRef(onMove);
+    const trackStateRef = useRef(trackState);
     const holdTimerMouse = useRef(null);
     const holdTimerTouch = useRef(null);
     const setPos = (p) => {
         positionRef.current = p;
-        setPositionState(p);
+        if (trackStateRef.current)
+            setPositionState(p);
     };
     holdMsRef.current = holdMs;
+    trackStateRef.current = trackState;
     draggingRef.current = draggingMouse || draggingTouch;
     useEffect(() => {
         onDragEndRef.current = onDragEnd;
         onDragStartRef.current = onDragStart;
+        onMoveRef.current = onMove;
     });
     const cancelMouseHold = useMemo(() => function cancelMouseHold() {
         if (holdTimerMouse.current != null) {
@@ -77,7 +82,9 @@ export function useDraggableApi(options = {}) {
         if (!draggingMouse)
             return;
         const handleMouseMove = (e) => {
-            setPos({ x: e.clientX - offsetMouse.current.x, y: e.clientY - offsetMouse.current.y });
+            const p = { x: e.clientX - offsetMouse.current.x, y: e.clientY - offsetMouse.current.y };
+            setPos(p);
+            onMoveRef.current?.(p);
         };
         const handleMouseUp = () => {
             document.removeEventListener("mousemove", handleMouseMove);
@@ -104,7 +111,9 @@ export function useDraggableApi(options = {}) {
             const theTouch = Array.from(e.changedTouches).find((t) => t.identifier === offsetTouch.current?.id);
             if (!theTouch)
                 return;
-            setPos({ x: theTouch.clientX - offsetTouch.current.x, y: theTouch.clientY - offsetTouch.current.y });
+            const p = { x: theTouch.clientX - offsetTouch.current.x, y: theTouch.clientY - offsetTouch.current.y };
+            setPos(p);
+            onMoveRef.current?.(p);
         };
         const handleTouchEnd = (e) => {
             if (!offsetTouch.current)

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

@@ -37,6 +37,9 @@ type ButtonBaseProps = {
 };
 type ButtonProps = ButtonBaseProps & {
     statusDef?: boolean;
+    /** Persist the open/closed status under this key (module-lifetime). Same naming as FloatingWindow/Resizable/RightMenu. */
+    keyForSave?: string;
+    /** @deprecated alias of {@link keyForSave}; kept for compatibility, `keyForSave` wins when both are set. */
     keySave?: string;
     outClick?: boolean | (() => void);
     zIndex?: number;
@@ -46,7 +49,7 @@ export declare const OutsideClickArea: React.ForwardRefExoticComponent<React.HTM
     status?: boolean;
     zIndex?: number;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare function Button({ keySave, statusDef, outClick, ...data }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ keyForSave, 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;

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

@@ -73,7 +73,8 @@ function ButtonBase({ children, button, style = {}, className = "", state: [a, s
     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 }) {
+export function Button({ keyForSave, keySave, statusDef, outClick, ...data }) {
+    keySave = keyForSave ?? keySave;
     if (keySave && saveStatus[keySave] != null)
         statusDef = saveStatus[keySave];
     const [status, setStatusRaw] = useState(statusDef ?? false);

package/lib/common/src/logs/logs.d.ts

@@ -1,8 +1,16 @@
 import React from "react";
-import { getSettingLogs, type LogEntry, type LogsApiOptions } from "./logsController";
+import { GridReadyEvent } from "ag-grid-community";
+import { getSettingLogs, type LogEntry, type LogsApiOptions, type LogsControllerState, type LogsFullState, type LogsMiniState, type LogsSettingsState } from "./logsController";
 export { createLogsController, createLogsControllerState, getSettingLogs, } from "./logsController";
 export type { CreateLogsControllerOptions, LogsApiOptions, LogsController, LogsControllerState, LogsFullState, LogsMiniState, } from "./logsController";
-export declare function getLogsApi<T extends object = {}>(setting: LogsApiOptions): {
+/** Optional external state for the log views/hooks; every omitted part falls back to the
+ *  legacy module-level state (datumConst/datumMiniConst/"settingLogs"). */
+export type LogsViewState = {
+    full?: LogsFullState<any>;
+    mini?: LogsMiniState<any>;
+    settings?: LogsSettingsState;
+};
+export declare function getLogsApi<T extends object = {}>(setting: LogsApiOptions, sharedState?: LogsControllerState<T>): {
     addLogs: (input: import("./logsController").LogInput<T>) => LogEntry<T>;
     params: {
         def: typeof getSettingLogs;
@@ -33,11 +41,90 @@ export declare const logsApi: {
         PageLogs: typeof PageLogs;
     };
 };
-declare function InputSettingLogs({}: {
+declare function InputSettingLogs({ settings }: {
     update?: number;
+    settings?: LogsSettingsState;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function PageLogs({ update }: {
+type LogRow = LogEntry<any>;
+/** Controller for the full-page logs table: owns the ag-grid imperative surface that
+ *  `PageLogs` used to drive inline. The importance filter lives in ONE method
+ *  (`applyImportanceFilter`) - it used to be duplicated between the settings effect and
+ *  `onGridReady`. Rows keep the original identity semantics: the grid receives the mount-time
+ *  snapshot once, later entries arrive as `applyTransactionAsync` copies of the mini feed. */
+export declare function useLogsPageTable(state?: LogsViewState): {
+    getApi: () => GridReadyEvent<any, any> | null;
+    fit: () => void;
+    applyImportanceFilter: (min?: number) => void;
+    appendRow: (row: LogRow) => void;
+    onGridReady: (a: GridReadyEvent<LogRow>) => void;
+    columnDefs: ({
+        field: string;
+        sort: "desc";
+        width: number;
+        valueFormatter: (e: import("ag-grid-community").ValueFormatterParams<any, any, any>) => any;
+        wrapText?: undefined;
+        autoHeight?: undefined;
+    } | {
+        field: string;
+        width: number;
+        sort?: undefined;
+        valueFormatter?: undefined;
+        wrapText?: undefined;
+        autoHeight?: undefined;
+    } | {
+        field: string;
+        wrapText: true;
+        autoHeight: true;
+        width: number;
+        sort?: undefined;
+        valueFormatter?: undefined;
+    })[];
+    gridProps: {
+        suppressCellFocus: boolean;
+        onGridReady: (a: GridReadyEvent<LogRow>) => void;
+        defaultColDef: {
+            wrapText: true;
+            headerClass: () => string;
+            resizable: true;
+            cellStyle: {
+                textAlign: string;
+            };
+            sortable: true;
+            filter: boolean;
+        };
+        headerHeight: number;
+        rowHeight: number;
+        autoSizePadding: number;
+        rowData: any[];
+        columnDefs: ({
+            field: string;
+            sort: "desc";
+            width: number;
+            valueFormatter: (e: import("ag-grid-community").ValueFormatterParams<any, any, any>) => any;
+            wrapText?: undefined;
+            autoHeight?: undefined;
+        } | {
+            field: string;
+            width: number;
+            sort?: undefined;
+            valueFormatter?: undefined;
+            wrapText?: undefined;
+            autoHeight?: undefined;
+        } | {
+            field: string;
+            wrapText: true;
+            autoHeight: true;
+            width: number;
+            sort?: undefined;
+            valueFormatter?: undefined;
+        })[];
+        onCellMouseDown: (e: any) => void;
+    };
+};
+export type LogsPageTableController = ReturnType<typeof useLogsPageTable>;
+export declare function PageLogs({ update, state }: {
     update?: number;
+    state?: LogsViewState;
 }): import("react/jsx-runtime").JSX.Element;
 export type MessageEventLogsItem = {
     key: string;
@@ -45,6 +132,8 @@ export type MessageEventLogsItem = {
 };
 export type UseMessageEventLogsControllerOptions = {
     maxVisible?: number;
+    settings?: LogsSettingsState;
+    mini?: LogsMiniState<any>;
 };
 export type MessageEventLogsController = {
     show: boolean;
@@ -65,8 +154,10 @@ export declare function MessageEventLogCard({ logs }: {
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useMessageEventLogsController(options?: UseMessageEventLogsControllerOptions): MessageEventLogsController;
 export declare function MessageEventLogsView({ controller, zIndex, className, style }: MessageEventLogsViewProps): import("react/jsx-runtime").JSX.Element;
-export declare function MessageEventLogs({ zIndex }: {
+export declare function MessageEventLogs({ zIndex, settings, mini }: {
     zIndex?: number;
+    settings?: LogsSettingsState;
+    mini?: LogsMiniState<any>;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function LogsPage({ update }: {
     update?: number;