wenay-react2 1.0.37 → 1.0.38

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

@@ -15,7 +15,9 @@ const densities = { list: [
 /** 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) });
+    // No real icon -> a text pseudo-icon (first 3 letters). Rendered a touch lighter
+    // (lower weight + opacity) so this fallback does not read as a bold label.
+    return item.icon ?? _jsx("span", { style: { fontSize: 10, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', opacity: 0.65 }, children: (item.short ?? item.title).slice(0, 3) });
 }
 function itemIconOnly(item) {
     return toolbarItemIcon(item);
@@ -52,7 +54,9 @@ function itemContent(item, densityKey) {
 /** 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. */
 const SETTINGS_KEY = '__settings';
+const RESET_KEY = '__reset';
 export function createToolbar(opts) {
+    const resetDefaultVisible = () => opts.resetItem !== false && opts.resetItem?.defaultVisible === true;
     const defConfig = () => ({
         order: opts.def?.order?.slice() ?? opts.items.map(i => i.key),
         visible: opts.def?.visible ? { ...opts.def.visible } : Object.fromEntries(opts.items.map(i => [i.key, i.defaultVisible != false])),
@@ -63,19 +67,36 @@ export function createToolbar(opts) {
     // 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;
+    const sourceMode = ext ? (opts.sourceMode ?? 'orderVisible') : 'orderVisible';
     // 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 };
+    function sameOrder(a, b) {
+        return a.length == b.length && a.every((k, i) => k == b[i]);
+    }
+    function sourceKeySet(raw, known) {
+        return new Set((Array.isArray(raw?.order) ? raw.order : []).filter(k => known.has(k)));
+    }
+    function mergeSourceOrder(localOrder, rawSourceOrder, sourceKeys) {
+        if (!sourceKeys.size)
+            return localOrder;
+        const sourceOrder = rawSourceOrder.filter(k => sourceKeys.has(k));
+        let i = 0;
+        return localOrder.map(k => sourceKeys.has(k) ? (sourceOrder[i++] ?? k) : k);
+    }
     /** 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(raw.order) ? raw.order : [];
+        const extRaw = ext?.getConfig();
+        const localRaw = { order: st.order, visible: st.visible };
+        const raw = ext && sourceMode == 'orderVisible' ? extRaw : localRaw;
+        const sourceKeys = ext && sourceMode == 'order' ? sourceKeySet(extRaw, known) : new Set();
+        const rawOrder = ext && sourceMode == 'order'
+            ? mergeSourceOrder(Array.isArray(st.order) ? st.order : [], Array.isArray(extRaw?.order) ? extRaw.order : [], sourceKeys)
+            : 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)
@@ -88,23 +109,33 @@ export function createToolbar(opts) {
         const visible = {};
         for (const it of opts.items)
             visible[it.key] = it.fixed ? true : (rawVisible[it.key] ?? it.defaultVisible != false);
-        // the gear flag is toolbar-local: an external source only owns items
+        // the gear/reset flags are 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;
+        if (opts.resetItem !== false)
+            visible[RESET_KEY] = typeof gearRaw[RESET_KEY] == 'boolean' ? gearRaw[RESET_KEY] : resetDefaultVisible();
         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 };
     }
+    function metaVisible(next, key, def) {
+        return typeof next.visible[key] == 'boolean' ? next.visible[key] : def;
+    }
     /** 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. With an external source the items' order and
-     *  visibility go THERE (its own change flow re-emits); density + gear flag
+     *  visibility go THERE (its own change flow re-emits); density + gear/reset flags
      *  always stay in the toolbar's own store. */
     function setConfig(next) {
-        if (ext) {
+        if (ext && sourceMode == 'orderVisible') {
             const visible = { ...next.visible };
             delete visible[SETTINGS_KEY];
-            st.visible = { ...st.visible, [SETTINGS_KEY]: next.visible[SETTINGS_KEY] != false };
+            delete visible[RESET_KEY];
+            st.visible = {
+                ...st.visible,
+                [SETTINGS_KEY]: metaVisible(next, SETTINGS_KEY, true),
+                [RESET_KEY]: metaVisible(next, RESET_KEY, resetDefaultVisible()),
+            };
             st.density = next.density;
             renderBy(st);
             memoryMarkDirty(opts.key);
@@ -113,6 +144,26 @@ export function createToolbar(opts) {
             if (!ext.onChange)
                 emitChange(normalize());
         }
+        else if (ext && sourceMode == 'order') {
+            const extRaw = ext.getConfig();
+            const known = new Set(opts.items.map(i => i.key));
+            const sourceKeys = sourceKeySet(extRaw, known);
+            const curSourceOrder = (Array.isArray(extRaw.order) ? extRaw.order : []).filter(k => sourceKeys.has(k));
+            const nextSourceOrder = next.order.filter(k => sourceKeys.has(k));
+            st.order = next.order.slice();
+            st.visible = { ...next.visible };
+            st.density = next.density;
+            renderBy(st);
+            memoryMarkDirty(opts.key);
+            const orderChanged = !sameOrder(curSourceOrder, nextSourceOrder);
+            if (orderChanged)
+                ext.setConfig({
+                    order: nextSourceOrder,
+                    visible: extRaw.visible && typeof extRaw.visible == 'object' ? { ...extRaw.visible } : {},
+                });
+            if (!orderChanged || !ext.onChange)
+                emitChange(normalize());
+        }
         else {
             st.order = next.order.slice();
             st.visible = { ...next.visible };
@@ -149,9 +200,25 @@ export function createToolbar(opts) {
             .map(it => ({ item: it, density: cfg.density, content: itemContent(it, cfg.density) }));
     }
     const reset = () => setConfig(defConfig());
+    function setOrder(order) {
+        setConfig({ ...getConfig(), order: order.slice() });
+    }
+    function show(key, on) {
+        const cfg = getConfig();
+        setConfig({ ...cfg, visible: { ...cfg.visible, [key]: on } });
+    }
+    function setDensity(density) {
+        setConfig({ ...getConfig(), density });
+    }
+    const showSettings = (on) => show(SETTINGS_KEY, on);
+    const showReset = (on) => show(RESET_KEY, on);
     const settingsTitle = () => opts.settingsItem?.title ?? 'Toolbar settings';
     const settingsIcon = () => opts.settingsItem?.icon ??
         _jsx("svg", { width: '14', height: '14', viewBox: '0 0 16 16', "aria-hidden": 'true', children: _jsx("path", { d: 'M8 5.2 A2.8 2.8 0 1 0 8 10.8 A2.8 2.8 0 1 0 8 5.2 M8 1.2 L8.6 3.4 A4.8 4.8 0 0 1 10.6 4.2 L12.8 3.2 L14 5.6 L12.2 7 A4.8 4.8 0 0 1 12.2 9 L14 10.4 L12.8 12.8 L10.6 11.8 A4.8 4.8 0 0 1 8.6 12.6 L8 14.8 L7.4 12.6 A4.8 4.8 0 0 1 5.4 11.8 L3.2 12.8 L2 10.4 L3.8 9 A4.8 4.8 0 0 1 3.8 7 L2 5.6 L3.2 3.2 L5.4 4.2 A4.8 4.8 0 0 1 7.4 3.4 Z', fill: 'none', stroke: 'currentColor', strokeWidth: '1.2', strokeLinejoin: 'round' }) });
+    const resetOpts = () => opts.resetItem === false ? undefined : opts.resetItem;
+    const resetTitle = () => resetOpts()?.title ?? 'Reset toolbar';
+    const resetIcon = () => resetOpts()?.icon ??
+        _jsx("svg", { width: '14', height: '14', viewBox: '0 0 16 16', "aria-hidden": 'true', children: _jsx("path", { d: 'M3.2 5.5 A5.2 5.2 0 1 1 4.1 11.7 M3.2 5.5 H6.4 M3.2 5.5 V2.3', fill: 'none', stroke: 'currentColor', strokeWidth: '1.4', strokeLinecap: 'round', strokeLinejoin: 'round' }) });
     function moveKey(cfg, key, to) {
         const order = cfg.order.slice();
         const from = order.indexOf(key);
@@ -166,20 +233,23 @@ export function createToolbar(opts) {
     }
     /** The live bar. settings=true adds a built-in gear opening Settings in a
      *  local popover - optional, some consumers mount Settings only in the
-     *  global settings menu. popAlign: which bar edge the popover sticks to -
-     *  'right' (default, for bars in a top-right corner) or 'left'. */
+     *  global settings menu. reset permits rendering the reset button when its
+     *  pseudo-control is enabled (hidden by default). popAlign: which bar edge
+     *  the popover sticks to - 'right' (default, for bars in a top-right corner)
+     *  or 'left'. */
     function Bar(p = {}) {
         useSubscribe();
         updateBy(densities);
         const cfg = normalize();
         const [open, setOpen] = useState(false);
         const byKey = new Map(opts.items.map(i => [i.key, i]));
+        const resetOn = opts.resetItem !== false && (p.reset ?? p.settings ?? false) && cfg.visible[RESET_KEY] != false;
         return _jsxs("div", { className: p.className ?? 'wenayTb', children: [cfg.order.map(k => {
                     const it = byKey.get(k);
                     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(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, {}) })] })] });
+                }), resetOn && _jsx("div", { className: 'wenayTbItem', title: resetTitle(), onClick: () => reset(), children: resetIcon() }), 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
@@ -237,11 +307,11 @@ export function createToolbar(opts) {
                                     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: 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() })] })] });
+                    }) }), _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() })] }), opts.resetItem !== false && _jsxs("div", { className: 'wenayTbRow wenayTbRowMeta', children: [_jsx("input", { type: 'checkbox', checked: cfg.visible[RESET_KEY] != false, onChange: () => setConfig({ ...cfg, visible: { ...cfg.visible, [RESET_KEY]: !(cfg.visible[RESET_KEY] != false) } }) }), _jsx("span", { className: 'wenayTbIcon', children: resetIcon() }), _jsx("span", { className: 'wenayTbRowTitle', children: resetTitle() }), _jsx("button", { type: 'button', className: 'wenayTbMetaAction', title: resetTitle(), onClick: () => reset(), children: resetIcon() })] })] });
     }
     return {
         Bar,
         Settings,
-        api: { useConfig, useItems, getConfig, setConfig, reset, onChange },
+        api: { useConfig, useItems, getConfig, setConfig, setOrder, show, setDensity, showSettings, showReset, reset, onChange },
     };
 }

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

@@ -10,6 +10,9 @@ function cmpValues(a, b) {
         return 1;
     return String(a).localeCompare(String(b));
 }
+function cx(parts) {
+    return parts.filter(Boolean).join(' ');
+}
 export function CardList(p) {
     const cfg = p.state.api.useConfig();
     const cols = p.state.columns;
@@ -20,9 +23,9 @@ export function CardList(p) {
     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
+    if (cfg.sort) {
         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))) });
+    return _jsx("div", { className: cx(['wenayCardList', p.className]), style: p.style, children: rows.map((row, i) => (_jsxs("div", { className: 'wenayCardListItem', children: [_jsxs("div", { className: cx(['wenayCardListHeader', fieldKeys.length == 0 && 'wenayCardListHeader_compact']), children: [_jsx("b", { className: 'wenayCardListTitle', children: titleKey ? value(titleKey, row) : '' }), accentKey && _jsx("span", { className: 'wenayCardListAccent', children: value(accentKey, row) })] }), fieldKeys.map(k => (_jsxs("div", { className: 'wenayCardListField', children: [_jsx("span", { className: 'wenayCardListLabel', children: byKey.get(k)?.title ?? k }), _jsx("span", { className: 'wenayCardListValue', children: value(k, row) })] }, k)))] }, p.getId?.(row, i) ?? i))) });
 }

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

@@ -18,6 +18,9 @@ import { useRef, useState } from 'react';
  *  vertical and clearly upward - a horizontal drag or a page scroll never is. */
 const REMOVE_DY = 32;
 const MOVE_SLOP = 4;
+function cx(parts) {
+    return parts.filter(Boolean).join(' ');
+}
 export function ColumnDots(p) {
     const cfg = p.state.api.useConfig();
     const cols = p.state.columns;
@@ -62,14 +65,14 @@ export function ColumnDots(p) {
         setDrag(null);
         if (!g)
             return;
-        if (!g.moved) { // tap = select the field
+        if (!g.moved) {
             setSelected(g.key);
             return;
         }
         if (!st)
             return;
         const meta = byKey.get(g.key);
-        if (st.off) { // swipe up = tear the dot off (fixed and the last dot stay)
+        if (st.off) {
             if (!meta?.fixed && visibleKeys.length > 1) {
                 p.state.api.show(g.key, false);
                 if (selected == g.key)
@@ -79,7 +82,6 @@ export function ColumnDots(p) {
         }
         const target = order[st.to];
         if (target && target != g.key && cfg.visible[target] == false && !meta?.fixed) {
-            // the dot slides to another mark: that column takes this slot
             p.state.api.setConfig({ ...cfg, visible: { ...cfg.visible, [g.key]: false, [target]: true } });
             if (selected == g.key)
                 setSelected(target);
@@ -94,28 +96,16 @@ export function ColumnDots(p) {
         setSelected(key);
     }
     const sortLabel = cfg.sort ? `${short(cfg.sort.key)} ${cfg.sort.dir == 'asc' ? '↑' : '↓'}` : 'off';
-    return _jsxs("div", { className: p.className, style: { userSelect: 'none', ...p.style }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6, fontSize: 12 }, children: [_jsxs("span", { style: { color: '#57606a' }, children: [visibleKeys.length, "/", max, " fields"] }), _jsx("span", { style: { flex: 1 } }), _jsxs("span", { style: { color: '#57606a' }, children: ["field: ", _jsx("b", { children: selected ? short(selected) : '—' })] }), _jsxs("button", { disabled: !selected, title: 'Sort by the selected field: asc -> desc -> off', onClick: () => selected && p.state.api.toggleSort(selected), style: { border: '1px solid #6e7781', borderRadius: 6, padding: '2px 8px', fontSize: 12, cursor: selected ? 'pointer' : 'default', opacity: selected ? 1 : 0.5, background: '#fff' }, children: ["\u21C5 sort: ", sortLabel] })] }), _jsxs("div", { ref: trackRef, style: { position: 'relative', height: 56, margin: '0 14px', touchAction: 'none' }, children: [_jsx("div", { style: { position: 'absolute', left: -8, right: -8, top: 27, height: 2, background: '#d0d7de', borderRadius: 1 } }), order.map((k, i) => {
+    return _jsxs("div", { className: cx(['wenayColDots', p.className]), style: p.style, children: [_jsxs("div", { className: 'wenayColDotsHead', children: [_jsxs("span", { className: 'wenayColDotsMeta', children: [visibleKeys.length, "/", max, " fields"] }), _jsx("span", { className: 'wenayColDotsSpacer' }), _jsxs("span", { className: 'wenayColDotsMeta', children: ["field: ", _jsx("b", { children: selected ? short(selected) : '—' })] }), _jsxs("button", { className: 'wenayColDotsSort', disabled: !selected, title: 'Sort by the selected field: asc -> desc -> off', onClick: () => selected && p.state.api.toggleSort(selected), children: ["\u21C5 sort: ", sortLabel] })] }), _jsxs("div", { ref: trackRef, className: 'wenayColDotsTrack', children: [_jsx("div", { className: 'wenayColDotsRail' }), order.map((k, i) => {
                         const vis = cfg.visible[k] != false;
                         const isSorted = cfg.sort?.key == k;
-                        return _jsxs("div", { onPointerUp: () => tapMark(k), style: { position: 'absolute', left: `${pct(i)}%`, top: 0, width: 44, height: 56, marginLeft: -22, cursor: !vis && visibleKeys.length < max ? 'pointer' : 'default' }, children: [isSorted && _jsx("div", { style: { position: 'absolute', left: 0, right: 0, top: 0, textAlign: 'center', fontSize: 11, color: '#0969da', fontWeight: 700 }, children: cfg.sort.dir == 'asc' ? '↑' : '↓' }), _jsx("div", { style: { position: 'absolute', left: '50%', top: 24, width: 8, height: 8, marginLeft: -4, borderRadius: 4, background: vis ? 'transparent' : '#afb8c1' } }), _jsx("div", { style: { position: 'absolute', left: 0, right: 0, top: 40, textAlign: 'center', fontSize: 10, color: vis ? '#24292f' : '#8c959f', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: short(k) })] }, 'm' + k);
+                        return _jsxs("div", { onPointerUp: () => tapMark(k), className: cx(['wenayColDotsMark', vis ? 'wenayColDotsMark_on' : 'wenayColDotsMark_off']), style: { left: `${pct(i)}%`, cursor: !vis && visibleKeys.length < max ? 'pointer' : 'default' }, children: [isSorted && _jsx("div", { className: 'wenayColDotsSortMark', children: cfg.sort.dir == 'asc' ? '↑' : '↓' }), _jsx("div", { className: 'wenayColDotsMarkPin' }), _jsx("div", { className: 'wenayColDotsMarkLabel', children: short(k) })] }, 'm' + k);
                     }), order.map((k, i) => {
                         if (cfg.visible[k] == false)
                             return null;
                         const meta = byKey.get(k);
                         const d = drag?.key == k ? drag : null;
                         const removing = !!d?.off && !meta?.fixed && visibleKeys.length > 1;
-                        return _jsx("div", { onPointerDown: e => downDot(k, e), onPointerMove: moveDot, onPointerUp: upDot, onPointerCancel: upDot, style: {
-                                position: 'absolute', left: `${pct(i)}%`, top: 28, width: 44, height: 44,
-                                margin: '-22px 0 0 -22px', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                cursor: 'grab', zIndex: d ? 3 : 2,
-                                transform: d ? `translate(${d.dx}px, ${removing ? d.dy : 0}px)` : undefined,
-                                transition: d ? undefined : 'transform 0.15s ease',
-                                opacity: removing ? 0.4 : 1,
-                            }, children: _jsx("div", { style: {
-                                    width: 18, height: 18, borderRadius: 9,
-                                    background: selected == k ? '#0969da' : '#24292f',
-                                    border: meta?.fixed ? '2px solid #afb8c1' : selected == k ? '2px solid #b6d4fe' : '2px solid transparent',
-                                    boxShadow: d ? '0 3px 10px rgba(0,0,0,0.35)' : undefined,
-                                } }) }, 'd' + k);
+                        return _jsx("div", { onPointerDown: e => downDot(k, e), onPointerMove: moveDot, onPointerUp: upDot, onPointerCancel: upDot, className: cx(['wenayColDotsDotWrap', d && 'wenayColDotsDotWrap_dragging', removing && 'wenayColDotsDotWrap_removing']), style: { left: `${pct(i)}%`, transform: d ? `translate(${d.dx}px, ${removing ? d.dy : 0}px)` : undefined }, children: _jsx("div", { className: cx(['wenayColDotsDot', selected == k && 'wenayColDotsDot_selected', meta?.fixed && 'wenayColDotsDot_fixed']) }) }, 'd' + k);
                     })] })] });
 }

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

@@ -78,6 +78,10 @@ export declare function createColumnState(opts: {
         } | null;
         isPresent: (key: string) => boolean;
         setPresent: (keys: string[] | null) => void;
+        getPresentGate: () => {
+            [key: string]: true;
+        } | null;
+        setPresentGate: (keys: string[] | null) => void;
         listSource: {
             useConfig(): {
                 order: string[];

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

@@ -18,25 +18,50 @@ export function createColumnState(opts) {
     });
     const st = memoryGetOrCreate(opts.key, defConfig());
     const [emitChange, onChange] = createListen();
-    /** Runtime-only, never persisted: which column keys the attached grid
-     *  actually HAS right now. null = unknown / no grid = treat all as present.
-     *  A column removed from the live grid (dynamic defs, "drop empty columns"
-     *  standards) keeps its config entry and its menu button - the button just
-     *  goes inert. The grid adapter maintains this; grid-less consumers may
-     *  call setPresent themselves. */
-    const rt = { present: null };
+    /** Runtime-only, never persisted: actual = which keys the attached grid has;
+     *  gate = optional app-level availability over a stable grid schema (standards,
+     *  mode blocks). Consumers see actual AND gate as one presence map. */
+    const rt = {
+        present: null,
+        presentGate: null,
+    };
+    const keyMap = (keys) => keys ? Object.fromEntries(keys.map(k => [k, true])) : null;
+    const sameMap = (a, b) => JSON.stringify(a) == JSON.stringify(b);
+    function combinedPresent() {
+        if (!rt.present && !rt.presentGate)
+            return null;
+        const res = {};
+        for (const c of opts.columns) {
+            if ((!rt.present || rt.present[c.key]) && (!rt.presentGate || rt.presentGate[c.key]))
+                res[c.key] = true;
+        }
+        return res;
+    }
     function setPresent(keys) {
-        const next = keys ? Object.fromEntries(keys.map(k => [k, true])) : null;
-        if (JSON.stringify(next) == JSON.stringify(rt.present))
+        const next = keyMap(keys);
+        if (sameMap(next, rt.present))
             return;
         rt.present = next;
         renderBy(rt);
     }
-    const getPresent = () => rt.present;
-    const isPresent = (key) => !rt.present || rt.present[key] == true;
+    function setPresentGate(keys) {
+        const next = keyMap(keys);
+        if (sameMap(next, rt.presentGate))
+            return;
+        rt.presentGate = next;
+        renderBy(rt);
+        applyToGrid();
+    }
+    const getPresent = combinedPresent;
+    const getPresentGate = () => rt.presentGate;
+    const isPresent = (key) => {
+        const p = combinedPresent();
+        return !p || p[key] == true;
+    };
+    const passesPresentGate = (key) => !rt.presentGate || rt.presentGate[key] == true;
     function usePresent() {
         updateBy(rt);
-        return rt.present;
+        return combinedPresent();
     }
     /** The persisted state may be stale or partial (older app version, columns
      *  added/removed) - never crash, never drop user data that still applies:
@@ -162,7 +187,7 @@ export function createColumnState(opts) {
     function toAgState(cfg) {
         return cfg.order.map(k => ({
             colId: k,
-            hide: cfg.visible[k] == false,
+            hide: cfg.visible[k] == false || !passesPresentGate(k),
             width: cfg.width[k], // undefined = leave the grid's current width
             sort: cfg.sort?.key == k ? cfg.sort.dir : null,
         }));
@@ -278,7 +303,7 @@ export function createColumnState(opts) {
          *  (dots, cards, icon menus) render from these + the config. */
         columns: opts.columns,
         api: { getConfig, setConfig, useConfig, onChange, reset, show, move, setSort, toggleSort, visibleKeys,
-            getPresent, usePresent, isPresent, setPresent, listSource },
+            getPresent, usePresent, isPresent, setPresent, getPresentGate, setPresentGate, listSource },
         grid: { attach, detach },
     };
 }

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

@@ -5,6 +5,8 @@ type StorePatch = Observe.StorePatch;
 type ReplayEvent<Z extends any[]> = Replay.ReplayEvent<Z>;
 type ReplayRemote<Z extends any[]> = Replay.ReplayRemote<Z>;
 type StaleInfo = Replay.StaleInfo;
+export type ReplayRouteEvent = Replay.ReplayRouteEvent;
+export type ReplayRouteSwitchOptions = Replay.ReplayRouteSwitchOpts;
 export type UseReplaySubscribeOptions = {
     /** Start position for the first subscription: journal tail after this seq; omit = keyframe. */
     since?: number;
@@ -62,6 +64,46 @@ export type ReplaySubscribeController = {
  * cb goes through a ref — a new cb identity does not resubscribe.
  */
 export declare function useReplaySubscribe<Z extends any[]>(remote: ReplayRemote<Z> | null | undefined, cb: (...event: Z) => void, options?: UseReplaySubscribeOptions): ReplaySubscribeController;
+export type UseReplayRouteSubscribeOptions = {
+    /** Start position for the first route subscription. Omit = keyframe. */
+    since?: number;
+    /** Keep last delivered seq across disable/remount inside one mounted hook. Default true. */
+    keepSeq?: boolean;
+    /** false = close the active route subscription. Default true. */
+    enabled?: boolean;
+    /** Human-readable route label, e.g. "relay" / "direct". */
+    label?: string;
+    onSeq?: (seq: number) => void;
+    onError?: (e: unknown) => void;
+    /** Route lifecycle events from common2: switching, ready, error, closed. Goes through a ref. */
+    onRoute?: (ev: ReplayRouteEvent) => void;
+    /** Initial route lag policy. Route changes should use switchRoute(..., {policy}). */
+    policy?: 'queue' | 'frame';
+    /** Initial route frame condenser hint. Route changes should use switchRoute(..., {hint}). */
+    hint?: unknown;
+};
+export type ReplayRouteController<Z extends any[] = any[]> = {
+    /** Initial route or latest replacement catch-up has completed. False while replacement is catching up. */
+    readonly ready: boolean;
+    readonly error: unknown;
+    readonly route: ReplayRouteEvent | null;
+    readonly switching: boolean;
+    /** Last delivered seq (route hand-off reconnect point). Getter — reading it does not re-render. */
+    seq(): number;
+    /** Current route label. Getter — reading it does not re-render. */
+    label(): string | undefined;
+    /** Whether a route is currently active. Getter — reading it does not re-render. */
+    active(): boolean;
+    /** Switch to a replacement route: old route stays live until replacement catches up by seq. */
+    switchRoute(nextRemote: ReplayRemote<Z>, options?: ReplayRouteSwitchOptions): Promise<void>;
+};
+/**
+ * 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 declare function useReplayRouteSubscribe<Z extends any[]>(remote: ReplayRemote<Z> | null | undefined, cb: (...event: Z) => void, options?: UseReplayRouteSubscribeOptions): ReplayRouteController<Z>;
 export type UseStoreReplaySyncOptions = UseReplaySubscribeOptions;
 export type StoreReplaySyncController = ReplaySubscribeController;
 /**
@@ -71,6 +113,18 @@ export type StoreReplaySyncController = ReplaySubscribeController;
  * (useStoreNode/useStoreSelect).
  */
 export declare function useStoreReplaySync<T extends object>(store: Observe.Store<T> | null | undefined, remote: ReplayRemote<[StorePatch]> | null | undefined, options?: UseStoreReplaySyncOptions): StoreReplaySyncController;
+export type UseStoreReplayRouteSyncOptions = UseReplayRouteSubscribeOptions;
+export type StoreReplayRouteSyncController = ReplayRouteController<[StorePatch]>;
+/**
+ * Route-replaceable store replay sync. The supplied store remains the fold target while
+ * switchRoute() promotes/demotes the underlying replay route.
+ */
+export declare function useStoreReplayRouteSync<T extends object>(store: Observe.Store<T> | null | undefined, remote: ReplayRemote<[StorePatch]> | null | undefined, options?: UseStoreReplayRouteSyncOptions): StoreReplayRouteSyncController;
+export type StoreReplayRouteMirrorController<T extends object> = StoreReplayRouteSyncController & {
+    readonly store: Observe.Store<T>;
+};
+/** Create a local mirror store and keep it synced through a route-replaceable replay remote. */
+export declare function useStoreReplayRouteMirror<T extends object>(remote: ReplayRemote<[StorePatch]> | null | undefined, initial: T, options?: UseStoreReplayRouteSyncOptions): StoreReplayRouteMirrorController<T>;
 export type StoreReplayMirrorController<T extends object> = StoreReplaySyncController & {
     readonly store: Observe.Store<T>;
 };