wenay-react2 1.0.37 → 1.0.38

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

@@ -111,6 +111,114 @@ export function useReplaySubscribe(remote, cb, options = {}) {
     }, []);
     return useMemo(() => ({ ready, error, stale, seq, lastTs, restart }), [ready, error, stale, seq, lastTs, restart]);
 }
+/**
+ * Route-replaceable replay subscription. Use this when the app can promote/demote between
+ * transports (relay <-> direct) and must keep one logical replay fold with no gaps or dups.
+ * Changing the `remote` prop is still a fresh subscription boundary; no-gap hand-off is explicit
+ * through `controller.switchRoute(...)`.
+ */
+export function useReplayRouteSubscribe(remote, cb, options = {}) {
+    const { since, keepSeq = true, enabled = true, label, onSeq, onError, onRoute, policy, hint } = options;
+    const cbRef = useLatestRef(cb);
+    const hooksRef = useLatestRef({ onSeq, onError, onRoute });
+    const hintRef = useLatestRef(hint);
+    const seqRef = useRef(since);
+    const labelRef = useRef(label);
+    const activeRef = useRef(false);
+    const subRef = useRef(null);
+    const lastRemoteRef = useRef(undefined);
+    const [ready, setReady] = useState(false);
+    const [error, setError] = useState(null);
+    const [route, setRoute] = useState(null);
+    const [switching, setSwitching] = useState(false);
+    useEffect(() => {
+        if (!remote || !enabled)
+            return;
+        if (lastRemoteRef.current !== undefined && lastRemoteRef.current !== remote)
+            seqRef.current = undefined;
+        lastRemoteRef.current = remote;
+        let alive = true;
+        setReady(false);
+        setError(null);
+        setRoute(null);
+        setSwitching(false);
+        labelRef.current = label;
+        activeRef.current = false;
+        const off = Replay.replayRouteSubscribe(remote, (...event) => cbRef.current(...event), {
+            since: seqRef.current,
+            label,
+            policy,
+            hint: hintRef.current,
+            onSeq: seq => {
+                seqRef.current = seq;
+                hooksRef.current.onSeq?.(seq);
+            },
+            onError: e => {
+                if (alive)
+                    setError(e);
+                hooksRef.current.onError?.(e);
+            },
+            onRoute: ev => {
+                if (alive) {
+                    setRoute(ev);
+                    setSwitching(ev.phase == 'switching');
+                    if (ev.phase == 'switching')
+                        setReady(false);
+                    if (ev.phase == 'ready') {
+                        labelRef.current = ev.to;
+                        activeRef.current = true;
+                        setReady(true);
+                    }
+                    if (ev.phase == 'closed') {
+                        activeRef.current = false;
+                        setReady(false);
+                    }
+                    if (ev.phase == 'error') {
+                        activeRef.current = subRef.current?.active() ?? false;
+                        setReady(activeRef.current);
+                    }
+                }
+                hooksRef.current.onRoute?.(ev);
+            },
+        });
+        subRef.current = off;
+        off.ready.then(() => {
+            if (!alive)
+                return;
+            activeRef.current = off.active();
+            labelRef.current = off.label();
+            setReady(true);
+            setSwitching(false);
+        }, e => {
+            if (!alive)
+                return;
+            setError(e);
+            setReady(false);
+            setSwitching(false);
+        });
+        return () => {
+            alive = false;
+            subRef.current = null;
+            activeRef.current = false;
+            off();
+            if (!keepSeq)
+                seqRef.current = since;
+        };
+        // label/since/keepSeq are start-position metadata; route changes go through switchRoute(). hint rides a ref.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [remote, enabled, policy]);
+    const seq = useCallback(() => subRef.current?.seq() ?? seqRef.current ?? -1, []);
+    const currentLabel = useCallback(() => subRef.current?.label() ?? labelRef.current, []);
+    const active = useCallback(() => subRef.current?.active() ?? activeRef.current, []);
+    const switchRoute = useCallback((nextRemote, switchOptions) => {
+        const sub = subRef.current;
+        if (!sub)
+            return Promise.reject(new Error("useReplayRouteSubscribe: no active route subscription"));
+        setError(null);
+        return sub.switch(nextRemote, switchOptions);
+    }, []);
+    return useMemo(() => ({ ready, error, route, switching, seq, label: currentLabel, active, switchRoute }), [ready, error, route, switching, seq, currentLabel, active, switchRoute]);
+}
 /**
  * Sync an existing mirror store from a store replay line (`Observe.exposeStoreReplay(...).api.replay`).
  * Thin lifecycle wrapper over `Observe.syncStoreReplay`: the keyframe (root patch) and the
@@ -188,6 +296,120 @@ export function useStoreReplaySync(store, remote, options = {}) {
     }, []);
     return useMemo(() => ({ ready, error, stale, seq, lastTs, restart }), [ready, error, stale, seq, lastTs, restart]);
 }
+/**
+ * Route-replaceable store replay sync. The supplied store remains the fold target while
+ * switchRoute() promotes/demotes the underlying replay route.
+ */
+export function useStoreReplayRouteSync(store, remote, options = {}) {
+    const { since, keepSeq = true, enabled = true, label, onSeq, onError, onRoute, policy, hint } = options;
+    const hooksRef = useLatestRef({ onSeq, onError, onRoute });
+    const hintRef = useLatestRef(hint);
+    const seqRef = useRef(since);
+    const labelRef = useRef(label);
+    const activeRef = useRef(false);
+    const subRef = useRef(null);
+    const lastRemoteRef = useRef(undefined);
+    const [ready, setReady] = useState(false);
+    const [error, setError] = useState(null);
+    const [route, setRoute] = useState(null);
+    const [switching, setSwitching] = useState(false);
+    useEffect(() => {
+        if (!store || !remote || !enabled)
+            return;
+        if (lastRemoteRef.current !== undefined && lastRemoteRef.current !== remote)
+            seqRef.current = undefined;
+        lastRemoteRef.current = remote;
+        let alive = true;
+        setReady(false);
+        setError(null);
+        setRoute(null);
+        setSwitching(false);
+        labelRef.current = label;
+        activeRef.current = false;
+        const off = Observe.syncStoreReplayRoute(store, remote, {
+            since: seqRef.current,
+            label,
+            policy,
+            hint: hintRef.current,
+            onSeq: seq => {
+                seqRef.current = seq;
+                hooksRef.current.onSeq?.(seq);
+            },
+            onError: e => {
+                if (alive)
+                    setError(e);
+                hooksRef.current.onError?.(e);
+            },
+            onRoute: ev => {
+                if (alive) {
+                    setRoute(ev);
+                    setSwitching(ev.phase == 'switching');
+                    if (ev.phase == 'switching')
+                        setReady(false);
+                    if (ev.phase == 'ready') {
+                        labelRef.current = ev.to;
+                        activeRef.current = true;
+                        setReady(true);
+                    }
+                    if (ev.phase == 'closed') {
+                        activeRef.current = false;
+                        setReady(false);
+                    }
+                    if (ev.phase == 'error') {
+                        activeRef.current = subRef.current?.active() ?? false;
+                        setReady(activeRef.current);
+                    }
+                }
+                hooksRef.current.onRoute?.(ev);
+            },
+        });
+        subRef.current = off;
+        off.ready.then(() => {
+            if (!alive)
+                return;
+            activeRef.current = off.active();
+            labelRef.current = off.label();
+            setReady(true);
+            setSwitching(false);
+        }, e => {
+            if (!alive)
+                return;
+            setError(e);
+            setReady(false);
+            setSwitching(false);
+        });
+        return () => {
+            alive = false;
+            subRef.current = null;
+            activeRef.current = false;
+            off();
+            if (!keepSeq)
+                seqRef.current = since;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [store, remote, enabled, policy]);
+    const seq = useCallback(() => subRef.current?.seq() ?? seqRef.current ?? -1, []);
+    const currentLabel = useCallback(() => subRef.current?.label() ?? labelRef.current, []);
+    const active = useCallback(() => subRef.current?.active() ?? activeRef.current, []);
+    const switchRoute = useCallback((nextRemote, switchOptions) => {
+        const sub = subRef.current;
+        if (!sub)
+            return Promise.reject(new Error("useStoreReplayRouteSync: no active route subscription"));
+        setError(null);
+        return sub.switch(nextRemote, switchOptions);
+    }, []);
+    return useMemo(() => ({ ready, error, route, switching, seq, label: currentLabel, active, switchRoute }), [ready, error, route, switching, seq, currentLabel, active, switchRoute]);
+}
+/** Create a local mirror store and keep it synced through a route-replaceable replay remote. */
+export function useStoreReplayRouteMirror(remote, initial, options = {}) {
+    const storeRef = useRef(null);
+    if (!storeRef.current || storeRef.current.remote !== remote) {
+        storeRef.current = { remote, store: Observe.createStore(initial) };
+    }
+    const store = storeRef.current.store;
+    const sync = useStoreReplayRouteSync(store, remote, options);
+    return useMemo(() => ({ ...sync, store }), [sync, store]);
+}
 /**
  * Convenience: create a local mirror store and keep it synced from a store replay line.
  * The store lives in a ref — a component remount keeps both the state and the seq,

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

@@ -0,0 +1,13 @@
+export declare const logStyleTokens: {
+    readonly text: "var(--logs-notification-text, #fff)";
+    readonly accent: "var(--logs-notification-accent, #5D9FFA)";
+    readonly toggleBg: "var(--logs-toggle-bg, rgb(58, 58, 58))";
+    readonly toggleOffBg: "var(--logs-toggle-off-bg, rgb(144, 60, 60))";
+    readonly divider: "var(--logs-divider, rgba(255, 255, 255, 1))";
+    readonly tabNavBg: "var(--logs-tab-nav-bg, #333)";
+    readonly tabBg: "var(--logs-tab-bg, #444)";
+    readonly tabActiveBg: "var(--logs-tab-active-bg, #666)";
+    readonly tabText: "var(--logs-tab-text, #fff)";
+};
+export declare function logSeverityBackground(importance?: number): string;
+export declare function logDividerGradient(): string;

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

@@ -0,0 +1,18 @@
+export const logStyleTokens = {
+    text: 'var(--logs-notification-text, #fff)',
+    accent: 'var(--logs-notification-accent, #5D9FFA)',
+    toggleBg: 'var(--logs-toggle-bg, rgb(58, 58, 58))',
+    toggleOffBg: 'var(--logs-toggle-off-bg, rgb(144, 60, 60))',
+    divider: 'var(--logs-divider, rgba(255, 255, 255, 1))',
+    tabNavBg: 'var(--logs-tab-nav-bg, #333)',
+    tabBg: 'var(--logs-tab-bg, #444)',
+    tabActiveBg: 'var(--logs-tab-active-bg, #666)',
+    tabText: 'var(--logs-tab-text, #fff)',
+};
+export function logSeverityBackground(importance = 0) {
+    const level = Number.isFinite(importance) ? Math.max(0, importance) : 0;
+    return `rgb(${Math.min(255, level * 10)}, 73, 35)`;
+}
+export function logDividerGradient() {
+    return `linear-gradient(to right, transparent, ${logStyleTokens.divider}, transparent)`;
+}

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

@@ -6,6 +6,7 @@ import { renderBy, updateBy } from "../../updateBy";
 import { contextMenu } from "../menu/menuMouse";
 import { memoryGetOrCreate } from "../utils/memoryStore";
 import { ParamsEditor } from "../components/ParamsEditor";
+import { logDividerGradient, logSeverityBackground, logStyleTokens } from "./logStyles";
 const cashLogs = new Map();
 const datumConst = {
     map: cashLogs,
@@ -172,11 +173,8 @@ export function PageLogs({ update }) {
     return _jsx(Main, {});
 }
 function Message({ logs }) {
-    let red = (logs.var ?? 0) * 10;
-    if (red > 255)
-        red = 255;
-    return _jsxs("div", { className: "testAnime", style: { width: "200px", color: "rgb(255,255,255)", height: "auto", marginTop: "10px", borderRight: "5px solid #5D9FFA", background: `rgb(${red},73,35)` }, children: [_jsx("p", { style: { textAlign: "center", fontSize: "10px", marginBottom: "1px" }, children: "notification" }), _jsx("hr", { style: {
-                    backgroundImage: "linear-gradient(to right, transparent, rgba(255, 255, 255, 1), transparent)",
+    return _jsxs("div", { className: "testAnime", style: { width: "200px", color: logStyleTokens.text, height: "auto", marginTop: "10px", borderRight: `5px solid ${logStyleTokens.accent}`, background: logSeverityBackground(logs.var) }, children: [_jsx("p", { style: { textAlign: "center", fontSize: "10px", marginBottom: "1px" }, children: "notification" }), _jsx("hr", { style: {
+                    backgroundImage: logDividerGradient(),
                     border: 0,
                     height: "1px",
                     margin: "0 0 0 0",
@@ -208,8 +206,8 @@ export function MessageEventLogs({ zIndex }) {
     const tr = [...Object.values(tt)].reverse().slice(0, 10);
     return _jsxs("div", { style: { maxHeight: "50vh", position: "absolute", right: "1px", zIndex }, children: [_jsx("div", { onClick: () => { setting.params.show = !setting.params.show; renderBy(tt); }, style: { margin: 3, padding: 3, right: 0, position: "absolute", zIndex: 120,
                     ...setting.params.show ?
-                        { background: "rgb(58,58,58)", fontSize: "25px" } :
-                        { background: "rgb(144,60,60)" }
+                        { background: logStyleTokens.toggleBg, fontSize: "25px" } :
+                        { background: logStyleTokens.toggleOffBg }
                 }, children: setting.params.show ? "X" : "log" }), _jsx("div", { children: setting.params.show ? tr : null })] });
 }
 const defPageBase = {

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AgGridReact } from 'ag-grid-react';
+import { logDividerGradient, logSeverityBackground, logStyleTokens } from './logStyles';
 /** -----------------------------
  *  2. memoryGetOrCreate function -
  *     loads and saves data in localStorage.
@@ -185,36 +186,31 @@ export function LogsNotifications() {
     if (!showMessages) {
         // If popups are hidden, show only "log"
         return (_jsx("div", { style: { position: 'absolute', right: 10, top: 10, zIndex: 999 }, children: _jsx("div", { style: {
-                    background: 'rgb(144,60,60)',
+                    background: logStyleTokens.toggleOffBg,
                     padding: '6px 10px',
                     cursor: 'pointer'
                 }, onClick: () => setShowMessages(true), children: "log" }) }));
     }
     // Otherwise render the current notification list
     return (_jsxs("div", { style: { position: 'absolute', right: 10, top: 10, zIndex: 999 }, children: [_jsx("div", { style: {
-                    background: 'rgb(58,58,58)',
+                    background: logStyleTokens.toggleBg,
                     fontSize: '20px',
                     padding: '6px 10px',
                     cursor: 'pointer'
-                }, onClick: () => setShowMessages(false), children: "X" }), _jsx("div", { children: notifications.slice(0, 10).map(({ id, log }) => {
-                    let red = (log.var ?? 0) * 10;
-                    if (red > 255)
-                        red = 255;
-                    return (_jsxs("div", { className: "testAnime example-exit", style: {
-                            width: 200,
-                            color: 'white',
-                            marginTop: 10,
-                            borderRight: '5px solid #5D9FFA',
-                            backgroundColor: `rgb(${red},73,35)`,
-                            padding: 8,
-                            wordWrap: 'break-word'
-                        }, children: [_jsx("p", { style: { textAlign: 'center', fontSize: 10, marginBottom: 1 }, children: "notification" }), _jsx("hr", { style: {
-                                    backgroundImage: 'linear-gradient(to right, transparent, rgba(255, 255, 255, 1), transparent)',
-                                    border: 0,
-                                    height: 1,
-                                    margin: 0
-                                } }), _jsx("div", { style: { textAlign: 'right', marginRight: 10 }, children: typeof log.txt === 'object' ? JSON.stringify(log.txt) : log.txt }), _jsx("p", { style: { textAlign: 'right', marginRight: 10 }, children: new Date(log.time).toLocaleDateString() })] }, id));
-                }) })] }));
+                }, onClick: () => setShowMessages(false), children: "X" }), _jsx("div", { children: notifications.slice(0, 10).map(({ id, log }) => (_jsxs("div", { className: "testAnime example-exit", style: {
+                        width: 200,
+                        color: logStyleTokens.text,
+                        marginTop: 10,
+                        borderRight: `5px solid ${logStyleTokens.accent}`,
+                        backgroundColor: logSeverityBackground(log.var),
+                        padding: 8,
+                        wordWrap: 'break-word'
+                    }, children: [_jsx("p", { style: { textAlign: 'center', fontSize: 10, marginBottom: 1 }, children: "notification" }), _jsx("hr", { style: {
+                                backgroundImage: logDividerGradient(),
+                                border: 0,
+                                height: 1,
+                                margin: 0
+                            } }), _jsx("div", { style: { textAlign: 'right', marginRight: 10 }, children: typeof log.txt === 'object' ? JSON.stringify(log.txt) : log.txt }), _jsx("p", { style: { textAlign: 'right', marginRight: 10 }, children: new Date(log.time).toLocaleDateString() })] }, id))) })] }));
 }
 /** -----------------------------
  *  8. LogsSettings component
@@ -231,15 +227,15 @@ export function LogsSettings() {
  */
 export function MainPage() {
     const [currentTab, setCurrentTab] = useState('table');
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, padding: 10, background: '#333' }, children: [_jsx("button", { onClick: () => setCurrentTab('table'), style: {
-                            backgroundColor: currentTab === 'table' ? '#666' : '#444',
-                            color: 'white',
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, padding: 10, background: logStyleTokens.tabNavBg }, children: [_jsx("button", { onClick: () => setCurrentTab('table'), style: {
+                            backgroundColor: currentTab === 'table' ? logStyleTokens.tabActiveBg : logStyleTokens.tabBg,
+                            color: logStyleTokens.tabText,
                             border: 'none',
                             padding: '8px',
                             cursor: 'pointer'
                         }, children: "Log table" }), _jsx("button", { onClick: () => setCurrentTab('settings'), style: {
-                            backgroundColor: currentTab === 'settings' ? '#666' : '#444',
-                            color: 'white',
+                            backgroundColor: currentTab === 'settings' ? logStyleTokens.tabActiveBg : logStyleTokens.tabBg,
+                            color: logStyleTokens.tabText,
                             border: 'none',
                             padding: '8px',
                             cursor: 'pointer'

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

@@ -31,11 +31,12 @@ declare function MenuProgress({ data }: {
 /*******************************************************
  * Main menu element with onClick and counters
  *******************************************************/
-declare function MenuElement({ data: item, toLeft, className, update, }: {
+declare function MenuElement({ data: item, toLeft, className, update, open, }: {
     data: Pick<MenuItemStrict, "onClick" | "active" | "name" | "getStatus">;
     toLeft: boolean;
     className?: (active?: boolean) => string;
     update: () => void;
+    open?: boolean;
 }): ReactElement;
 /*******************************************************
  * Menu renders the popup menu with support for

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, }) {
+function MenuElement({ data: item, toLeft, className, update, open, }) {
     const unsubOk = useRef(null);
     const unsubErr = useRef(null);
     useEffect(() => {
@@ -42,8 +42,9 @@ function MenuElement({ data: item, toLeft, className, update, }) {
         };
     }, []);
     const [progress, setProgress] = useState(null);
-    return (_jsx("div", { className: className?.(item.active?.()) ||
-            "MenuR " + (item.active?.() ? "toButtonA" : "toButton"), style: { float: toLeft ? "left" : "right" }, onClick: () => {
+    const active = open || item.active?.();
+    return (_jsx("div", { className: className?.(active) ||
+            "MenuR " + (active ? "toButtonA" : "toButton"), style: { float: toLeft ? "left" : "right" }, onClick: () => {
             if (!item.onClick)
                 return;
             const result = item?.onClick?.(item);
@@ -111,12 +112,12 @@ function MenuElement({ data: item, toLeft, className, update, }) {
                     ? item.name
                     : item.name(item.getStatus?.()), progress && _jsx(MenuProgress, { data: progress })] }) }));
 }
-const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPos, menuElement, fullArray, }) => {
+const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPos, menuElement, open, setOpenIndex, }) => {
     const [childMenu, setChildMenu] = useState([]);
     const [asyncFuncElement, setAsyncFuncElement] = useState(null);
     const [onFocusMenu, setOnFocusMenu] = useState([]);
     useEffect(() => {
-        if (item.status && item.next) {
+        if (open && item.next) {
             let alive = true; // guard: do not set state after unmount or item change
             const result = item.next();
             if (result instanceof Promise) {
@@ -133,9 +134,9 @@ const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPo
         else {
             setChildMenu([]);
         }
-    }, [item.status, item.next]);
+    }, [open, item.next]);
     useEffect(() => {
-        if (item.status && item.func) {
+        if (open && item.func) {
             let alive = true;
             const result = item.func();
             if (result instanceof Promise) {
@@ -152,9 +153,9 @@ const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPo
         else {
             setAsyncFuncElement(null);
         }
-    }, [item.status, item.func]);
+    }, [open, item.func]);
     useEffect(() => {
-        if (item.status && item.onFocus) {
+        if (open && item.onFocus) {
             let alive = true;
             const result = item.onFocus();
             if (result instanceof Promise) {
@@ -171,33 +172,31 @@ const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPo
         else {
             setOnFocusMenu([]);
         }
-    }, [item.status, item.onFocus]);
+    }, [open, item.onFocus]);
     const onMouseEnter = () => {
-        if (item.status)
+        if (open)
             return;
-        fullArray.forEach((it, j) => {
-            it.status = j === index;
-        });
-        update();
+        setOpenIndex(index);
     };
+    const viewItem = open == !!item.status ? item : { ...item, status: open };
     return (_jsxs("div", { className: "toLine", onMouseEnter: onMouseEnter, children: [menuElement
-                ? menuElement(item)
+                ? menuElement(viewItem)
                 : item.menuElement?.({
                     toLeft: isLeftAligned,
-                    data: item,
+                    data: viewItem,
                     className,
                     update,
-                }) ?? (_jsx(MenuElement, { toLeft: isLeftAligned, data: item, className: className, update: update })), _jsxs("div", { children: [item.status && 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 })), _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,
-                            } }) })), item.status && asyncFuncElement && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { menu: () => asyncFuncElement, data: [], coordinate: {
+                            } }) })), open && asyncFuncElement && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { menu: () => asyncFuncElement, data: [], coordinate: {
                                 x: 3,
                                 y: 0,
                                 toLeft: isLeftAligned,
                                 left: leftPos,
-                            } }) })), item.status && onFocusMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { data: onFocusMenu, coordinate: {
+                            } }) })), open && onFocusMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(Menu, { data: onFocusMenu, coordinate: {
                                 x: 3,
                                 y: 0,
                                 toLeft: isLeftAligned,
@@ -209,6 +208,14 @@ export function Menu({ coordinate = { x: 0, y: 0, toLeft: false, left: 0 }, data
     const update = () => forceUpdate((p) => !p);
     const refMenu = useRef(null);
     const dataMemo = useMemo(() => data.filter(Boolean), [data, data.length]);
+    const initialActiveIndex = () => {
+        const i = dataMemo.findIndex(item => item.status);
+        return i == -1 ? null : i;
+    };
+    const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
+    useEffect(() => {
+        setActiveIndex(prev => prev != null && dataMemo[prev] ? prev : initialActiveIndex());
+    }, [dataMemo]);
     const [top, setTop] = useState(coordinate.y);
     const [leftPos, setLeftPos] = useState(coordinate.x);
     const [menuWidth, setMenuWidth] = useState(0);
@@ -250,6 +257,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, fullArray: dataMemo }, 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 }, typeof item.name === "string" ? item.name : i))) }));
 }
 export { MenuProgress, MenuElement };

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

@@ -17,6 +17,7 @@ export declare const tokens: {
         readonly itemColor: "#fff";
         readonly itemHoverColor: "#101010";
         readonly itemHoverBgColor: "#fff";
+        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].
@@ -55,7 +56,7 @@ export declare const tokens: {
         readonly shadow: "0 12px 40px rgba(0, 0, 0, 0.5)";
         /** var(--color-bg-light) in CSS */
         readonly navBg: "#17202e";
-        readonly navWidth: "168px";
+        readonly navWidth: "220px";
     };
     /** Toolbar (createToolbar) chrome (--tb-*). Dark defaults; apps re-skin via :root[data-theme]. */
     readonly tb: {
@@ -74,6 +75,18 @@ export declare const tokens: {
         readonly popRadius: "8px";
         readonly popShadow: "0 8px 28px rgba(0, 0, 0, 0.5)";
     };
+    /** Logs chrome (--logs-*). Defaults preserve the old logger look; apps re-skin via CSS vars. */
+    readonly logs: {
+        readonly notificationText: "#fff";
+        readonly notificationAccent: "#5D9FFA";
+        readonly toggleBg: "rgb(58, 58, 58)";
+        readonly toggleOffBg: "rgb(144, 60, 60)";
+        readonly divider: "rgba(255, 255, 255, 1)";
+        readonly tabNavBg: "#333";
+        readonly tabBg: "#444";
+        readonly tabActiveBg: "#666";
+        readonly tabText: "#fff";
+    };
     readonly font: {
         readonly family: "Roboto";
         readonly sizeBase: "12px";

package/lib/common/src/styles/tokens.js

@@ -19,6 +19,7 @@ export const tokens = {
         itemColor: '#fff',
         itemHoverColor: '#101010',
         itemHoverBgColor: '#fff',
+        outlineColor: '#007bff',
         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].
@@ -57,7 +58,7 @@ export const tokens = {
         shadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
         /** var(--color-bg-light) in CSS */
         navBg: '#17202e',
-        navWidth: '168px',
+        navWidth: '220px',
     },
     /** Toolbar (createToolbar) chrome (--tb-*). Dark defaults; apps re-skin via :root[data-theme]. */
     tb: {
@@ -76,6 +77,18 @@ export const tokens = {
         popRadius: '8px',
         popShadow: '0 8px 28px rgba(0, 0, 0, 0.5)',
     },
+    /** Logs chrome (--logs-*). Defaults preserve the old logger look; apps re-skin via CSS vars. */
+    logs: {
+        notificationText: '#fff',
+        notificationAccent: '#5D9FFA',
+        toggleBg: 'rgb(58, 58, 58)',
+        toggleOffBg: 'rgb(144, 60, 60)',
+        divider: 'rgba(255, 255, 255, 1)',
+        tabNavBg: '#333',
+        tabBg: '#444',
+        tabActiveBg: '#666',
+        tabText: '#fff',
+    },
     font: {
         family: 'Roboto',
         sizeBase: '12px',

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

@@ -6,3 +6,4 @@ export * from './inputAutoStep';
 export * from './memoryStore';
 export * from './observableMap';
 export * from './pageVisibilityContext';
+export * from './searchHistory';

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

@@ -6,3 +6,4 @@ export * from './inputAutoStep';
 export * from './memoryStore';
 export * from './observableMap';
 export * from './pageVisibilityContext';
+export * from './searchHistory';

package/lib/common/src/utils/searchHistory.d.ts

@@ -0,0 +1,14 @@
+export type SearchHistoryState = {
+    items: string[];
+};
+export type SearchHistoryApi = ReturnType<typeof createSearchHistory>;
+export declare function createSearchHistory(opts: {
+    key: string;
+    max?: number;
+}): {
+    readonly items: string[];
+    use(): string[];
+    add(value: string): void;
+    remove(value: string): void;
+    clear(): void;
+};