wenay-react2 1.0.38 → 1.0.39

package/lib/common/src/components/Input.d.ts

@@ -1,21 +1,40 @@
 import React from "react";
-export declare function TextInputPanel({ callback, name, txt }: {
+export type TextInputPanelProps = {
     callback: (txt: string) => void;
     name?: string;
     txt?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function TextInputModal({ callback, name, outClick, keyForSave, txt }: Parameters<typeof TextInputPanel>[0] & {
+};
+export declare function useTextInputPanel({ callback, txt }: Pick<TextInputPanelProps, "callback" | "txt">): {
+    getValue: () => string;
+    setValue: (next: string) => void;
+    submit: () => void;
+    inputProps: {
+        defaultValue: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    };
+};
+export declare function TextInputPanel({ callback, name, txt }: TextInputPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextInputModal({ callback, name, outClick, keyForSave, txt }: TextInputPanelProps & {
     outClick: () => any;
     keyForSave?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function FileInputModal({ callback, name, outClick, keyForSave }: Parameters<typeof FileInputPanel>[0] & {
+export declare function FileInputModal({ callback, name, outClick, keyForSave }: FileInputPanelProps & {
     outClick: () => any;
     keyForSave?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function FileInputPanel({ callback, name }: {
+export type FileInputPanelProps = {
     callback: (file: File | null) => void;
     name?: string;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare function useFileInputPanel({ callback }: Pick<FileInputPanelProps, "callback">): {
+    getFile: () => File | null;
+    setFile: (next: File | null) => void;
+    submit: () => void;
+    inputProps: {
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    };
+};
+export declare function FileInputPanel({ callback, name }: FileInputPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare function FreeModal({ outClick, children, zIndex, size, keyForSave }: {
     zIndex?: number;
     outClick: () => any;

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

@@ -7,11 +7,21 @@ function ModalWrapper({ outClick, children, zIndex, size = { height: 150, width:
     const defaultPosition = position ?? { y: -(size.height / 2), x: -(size.width / 2) };
     return _jsx(OutsideClickArea, { outsideClick: outClick, style: { position: "absolute", top: "50%", left: "50%" }, children: _jsx(FloatingWindow, { keyForSave: keyForSave, size: size, zIndex: zIndex, position: defaultPosition, className: "fon border fonLight", moveOnlyHeader: true, children: children }) });
 }
-export function TextInputPanel({ callback, name = "", txt = "" }) {
+export function useTextInputPanel({ callback, txt = "" }) {
     const txtName = useRef(txt);
-    return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "text", style: { width: "100%" }, defaultValue: txtName.current, onChange: (e) => {
-                    txtName.current = e.target.value;
-                } }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: () => { callback(txtName.current); }, children: "send" })] });
+    return {
+        getValue: () => txtName.current,
+        setValue: (next) => { txtName.current = next; },
+        submit: () => callback(txtName.current),
+        inputProps: {
+            defaultValue: txtName.current,
+            onChange: (e) => { txtName.current = e.target.value; },
+        },
+    };
+}
+export function TextInputPanel({ callback, name = "", txt = "" }) {
+    const input = useTextInputPanel({ callback, txt });
+    return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "text", style: { width: "100%" }, ...input.inputProps }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: input.submit, children: "send" })] });
 }
 export function TextInputModal({ callback, name, outClick, keyForSave = "TextInputModal", txt }) {
     return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: { height: 150, width: 300 }, position: { y: -150, x: -250 }, children: _jsx(TextInputPanel, { callback: callback, name: name, txt: txt }) });
@@ -19,11 +29,20 @@ export function TextInputModal({ callback, name, outClick, keyForSave = "TextInp
 export function FileInputModal({ callback, name, outClick, keyForSave = "FileInputModal" }) {
     return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: { height: 150, width: 300 }, position: { y: -150, x: -250 }, children: _jsx(FileInputPanel, { callback: callback, name: name }) });
 }
-export function FileInputPanel({ callback, name = "" }) {
+export function useFileInputPanel({ callback }) {
     const file = useRef(null);
-    return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "file", style: { width: "100%" }, onChange: (e) => {
-                    file.current = e.target.files?.[0] ?? null;
-                } }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: () => { callback(file.current); }, children: "send" })] });
+    return {
+        getFile: () => file.current,
+        setFile: (next) => { file.current = next; },
+        submit: () => callback(file.current),
+        inputProps: {
+            onChange: (e) => { file.current = e.target.files?.[0] ?? null; },
+        },
+    };
+}
+export function FileInputPanel({ callback, name = "" }) {
+    const input = useFileInputPanel({ callback });
+    return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "file", style: { width: "100%" }, ...input.inputProps }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: input.submit, children: "send" })] });
 }
 export function FreeModal({ outClick, children, zIndex, size = { height: 150, width: 300 }, keyForSave = "FreeModal" }) {
     return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: size, zIndex: zIndex, children: children });

package/lib/common/src/components/Settings/SettingsDialog.js

@@ -233,6 +233,7 @@ export function SettingsDialog(props) {
     const [navWidth, setNavWidth] = useState(() => clampSettingsNavWidth(settingsDialogLayout.navWidth));
     const [navResizing, setNavResizing] = useState(false);
     const searchInputRef = useRef(null);
+    const searchBoxRef = useRef(null);
     const navResizeRef = useRef(null);
     const navWidthRef = useRef(navWidth);
     updateBy(registry);
@@ -379,6 +380,16 @@ export function SettingsDialog(props) {
         setHistoryOpen(false);
         searchInputRef.current?.focus();
     }
+    function closeHistoryWhenSearchFocusLeaves(e) {
+        const next = e.relatedTarget;
+        if (next && e.currentTarget.contains(next))
+            return;
+        window.setTimeout(() => {
+            const box = searchBoxRef.current;
+            if (box == null || !box.contains(document.activeElement))
+                setHistoryOpen(false);
+        }, 0);
+    }
     function cycleTreeTool() {
         if (treeToolState == "expanded")
             collapseOutsideCurrent();
@@ -415,7 +426,7 @@ export function SettingsDialog(props) {
                                     toggleExpanded(key);
                             } }), _jsx("span", { className: "wenayDlgTreeLabel", children: renderHighlightedLabel(node.section.name, searchTerms) })] }), hasChildren && isOpen && node.children.map(renderTreeNode)] }, key);
     }
-    return _jsxs(_Fragment, { children: [_jsx("span", { role: "button", tabIndex: 0, "aria-label": props.trigger == null ? "Open settings" : undefined, onClick: openDialog, onKeyDown: onTriggerKeyDown, style: { display: "inline-block", cursor: "pointer" }, children: props.trigger ?? _jsx(DefaultSettingsTrigger, {}) }), open && createPortal(_jsx("div", { className: "wenayDlgScrim", children: _jsx(OutsideClickArea, { outsideClick: () => setOpen(false), status: open, className: "wenayDlgOutside", children: _jsx(FloatingWindowBase, { className: "wenayDlgWindow", size: settingsDialogSize, position: settingsDialogPosition, zIndex: 10000, moveOnlyHeader: true, overflow: false, onCLickClose: () => setOpen(false), header: _jsx("div", { className: "wenayDlgHeader", children: "Settings" }), children: _jsxs("div", { className: classNames(["wenayDlg", navResizing && "wenayDlg_resizing"]), children: [_jsxs("div", { className: "wenayDlgNav", style: { width: navWidth }, children: [_jsxs("div", { className: "wenayDlgNavTop", children: [_jsxs("div", { className: "wenayDlgSearchBox", children: [_jsx("input", { ref: searchInputRef, className: "wenayDlgSearch", value: search, placeholder: "Search", "aria-label": "Search settings", onFocus: () => setHistoryOpen(searchHistory.length != 0), onChange: e => {
+    return _jsxs(_Fragment, { children: [_jsx("span", { role: "button", tabIndex: 0, "aria-label": props.trigger == null ? "Open settings" : undefined, onClick: openDialog, onKeyDown: onTriggerKeyDown, style: { display: "inline-block", cursor: "pointer" }, children: props.trigger ?? _jsx(DefaultSettingsTrigger, {}) }), open && createPortal(_jsx("div", { className: "wenayDlgScrim", children: _jsx(OutsideClickArea, { outsideClick: () => setOpen(false), status: open, className: "wenayDlgOutside", children: _jsx(FloatingWindowBase, { className: "wenayDlgWindow", size: settingsDialogSize, position: settingsDialogPosition, zIndex: 10000, moveOnlyHeader: true, overflow: false, onCLickClose: () => setOpen(false), header: _jsx("div", { className: "wenayDlgHeader", children: "Settings" }), children: _jsxs("div", { className: classNames(["wenayDlg", navResizing && "wenayDlg_resizing"]), children: [_jsxs("div", { className: "wenayDlgNav", style: { width: navWidth }, children: [_jsxs("div", { className: "wenayDlgNavTop", children: [_jsxs("div", { ref: searchBoxRef, className: "wenayDlgSearchBox", onBlur: closeHistoryWhenSearchFocusLeaves, children: [_jsx("input", { ref: searchInputRef, className: "wenayDlgSearch", value: search, placeholder: "Search", "aria-label": "Search settings", onFocus: () => setHistoryOpen(searchHistory.length != 0), onChange: e => {
                                                                 setSearch(e.currentTarget.value);
                                                                 setHistoryOpen(searchHistory.length != 0);
                                                             }, onKeyDown: e => {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ColumnStateController } from './columnState';
 export declare function ColumnDots(p: {
     state: ColumnStateController;
-    /** max simultaneous dots (default 4) */
+    /** max simultaneous dots (default 8) */
     max?: number;
     className?: string;
     style?: React.CSSProperties;

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

@@ -25,7 +25,7 @@ export function ColumnDots(p) {
     const cfg = p.state.api.useConfig();
     const cols = p.state.columns;
     const byKey = new Map(cols.map(c => [c.key, c]));
-    const max = p.max ?? 4;
+    const max = p.max ?? 8;
     const order = cfg.order;
     const n = order.length;
     const visibleKeys = order.filter(k => cfg.visible[k] != false);

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

@@ -22,22 +22,17 @@ 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';
+function colsMenuClass(parts) {
+    return parts.filter(Boolean).join(' ');
+}
 function MenuButton(p) {
     const it = p.item;
     const disabled = it.state == 'disabled';
     const on = it.state == 'on';
+    const stateClass = disabled ? 'wenayColsMenuBtn_disabled' : on ? 'wenayColsMenuBtn_on' : 'wenayColsMenuBtn_off';
     const abbr = p.compact && it.icon == null
-        ? _jsx("span", { style: { fontSize: 10, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }, children: (it.short ?? it.title).slice(0, 3) }) : null;
-    return _jsxs("div", { title: it.title, onClick: disabled ? undefined : e => p.onItem?.(it.key, e), onMouseDown: p.drag?.onMouseDown, onTouchStart: p.drag?.onTouchStart, style: {
-            position: 'relative', display: 'flex', alignItems: 'center', gap: 4,
-            padding: '3px 9px', borderRadius: 6, fontSize: 12, lineHeight: '16px',
-            whiteSpace: 'nowrap', cursor: disabled ? 'default' : 'pointer',
-            ...(disabled ? { border: '1px dashed #d0d7de', background: '#f6f8fa', color: '#c4ccd4' }
-                : on ? { border: '1px solid #24292f', background: '#24292f', color: '#fff' }
-                    : { border: '1px solid #d0d7de', background: '#fff', color: '#8c959f', textDecoration: 'line-through' }),
-            ...(it.fixed ? { boxShadow: '0 0 0 2px #eaeef2' } : null),
-            ...p.style,
-        }, children: [it.icon != null && _jsx("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: it.icon }), abbr, !p.compact && _jsx("span", { children: it.short ?? it.title }), it.marks != null && _jsx("span", { style: { fontSize: 9, opacity: 0.9 }, children: it.marks })] });
+        ? _jsx("span", { className: 'wenayColsMenuAbbr', children: (it.short ?? it.title).slice(0, 3) }) : null;
+    return _jsxs("div", { title: it.title, onClick: disabled ? undefined : e => p.onItem?.(it.key, e), onMouseDown: p.drag?.onMouseDown, onTouchStart: p.drag?.onTouchStart, className: colsMenuClass(['wenayColsMenuBtn', stateClass, it.fixed && 'wenayColsMenuBtn_fixed', p.className]), style: p.style, children: [it.icon != null && _jsx("span", { className: 'wenayColsMenuIcon', children: it.icon }), abbr, !p.compact && _jsx("span", { className: 'wenayColsMenuLabel', children: it.short ?? it.title }), it.marks != null && _jsx("span", { className: 'wenayColsMenuMarks', children: it.marks })] });
 }
 /** The presentation layer: renders the buttons in the given order, reports
  *  clicks (onItem) and drag-reorders (onMove) - never interprets either.
@@ -61,7 +56,7 @@ export function MenuStrip(p) {
             return;
         p.onItem?.(key, e);
     }
-    return _jsxs("div", { className: p.className, style: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', userSelect: 'none', ...p.style }, children: [_jsx("div", { ref: reorder.listRef, style: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }, children: p.items.map(it => {
+    return _jsxs("div", { className: colsMenuClass(['wenayColsMenu', p.className]), style: p.style, children: [_jsx("div", { ref: reorder.listRef, className: 'wenayColsMenuList', children: p.items.map(it => {
                     const r = reorder.item(it.key);
                     const drag = {
                         onMouseDown: (e) => {
@@ -70,12 +65,9 @@ export function MenuStrip(p) {
                         },
                         onTouchStart: r.props.onTouchStart,
                     };
-                    return _jsx(MenuButton, { item: it, onItem: onItem, drag: drag, compact: p.compact, style: {
-                            ...r.style,
-                            ...(r.dragging ? { zIndex: 3, boxShadow: '0 3px 10px rgba(0,0,0,0.35)' }
-                                : r.active ? { transition: 'transform 0.15s ease' } : null),
-                        } }, it.key);
-                }) }), !!p.tail?.length && _jsxs(_Fragment, { children: [_jsx("div", { style: { width: 1, alignSelf: 'stretch', margin: '1px 2px', background: '#d0d7de' } }), p.tail.map(it => _jsx(MenuButton, { item: it, onItem: p.onItem, compact: p.compact }, it.key))] })] });
+                    const dragClass = r.dragging ? 'wenayColsMenuBtn_dragging' : r.active ? 'wenayColsMenuBtn_shift' : undefined;
+                    return _jsx(MenuButton, { item: it, onItem: onItem, drag: drag, compact: p.compact, className: dragClass, style: r.style }, it.key);
+                }) }), !!p.tail?.length && _jsxs(_Fragment, { children: [_jsx("div", { className: 'wenayColsMenuDivider' }), p.tail.map(it => _jsx(MenuButton, { item: it, onItem: p.onItem, compact: p.compact }, it.key))] })] });
 }
 /** The binding layer: MenuStrip fed by a ColumnStateController. Buttons follow
  *  config.order (the grid mirror is free: both sides subscribe to the same

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

@@ -28,6 +28,21 @@ export type ContextMenuLayerProps = {
     onConsume?: () => void;
     className?: (active?: boolean) => string;
 };
+export type ContextMenuStatsSnapshot = {
+    openAt: number;
+    openAtPoint: number;
+    legacyLayer: number;
+    close: number;
+    replace: number;
+    empty: number;
+    sources: Record<string, number>;
+    layers: Record<string, number>;
+};
+export type ContextMenuStats = {
+    getSnapshot(): ContextMenuStatsSnapshot;
+    reset(): void;
+    onChange(cb: (snapshot: ContextMenuStatsSnapshot) => void): () => void;
+};
 export declare function createContextMenu(data?: {
     name?: string;
 }): {
@@ -51,6 +66,7 @@ export declare function createContextMenu(data?: {
         layerId?: string;
     }) => boolean;
     close: () => void;
+    stats: ContextMenuStats;
     Layer: ({ children, other, statusOn, onUnClick, onConsume, zIndex, className }: ContextMenuLayerProps) => import("react/jsx-runtime").JSX.Element;
     MenuView: typeof Menu;
 };
@@ -75,6 +91,7 @@ export declare const contextMenu: {
         layerId?: string;
     }) => boolean;
     close: () => void;
+    stats: ContextMenuStats;
     Layer: ({ children, other, statusOn, onUnClick, onConsume, zIndex, className }: ContextMenuLayerProps) => import("react/jsx-runtime").JSX.Element;
     MenuView: typeof Menu;
 };

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

@@ -32,6 +32,17 @@ export function createContextMenu(data) {
     const map = new Map();
     const state = { open: false, items: [], point: { x: 0, y: 0 }, seq: 0 };
     const listeners = new Set();
+    const statsListeners = new Set();
+    const statsState = {
+        openAt: 0,
+        openAtPoint: 0,
+        legacyLayer: 0,
+        close: 0,
+        replace: 0,
+        empty: 0,
+        sources: {},
+        layers: {},
+    };
     const layers = new Set();
     let layerSeq = 0;
     function emit() {
@@ -43,6 +54,50 @@ export function createContextMenu(data) {
         listeners.add(cb);
         return () => { listeners.delete(cb); };
     }
+    function statsSnapshot() {
+        return {
+            openAt: statsState.openAt,
+            openAtPoint: statsState.openAtPoint,
+            legacyLayer: statsState.legacyLayer,
+            close: statsState.close,
+            replace: statsState.replace,
+            empty: statsState.empty,
+            sources: { ...statsState.sources },
+            layers: { ...statsState.layers },
+        };
+    }
+    function emitStats() {
+        const snapshot = statsSnapshot();
+        for (const cb of [...statsListeners])
+            cb(snapshot);
+    }
+    function bumpStat(key) {
+        statsState[key] += 1;
+        emitStats();
+    }
+    function bumpMapStat(map, key) {
+        if (!key)
+            return;
+        map[key] = (map[key] ?? 0) + 1;
+    }
+    const stats = {
+        getSnapshot: statsSnapshot,
+        reset() {
+            statsState.openAt = 0;
+            statsState.openAtPoint = 0;
+            statsState.legacyLayer = 0;
+            statsState.close = 0;
+            statsState.replace = 0;
+            statsState.empty = 0;
+            statsState.sources = {};
+            statsState.layers = {};
+            emitStats();
+        },
+        onChange(cb) {
+            statsListeners.add(cb);
+            return () => { statsListeners.delete(cb); };
+        },
+    };
     function legacyItems() {
         if (map.has("only"))
             return normalizeItems(map.get("only"));
@@ -56,28 +111,39 @@ export function createContextMenu(data) {
     function close() {
         if (!state.open && state.items.length == 0)
             return;
+        bumpStat("close");
         state.open = false;
         state.items = [];
         state.layerId = undefined;
         emit();
     }
-    function openAt(anchor, items, opts = {}) {
+    function openMenu(anchor, items, opts = {}, kind) {
         preventNative(anchor);
         const nextItems = normalizeItems(items);
         if (nextItems.length == 0) {
+            bumpStat("empty");
             close();
             return false;
         }
+        if (state.open)
+            bumpStat("replace");
+        bumpStat(kind);
         state.open = true;
         state.items = nextItems;
         state.point = anchorPoint(anchor);
         state.source = opts.source;
         state.layerId = opts.layerId ?? anchorLayerId(anchor) ?? [...layers][0];
+        bumpMapStat(statsState.sources, state.source);
+        bumpMapStat(statsState.layers, state.layerId);
+        emitStats();
         emit();
         return true;
     }
+    function openAt(anchor, items, opts = {}) {
+        return openMenu(anchor, items, opts, "openAt");
+    }
     function openAtPoint(point, items, opts = {}) {
-        return openAt(point, items, opts);
+        return openMenu(point, items, opts, "openAtPoint");
     }
     function getState() {
         return {
@@ -123,7 +189,7 @@ export function createContextMenu(data) {
             return other ? normalizeItems(other()) : legacyItems();
         }
         function openQueued(anchor) {
-            const opened = openAt(anchor, queuedItems(), { source: "layer", layerId });
+            const opened = openMenu(anchor, queuedItems(), { source: "layer", layerId }, "legacyLayer");
             if (opened) {
                 map.clear();
                 onConsume?.();
@@ -194,6 +260,7 @@ export function createContextMenu(data) {
         openAt,
         openAtPoint,
         close,
+        stats,
         Layer,
         MenuView: Menu,
     };

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

@@ -75,7 +75,85 @@ 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. */
+    /** Column-state compact menu (ColumnsMenu/MenuStrip) chrome (--cols-menu-*). */
+    readonly colsMenu: {
+        readonly gap: "6px";
+        readonly btnGap: "4px";
+        readonly btnPadding: "3px 9px";
+        readonly btnRadius: "6px";
+        readonly btnFontSize: "12px";
+        readonly btnLineHeight: "16px";
+        readonly onBorder: "1px solid #24292f";
+        readonly onBg: "#24292f";
+        readonly onColor: "#fff";
+        readonly offBorder: "1px solid #d0d7de";
+        readonly offBg: "#fff";
+        readonly offColor: "#8c959f";
+        readonly disabledBorder: "1px dashed #d0d7de";
+        readonly disabledBg: "#f6f8fa";
+        readonly disabledColor: "#c4ccd4";
+        readonly fixedShadow: "0 0 0 2px #eaeef2";
+        readonly dragShadow: "0 3px 10px rgba(0, 0, 0, 0.35)";
+        readonly divider: "#d0d7de";
+        readonly abbrFontSize: "10px";
+        readonly abbrFontWeight: 700;
+        readonly abbrLetterSpacing: "0.5px";
+        readonly marksFontSize: "9px";
+        readonly marksOpacity: 0.9;
+    };
+    /** ColumnDots chrome (--cols-dots-*). Defaults preserve restored card-29 look. */
+    readonly colsDots: {
+        readonly text: "#24292f";
+        readonly headGap: "10px";
+        readonly headMarginBottom: "6px";
+        readonly headFontSize: "12px";
+        readonly metaColor: "#57606a";
+        readonly sortBorder: "1px solid #6e7781";
+        readonly sortRadius: "6px";
+        readonly sortPadding: "2px 8px";
+        readonly sortFontSize: "12px";
+        readonly sortBg: "#fff";
+        readonly trackHeight: "56px";
+        readonly trackMargin: "0 14px";
+        readonly rail: "#d0d7de";
+        readonly markWidth: "44px";
+        readonly markHeight: "56px";
+        readonly markMarginLeft: "-22px";
+        readonly sortMarkColor: "#0969da";
+        readonly sortMarkFontSize: "11px";
+        readonly pin: "#afb8c1";
+        readonly labelColor: "#8c959f";
+        readonly labelActiveColor: "#24292f";
+        readonly labelFontSize: "10px";
+        readonly dotSize: "18px";
+        readonly dotRadius: "9px";
+        readonly dotBg: "#24292f";
+        readonly dotShadow: "0 3px 10px rgba(0, 0, 0, 0.35)";
+        readonly selectedBg: "#0969da";
+        readonly selectedBorder: "#b6d4fe";
+        readonly fixedBorder: "#afb8c1";
+    };
+    /** CardList chrome (--cols-card-*). Defaults preserve restored card-29 look. */
+    readonly colsCard: {
+        readonly gap: "8px";
+        readonly border: "1px solid #d0d7de";
+        readonly radius: "8px";
+        readonly padding: "8px 10px";
+        readonly bg: "#fff";
+        readonly headerGap: "8px";
+        readonly headerMarginBottom: "6px";
+        readonly titleFontSize: "14px";
+        readonly accentFontSize: "11px";
+        readonly accentPadding: "1px 8px";
+        readonly accentRadius: "10px";
+        readonly accentBg: "#ddf4ff";
+        readonly accentColor: "#0969da";
+        readonly fieldGap: "10px";
+        readonly fieldFontSize: "12px";
+        readonly fieldLineHeight: 1.7;
+        readonly labelColor: "#57606a";
+        readonly labelMinWidth: "72px";
+    };
     readonly logs: {
         readonly notificationText: "#fff";
         readonly notificationAccent: "#5D9FFA";

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

@@ -77,7 +77,85 @@ 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. */
+    /** Column-state compact menu (ColumnsMenu/MenuStrip) chrome (--cols-menu-*). */
+    colsMenu: {
+        gap: '6px',
+        btnGap: '4px',
+        btnPadding: '3px 9px',
+        btnRadius: '6px',
+        btnFontSize: '12px',
+        btnLineHeight: '16px',
+        onBorder: '1px solid #24292f',
+        onBg: '#24292f',
+        onColor: '#fff',
+        offBorder: '1px solid #d0d7de',
+        offBg: '#fff',
+        offColor: '#8c959f',
+        disabledBorder: '1px dashed #d0d7de',
+        disabledBg: '#f6f8fa',
+        disabledColor: '#c4ccd4',
+        fixedShadow: '0 0 0 2px #eaeef2',
+        dragShadow: '0 3px 10px rgba(0, 0, 0, 0.35)',
+        divider: '#d0d7de',
+        abbrFontSize: '10px',
+        abbrFontWeight: 700,
+        abbrLetterSpacing: '0.5px',
+        marksFontSize: '9px',
+        marksOpacity: 0.9,
+    },
+    /** ColumnDots chrome (--cols-dots-*). Defaults preserve restored card-29 look. */
+    colsDots: {
+        text: '#24292f',
+        headGap: '10px',
+        headMarginBottom: '6px',
+        headFontSize: '12px',
+        metaColor: '#57606a',
+        sortBorder: '1px solid #6e7781',
+        sortRadius: '6px',
+        sortPadding: '2px 8px',
+        sortFontSize: '12px',
+        sortBg: '#fff',
+        trackHeight: '56px',
+        trackMargin: '0 14px',
+        rail: '#d0d7de',
+        markWidth: '44px',
+        markHeight: '56px',
+        markMarginLeft: '-22px',
+        sortMarkColor: '#0969da',
+        sortMarkFontSize: '11px',
+        pin: '#afb8c1',
+        labelColor: '#8c959f',
+        labelActiveColor: '#24292f',
+        labelFontSize: '10px',
+        dotSize: '18px',
+        dotRadius: '9px',
+        dotBg: '#24292f',
+        dotShadow: '0 3px 10px rgba(0, 0, 0, 0.35)',
+        selectedBg: '#0969da',
+        selectedBorder: '#b6d4fe',
+        fixedBorder: '#afb8c1',
+    },
+    /** CardList chrome (--cols-card-*). Defaults preserve restored card-29 look. */
+    colsCard: {
+        gap: '8px',
+        border: '1px solid #d0d7de',
+        radius: '8px',
+        padding: '8px 10px',
+        bg: '#fff',
+        headerGap: '8px',
+        headerMarginBottom: '6px',
+        titleFontSize: '14px',
+        accentFontSize: '11px',
+        accentPadding: '1px 8px',
+        accentRadius: '10px',
+        accentBg: '#ddf4ff',
+        accentColor: '#0969da',
+        fieldGap: '10px',
+        fieldFontSize: '12px',
+        fieldLineHeight: 1.7,
+        labelColor: '#57606a',
+        labelMinWidth: '72px',
+    }, /** Logs chrome (--logs-*). Defaults preserve the old logger look; apps re-skin via CSS vars. */
     logs: {
         notificationText: '#fff',
         notificationAccent: '#5D9FFA',

package/lib/style/style.css

@@ -745,32 +745,103 @@ body {
   overflow: auto;
 }
 
+/* Column state compact menu (ColumnsMenu/MenuStrip). Visual defaults moved from
+   component inline styles; runtime drag transforms remain inline. */
+.wenayColsMenu,
+.wenayColsMenuList {
+  display: flex;
+  align-items: center;
+  gap: var(--cols-menu-gap, 6px);
+  flex-wrap: wrap;
+}
+.wenayColsMenu {
+  user-select: none;
+}
+.wenayColsMenuBtn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--cols-menu-btn-gap, 4px);
+  padding: var(--cols-menu-btn-padding, 3px 9px);
+  border-radius: var(--cols-menu-btn-radius, 6px);
+  font-size: var(--cols-menu-btn-font-size, 12px);
+  line-height: var(--cols-menu-btn-line-height, 16px);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.wenayColsMenuBtn_on {
+  border: var(--cols-menu-on-border, 1px solid #24292f);
+  background: var(--cols-menu-on-bg, #24292f);
+  color: var(--cols-menu-on-color, #fff);
+}
+.wenayColsMenuBtn_off {
+  border: var(--cols-menu-off-border, 1px solid #d0d7de);
+  background: var(--cols-menu-off-bg, #fff);
+  color: var(--cols-menu-off-color, #8c959f);
+  text-decoration: line-through;
+}
+.wenayColsMenuBtn_disabled {
+  border: var(--cols-menu-disabled-border, 1px dashed #d0d7de);
+  background: var(--cols-menu-disabled-bg, #f6f8fa);
+  color: var(--cols-menu-disabled-color, #c4ccd4);
+  cursor: default;
+}
+.wenayColsMenuBtn_fixed {
+  box-shadow: var(--cols-menu-fixed-shadow, 0 0 0 2px #eaeef2);
+}
+.wenayColsMenuBtn_dragging {
+  z-index: 3;
+  box-shadow: var(--cols-menu-drag-shadow, 0 3px 10px rgba(0, 0, 0, 0.35));
+}
+.wenayColsMenuBtn_shift {
+  transition: transform 0.15s ease;
+}
+.wenayColsMenuIcon {
+  display: inline-flex;
+  align-items: center;
+}
+.wenayColsMenuAbbr {
+  font-size: var(--cols-menu-abbr-font-size, 10px);
+  font-weight: var(--cols-menu-abbr-font-weight, 700);
+  letter-spacing: var(--cols-menu-abbr-letter-spacing, 0.5px);
+  text-transform: uppercase;
+}
+.wenayColsMenuMarks {
+  font-size: var(--cols-menu-marks-font-size, 9px);
+  opacity: var(--cols-menu-marks-opacity, 0.9);
+}
+.wenayColsMenuDivider {
+  width: 1px;
+  align-self: stretch;
+  margin: 1px 2px;
+  background: var(--cols-menu-divider, #d0d7de);
+}
 /* Column state mobile primitives (ColumnDots/CardList). Visual defaults mirror the
-   original stand-29 inline look; apps can still override with className/style. */
+   restored stand-29 look and are tokenized through --cols-dots-* / --cols-card-*. */
 .wenayColDots {
   user-select: none;
-  color: #24292f;
+  color: var(--cols-dots-text, #24292f);
 }
 .wenayColDotsHead {
   display: flex;
   align-items: center;
-  gap: 10px;
-  margin-bottom: 6px;
-  font-size: 12px;
+  gap: var(--cols-dots-head-gap, 10px);
+  margin-bottom: var(--cols-dots-head-margin-bottom, 6px);
+  font-size: var(--cols-dots-head-font-size, 12px);
 }
 .wenayColDotsMeta {
-  color: #57606a;
+  color: var(--cols-dots-meta-color, #57606a);
 }
 .wenayColDotsSpacer {
   flex: 1;
 }
 .wenayColDotsSort {
-  border: 1px solid #6e7781;
-  border-radius: 6px;
-  padding: 2px 8px;
-  font-size: 12px;
+  border: var(--cols-dots-sort-border, 1px solid #6e7781);
+  border-radius: var(--cols-dots-sort-radius, 6px);
+  padding: var(--cols-dots-sort-padding, 2px 8px);
+  font-size: var(--cols-dots-sort-font-size, 12px);
   cursor: pointer;
-  background: #fff;
+  background: var(--cols-dots-sort-bg, #fff);
 }
 .wenayColDotsSort:disabled {
   cursor: default;
@@ -778,8 +849,8 @@ body {
 }
 .wenayColDotsTrack {
   position: relative;
-  height: 56px;
-  margin: 0 14px;
+  height: var(--cols-dots-track-height, 56px);
+  margin: var(--cols-dots-track-margin, 0 14px);
   touch-action: none;
 }
 .wenayColDotsRail {
@@ -789,14 +860,14 @@ body {
   top: 27px;
   height: 2px;
   border-radius: 1px;
-  background: #d0d7de;
+  background: var(--cols-dots-rail, #d0d7de);
 }
 .wenayColDotsMark {
   position: absolute;
   top: 0;
-  width: 44px;
-  height: 56px;
-  margin-left: -22px;
+  width: var(--cols-dots-mark-width, 44px);
+  height: var(--cols-dots-mark-height, 56px);
+  margin-left: var(--cols-dots-mark-margin-left, -22px);
 }
 .wenayColDotsSortMark {
   position: absolute;
@@ -804,8 +875,8 @@ body {
   right: 0;
   top: 0;
   text-align: center;
-  font-size: 11px;
-  color: #0969da;
+  font-size: var(--cols-dots-sort-mark-font-size, 11px);
+  color: var(--cols-dots-sort-mark-color, #0969da);
   font-weight: 700;
 }
 .wenayColDotsMarkPin {
@@ -816,7 +887,7 @@ body {
   height: 8px;
   margin-left: -4px;
   border-radius: 4px;
-  background: #afb8c1;
+  background: var(--cols-dots-pin, #afb8c1);
 }
 .wenayColDotsMark_on .wenayColDotsMarkPin {
   background: transparent;
@@ -827,14 +898,14 @@ body {
   right: 0;
   top: 40px;
   text-align: center;
-  font-size: 10px;
-  color: #8c959f;
+  font-size: var(--cols-dots-label-font-size, 10px);
+  color: var(--cols-dots-label-color, #8c959f);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .wenayColDotsMark_on .wenayColDotsMarkLabel {
-  color: #24292f;
+  color: var(--cols-dots-label-active-color, #24292f);
 }
 .wenayColDotsDotWrap {
   position: absolute;
@@ -860,37 +931,37 @@ body {
   opacity: 0.4;
 }
 .wenayColDotsDot {
-  width: 18px;
-  height: 18px;
-  border-radius: 9px;
-  background: #24292f;
+  width: var(--cols-dots-dot-size, 18px);
+  height: var(--cols-dots-dot-size, 18px);
+  border-radius: var(--cols-dots-dot-radius, 9px);
+  background: var(--cols-dots-dot-bg, #24292f);
   border: 2px solid transparent;
 }
 .wenayColDotsDotWrap_dragging .wenayColDotsDot {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--cols-dots-dot-shadow, 0 3px 10px rgba(0, 0, 0, 0.35));
 }
 .wenayColDotsDot_selected {
-  background: #0969da;
-  border-color: #b6d4fe;
+  background: var(--cols-dots-selected-bg, #0969da);
+  border-color: var(--cols-dots-selected-border, #b6d4fe);
 }
 .wenayColDotsDot_fixed {
-  border-color: #afb8c1;
+  border-color: var(--cols-dots-fixed-border, #afb8c1);
 }
 .wenayCardList {
   display: grid;
-  gap: 8px;
+  gap: var(--cols-card-gap, 8px);
 }
 .wenayCardListItem {
-  border: 1px solid #d0d7de;
-  border-radius: 8px;
-  padding: 8px 10px;
-  background: #fff;
+  border: var(--cols-card-border, 1px solid #d0d7de);
+  border-radius: var(--cols-card-radius, 8px);
+  padding: var(--cols-card-padding, 8px 10px);
+  background: var(--cols-card-bg, #fff);
 }
 .wenayCardListHeader {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 6px;
+  gap: var(--cols-card-header-gap, 8px);
+  margin-bottom: var(--cols-card-header-margin-bottom, 6px);
 }
 .wenayCardListHeader_compact {
   margin-bottom: 0;
@@ -900,32 +971,33 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 14px;
+  font-size: var(--cols-card-title-font-size, 14px);
 }
 .wenayCardListAccent {
-  font-size: 11px;
-  padding: 1px 8px;
-  border-radius: 10px;
-  background: #ddf4ff;
-  color: #0969da;
+  font-size: var(--cols-card-accent-font-size, 11px);
+  padding: var(--cols-card-accent-padding, 1px 8px);
+  border-radius: var(--cols-card-accent-radius, 10px);
+  background: var(--cols-card-accent-bg, #ddf4ff);
+  color: var(--cols-card-accent-color, #0969da);
   white-space: nowrap;
 }
 .wenayCardListField {
   display: flex;
-  gap: 10px;
-  font-size: 12px;
-  line-height: 1.7;
+  gap: var(--cols-card-field-gap, 10px);
+  font-size: var(--cols-card-field-font-size, 12px);
+  line-height: var(--cols-card-field-line-height, 1.7);
 }
 .wenayCardListLabel {
-  color: #57606a;
-  min-width: 72px;
+  color: var(--cols-card-label-color, #57606a);
+  min-width: var(--cols-card-label-min-width, 72px);
 }
 .wenayCardListValue {
   flex: 1;
   text-align: right;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}
+
 /* Toolbar (createToolbar). Themed via --tb-* (tokens.css), dark defaults. */
 .wenayTb {
   display: inline-flex;

package/lib/style/tokens.css

@@ -85,9 +85,83 @@
   --tb-pop-bg: var(--color-bg-dark);
   --tb-pop-border: 1px solid var(--color-border-common);
   --tb-pop-radius: 8px;
-  --tb-pop-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
-
+  --tb-pop-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
+
+  /* Column-state compact menu (ColumnsMenu/MenuStrip). Defaults preserve the
+     previous GitHub-like inline look; apps can override via --cols-menu-*. */
+  --cols-menu-gap: 6px;
+  --cols-menu-btn-gap: 4px;
+  --cols-menu-btn-padding: 3px 9px;
+  --cols-menu-btn-radius: 6px;
+  --cols-menu-btn-font-size: 12px;
+  --cols-menu-btn-line-height: 16px;
+  --cols-menu-on-border: 1px solid #24292f;
+  --cols-menu-on-bg: #24292f;
+  --cols-menu-on-color: #fff;
+  --cols-menu-off-border: 1px solid #d0d7de;
+  --cols-menu-off-bg: #fff;
+  --cols-menu-off-color: #8c959f;
+  --cols-menu-disabled-border: 1px dashed #d0d7de;
+  --cols-menu-disabled-bg: #f6f8fa;
+  --cols-menu-disabled-color: #c4ccd4;
+  --cols-menu-fixed-shadow: 0 0 0 2px #eaeef2;
+  --cols-menu-drag-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
+  --cols-menu-divider: #d0d7de;
+  --cols-menu-abbr-font-size: 10px;
+  --cols-menu-abbr-font-weight: 700;
+  --cols-menu-abbr-letter-spacing: 0.5px;
+  --cols-menu-marks-font-size: 9px;
+  --cols-menu-marks-opacity: 0.9;
 
+  /* Column-state mobile/card primitives (ColumnDots/CardList). Defaults preserve
+     the restored card-29 look; apps can override via --cols-dots-* / --cols-card-*. */
+  --cols-dots-text: #24292f;
+  --cols-dots-head-gap: 10px;
+  --cols-dots-head-margin-bottom: 6px;
+  --cols-dots-head-font-size: 12px;
+  --cols-dots-meta-color: #57606a;
+  --cols-dots-sort-border: 1px solid #6e7781;
+  --cols-dots-sort-radius: 6px;
+  --cols-dots-sort-padding: 2px 8px;
+  --cols-dots-sort-font-size: 12px;
+  --cols-dots-sort-bg: #fff;
+  --cols-dots-track-height: 56px;
+  --cols-dots-track-margin: 0 14px;
+  --cols-dots-rail: #d0d7de;
+  --cols-dots-mark-width: 44px;
+  --cols-dots-mark-height: 56px;
+  --cols-dots-mark-margin-left: -22px;
+  --cols-dots-sort-mark-color: #0969da;
+  --cols-dots-sort-mark-font-size: 11px;
+  --cols-dots-pin: #afb8c1;
+  --cols-dots-label-color: #8c959f;
+  --cols-dots-label-active-color: #24292f;
+  --cols-dots-label-font-size: 10px;
+  --cols-dots-dot-size: 18px;
+  --cols-dots-dot-radius: 9px;
+  --cols-dots-dot-bg: #24292f;
+  --cols-dots-dot-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
+  --cols-dots-selected-bg: #0969da;
+  --cols-dots-selected-border: #b6d4fe;
+  --cols-dots-fixed-border: #afb8c1;
+  --cols-card-gap: 8px;
+  --cols-card-border: 1px solid #d0d7de;
+  --cols-card-radius: 8px;
+  --cols-card-padding: 8px 10px;
+  --cols-card-bg: #fff;
+  --cols-card-header-gap: 8px;
+  --cols-card-header-margin-bottom: 6px;
+  --cols-card-title-font-size: 14px;
+  --cols-card-accent-font-size: 11px;
+  --cols-card-accent-padding: 1px 8px;
+  --cols-card-accent-radius: 10px;
+  --cols-card-accent-bg: #ddf4ff;
+  --cols-card-accent-color: #0969da;
+  --cols-card-field-gap: 10px;
+  --cols-card-field-font-size: 12px;
+  --cols-card-field-line-height: 1.7;
+  --cols-card-label-color: #57606a;
+  --cols-card-label-min-width: 72px;
   /* Logs. Defaults preserve the old logger look; apps can override in their theme. */
   --logs-notification-text: #fff;
   --logs-notification-accent: #5D9FFA;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wenay-react2",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "description": "Common react",
   "strict": true,
   "main": "dist/index.js",