wenay-react2 1.0.39 → 1.0.41

package/lib/common/src/logs/logsController.js

@@ -0,0 +1,54 @@
+import { Params } from "wenay-common2";
+export const getSettingLogs = () => ({
+    minVarLogs: { name: "min. importance for notifications", range: { min: 0, max: 25, step: 1 }, value: 0 },
+    minVarMessage: { name: "min. importance for log table", range: { min: 0, max: 25, step: 1 }, value: 0 },
+    timeShow: { name: "screen display time", range: { min: 1, max: 20, step: 1 }, value: 2 },
+    show: { name: "show", value: true }
+});
+function addToArr(arr, data, limit) {
+    arr.unshift(data);
+    if (arr.length > limit)
+        arr.length = limit;
+}
+export function createLogsControllerState(state = {}) {
+    return {
+        full: state.full ?? { map: new Map() },
+        mini: state.mini ?? { last: [] },
+        settings: state.settings ?? { params: Params.GetSimpleParams(getSettingLogs()) },
+    };
+}
+export function createLogsController({ options, state = createLogsControllerState(), onFullChange, onMiniChange, onSettingsChange, }) {
+    let num = 0;
+    return {
+        state,
+        options,
+        addLogs(input) {
+            const item = { ...input, num: num++ };
+            addToArr(state.mini.last, item, options.limit ?? 50);
+            const perId = state.full.map.get(input.id) ?? state.full.map.set(input.id, []).get(input.id);
+            addToArr(perId, item, options.limitPer);
+            onFullChange?.();
+            onMiniChange?.();
+            return item;
+        },
+        getRows() {
+            return [...state.full.map.values()].flat();
+        },
+        getMiniRows() {
+            return state.mini.last.slice();
+        },
+        getLatest() {
+            return state.mini.last[0];
+        },
+        params: {
+            def: getSettingLogs,
+            get() { return state.settings.params; },
+            set(settings) {
+                state.settings.params = settings;
+                onSettingsChange?.();
+                onMiniChange?.();
+                onFullChange?.();
+            },
+        },
+    };
+}

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

@@ -1,5 +1,71 @@
-import { CellMouseDownEvent } from "ag-grid-community";
-export declare function MiniLogs<T = any>({ data, onClick }: {
+import React from "react";
+import type { CellMouseDownEvent, ColDef, GridApi, GridPreDestroyedEvent, GridReadyEvent } from "ag-grid-community";
+import { type AgGridTableProps } from "../grid/agGrid4";
+export declare const miniLogsColumnDefs: ({
+    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;
+})[];
+export declare const miniLogsDefaultColDef: {
+    wrapText: true;
+    headerClass: () => string;
+    resizable: true;
+    cellStyle: {
+        textAlign: string;
+    };
+    sortable: true;
+    filter: boolean;
+};
+export type UseMiniLogsTableOptions<T = any> = {
     data: T[];
     onClick?: (e: CellMouseDownEvent<T>) => any;
-}): import("react/jsx-runtime").JSX.Element;
+    columnDefs?: ColDef<T>[];
+    defaultColDef?: ColDef<T>;
+};
+export type MiniLogsTableController<T = any> = {
+    rows: T[];
+    columns: ColDef<T>[];
+    columnDefs: ColDef<T>[];
+    defaultColDef: ColDef<T>;
+    apiRef: React.RefObject<GridApi<T> | null>;
+    fit: () => boolean;
+    getApi: () => GridApi<T> | null;
+    withApi: <R>(fn: (api: GridApi<T>) => R) => R | undefined;
+    onGridReady: (e: GridReadyEvent<T>) => void;
+    onGridPreDestroyed: (e: GridPreDestroyedEvent<T>) => void;
+    onCellMouseDown: (e: CellMouseDownEvent<T>) => void;
+    props: AgGridTableProps<T>;
+    tableProps: AgGridTableProps<T>;
+    gridProps: AgGridTableProps<T>;
+};
+export type MiniLogsController<T = any> = MiniLogsTableController<T>;
+export type MiniLogsViewProps<T = any> = {
+    controller: MiniLogsTableController<T>;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export type MiniLogsTableProps<T = any> = UseMiniLogsTableOptions<T> & {
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare function useMiniLogsTable<T = any>(options: UseMiniLogsTableOptions<T>): MiniLogsTableController<T>;
+export declare function MiniLogsView<T = any>({ controller, className, style }: MiniLogsViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MiniLogsTable<T = any>({ className, style, ...options }: MiniLogsTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MiniLogs<T = any>(props: MiniLogsTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/common/src/logs/miniLogs.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { timeLocalToStr_hhmmss } from "wenay-common2";
-import { AgGridReact } from "ag-grid-react";
-const columns = [
+import { useCallback, useMemo, useRef } from "react";
+import { AgGridTable, colDefCentered } from "../grid/agGrid4";
+export const miniLogsColumnDefs = [
     {
         field: "time",
         sort: "desc",
@@ -27,17 +28,71 @@ const columns = [
         width: 150,
     },
 ];
-export function MiniLogs({ data, onClick }) {
-    return _jsx("div", { className: "maxSize", children: _jsx(AgGridReact, { suppressCellFocus: true, onGridReady: (a) => {
-                a.api.sizeColumnsToFit();
-            }, defaultColDef: {
-                headerClass: () => ("gridTable-header"),
-                resizable: true,
-                cellStyle: { textAlign: "center" },
-                sortable: true,
-                filter: true,
-                wrapText: true,
-            }, headerHeight: 30, rowHeight: 26, autoSizePadding: 1, rowData: data, columnDefs: columns, onCellMouseDown: (e) => {
-                onClick?.(e);
-            } }) });
+export const miniLogsDefaultColDef = { ...colDefCentered, wrapText: true };
+export function useMiniLogsTable(options) {
+    const { data, onClick, columnDefs, defaultColDef: defaultColDefOverride } = options;
+    const apiRef = useRef(null);
+    const columns = useMemo(() => (columnDefs ?? miniLogsColumnDefs), [columnDefs]);
+    const defaultColDef = useMemo(() => ({ ...miniLogsDefaultColDef, ...defaultColDefOverride }), [defaultColDefOverride]);
+    const fit = useCallback(() => {
+        const api = apiRef.current;
+        if (!api)
+            return false;
+        api.sizeColumnsToFit();
+        return true;
+    }, []);
+    const getApi = useCallback(() => apiRef.current, []);
+    const withApi = useCallback(function withApi(fn) {
+        const api = apiRef.current;
+        return api ? fn(api) : undefined;
+    }, []);
+    const onGridReady = useCallback((e) => {
+        apiRef.current = e.api;
+        fit();
+    }, [fit]);
+    const onGridPreDestroyed = useCallback((_e) => {
+        apiRef.current = null;
+    }, []);
+    const onCellMouseDown = useCallback((e) => {
+        onClick?.(e);
+    }, [onClick]);
+    const props = useMemo(() => ({
+        suppressCellFocus: true,
+        onGridReady,
+        onGridPreDestroyed,
+        defaultColDef,
+        headerHeight: 30,
+        rowHeight: 26,
+        autoSizePadding: 1,
+        rowData: data,
+        columnDefs: columns,
+        onCellMouseDown,
+    }), [columns, data, defaultColDef, onCellMouseDown, onGridPreDestroyed, onGridReady]);
+    return useMemo(() => ({
+        rows: data,
+        columns,
+        columnDefs: columns,
+        defaultColDef,
+        apiRef,
+        fit,
+        getApi,
+        withApi,
+        onGridReady,
+        onGridPreDestroyed,
+        onCellMouseDown,
+        props,
+        tableProps: props,
+        gridProps: props,
+    }), [columns, data, defaultColDef, fit, getApi, onCellMouseDown, onGridPreDestroyed, onGridReady, props, withApi]);
+}
+export function MiniLogsView({ controller, className, style }) {
+    const classNames = ["maxSize", className].filter(Boolean).join(" ");
+    return _jsx("div", { className: classNames, style: style, children: _jsx(AgGridTable, { ...controller.props }) });
+}
+export function MiniLogsTable({ className, style, ...options }) {
+    const table = useMiniLogsTable(options);
+    return _jsx(MiniLogsView, { controller: table, className: className, style: style });
+}
+export function MiniLogs(props) {
+    return _jsx(MiniLogsTable, { ...props });
 }

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

@@ -4,6 +4,8 @@ import React, { ReactElement } from 'react';
  *******************************************************/
 export type MenuItemStrict<T = any> = {
     name: string | ((status?: T) => string);
+    /** Stable diagnostics key. Stats never fall back to visible labels. */
+    actionKey?: string | null;
     getStatus?: (() => T) | null;
     onClick?: ((e: any) => void | undefined | null | ((void | undefined | null | Promise<any> | (() => Promise<any>))[]) | Promise<any>) | null;
     active?: (() => boolean) | null;
@@ -14,6 +16,14 @@ export type MenuItemStrict<T = any> = {
     menuElement?: typeof MenuElement;
 };
 export type MenuItem<T = any> = MenuItemStrict<T> | false | null | undefined;
+export type MenuActionEventType = "click" | "ok" | "error" | "taskOk" | "taskError" | "submenuOpen" | "submenuOk" | "submenuError" | "funcOpen" | "funcOk" | "funcError" | "focusOpen" | "focusOk" | "focusError";
+export type MenuActionEvent = {
+    type: MenuActionEventType;
+    item: MenuItemStrict;
+    actionKey?: string;
+    error?: unknown;
+};
+export type MenuActionHandler = (event: MenuActionEvent) => void;
 /*******************************************************
  * Helper type
  *******************************************************/
@@ -31,12 +41,13 @@ declare function MenuProgress({ data }: {
 /*******************************************************
  * Main menu element with onClick and counters
  *******************************************************/
-declare function MenuElement({ data: item, toLeft, className, update, open, }: {
-    data: Pick<MenuItemStrict, "onClick" | "active" | "name" | "getStatus">;
+declare function MenuElement({ data: item, toLeft, className, update, open, onActionEvent, }: {
+    data: Pick<MenuItemStrict, "onClick" | "active" | "name" | "getStatus" | "actionKey">;
     toLeft: boolean;
     className?: (active?: boolean) => string;
     update: () => void;
     open?: boolean;
+    onActionEvent?: MenuActionHandler;
 }): ReactElement;
 /*******************************************************
  * Menu renders the popup menu with support for
@@ -62,6 +73,7 @@ type MenuProps = {
     data: MenuItem[];
     zIndex?: number;
     className?: (active?: boolean) => string;
+    onActionEvent?: MenuActionHandler;
     coordinate?: {
         x: number;
         y: number;
@@ -69,5 +81,5 @@ type MenuProps = {
         left?: number;
     };
 };
-export declare function Menu({ coordinate, data, zIndex, menu, className, menuElement, }: MenuProps): ReactElement;
+export declare function Menu({ coordinate, data, zIndex, menu, className, menuElement, onActionEvent, }: MenuProps): ReactElement;
 export { MenuProgress, MenuElement };

package/lib/common/src/menu/menu.js

@@ -29,7 +29,7 @@ function MenuProgress({ data }) {
 /*******************************************************
  * Main menu element with onClick and counters
  *******************************************************/
-function MenuElement({ data: item, toLeft, className, update, open, }) {
+function MenuElement({ data: item, toLeft, className, update, open, onActionEvent, }) {
     const unsubOk = useRef(null);
     const unsubErr = useRef(null);
     useEffect(() => {
@@ -47,8 +47,18 @@ function MenuElement({ data: item, toLeft, className, update, open, }) {
             "MenuR " + (active ? "toButtonA" : "toButton"), style: { float: toLeft ? "left" : "right" }, onClick: () => {
             if (!item.onClick)
                 return;
-            const result = item?.onClick?.(item);
+            const actionKey = item.actionKey ?? undefined;
+            onActionEvent?.({ type: "click", item: item, actionKey });
+            let result;
+            try {
+                result = item.onClick(item);
+            }
+            catch (error) {
+                onActionEvent?.({ type: "error", item: item, actionKey, error });
+                throw error;
+            }
             if (!result) {
+                onActionEvent?.({ type: "ok", item: item, actionKey });
                 update();
                 return;
             }
@@ -72,8 +82,14 @@ function MenuElement({ data: item, toLeft, className, update, open, }) {
                         setProgress(null);
                     }
                 };
-                unsubOk.current = pa.onOk((data, i, countOk, countError, count) => onTick(countOk, countError, count));
-                unsubErr.current = pa.onError((error, i, countOk, countError, count) => onTick(countOk, countError, count));
+                unsubOk.current = pa.onOk((data, i, countOk, countError, count) => {
+                    onActionEvent?.({ type: "taskOk", item: item, actionKey });
+                    return onTick(countOk, countError, count);
+                });
+                unsubErr.current = pa.onError((error, i, countOk, countError, count) => {
+                    onActionEvent?.({ type: "taskError", item: item, actionKey, error });
+                    return onTick(countOk, countError, count);
+                });
                 void pa.allSettled();
             }
             // If this is a single promise
@@ -81,6 +97,7 @@ function MenuElement({ data: item, toLeft, className, update, open, }) {
                 setProgress({});
                 result
                     .then(async (val) => {
+                    onActionEvent?.({ type: "ok", item: item, actionKey });
                     if (Array.isArray(val) && val.length) {
                         // If an array from Promise.allSettled was returned
                         // Count ok/error results
@@ -99,6 +116,10 @@ function MenuElement({ data: item, toLeft, className, update, open, }) {
                         setProgress({ ok: 1 });
                         await sleepAsync(0);
                     }
+                })
+                    .catch((error) => {
+                    onActionEvent?.({ type: "error", item: item, actionKey, error });
+                    throw error;
                 })
                     .finally(async () => {
                     await sleepAsync(500);
@@ -106,73 +127,116 @@ function MenuElement({ data: item, toLeft, className, update, open, }) {
                 });
             }
             else {
+                onActionEvent?.({ type: "ok", item: item, actionKey });
                 update();
             }
         }, children: _jsxs("div", { className: "toLine", children: [typeof item.name === "string"
                     ? item.name
                     : item.name(item.getStatus?.()), progress && _jsx(MenuProgress, { data: progress })] }) }));
 }
-const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPos, menuElement, open, setOpenIndex, }) => {
+const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPos, menuElement, open, setOpenIndex, onActionEvent, }) => {
     const [childMenu, setChildMenu] = useState([]);
     const [asyncFuncElement, setAsyncFuncElement] = useState(null);
     const [onFocusMenu, setOnFocusMenu] = useState([]);
     useEffect(() => {
         if (open && item.next) {
+            const actionKey = item.actionKey ?? undefined;
+            onActionEvent?.({ type: "submenuOpen", item, actionKey });
             let alive = true; // guard: do not set state after unmount or item change
-            const result = item.next();
+            let result;
+            try {
+                result = item.next();
+            }
+            catch (error) {
+                onActionEvent?.({ type: "submenuError", item, actionKey, error });
+                throw error;
+            }
             if (result instanceof Promise) {
                 result.then((val) => {
                     if (alive)
                         setChildMenu(val.filter(Boolean));
+                    onActionEvent?.({ type: "submenuOk", item, actionKey });
+                }).catch((error) => {
+                    onActionEvent?.({ type: "submenuError", item, actionKey, error });
+                    throw error;
                 });
             }
             else {
                 setChildMenu(result.filter(Boolean));
+                onActionEvent?.({ type: "submenuOk", item, actionKey });
             }
             return () => { alive = false; };
         }
         else {
             setChildMenu([]);
         }
-    }, [open, item.next]);
+    }, [open, item, item.next, onActionEvent]);
     useEffect(() => {
         if (open && item.func) {
+            const actionKey = item.actionKey ?? undefined;
+            onActionEvent?.({ type: "funcOpen", item, actionKey });
             let alive = true;
-            const result = item.func();
+            let result;
+            try {
+                result = item.func();
+            }
+            catch (error) {
+                onActionEvent?.({ type: "funcError", item, actionKey, error });
+                throw error;
+            }
             if (result instanceof Promise) {
                 result.then((val) => {
                     if (alive)
                         setAsyncFuncElement(val);
+                    onActionEvent?.({ type: "funcOk", item, actionKey });
+                }).catch((error) => {
+                    onActionEvent?.({ type: "funcError", item, actionKey, error });
+                    throw error;
                 });
             }
             else {
                 setAsyncFuncElement(result);
+                onActionEvent?.({ type: "funcOk", item, actionKey });
             }
             return () => { alive = false; };
         }
         else {
             setAsyncFuncElement(null);
         }
-    }, [open, item.func]);
+    }, [open, item, item.func, onActionEvent]);
     useEffect(() => {
         if (open && item.onFocus) {
+            const actionKey = item.actionKey ?? undefined;
+            onActionEvent?.({ type: "focusOpen", item, actionKey });
             let alive = true;
-            const result = item.onFocus();
+            let result;
+            try {
+                result = item.onFocus();
+            }
+            catch (error) {
+                onActionEvent?.({ type: "focusError", item, actionKey, error });
+                throw error;
+            }
             if (result instanceof Promise) {
                 result.then((val) => {
                     if (alive)
                         setOnFocusMenu(val.filter(Boolean));
+                    onActionEvent?.({ type: "focusOk", item, actionKey });
+                }).catch((error) => {
+                    onActionEvent?.({ type: "focusError", item, actionKey, error });
+                    throw error;
                 });
             }
             else {
                 setOnFocusMenu(result.filter(Boolean));
+                onActionEvent?.({ type: "focusOk", item, actionKey });
             }
             return () => { alive = false; };
         }
         else {
             setOnFocusMenu([]);
         }
-    }, [open, item.onFocus]);
+    }, [open, item, item.onFocus, onActionEvent]);
     const onMouseEnter = () => {
         if (open)
             return;
@@ -186,24 +250,24 @@ const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPo
                     data: viewItem,
                     className,
                     update,
-                }) ?? (_jsx(MenuElement, { toLeft: isLeftAligned, data: viewItem, className: className, update: update, open: open })), _jsxs("div", { children: [open && childMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { data: childMenu, coordinate: {
+                }) ?? (_jsx(MenuElement, { toLeft: isLeftAligned, data: viewItem, className: className, update: update, open: open, onActionEvent: onActionEvent })), _jsxs("div", { children: [open && childMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { data: childMenu, coordinate: {
                                 x: 3,
                                 y: 0,
                                 toLeft: isLeftAligned,
                                 left: leftPos,
-                            } }) })), open && asyncFuncElement && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { menu: () => asyncFuncElement, data: [], coordinate: {
+                            }, onActionEvent: onActionEvent }) })), open && asyncFuncElement && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { menu: () => asyncFuncElement, data: [], coordinate: {
                                 x: 3,
                                 y: 0,
                                 toLeft: isLeftAligned,
                                 left: leftPos,
-                            } }) })), open && onFocusMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { data: onFocusMenu, coordinate: {
+                            }, onActionEvent: onActionEvent }) })), open && onFocusMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { data: onFocusMenu, coordinate: {
                                 x: 3,
                                 y: 0,
                                 toLeft: isLeftAligned,
                                 left: leftPos,
-                            } }) }))] })] }));
+                            }, onActionEvent: onActionEvent }) }))] })] }));
 };
-export function Menu({ coordinate = { x: 0, y: 0, toLeft: false, left: 0 }, data, zIndex, menu, className, menuElement, }) {
+export function Menu({ coordinate = { x: 0, y: 0, toLeft: false, left: 0 }, data, zIndex, menu, className, menuElement, onActionEvent, }) {
     const [, forceUpdate] = useState(false);
     const update = () => forceUpdate((p) => !p);
     const refMenu = useRef(null);
@@ -257,6 +321,6 @@ export function Menu({ coordinate = { x: 0, y: 0, toLeft: false, left: 0 }, data
             ...alignStyle,
         }, children: menu
             ? menu(dataMemo)
-            : dataMemo.map((item, i, arr) => (_jsx(MenuItemWrapper, { item: item, index: i, update: update, className: className, isLeftAligned: isLeftAligned, leftPos: leftPos, menuElement: menuElement, open: activeIndex === i, setOpenIndex: setActiveIndex }, typeof item.name === "string" ? item.name : i))) }));
+            : dataMemo.map((item, i, arr) => (_jsx(MenuItemWrapper, { item: item, index: i, update: update, className: className, isLeftAligned: isLeftAligned, leftPos: leftPos, menuElement: menuElement, open: activeIndex === i, setOpenIndex: setActiveIndex, onActionEvent: onActionEvent }, typeof item.name === "string" ? item.name : i))) }));
 }
 export { MenuProgress, MenuElement };

package/lib/common/src/menu/menuMouse.d.ts

@@ -28,6 +28,22 @@ export type ContextMenuLayerProps = {
     onConsume?: () => void;
     className?: (active?: boolean) => string;
 };
+export type ContextMenuActionCounters = {
+    click: number;
+    ok: number;
+    error: number;
+    taskOk: number;
+    taskError: number;
+    submenuOpen: number;
+    submenuOk: number;
+    submenuError: number;
+    funcOpen: number;
+    funcOk: number;
+    funcError: number;
+    focusOpen: number;
+    focusOk: number;
+    focusError: number;
+};
 export type ContextMenuStatsSnapshot = {
     openAt: number;
     openAtPoint: number;
@@ -37,6 +53,8 @@ export type ContextMenuStatsSnapshot = {
     empty: number;
     sources: Record<string, number>;
     layers: Record<string, number>;
+    actionTotals: ContextMenuActionCounters;
+    actions: Record<string, ContextMenuActionCounters>;
 };
 export type ContextMenuStats = {
     getSnapshot(): ContextMenuStatsSnapshot;

package/lib/common/src/menu/menuMouse.js

@@ -2,6 +2,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Menu } from "./menu";
 import { OutsideClickArea } from "../hooks/useOutside";
+function createActionCounters() {
+    return {
+        click: 0,
+        ok: 0,
+        error: 0,
+        taskOk: 0,
+        taskError: 0,
+        submenuOpen: 0,
+        submenuOk: 0,
+        submenuError: 0,
+        funcOpen: 0,
+        funcOk: 0,
+        funcError: 0,
+        focusOpen: 0,
+        focusOk: 0,
+        focusError: 0,
+    };
+}
+function cloneActionCounters(counters) {
+    return { ...counters };
+}
+function cloneActions(actions) {
+    const result = {};
+    for (const [key, counters] of Object.entries(actions))
+        result[key] = cloneActionCounters(counters);
+    return result;
+}
 function normalizeItems(items) {
     return (items ?? []).filter(Boolean);
 }
@@ -42,6 +69,8 @@ export function createContextMenu(data) {
         empty: 0,
         sources: {},
         layers: {},
+        actionTotals: createActionCounters(),
+        actions: {},
     };
     const layers = new Set();
     let layerSeq = 0;
@@ -64,6 +93,8 @@ export function createContextMenu(data) {
             empty: statsState.empty,
             sources: { ...statsState.sources },
             layers: { ...statsState.layers },
+            actionTotals: cloneActionCounters(statsState.actionTotals),
+            actions: cloneActions(statsState.actions),
         };
     }
     function emitStats() {
@@ -80,6 +111,15 @@ export function createContextMenu(data) {
             return;
         map[key] = (map[key] ?? 0) + 1;
     }
+    function recordMenuAction(event) {
+        const stat = event.type;
+        statsState.actionTotals[stat] += 1;
+        if (event.actionKey) {
+            const counters = statsState.actions[event.actionKey] ??= createActionCounters();
+            counters[stat] += 1;
+        }
+        emitStats();
+    }
     const stats = {
         getSnapshot: statsSnapshot,
         reset() {
@@ -91,6 +131,8 @@ export function createContextMenu(data) {
             statsState.empty = 0;
             statsState.sources = {};
             statsState.layers = {};
+            statsState.actionTotals = createActionCounters();
+            statsState.actions = {};
             emitStats();
         },
         onChange(cb) {
@@ -249,7 +291,7 @@ export function createContextMenu(data) {
                     if (!state.open || hasQueuedItems(other))
                         openQueued(event);
                 }
-            }, children: [children, state.open && enabled && state.layerId == layerId && _jsx(OutsideClickArea, { outsideClick: handleClose, children: _jsx(Menu, { className: className, data: state.items, coordinate: relativePoint(), zIndex: zIndex }) })] });
+            }, children: [children, state.open && enabled && state.layerId == layerId && _jsx(OutsideClickArea, { outsideClick: handleClose, children: _jsx(Menu, { className: className, data: state.items, coordinate: relativePoint(), zIndex: zIndex, onActionEvent: recordMenuAction }) })] });
     }
     return {
         bb,

package/lib/common/src/styles/tokens.d.ts

@@ -10,19 +10,20 @@ export declare const tokens: {
         readonly borderCommon: "rgb(50, 62, 71)";
     };
     readonly menu: {
-        readonly bgColor: "rgba(12, 12, 12, 0.91)";
-        readonly blur: "10px";
+        readonly bgColor: "#0c0c0c";
+        readonly blur: "0px";
         readonly border: "1px solid rgba(255, 255, 255, 0.41)";
-        readonly activeBackground: "rgba(255, 255, 255, 0.23)";
+        readonly activeBackground: "#262626";
         readonly itemColor: "#fff";
+        readonly itemActiveBgColor: "#262626";
+        readonly itemActiveColor: "#fff";
         readonly itemHoverColor: "#101010";
         readonly itemHoverBgColor: "#fff";
+        readonly itemPressedColor: "#101010";
+        readonly itemPressedBgColor: "#f2c94c";
         readonly outlineColor: "#007bff";
         readonly shadow: "0 0 20px 14px rgba(34, 60, 80, 0.2)";
     };
-    /** FloatingWindow window chrome (--wnd-*). Defaults = legacy look; apps re-skin via :root[data-theme].
-     *  --wnd-header-height/color/font-size/letter-spacing/transform are intentionally undeclared
-     *  (inherit/auto) until a theme sets them. */
     readonly wnd: {
         readonly bg: "transparent";
         readonly border: "none";