wenay-react2 1.0.45 → 1.0.46

package/lib/common/testUseReact/replayVideo.d.ts

@@ -0,0 +1,14 @@
+export declare const videoResolutions: readonly [{
+    readonly w: 160;
+    readonly h: 90;
+}, {
+    readonly w: 320;
+    readonly h: 180;
+}, {
+    readonly w: 640;
+    readonly h: 360;
+}];
+export declare const ReplayRouteDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReplayVideoDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReplayStoreDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReplayStoreEachDemo: () => import("react/jsx-runtime").JSX.Element;

package/lib/common/testUseReact/replayVideo.js

@@ -0,0 +1,311 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* replayVideo.tsx - QA demos for the Replay stack hooks (useReplaySubscribe / useReplayHistory / useStoreReplayMirror).
+ *
+ * Everything is in-proc: a synthetic "video" producer emits jpeg frames on a replay line
+ * (keyframe = last frame), a simulated slow wire + conflateReplay gate shows per-client
+ * frame dropping, archiveReplay + openHistory power the time-travel scrubber.
+ * The transport itself is already proven in wenay-common2 (replay/video-socket.demo);
+ * these cards exercise the React lifecycle side.
+ */
+import React, { StrictMode, useEffect, useMemo, useRef, useState } from "react";
+import { Observe, Replay } from "wenay-common2";
+import { useReplaySubscribe, useReplayRouteSubscribe, useReplayFrame, useReplayHistory, useStoreReplayMirror, useStoreReplayEach, useStoreNode, useStoreKeys } from "../src/hooks";
+const FPS = 10;
+export const videoResolutions = [{ w: 160, h: 90 }, { w: 320, h: 180 }, { w: 640, h: 360 }];
+/* ---------- producer + line + wire + archive (module singleton, starts on first use) ---------- */
+function createVideoDemo() {
+    let res = videoResolutions[1];
+    let frameN = 0;
+    let last = null;
+    let stalled = false;
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    const [emit, replay] = Replay.replayListen({
+        history: 256,
+        current: () => last ? [last] : undefined, // keyframe source: every frame fully defines the picture
+    });
+    function drawScene(t) {
+        if (canvas.width != res.w)
+            canvas.width = res.w;
+        if (canvas.height != res.h)
+            canvas.height = res.h;
+        const g = ctx.createLinearGradient(0, 0, res.w, res.h);
+        g.addColorStop(0, `hsl(${Math.round(t / 40) % 360}, 65%, 42%)`);
+        g.addColorStop(1, "#16213e");
+        ctx.fillStyle = g;
+        ctx.fillRect(0, 0, res.w, res.h);
+        const bx = res.w / 2 + Math.sin(t / 400) * res.w * 0.35;
+        const by = res.h / 2 + Math.cos(t / 300) * res.h * 0.3;
+        ctx.beginPath();
+        ctx.arc(bx, by, Math.min(res.w, res.h) * 0.09, 0, Math.PI * 2);
+        ctx.fillStyle = "#ffd33d";
+        ctx.fill();
+        ctx.fillStyle = "#fff";
+        ctx.font = `bold ${Math.max(11, Math.round(res.h / 9))}px monospace`;
+        ctx.fillText(`#${frameN}  ${res.w}x${res.h}`, 8, Math.max(14, Math.round(res.h / 7)));
+    }
+    setInterval(() => {
+        if (stalled)
+            return; // freshness QA: producer stops emitting, line stays subscribed
+        frameN++;
+        drawScene(performance.now());
+        const frame = { n: frameN, w: res.w, h: res.h, ts: Date.now(), jpeg: canvas.toDataURL("image/jpeg", 0.55) };
+        last = frame;
+        emit(frame);
+    }, 1000 / FPS);
+    // fast client path: direct in-proc "wire"
+    const remoteDirect = Replay.exposeReplay(replay);
+    // slow client path: artificial outgoing buffer + per-connection conflation gate
+    const wire = (() => {
+        const buf = [];
+        const listeners = new Set();
+        let rateMs = 400; // one envelope per rateMs = the "bad link"
+        const gate = Replay.conflateReplay(replay, {
+            pending: () => buf.length, // this client's outgoing buffer
+            highWater: 4,
+            lowWater: 1,
+            keyOf: () => "frame", // frames are absolute -> keep only the last while lagged
+        });
+        gate.api.line.on(ev => { buf.push(ev); });
+        (function pump() {
+            setTimeout(() => {
+                const ev = buf.shift();
+                if (ev)
+                    listeners.forEach(cb => cb(ev));
+                pump();
+            }, rateMs);
+        })();
+        const remote = {
+            line: { on: (cb) => {
+                    listeners.add(cb);
+                    return () => listeners.delete(cb);
+                } },
+            since: seq => gate.api.since(seq),
+            keyframe: () => gate.api.keyframe(),
+        };
+        return {
+            remote,
+            stats: () => gate.stats(),
+            buffered: () => buf.length,
+            setRateMs: (ms) => { rateMs = ms; },
+            getRateMs: () => rateMs,
+        };
+    })();
+    // archive + time machine
+    const storage = Replay.createMemoryReplayStorage({ maxEvents: 600 });
+    Replay.archiveReplay(replay, { storage, everyEvents: 25 });
+    const history = Replay.openHistory(storage, replay); // archive -> live handover
+    return {
+        replay,
+        remoteDirect,
+        wire,
+        history,
+        setResolution: (r) => { res = r; },
+        getResolution: () => res,
+        setStalled: (v) => { stalled = v; },
+    };
+}
+let videoDemo = null;
+const getVideoDemo = () => videoDemo ??= (window.__replayVideoDemo = createVideoDemo()); // window exposure: QA debugging
+/* ---------- frame sink: async jpeg decode, latest requested frame wins ---------- */
+function makeFrameSink(canvasRef) {
+    let want = -1;
+    return (frame) => {
+        want = frame.n;
+        const img = new Image();
+        img.onload = () => {
+            if (frame.n != want)
+                return; // a newer frame superseded this decode (or we seeked back)
+            const canvas = canvasRef.current;
+            if (!canvas)
+                return;
+            if (canvas.width != frame.w)
+                canvas.width = frame.w;
+            if (canvas.height != frame.h)
+                canvas.height = frame.h;
+            canvas.getContext("2d")?.drawImage(img, 0, 0);
+        };
+        img.src = frame.jpeg;
+    };
+}
+function useTick(ms) {
+    const [, setTick] = useState(0);
+    useEffect(() => {
+        const t = setInterval(() => setTick(v => v + 1), ms);
+        return () => clearInterval(t);
+    }, [ms]);
+}
+const canvasStyle = { width: 320, background: "#000", borderRadius: 6, display: "block", border: "1px solid #d0d7de" };
+const statLine = { fontSize: 12, marginTop: 4, fontFamily: "monospace" };
+function LiveClient(p) {
+    const canvasRef = useRef(null);
+    const sink = useMemo(() => makeFrameSink(canvasRef), []);
+    const framesRef = useRef(0);
+    const sub = useReplaySubscribe(p.remote, (frame) => { framesRef.current++; sink(frame); }, { since: p.since, onSeq: p.onSeq });
+    useTick(500);
+    return _jsxs("div", { children: [_jsx("canvas", { ref: canvasRef, style: canvasStyle }), _jsxs("div", { style: statLine, children: ["ready ", String(sub.ready), " \u00B7 seq ", sub.seq(), " \u00B7 frames ", framesRef.current, sub.error != null ? ` · error ${String(sub.error)}` : ""] })] });
+}
+/* freshness client: no useTick — the ONLY re-render sources are ready/stale transitions.
+ * React.memo shields it from the parent's 500ms tick, so the render counter is the proof
+ * that a fresh 10 fps line causes zero per-event renders. Wrapped in StrictMode by the card:
+ * double-effect must not leak a second watchdog or flicker the badge. */
+const STALE_MS = 2000;
+const staleBadge = { padding: "1px 8px", borderRadius: 4, color: "#fff", fontWeight: 700 };
+const StaleClient = React.memo(function StaleClient(p) {
+    const canvasRef = useRef(null);
+    const sink = useMemo(() => makeFrameSink(canvasRef), []);
+    const framesRef = useRef(0);
+    const rendersRef = useRef(0);
+    rendersRef.current++;
+    const sub = useReplaySubscribe(p.remote, (frame) => { framesRef.current++; sink(frame); }, { staleMs: p.staleMs });
+    return _jsxs("div", { children: [_jsx("canvas", { ref: canvasRef, style: canvasStyle }), _jsxs("div", { style: statLine, children: [sub.stale
+                        ? _jsx("span", { style: { ...staleBadge, background: "#cf222e" }, children: "STALE" })
+                        : _jsx("span", { style: { ...staleBadge, background: "#2da44e" }, children: "fresh" }), " ", "\u00B7 renders ", rendersRef.current, " \u00B7 frames ", framesRef.current, " ", "\u00B7 lastTs ", sub.lastTs() > 0 ? new Date(sub.lastTs()).toLocaleTimeString() : "-"] })] });
+});
+/* pull client (useReplayFrame): NO live subscription — a timer around remote.frame(seq).
+ * The canvas advances at the PULL cadence while the producer runs at 10 fps: each pull folds
+ * the whole journal tail since our seq (frames counter jumps by ~pace×fps), the sink's
+ * latest-wins decode draws only the last one. The remote is wrapped to count frame() calls —
+ * also QA-proves a hand-wrapped remote works. Pace switches resubscribe but keep the seq
+ * (keepSeq), so no keyframe restart. */
+function PullClient(p) {
+    const canvasRef = useRef(null);
+    const sink = useMemo(() => makeFrameSink(canvasRef), []);
+    const framesRef = useRef(0);
+    const pullsRef = useRef(0);
+    const [intervalMs, setIntervalMs] = useState(1000);
+    const remote = useMemo(() => ({
+        ...p.remote,
+        frame: (seq, hint) => { pullsRef.current++; return p.remote.frame(seq, hint); },
+    }), [p.remote]);
+    const pf = useReplayFrame(remote, (frame) => { framesRef.current++; sink(frame); }, { intervalMs });
+    useTick(500);
+    return _jsxs("div", { children: [_jsx("canvas", { ref: canvasRef, style: canvasStyle }), _jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center", marginTop: 4, flexWrap: "wrap" }, children: [_jsx("span", { style: { fontSize: 12 }, children: "pull every:" }), [250, 1000, 3000].map(ms => _jsxs("button", { style: { fontWeight: ms == intervalMs ? 700 : 400 }, onClick: () => setIntervalMs(ms), children: [ms, "ms"] }, ms)), _jsx("button", { onClick: () => void pf.pull(), children: "pull now" })] }), _jsxs("div", { style: statLine, children: ["ready ", String(pf.ready), " \u00B7 seq ", pf.seq(), " \u00B7 pulls ", pullsRef.current, " \u00B7 frames ", framesRef.current, pf.error != null ? ` · error ${String(pf.error)}` : ""] })] });
+}
+function failingFrameRemote() {
+    const fail = () => { throw new Error("route failed"); };
+    return {
+        line: { on: () => () => { } },
+        since: async () => fail(),
+        keyframe: async () => fail(),
+    };
+}
+function RouteHandoffClient(p) {
+    const canvasRef = useRef(null);
+    const sink = useMemo(() => makeFrameSink(canvasRef), []);
+    const framesRef = useRef(0);
+    const eventsRef = useRef([]);
+    const [, setEventTick] = useState(0);
+    const badRemote = useMemo(() => failingFrameRemote(), []);
+    const route = useReplayRouteSubscribe(p.relay, frame => {
+        framesRef.current++;
+        sink(frame);
+    }, {
+        label: "relay",
+        onRoute: ev => {
+            eventsRef.current = [`${ev.phase}:${ev.from ?? "-"}->${ev.to ?? "-"}@${ev.seq}`, ...eventsRef.current].slice(0, 4);
+            setEventTick(v => v + 1);
+        },
+    });
+    useTick(500);
+    const err = route.error instanceof Error ? route.error.message : String(route.error ?? "");
+    return _jsxs("div", { style: { display: "grid", gap: 6, maxWidth: 360 }, children: [_jsx("canvas", { ref: canvasRef, style: canvasStyle }), _jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }, children: [_jsx("button", { onClick: () => { void route.switchRoute(p.direct, { label: "direct" }).catch(() => { }); }, children: "switch direct" }), _jsx("button", { onClick: () => { void route.switchRoute(p.relay, { label: "relay" }).catch(() => { }); }, children: "switch relay" }), _jsx("button", { onClick: () => { void route.switchRoute(badRemote, { label: "bad" }).catch(() => { }); }, children: "fail route" })] }), _jsxs("div", { style: statLine, children: ["ready ", String(route.ready), " \u00B7 switching ", String(route.switching), " \u00B7 active ", String(route.active()), " \u00B7 label ", route.label() ?? "-"] }), _jsxs("div", { style: statLine, children: ["seq ", route.seq(), " \u00B7 frames ", framesRef.current, err ? ` · error ${err}` : ""] }), _jsxs("div", { style: { ...statLine, whiteSpace: "normal" }, children: ["route events: ", eventsRef.current.join(" | ") || "-"] })] });
+}
+export const ReplayRouteDemo = () => {
+    const demo = useMemo(() => getVideoDemo(), []);
+    return _jsxs("div", { style: { display: "grid", gap: 8 }, children: [_jsx("div", { style: { fontSize: 13, color: "#57606a" }, children: "One canvas, one logical fold. The old route remains live while the replacement catches up by seq." }), _jsx(RouteHandoffClient, { direct: demo.remoteDirect, relay: demo.wire.remote })] });
+};
+/* ---------- card 23: video line - direct client, conflated slow client, time travel ---------- */
+export const ReplayVideoDemo = () => {
+    const demo = useMemo(() => getVideoDemo(), []);
+    const [resIdx, setResIdx] = useState(1);
+    const [slow, setSlow] = useState(true);
+    const [stalled, setStalled] = useState(false);
+    const [mountedA, setMountedA] = useState(true);
+    const [genD, setGenD] = useState(0);
+    const lastSeqA = useRef(undefined);
+    useTick(500);
+    const ttCanvasRef = useRef(null);
+    const ttSink = useMemo(() => makeFrameSink(ttCanvasRef), []);
+    const tt = useReplayHistory(demo.history, ttSink, { head: () => demo.replay.head() });
+    const wireStats = demo.wire.stats();
+    return _jsxs("div", { style: { display: "grid", gap: 10 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }, children: [_jsx("span", { style: { fontSize: 13 }, children: "resolution:" }), videoResolutions.map((r, i) => _jsxs("button", { style: { fontWeight: i == resIdx ? 700 : 400 }, onClick: () => { setResIdx(i); demo.setResolution(r); }, children: [r.w, "x", r.h] }, r.w)), _jsxs("label", { style: { fontSize: 13, marginLeft: 12 }, children: [_jsx("input", { type: "checkbox", checked: slow, onChange: e => { setSlow(e.target.checked); demo.wire.setRateMs(e.target.checked ? 400 : 66); } }), "slow network for client B (1 envelope / ", demo.wire.getRateMs(), "ms)"] }), _jsxs("label", { style: { fontSize: 13, marginLeft: 12 }, children: [_jsx("input", { type: "checkbox", checked: stalled, onChange: e => { setStalled(e.target.checked); demo.setStalled(e.target.checked); } }), "stall producer (freshness for D)"] }), _jsxs("span", { style: { fontSize: 12, color: "#57606a" }, children: ["producer: ", FPS, " fps \u00B7 head seq ", demo.replay.head()] })] }), _jsxs("div", { style: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [_jsxs("div", { children: [_jsxs("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 4 }, children: ["A: direct client", " ", _jsx("button", { onClick: () => setMountedA(v => !v), children: mountedA ? "unmount" : "remount (tail via since)" })] }), mountedA
+                                ? _jsx(LiveClient, { remote: demo.remoteDirect, since: lastSeqA.current, onSeq: seq => { lastSeqA.current = seq; } })
+                                : _jsxs("div", { style: { ...canvasStyle, height: 180, display: "flex", alignItems: "center", justifyContent: "center", color: "#8b949e" }, children: ["unmounted \u00B7 kept seq ", lastSeqA.current ?? "-"] })] }), _jsxs("div", { children: [_jsx("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 4 }, children: "B: slow wire + conflateReplay gate" }), _jsx(LiveClient, { remote: demo.wire.remote }), _jsxs("div", { style: statLine, children: ["wire buffer ", demo.wire.buffered(), " \u00B7 conflating ", String(wireStats.conflating), _jsx("br", {}), "dropped ", wireStats.dropped, " \u00B7 coalesced ", wireStats.coalesced, " \u00B7 recoveries ", wireStats.flushes, " (keyframes ", wireStats.keyframes, ")"] })] }), _jsxs("div", { children: [_jsx("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 4 }, children: "C: time travel (archive + openHistory)" }), _jsx("canvas", { ref: ttCanvasRef, style: canvasStyle }), _jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 4 }, children: [_jsx("button", { onClick: () => tt.live ? tt.pause() : tt.play(), children: tt.live ? "⏸ pause" : "▶ live" }), _jsx("input", { type: "range", style: { width: 200 }, min: Math.max(0, tt.head - 550), max: Math.max(0, tt.head), value: tt.seq < 0 ? 0 : tt.seq, onChange: e => tt.seek({ seq: Number(e.target.value) }) }), _jsxs("span", { style: { fontSize: 12, fontFamily: "monospace" }, children: [tt.seq, "/", tt.head, " ", tt.live ? "live" : "paused"] })] })] }), _jsxs("div", { children: [_jsxs("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 4 }, children: ["D: freshness (staleMs=", STALE_MS, ", StrictMode)", " ", _jsx("button", { onClick: () => setGenD(v => v + 1), children: "new client (keyframe)" })] }), _jsx(StrictMode, { children: _jsx(StaleClient, { remote: demo.remoteDirect, staleMs: STALE_MS }, genD) }), _jsx("div", { style: { fontSize: 12, color: "#57606a", maxWidth: 320, marginTop: 4 }, children: "counters refresh only on fresh\u2194stale flips: a flat \"renders\" while frames grow is the no-per-event-render proof" })] }), _jsxs("div", { children: [_jsx("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 4 }, children: "E: pull at own pace (useReplayFrame)" }), _jsx(PullClient, { remote: demo.remoteDirect })] })] })] });
+};
+function createStoreReplayDemo() {
+    let stalled = false;
+    const store = Observe.createStore({ ticks: 0, price: 100, note: "start", bag: { a: 1 } });
+    const exposed = Observe.exposeStoreReplay(store, { history: 128 });
+    setInterval(() => {
+        if (stalled)
+            return;
+        store.state.ticks++;
+        store.state.price = Math.round((store.state.price + (Math.random() - 0.5) * 2) * 100) / 100;
+    }, 800);
+    return { store, remote: exposed.api.replay, setStalled: (v) => { stalled = v; } };
+}
+let storeDemo = null;
+const getStoreReplayDemo = () => storeDemo ??= createStoreReplayDemo();
+export const ReplayStoreDemo = () => {
+    const demo = useMemo(() => getStoreReplayDemo(), []);
+    const [enabled, setEnabled] = useState(true);
+    const [stalled, setStalled] = useState(false);
+    const mirror = useStoreReplayMirror(demo.remote, { ticks: 0, price: 0, note: "", bag: {} }, { enabled, staleMs: 2500 });
+    const ticks = useStoreNode(mirror.store.node.ticks);
+    const price = useStoreNode(mirror.store.node.price);
+    const note = useStoreNode(mirror.store.node.note);
+    const bagKeys = useStoreKeys(mirror.store.node.bag);
+    useTick(500);
+    return _jsxs("div", { style: { display: "grid", gap: 8 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }, children: [_jsx("button", { onClick: () => { demo.store.state.note = "srv " + new Date().toLocaleTimeString(); }, children: "server note" }), _jsx("button", { onClick: () => { demo.store.state.bag["k" + (Object.keys(demo.store.state.bag).length + 1)] = Date.now() % 1000; }, children: "server add key" }), _jsx("button", { onClick: () => {
+                            const keys = Object.keys(demo.store.state.bag);
+                            if (keys.length)
+                                delete demo.store.state.bag[keys[keys.length - 1]];
+                        }, children: "server delete key" }), _jsxs("label", { style: { fontSize: 13 }, children: [_jsx("input", { type: "checkbox", checked: enabled, onChange: e => setEnabled(e.target.checked) }), "sync enabled (uncheck, mutate, recheck -> catches up via journal tail)"] }), _jsx("button", { onClick: () => mirror.restart(), children: "restart (tail)" }), _jsxs("label", { style: { fontSize: 13 }, children: [_jsx("input", { type: "checkbox", checked: stalled, onChange: e => { setStalled(e.target.checked); demo.setStalled(e.target.checked); } }), "stall producer (stale after 2.5s)"] })] }), _jsxs("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", fontSize: 13 }, children: [_jsxs("span", { children: ["ready: ", _jsx("b", { children: String(mirror.ready) })] }), _jsxs("span", { children: ["stale: ", _jsx("b", { style: { color: mirror.stale ? "#cf222e" : "#2da44e" }, children: String(mirror.stale) })] }), _jsxs("span", { children: ["lastTs: ", _jsx("b", { children: mirror.lastTs() > 0 ? new Date(mirror.lastTs()).toLocaleTimeString() : "-" })] }), _jsxs("span", { children: ["seq: ", _jsx("b", { children: mirror.seq() })] }), _jsxs("span", { children: ["mirror ticks: ", _jsx("b", { children: ticks.value })] }), _jsxs("span", { children: ["mirror price: ", _jsx("b", { children: price.value })] }), _jsxs("span", { children: ["mirror note: ", _jsx("b", { children: note.value })] }), _jsxs("span", { children: ["bag keys: ", _jsx("b", { children: bagKeys.stringKeys.join(",") || "-" })] })] }), mirror.error != null && _jsxs("div", { style: { color: "#cf222e" }, children: ["error: ", String(mirror.error)] })] });
+};
+function createStoreEachDemo() {
+    let n = 2;
+    const store = Observe.createStore({ r1: { qty: 5, px: 101 }, r2: { qty: 3, px: 202 } });
+    const exposed = Observe.exposeStoreReplay(store, { history: 256 });
+    setInterval(() => {
+        const keys = Object.keys(store.state);
+        if (!keys.length)
+            return;
+        const k = keys[Math.floor(Math.random() * keys.length)]; // ONE random row per tick
+        store.state[k].px = Math.round(store.state[k].px * (1 + (Math.random() - 0.5) / 40) * 100) / 100;
+    }, 700);
+    return {
+        store,
+        remote: exposed.api.replay,
+        add: () => { n++; store.state["r" + n] = { qty: 1 + n % 7, px: 100 + n }; },
+        del: () => { const keys = Object.keys(store.state); if (keys.length)
+            delete store.state[keys[keys.length - 1]]; },
+        replaceAll: () => {
+            n += 2;
+            store.replace({ ["r" + (n - 1)]: { qty: 2, px: 100 + n }, ["r" + n]: { qty: 4, px: 200 + n } });
+        },
+    };
+}
+let eachDemo = null;
+const getStoreEachDemo = () => eachDemo ??= createStoreEachDemo();
+const EachClient = ({ remote }) => {
+    // the fold target lives OUTSIDE React state: a plain Map of rows, exactly like a grid api would
+    const rowsRef = useRef(new Map());
+    const callsRef = useRef(0);
+    const [, setTick] = useState(0);
+    const feed = useStoreReplayEach(remote, (key, row) => {
+        callsRef.current++;
+        if (row === undefined)
+            rowsRef.current.delete(key);
+        else
+            rowsRef.current.set(key, { ...row, calls: (rowsRef.current.get(key)?.calls ?? 0) + 1 });
+        setTick(t => t + 1);
+    }, { drain: 100, staleMs: 2500 });
+    const rows = [...rowsRef.current.entries()].sort(([a], [b]) => a.localeCompare(b, undefined, { numeric: true }));
+    return _jsxs("div", { style: { display: "grid", gap: 6 }, children: [_jsxs("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", fontSize: 13 }, children: [_jsxs("span", { children: ["ready: ", _jsx("b", { children: String(feed.ready) })] }), _jsxs("span", { children: ["stale: ", _jsx("b", { style: { color: feed.stale ? "#cf222e" : "#2da44e" }, children: String(feed.stale) })] }), _jsxs("span", { children: ["seq: ", _jsx("b", { children: feed.seq() })] }), _jsxs("span", { children: ["cb calls: ", _jsx("b", { children: callsRef.current })] }), _jsxs("span", { children: ["store keys: ", _jsx("b", { children: Object.keys(feed.store.state).length })] })] }), _jsxs("table", { style: { fontSize: 13, fontFamily: "monospace", borderCollapse: "collapse", width: "fit-content" }, children: [_jsx("thead", { children: _jsx("tr", { children: ["row", "qty", "px", "cb calls"].map(h => _jsx("th", { style: { border: "1px solid #d0d7de", padding: "2px 10px", background: "#f6f8fa" }, children: h }, h)) }) }), _jsx("tbody", { children: rows.map(([key, r]) => _jsxs("tr", { children: [_jsx("td", { style: { border: "1px solid #d0d7de", padding: "2px 10px" }, children: key }), _jsx("td", { style: { border: "1px solid #d0d7de", padding: "2px 10px" }, children: r.qty }), _jsx("td", { style: { border: "1px solid #d0d7de", padding: "2px 10px" }, children: r.px }), _jsx("td", { style: { border: "1px solid #d0d7de", padding: "2px 10px" }, children: r.calls })] }, key)) })] }), feed.error != null && _jsxs("div", { style: { color: "#cf222e" }, children: ["error: ", String(feed.error)] })] });
+};
+export const ReplayStoreEachDemo = () => {
+    const demo = useMemo(() => getStoreEachDemo(), []);
+    const [gen, setGen] = useState(0);
+    return _jsxs("div", { style: { display: "grid", gap: 8 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }, children: [_jsx("button", { onClick: demo.add, children: "server add row" }), _jsx("button", { onClick: demo.del, children: "server delete row" }), _jsx("button", { onClick: demo.replaceAll, children: "server replace ALL (root replace)" }), _jsx("button", { onClick: () => setGen(v => v + 1), children: "remount client (fresh keyframe)" })] }), _jsx(StrictMode, { children: _jsx(EachClient, { remote: demo.remote }, gen) }), _jsx("div", { style: { fontSize: 12, color: "#57606a", maxWidth: 560 }, children: "per-key contract: the producer touches ONE random row per tick, so between your clicks only that row's \"cb calls\" counter grows \u2014 the whole dict is never re-delivered. keyframe / replace ALL are the only events that touch every row (expansion), delete arrives as (key, undefined)." })] });
+};

package/lib/common/testUseReact/testParams.d.ts

@@ -0,0 +1 @@
+export declare function TestParams(): import("react/jsx-runtime").JSX.Element;

package/lib/common/testUseReact/testParams.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Params } from "wenay-common2";
+import { ParamsEditor } from "../src/components";
+const getParams = () => {
+    return new class testParams extends Params.CParams {
+        test = { value: 1, range: { min: 1, max: 10, step: 1 } };
+        test2 = { value: 1, commentary: ["this test tttt 222"], range: { min: 1, max: 10, step: 1 } };
+        test3 = { value: 1, name: "t33", commentary: ["this test tttt 333"], range: { min: 1, max: 10, step: 1 } };
+    };
+};
+const paramsDef = getParams();
+let params = Params.GetSimpleParams(paramsDef);
+export function TestParams() {
+    return _jsx(ParamsEditor, { params: Params.mergeParamValuesToInfos(paramsDef, params), onChange: e => { } });
+}

package/lib/common/testUseReact/useGrid.d.ts

@@ -0,0 +1,2 @@
+export declare const tt: {};
+export declare const GridExample: () => import("react/jsx-runtime").JSX.Element;

package/lib/common/testUseReact/useGrid.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
+import { AgGridReact } from "ag-grid-react";
+import { sleepAsync } from "wenay-common2";
+import { updateBy } from "../updateBy";
+import { contextMenu } from "../src/menu/menuMouse";
+import { applyGridRows } from "../src/utils";
+ModuleRegistry.registerModules([AllCommunityModule]);
+export const tt = {};
+export const GridExample = () => {
+    const gridApi = useRef(null);
+    const rowBuffer = useRef({});
+    updateBy(tt, () => {
+        const price = Math.round(Math.random() * 90000) + 10000;
+        applyGridRows({
+            gridRef: gridApi,
+            getId: e => String(e.make),
+            bufTable: rowBuffer.current,
+            newData: [{ make: "Tesla", model: "Model Y", price, electric: true }]
+        });
+    });
+    const [rowData] = useState([
+        { make: "Tesla", model: "Model Y", price: 64950, electric: true },
+        { make: "Ford", model: "F-Series", price: 33850, electric: false },
+        { make: "Toyota", model: "Corolla", price: 29600, electric: false },
+        { make: "Mercedes", model: "EQA", price: 48890, electric: true },
+        { make: "Fiat", model: "500", price: 15774, electric: false },
+        { make: "Nissan", model: "Juke", price: 20675, electric: false },
+    ]);
+    const [colDefs] = useState([
+        { field: "make" },
+        { field: "model" },
+        { field: "price" },
+        { field: "electric" },
+    ]);
+    const defaultColDef = {
+        flex: 1,
+    };
+    useEffect(() => {
+        sleepAsync(1000)
+            .then(() => {
+            applyGridRows({
+                gridRef: gridApi,
+                getId: e => String(e.make),
+                bufTable: rowBuffer.current,
+                newData: [{ make: "Tesla", price: 55555 }]
+            });
+        });
+    }, []);
+    return (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("button", { onClick: () => applyGridRows({ gridRef: gridApi, getId: e => String(e.make), bufTable: rowBuffer.current, removeData: [{ make: "Tesla" }] }), children: "remove Tesla" }), _jsx(AgGridReact, { onGridReady: e => {
+                    gridApi.current = e;
+                }, onCellMouseDown: (e) => {
+                    const event = e.event;
+                    if (event instanceof MouseEvent)
+                        contextMenu.openAt(event, [
+                            {
+                                name: "test", onClick: () => { console.log("test"); }
+                            }
+                        ]);
+                }, getRowId: e => e.data.make, rowData: rowData, columnDefs: colDefs, defaultColDef: defaultColDef })] }));
+};

package/lib/style/style.css

@@ -1058,6 +1058,30 @@ body {
   color: var(--cols-card-accent-color, #0969da);
   white-space: nowrap;
 }
+.wenayCardListFields {
+  display: block;
+}
+.wenayCardListItem_compact .wenayCardListFields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px 8px;
+}
+.wenayCardListItem_compact .wenayCardListField {
+  min-width: 0;
+  padding: 2px 6px;
+  border-radius: 5px;
+  background: var(--cols-card-field-bg, #f6f8fa);
+  line-height: 1.45;
+}
+.wenayCardListItem_compact .wenayCardListLabel {
+  min-width: 0;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: .03em;
+}
+@media (max-width: 320px) {
+  .wenayCardListItem_compact .wenayCardListFields { grid-template-columns: 1fr; }
+}
 .wenayCardListField {
   display: flex;
   gap: var(--cols-card-field-gap, 10px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wenay-react2",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "description": "Common react",
   "strict": true,
   "main": "dist/index.js",
@@ -24,7 +24,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-rnd": "^10.5.3",
-    "wenay-common2": "^1.0.73"
+    "wenay-common2": "^1.0.74"
   },
   "peerDependencies": {
     "react": "^19.2.0",
@@ -45,6 +45,8 @@
   },
   "exports": {
     ".": "./lib/index.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./demo/peer-media": "./lib/common/demo/peerMedia.js",
+    "./demo/stand": "./lib/common/testUseReact/qa.js"
   }
 }