wenay-react2 1.0.35 → 1.0.37

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

@@ -1,21 +1,22 @@
 import React from 'react';
 /** createToolbar - a customizable, self-describing toolbar primitive.
  *  Three decoupled layers: config (plain serializable data, persisted via
- *  staticProps -> Cash, same mechanics as createUiSlot), Bar (renders visible
+ *  memoryProps -> memoryCache, same mechanics as createUiSlot), Bar (renders visible
  *  items in config order at config density) and Settings (a pure editor that
  *  only reads/writes config) - so the SAME Settings element works both in the
  *  Bar's own gear popover and in a global settings section.
  *  v1 non-goals: no overflow/"more" menu (an overflow hook would live in Bar,
  *  right after the visible-items map), no grouping, no cross-bar drag. */
-export type tToolbarItem = {
+export type ToolbarItem = {
     /** stable id (persist key) */
     key: string;
     /** full human name - shown in the Settings list */
     title: string;
     /** short caption for 'label' density (falls back to title) */
     short?: string;
-    /** compact glyph/icon for 'icon' density */
-    icon: React.ReactNode;
+    /** compact glyph/icon for 'icon' density; absent = the first letters of
+     *  short/title render as a text pseudo-icon */
+    icon?: React.ReactNode;
     /** full custom render; default = icon [+ short] by the density registry */
     render?: (density: string) => React.ReactNode;
     /** convenience for plain action buttons; interactive items can also handle clicks inside render() */
@@ -25,7 +26,7 @@ export type tToolbarItem = {
     /** cannot be hidden or reordered (pinned to its index in opts.items) */
     fixed?: boolean;
 };
-export type tToolbarConfig = {
+export type ToolbarConfig = {
     /** item keys, display order */
     order: string[];
     visible: {
@@ -34,25 +35,51 @@ export type tToolbarConfig = {
     /** a key from the density registry ('icon' | 'label' | registered extras) */
     density: string;
 };
-export type tToolbarDensity = {
+/** The order/visibility slice of a config - what an external source owns. */
+export type UiListConfig = {
+    order: string[];
+    visible: {
+        [key: string]: boolean;
+    };
+};
+/** An external owner of order/visibility that a Toolbar can run on instead of
+ *  its own store - e.g. columnState's listSource: the SAME config the grid
+ *  syncs with, so dragging a column in the grid reorders the toolbar and
+ *  vice versa. Density and the gear flag stay toolbar-local (persisted under
+ *  the toolbar's own key). useConfig must be a React hook (subscription). */
+export type UiListSource = {
+    useConfig: () => UiListConfig;
+    getConfig: () => UiListConfig;
+    setConfig: (next: UiListConfig) => void;
+    /** re-emitted as the toolbar's own onChange (grid-driven changes included) */
+    onChange?: (cb: (cfg: UiListConfig) => void) => () => void;
+};
+export type ToolbarDensity = {
     key: string;
     /** human name for the Settings segmented control */
     name: string;
     /** how one item renders at this density; absent = icon + (short ?? title) */
-    renderItem?: (item: tToolbarItem) => React.ReactNode;
+    renderItem?: (item: ToolbarItem) => React.ReactNode;
 };
+/** Icon with a text fallback: no glyph = the first letters of short/title
+ *  (an "PR"-style pseudo-icon), so icon densities work for icon-less items. */
+export declare function toolbarItemIcon(item: {
+    icon?: React.ReactNode;
+    short?: string;
+    title: string;
+}): React.ReactNode;
 /** Register an extra density level. Re-register with the same key replaces the
  *  previous one. The returned function removes exactly this registration. */
-export declare function registerToolbarDensity(d: tToolbarDensity): () => void;
+export declare function registerToolbarDensity(d: ToolbarDensity): () => void;
 /** Current density registry (built-ins + registered). */
-export declare function getToolbarDensities(): readonly tToolbarDensity[];
+export declare function getToolbarDensities(): readonly ToolbarDensity[];
 export declare function createToolbar(opts: {
-    /** persistence key (staticProps -> Cash), like createUiSlot */
+    /** persistence key (memoryProps -> memoryCache), like createUiSlot */
     key: string;
     /** item descriptors; the config only ever references them by key */
-    items: tToolbarItem[];
+    items: ToolbarItem[];
     /** defaults; missing fields are derived from items */
-    def?: Partial<tToolbarConfig>;
+    def?: Partial<ToolbarConfig>;
     /** the gear button's face: icon/title default to a plain gear svg. The gear
      *  renders only when Bar mounts with settings, AND visible['__settings'] is
      *  not false - the Settings editor shows a separated toggle row for it. */
@@ -60,6 +87,12 @@ export declare function createToolbar(opts: {
         title?: string;
         icon?: React.ReactNode;
     };
+    /** external owner of order/visibility (columnState.api.listSource etc.):
+     *  the toolbar becomes a VIEW over that config - Bar/Settings edit it, and
+     *  outside changes (a column dragged in the grid) reorder the toolbar.
+     *  Item keys should match the source's keys 1:1. Density and the gear flag
+     *  remain in the toolbar's own store under `key`. Default: own store. */
+    source?: UiListSource;
 }): {
     Bar: (p?: {
         className?: string;
@@ -71,35 +104,15 @@ export declare function createToolbar(opts: {
         activeClassName?: string;
     }) => import("react/jsx-runtime").JSX.Element;
     api: {
-        useConfig: () => tToolbarConfig;
+        useConfig: () => ToolbarConfig;
         useItems: () => {
-            item: tToolbarItem;
+            item: ToolbarItem;
             density: string;
             content: string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
         }[];
-        getConfig: () => tToolbarConfig;
-        setConfig: (next: tToolbarConfig) => void;
+        getConfig: () => ToolbarConfig;
+        setConfig: (next: ToolbarConfig) => void;
         reset: () => void;
-        onChange: {
-            func: import("wenay-common2").Listener<[tToolbarConfig]>;
-            isRun: () => boolean;
-            run: () => void;
-            close: () => void;
-            eventClose: (cb: () => void) => () => void;
-            onClose: (cb: () => void) => () => void;
-            removeEventClose: (cb: () => void) => void;
-            on: import("wenay-common2").ListenOn<[tToolbarConfig]>;
-            off: (k: import("wenay-common2").Listener<[tToolbarConfig]> | (string | symbol) | null) => void;
-            addListen: (cb: import("wenay-common2").Listener<[tToolbarConfig]>, opts?: {
-                cbClose?: () => void;
-                key?: string | symbol;
-            }) => () => void;
-            removeListen: (k: import("wenay-common2").Listener<[tToolbarConfig]> | (string | symbol) | null) => void;
-            once: (cb: import("wenay-common2").Listener<[tToolbarConfig]>, opts?: {
-                key?: string | symbol;
-            }) => () => void;
-            count: () => number;
-            readonly getAllKeys: (string | symbol)[];
-        };
+        onChange: import("wenay-common2").ListenApi<[ToolbarConfig]>;
     };
 };

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { UseListen } from 'wenay-common2';
+import { listen as createListen } from 'wenay-common2';
 import { renderBy, updateBy } from '../../../updateBy';
-import { staticGetAdd, staticMarkDirty } from '../../utils/mapMemory';
-import { DivOutsideClick } from '../../hooks/useOutside';
+import { memoryGetOrCreate, memoryMarkDirty } from '../../utils/memoryStore';
+import { OutsideClickArea } from '../../hooks/useOutside';
 import { useReorder } from '../../hooks/useReorder';
 // Module singleton (closure + updateBy subscription, no React context) - same
 // pattern as the settings-section registry. Two built-in levels; a third
@@ -12,8 +12,13 @@ const densities = { list: [
         { key: 'icon', name: 'Icons', renderItem: itemIconOnly },
         { key: 'label', name: 'Icons + labels' },
     ] };
+/** Icon with a text fallback: no glyph = the first letters of short/title
+ *  (an "PR"-style pseudo-icon), so icon densities work for icon-less items. */
+export function toolbarItemIcon(item) {
+    return item.icon ?? _jsx("span", { style: { fontSize: 10, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }, children: (item.short ?? item.title).slice(0, 3) });
+}
 function itemIconOnly(item) {
-    return item.icon;
+    return toolbarItemIcon(item);
 }
 /** Register an extra density level. Re-register with the same key replaces the
  *  previous one. The returned function removes exactly this registration. */
@@ -42,7 +47,7 @@ function itemContent(item, densityKey) {
     const d = densities.list.find(e => e.key == densityKey);
     if (d?.renderItem)
         return d.renderItem(item);
-    return _jsxs(_Fragment, { children: [_jsx("span", { className: 'wenayTbIcon', children: item.icon }), _jsx("span", { className: 'wenayTbLabel', children: item.short ?? item.title })] });
+    return _jsxs(_Fragment, { children: [item.icon != null && _jsx("span", { className: 'wenayTbIcon', children: item.icon }), _jsx("span", { className: 'wenayTbLabel', children: item.short ?? item.title })] });
 }
 /** Reserved visible-map key for the bar's settings (gear) button: not part of
  *  order (the gear always sits at the bar edge), but toggleable like an item. */
@@ -53,15 +58,24 @@ export function createToolbar(opts) {
         visible: opts.def?.visible ? { ...opts.def.visible } : Object.fromEntries(opts.items.map(i => [i.key, i.defaultVisible != false])),
         density: opts.def?.density ?? densities.list[0].key,
     });
-    const st = staticGetAdd(opts.key, defConfig());
-    const [emitChange, onChange] = UseListen();
+    const st = memoryGetOrCreate(opts.key, defConfig());
+    const [emitChange, onChange] = createListen();
+    // ext is fixed for the controller's lifetime, so hook call order inside
+    // useConfig/Bar/Settings never changes for a given toolbar instance
+    const ext = opts.source;
+    // outside edits of the external config (grid drags...) must reach the
+    // toolbar's own subscribers too; module-lifetime subscription by design
+    ext?.onChange?.(() => emitChange(normalize()));
+    /** raw order/visible as stored - own store or the external source */
+    const rawList = () => ext ? ext.getConfig() : { order: st.order, visible: st.visible };
     /** The persisted state may be stale or partial (older app version, removed
      *  items, an unregistered density) - never crash, never drop user data that
      *  still applies: unknown keys are filtered out, missing items are appended
      *  (default-visible), fixed items are pinned back to their descriptor index. */
     function normalize() {
+        const raw = rawList();
         const known = new Set(opts.items.map(i => i.key));
-        const rawOrder = Array.isArray(st.order) ? st.order : [];
+        const rawOrder = Array.isArray(raw.order) ? raw.order : [];
         const order = rawOrder.filter(k => known.has(k) && !opts.items.find(i => i.key == k)?.fixed);
         for (const it of opts.items)
             if (!it.fixed && order.indexOf(it.key) == -1)
@@ -70,29 +84,52 @@ export function createToolbar(opts) {
             if (it.fixed)
                 order.splice(Math.min(i, order.length), 0, it.key);
         });
-        const rawVisible = st.visible && typeof st.visible == 'object' ? st.visible : {};
+        const rawVisible = raw.visible && typeof raw.visible == 'object' ? raw.visible : {};
         const visible = {};
         for (const it of opts.items)
             visible[it.key] = it.fixed ? true : (rawVisible[it.key] ?? it.defaultVisible != false);
-        visible[SETTINGS_KEY] = typeof rawVisible[SETTINGS_KEY] == 'boolean' ? rawVisible[SETTINGS_KEY] : true;
+        // the gear flag is toolbar-local: an external source only owns items
+        const gearRaw = (ext ? st.visible : rawVisible) ?? {};
+        visible[SETTINGS_KEY] = typeof gearRaw[SETTINGS_KEY] == 'boolean' ? gearRaw[SETTINGS_KEY] : true;
         const density = typeof st.density == 'string' && densities.list.some(d => d.key == st.density)
             ? st.density : (opts.def?.density ?? densities.list[0].key);
         return { order, visible, density };
     }
     /** Every edit funnels through here: mutate the persisted object in place
      *  (identity is the updateBy/renderBy subscription key), announce, mark the
-     *  cache dirty, emit outward. */
+     *  cache dirty, emit outward. With an external source the items' order and
+     *  visibility go THERE (its own change flow re-emits); density + gear flag
+     *  always stay in the toolbar's own store. */
     function setConfig(next) {
-        st.order = next.order.slice();
-        st.visible = { ...next.visible };
-        st.density = next.density;
-        renderBy(st);
-        staticMarkDirty(opts.key);
-        emitChange(normalize());
+        if (ext) {
+            const visible = { ...next.visible };
+            delete visible[SETTINGS_KEY];
+            st.visible = { ...st.visible, [SETTINGS_KEY]: next.visible[SETTINGS_KEY] != false };
+            st.density = next.density;
+            renderBy(st);
+            memoryMarkDirty(opts.key);
+            ext.setConfig({ order: next.order.slice(), visible });
+            // the source's own onChange already re-emitted; emit only when it can't
+            if (!ext.onChange)
+                emitChange(normalize());
+        }
+        else {
+            st.order = next.order.slice();
+            st.visible = { ...next.visible };
+            st.density = next.density;
+            renderBy(st);
+            memoryMarkDirty(opts.key);
+            emitChange(normalize());
+        }
     }
     const getConfig = () => normalize();
-    function useConfig() {
+    /** subscription to everything the toolbar renders from (hook) */
+    function useSubscribe() {
         updateBy(st);
+        ext?.useConfig(); // ext is per-instance constant - hook order is stable
+    }
+    function useConfig() {
+        useSubscribe();
         return normalize();
     }
     /** Headless bar: the ordered, visibility-filtered items plus their rendered
@@ -102,7 +139,7 @@ export function createToolbar(opts) {
      *  consumer re-renders from this list rather than the library re-parenting
      *  someone else's nodes.) */
     function useItems() {
-        updateBy(st);
+        useSubscribe();
         updateBy(densities);
         const cfg = normalize();
         const byKey = new Map(opts.items.map(i => [i.key, i]));
@@ -132,7 +169,7 @@ export function createToolbar(opts) {
      *  global settings menu. popAlign: which bar edge the popover sticks to -
      *  'right' (default, for bars in a top-right corner) or 'left'. */
     function Bar(p = {}) {
-        updateBy(st);
+        useSubscribe();
         updateBy(densities);
         const cfg = normalize();
         const [open, setOpen] = useState(false);
@@ -142,7 +179,7 @@ export function createToolbar(opts) {
                     if (!it || cfg.visible[k] == false)
                         return null;
                     return _jsx("div", { className: 'wenayTbItem', title: cfg.density == 'icon' ? it.title : undefined, onClick: it.onClick, children: itemContent(it, cfg.density) }, k);
-                }), p.settings && cfg.visible[SETTINGS_KEY] != false && _jsxs(DivOutsideClick, { className: 'wenayTbGear', status: open, outsideClick: () => setOpen(false), children: [_jsx("div", { className: 'wenayTbItem', title: settingsTitle(), onClick: () => setOpen(v => !v), children: settingsIcon() }), open && _jsx("div", { className: p.popAlign == 'left' ? 'wenayTbPop wenayTbPopLeft' : 'wenayTbPop', children: _jsx(Settings, {}) })] })] });
+                }), p.settings && cfg.visible[SETTINGS_KEY] != false && _jsxs(OutsideClickArea, { className: 'wenayTbGear', status: open, outsideClick: () => setOpen(false), children: [_jsx("div", { className: 'wenayTbItem', title: settingsTitle(), onClick: () => setOpen(v => !v), children: settingsIcon() }), open && _jsx("div", { className: p.popAlign == 'left' ? 'wenayTbPop wenayTbPopLeft' : 'wenayTbPop', children: _jsx(Settings, {}) })] })] });
     }
     /** The pure editor over config: density segments + one row per item
      *  (visibility checkbox, icon preview, title, drag handle). Reorder rides the
@@ -152,7 +189,7 @@ export function createToolbar(opts) {
      *  never move in the preview and a drop never lands elsewhere than shown.
      *  Plus arrow keys on the focused handle; fixed rows have neither. */
     function Settings(p = {}) {
-        updateBy(st);
+        useSubscribe();
         updateBy(densities);
         const cfg = normalize();
         const base = p.className ?? 'wenaySegBtn';
@@ -199,7 +236,7 @@ export function createToolbar(opts) {
                                 if (!e.target.closest('input'))
                                     e.currentTarget.querySelector('.wenayTbHandle')?.focus();
                                 r.props.onMouseDown(e);
-                            }, onTouchStart: it.fixed ? undefined : r.props.onTouchStart, children: [_jsx("input", { type: 'checkbox', disabled: it.fixed, checked: cfg.visible[k] != false, onChange: () => setConfig({ ...cfg, visible: { ...cfg.visible, [k]: !(cfg.visible[k] != false) } }) }), _jsx("span", { className: 'wenayTbIcon', children: it.icon }), _jsx("span", { className: 'wenayTbRowTitle', children: it.title }), !it.fixed && _jsx("div", { className: 'wenayTbHandle', tabIndex: 0, title: 'Drag or arrow keys to reorder', onKeyDown: e => onHandleKey(k, e), children: "\u283F" })] }, k);
+                            }, onTouchStart: it.fixed ? undefined : r.props.onTouchStart, children: [_jsx("input", { type: 'checkbox', disabled: it.fixed, checked: cfg.visible[k] != false, onChange: () => setConfig({ ...cfg, visible: { ...cfg.visible, [k]: !(cfg.visible[k] != false) } }) }), _jsx("span", { className: 'wenayTbIcon', children: toolbarItemIcon(it) }), _jsx("span", { className: 'wenayTbRowTitle', children: it.title }), !it.fixed && _jsx("div", { className: 'wenayTbHandle', tabIndex: 0, title: 'Drag or arrow keys to reorder', onKeyDown: e => onHandleKey(k, e), children: "\u283F" })] }, k);
                     }) }), _jsxs("div", { className: 'wenayTbRow wenayTbRowMeta', children: [_jsx("input", { type: 'checkbox', checked: cfg.visible[SETTINGS_KEY] != false, onChange: () => setConfig({ ...cfg, visible: { ...cfg.visible, [SETTINGS_KEY]: !(cfg.visible[SETTINGS_KEY] != false) } }) }), _jsx("span", { className: 'wenayTbIcon', children: settingsIcon() }), _jsx("span", { className: 'wenayTbRowTitle', children: settingsTitle() })] })] });
     }
     return {

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

@@ -1,8 +1,8 @@
 import React from "react";
 /** One UI block shown in exactly one of several mount points; the point is a persisted setting.
- *  Persistence rides the existing staticProps -> Cash mechanics: staticProps is observable,
- *  setPlace announces its in-place mutation (staticMarkDirty), the app decides when to save
- *  via Cash.onDirty - same as window state (ExRNDMap3 etc.).
+ *  Persistence rides the existing memoryProps -> memoryCache mechanics: memoryProps is observable,
+ *  setPlace announces its in-place mutation (memoryMarkDirty), the app decides when to save
+ *  via memoryCache.onDirty - same as window state (floatingWindowMap etc.).
  *  Mount points render <Slot place="..."> themselves and decide nothing: the slot compares
  *  the persisted place with its own and renders children only on a match. */
 export declare function createUiSlot<Places extends string>(opts: {

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

@@ -1,14 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { renderBy, updateBy } from "../../../updateBy";
-import { staticGetAdd, staticMarkDirty } from "../../utils/mapMemory";
+import { memoryGetOrCreate, memoryMarkDirty } from "../../utils/memoryStore";
 /** One UI block shown in exactly one of several mount points; the point is a persisted setting.
- *  Persistence rides the existing staticProps -> Cash mechanics: staticProps is observable,
- *  setPlace announces its in-place mutation (staticMarkDirty), the app decides when to save
- *  via Cash.onDirty - same as window state (ExRNDMap3 etc.).
+ *  Persistence rides the existing memoryProps -> memoryCache mechanics: memoryProps is observable,
+ *  setPlace announces its in-place mutation (memoryMarkDirty), the app decides when to save
+ *  via memoryCache.onDirty - same as window state (floatingWindowMap etc.).
  *  Mount points render <Slot place="..."> themselves and decide nothing: the slot compares
  *  the persisted place with its own and renders children only on a match. */
 export function createUiSlot(opts) {
-    const st = staticGetAdd(opts.key, { place: opts.def });
+    const st = memoryGetOrCreate(opts.key, { place: opts.def });
     // a stored place may no longer exist after an app update - fall back to def
     const isPlace = (p) => typeof p == "string" && p in opts.places;
     const getPlace = () => isPlace(st.place) ? st.place : opts.def;
@@ -17,7 +17,7 @@ export function createUiSlot(opts) {
             return;
         st.place = p;
         renderBy(st);
-        staticMarkDirty(opts.key);
+        memoryMarkDirty(opts.key);
     };
     function Slot(p) {
         updateBy(st);

package/lib/common/src/grid/agGrid4/agGrid4.d.ts

@@ -20,7 +20,7 @@ export type UseAgGridOptions<T> = {
  *
  *   const grid = useAgGrid<Row>({ getId })
  *   const grid = useAgGrid({ core: mainTable })
- *   <AgGridMy<Row> controller={grid} columnDefs={cols} />
+ *   <AgGridTable<Row> controller={grid} columnDefs={cols} />
  *   grid.update({ newData })
  */
 export declare function useAgGrid<T>(options?: UseAgGridOptions<T>): {
@@ -50,7 +50,7 @@ export declare function useAgGrid<T>(options?: UseAgGridOptions<T>): {
     flushAsyncTransactions: () => boolean;
 };
 export type AgGridController<T> = ReturnType<typeof useAgGrid<T>>;
-export type AgGridMyProps<T> = AgGridReactProps<T> & {
+export type AgGridTableProps<T> = AgGridReactProps<T> & {
     /** Controller from useAgGrid: all wiring (getRowId, ready/destroy, sync) is inside. */
     controller?: AgGridController<T>;
     /** Declarative row upsert for simple cases without a controller. */
@@ -58,6 +58,6 @@ export type AgGridMyProps<T> = AgGridReactProps<T> & {
     /** Auto-fit columns to the container. Defaults to true. */
     autoSizeColumns?: boolean;
 };
-declare function AgGridMyInner<T>(props: AgGridMyProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare const AgGridMy: typeof AgGridMyInner;
+declare function AgGridTableInner<T>(props: AgGridTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const AgGridTable: typeof AgGridTableInner;
 export {};

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// Layer 2 (React): headless hook over the core + custom <AgGridMy> component.
-// The hook does NOT render; it returns a controller. AgGridMy is our AgGridReact with
+// Layer 2 (React): headless hook over the core + custom <AgGridTable> component.
+// The hook does NOT render; it returns a controller. AgGridTable is our AgGridReact with
 // project defaults (theme, memo, auto sizing, selection, lifecycle). Wiring is the
 // controller prop; bare <AgGridReact> can still spread gridProps (as in agGrid3).
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
@@ -24,7 +24,7 @@ function ensureAgGridModules() {
  *
  *   const grid = useAgGrid<Row>({ getId })
  *   const grid = useAgGrid({ core: mainTable })
- *   <AgGridMy<Row> controller={grid} columnDefs={cols} />
+ *   <AgGridTable<Row> controller={grid} columnDefs={cols} />
  *   grid.update({ newData })
  */
 export function useAgGrid(options) {
@@ -97,11 +97,11 @@ export function useAgGrid(options) {
         };
     }, [core, gridProps]);
 }
-// --- AgGridMy: our grid with project defaults --------------------------------
+// --- AgGridTable: our grid with project defaults --------------------------------
 // v35: the canonical row-selection form is an object, not the legacy "multiple" string.
 // Stable module-level reference so the grid does not re-evaluate the option on each render.
 const ROW_SELECTION = { mode: 'multiRow' };
-function AgGridMyInner(props) {
+function AgGridTableInner(props) {
     const { controller, data, autoSizeColumns = true, defaultColDef, theme, getRowId, onGridReady, onGridPreDestroyed, ...rest } = props;
     // Own controller is overlay-safe: rowData grids without a controller must not be cleared on attach.
     const own = useAgGrid({
@@ -152,4 +152,4 @@ function AgGridMyInner(props) {
 }
 // memo: the grid does not re-render from unrelated page state; data updates bypass
 // render (controller.updateData). The cast is required because memo() erases the component generic.
-export const AgGridMy = memo(AgGridMyInner);
+export const AgGridTable = memo(AgGridTableInner);

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

@@ -2,9 +2,9 @@ export { createGridBuffer } from './core';
 export type { BufferTable, CleanArgs, CreateGridBufferOptions, GetId, GridApiLike, GridBufferCore, GridBufferMode, GridTransaction, PushOptions, RowId, UpdateArgs, } from './core';
 export { createColumnBuffer } from './columnBuffer';
 export type { ColumnApplyContext, ColumnAttach, ColumnBuffer } from './columnBuffer';
-export { useAgGrid, AgGridMy } from './agGrid4';
-export type { AgGridController, AgGridMyProps, UseAgGridOptions } from './agGrid4';
+export { useAgGrid, AgGridTable } from './agGrid4';
+export type { AgGridController, AgGridTableProps, UseAgGridOptions } from './agGrid4';
 export { numericComparator, colDefCentered, colDefWrap } from './gridUtils';
 export type { NumberPair } from './gridUtils';
 export { useAgGridTheme, buildAgTheme } from './theme';
-export type { tThemeMode } from './theme';
+export type { ThemeMode } from './theme';

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

@@ -1,5 +1,5 @@
 export { createGridBuffer } from './core';
 export { createColumnBuffer } from './columnBuffer';
-export { useAgGrid, AgGridMy } from './agGrid4';
+export { useAgGrid, AgGridTable } from './agGrid4';
 export { numericComparator, colDefCentered, colDefWrap } from './gridUtils';
 export { useAgGridTheme, buildAgTheme } from './theme';

package/lib/common/src/grid/agGrid4/theme.d.ts

@@ -1,7 +1,7 @@
-export type tThemeMode = 'light' | 'dark';
+export type ThemeMode = 'light' | 'dark';
 /** Pure ag-grid theme builder from mode. No React. Cached per mode: one shared
  *  theme object across all grids instead of one per component instance.
  *  dark uses the same parts and params as legacy GridStyleDefault for a consistent grid look. */
-export declare function buildAgTheme(mode: tThemeMode): import("ag-grid-community").Theme<import("ag-grid-community").ThemeDefaultParams>;
+export declare function buildAgTheme(mode: ThemeMode): import("ag-grid-community").Theme<import("ag-grid-community").ThemeDefaultParams>;
 /** Application theme; default is dark, as in production. */
-export declare function useAgGridTheme(mode?: tThemeMode): import("ag-grid-community").Theme<import("ag-grid-community").ThemeDefaultParams>;
+export declare function useAgGridTheme(mode?: ThemeMode): import("ag-grid-community").Theme<import("ag-grid-community").ThemeDefaultParams>;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ColumnStateController } from './columnState';
+export declare function CardList<T extends object>(p: {
+    state: ColumnStateController;
+    data: readonly T[];
+    getId?: (row: T, index: number) => string;
+    /** custom field renderer; default = String(row[key]) */
+    renderValue?: (key: string, row: T) => React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function cmpValues(a, b) {
+    if (typeof a == 'number' && typeof b == 'number')
+        return a - b;
+    if (a == null && b == null)
+        return 0;
+    if (a == null)
+        return -1;
+    if (b == null)
+        return 1;
+    return String(a).localeCompare(String(b));
+}
+export function CardList(p) {
+    const cfg = p.state.api.useConfig();
+    const cols = p.state.columns;
+    const byKey = new Map(cols.map(c => [c.key, c]));
+    const keys = p.state.api.visibleKeys();
+    const titleKey = cols.find(c => c.cardRole == 'title' && cfg.visible[c.key] != false)?.key ?? keys[0];
+    const accentKey = cols.find(c => c.cardRole == 'accent' && cfg.visible[c.key] != false)?.key;
+    const fieldKeys = keys.filter(k => k != titleKey && k != accentKey);
+    const value = (key, row) => p.renderValue?.(key, row) ?? String(row[key] ?? '');
+    const rows = [...p.data];
+    if (cfg.sort) { // sticky sort: applies even when its column is hidden
+        const { key, dir } = cfg.sort;
+        rows.sort((a, b) => cmpValues(a[key], b[key]) * (dir == 'asc' ? 1 : -1));
+    }
+    return _jsx("div", { className: p.className, style: { display: 'grid', gap: 8, ...p.style }, children: rows.map((row, i) => (_jsxs("div", { style: { border: '1px solid #d0d7de', borderRadius: 8, padding: '8px 10px', background: '#fff' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: fieldKeys.length ? 6 : 0 }, children: [_jsx("b", { style: { fontSize: 14, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: titleKey ? value(titleKey, row) : '' }), accentKey && _jsx("span", { style: { fontSize: 11, padding: '1px 8px', borderRadius: 10, background: '#ddf4ff', color: '#0969da', whiteSpace: 'nowrap' }, children: value(accentKey, row) })] }), fieldKeys.map(k => (_jsxs("div", { style: { display: 'flex', gap: 10, fontSize: 12, lineHeight: 1.7 }, children: [_jsx("span", { style: { color: '#57606a', minWidth: 72 }, children: byKey.get(k)?.title ?? k }), _jsx("span", { style: { flex: 1, textAlign: 'right', overflow: 'hidden', textOverflow: 'ellipsis' }, children: value(k, row) })] }, k)))] }, p.getId?.(row, i) ?? i))) });
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ColumnStateController } from './columnState';
+export declare function ColumnDots(p: {
+    state: ColumnStateController;
+    /** max simultaneous dots (default 4) */
+    max?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;