wenay-react2 1.0.45 → 1.0.46

package/lib/common/testUseReact/qa.js

@@ -0,0 +1,1148 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* qa.tsx - ONE board for manual library checks.
+ *
+ * Run:  npm run testReact -- --host 127.0.0.1 --port 3002
+ * Each card: a live element + what to do + what is expected.
+ * Use the ✓/✗ buttons to mark results as you go. These are also the acceptance criteria for changes from REFACTOR_PLAN.md.
+ */
+import React, { useState, useMemo, useEffect, useLayoutEffect, useRef } from "react";
+import { Menu, contextMenu, renderBy, updateBy, logsApi, MiniLogsTable, ParamsEdit, ParamsArrayEdit, ParamsEditor, ModalProvider, useModal, useKeyboard, keyboard, useAgGrid, AgGridTable, createGridBuffer, createColumnBuffer, createColumnState, createColumnGrid, ColumnsMenu, ColumnDots, CardList, useStoreMirror, useStoreNode, useStoreKeys, useStoreSelect, useStoreChangedPaths, useListenEffect, useListenArgs, useListenValue, SettingsDialog, registerSettingsSection, createUiSlot, createCallbackHub, createToolbar, registerToolbarDensity, useReorder, useReorderBoard, memoryCache, useCacheMapPersistence, useResizeObserver, useElementSize, useMediaSource, usePeer } from "../api";
+import { listen as createListen, Observe, Params, Media, Peer } from "wenay-common2";
+import { Button, HoverButton, OutsideClickArea } from "../src/hooks";
+import { FloatingWindow } from "../src/components";
+import { DragBox } from "../src/components/Dnd/FloatingWindow";
+import { MyChartEngine } from "../src/myChart/chartEngine/chartEngineReact";
+import { GridExample, tt } from "./useGrid";
+import { TestParams } from "./testParams";
+import { ReplayVideoDemo, ReplayRouteDemo, ReplayStoreDemo, ReplayStoreEachDemo } from "./replayVideo";
+import { PeerCallDemo, PeerPresenceDemo, MediaRelayAclDemo, MediaRelayAudioDemo, PeerCallVideoAudioDemo } from "../demo/peerMedia";
+/* ---------- card wrapper ---------- */
+const card = { border: "1px solid #d0d7de", borderRadius: 10, margin: "14px 0", background: "#fff", overflow: "hidden", fontFamily: "system-ui, sans-serif" };
+const head = { display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: "#f6f8fa", borderBottom: "1px solid #d0d7de" };
+const badge = { width: 24, height: 24, borderRadius: 12, background: "#0969da", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 700 };
+const stageS = { padding: 14, position: "relative" };
+const row = { padding: "6px 14px", fontSize: 13, lineHeight: 1.5, borderTop: "1px dashed #e1e4e8" };
+const btn = (on, color) => ({ border: `1px solid ${color}`, background: on ? color : "#fff", color: on ? "#fff" : color, borderRadius: 6, padding: "3px 8px", fontSize: 12, cursor: "pointer" });
+function Check(p) {
+    const [ok, setOk] = useState(null);
+    return (_jsxs("section", { style: { ...card, outline: ok === true ? "2px solid #1a7f37" : ok === false ? "2px solid #cf222e" : "none" }, children: [_jsxs("div", { style: head, children: [_jsx("span", { style: badge, children: p.n }), _jsx("b", { style: { flex: 1 }, children: p.title }), _jsx("button", { style: btn(ok === true, "#1a7f37"), onClick: () => setOk(true), children: "\u2713 works" }), _jsx("button", { style: btn(ok === false, "#cf222e"), onClick: () => setOk(false), children: "\u2717 bug" })] }), _jsx("div", { style: { ...stageS, minHeight: p.tall ? 340 : 80 }, children: p.children }), _jsxs("div", { style: row, children: [_jsx("b", { children: "Do:" }), " ", p.do] }), _jsxs("div", { style: { ...row, color: "#1a7f37" }, children: [_jsx("b", { children: "Expected:" }), " ", p.expect] }), p.note && _jsxs("div", { style: { ...row, color: "#9a6700" }, children: [_jsx("b", { children: "Note:" }), " ", p.note] })] }));
+}
+/* ---------- 1. Reactivity: updateBy / renderBy ---------- */
+const shared = { count: 0 };
+const Subscriber = () => { updateBy(shared); return _jsxs("span", { style: { fontSize: 22, fontWeight: 700 }, children: ["count = ", shared.count] }); };
+const KeyDownDemo = () => {
+    const api = useKeyboard();
+    const [last, setLast] = useState(keyboard.get());
+    useEffect(() => keyboard.on((key) => setLast(key)), []);
+    return _jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }, children: [_jsxs("span", { children: ["Last key: ", _jsx("b", { style: { fontSize: 22 }, children: last || "-" })] }), _jsx("button", { onClick: () => api.reset(), children: "reset via API" })] });
+};
+const ReactivityDemo = () => (_jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center" }, children: [_jsx(Subscriber, {}), _jsx("button", { onClick: () => { shared.count++; renderBy(shared); }, children: "+1 and renderBy" }), _jsx("button", { onClick: () => { shared.count++; }, children: "+1 WITHOUT renderBy" }), _jsx("button", { onClick: () => renderBy(shared), children: "renderBy only" })] }));
+// Outside click via OutsideClickArea directly: display:inline-block keeps the close zone wrapped around
+// the content, with no full-width strip like Button+outClick.
+// The popup uses position:absolute; otherwise it expands the wrapper rectangle, and a click to the right of the button
+// (within the popup width) lands inside the wrapper itself, so contains() treats it as inside.
+const OutsideDemo = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(OutsideClickArea, { status: open, outsideClick: () => setOpen(false), style: { display: "inline-block", position: "relative" }, children: [_jsx("div", { onClick: () => setOpen(v => !v), style: { display: "inline-block", padding: "6px 12px", border: "1px solid #6e7781", borderRadius: 6, cursor: "pointer", background: open ? "#6e7781" : "#fff", color: open ? "#fff" : "#000" }, children: "open" }), open && _jsx("div", { style: { position: "absolute", top: "100%", left: 0, marginTop: 8, padding: 16, width: 220, border: "1px solid #6e7781", borderRadius: 8, background: "#fafbfc", zIndex: 5 }, children: "Closes on clicks anywhere except this panel and the button" })] }));
+};
+// Logs: add a record with time:Date and check the time column, which used to be always empty.
+const LogsDemo = () => {
+    const PageLogs = logsApi.React.PageLogs;
+    const MessageLogs = logsApi.React.Message;
+    const [miniClick, setMiniClick] = useState("none");
+    const miniRows = useMemo(() => [
+        { time: new Date("2026-01-01T10:00:00"), id: "mini", var: 1, txt: "mini one", address: "qa" },
+        { time: new Date("2026-01-01T10:00:01"), id: "mini", var: 2, txt: "mini two", address: "qa" },
+    ], []);
+    return (_jsxs("div", { style: { position: "relative" }, children: [_jsx(MessageLogs, { zIndex: 80 }), _jsx("button", { style: { marginBottom: 8 }, onClick: () => logsApi.addLogs({ id: "demo", var: 1, time: new Date(), txt: "log " + new Date().toLocaleTimeString() }), children: "add log" }), _jsx("div", { style: { height: 260 }, children: _jsx(PageLogs, {}) }), _jsxs("div", { style: { marginTop: 12, fontSize: 12 }, children: ["MiniLogs click: ", miniClick] }), _jsx("div", { style: { height: 170, marginTop: 6 }, children: _jsx(MiniLogsTable, { data: miniRows, onClick: e => setMiniClick(String(e.data?.txt ?? "empty")) }) })] }));
+};
+// ParamsArrayEdit, which used to save pre-edit values, vs ParamsEdit, which is correct.
+const paramsDefSave = new class extends Params.CParams {
+    test = { value: 1, range: { min: 1, max: 10, step: 1 } };
+    test2 = { value: 1, range: { min: 1, max: 10, step: 1 } };
+};
+const simpleSave = Params.GetSimpleParams(paramsDefSave);
+const makeInfos = () => Params.mergeParamValuesToInfos(paramsDefSave, simpleSave);
+const fmt = (d) => { try {
+    return JSON.stringify(d, null, 2);
+}
+catch {
+    return String(d);
+} };
+const ParamsSaveDemo = () => {
+    const [saved3, setSaved3] = useState("(not saved yet)");
+    const [saved2, setSaved2] = useState("(not saved yet)");
+    return (_jsxs("div", { style: { display: "flex", gap: 24 }, children: [_jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, marginBottom: 6, color: "#cf222e" }, children: "ParamsArrayEdit - expected BUG" }), _jsx(ParamsArrayEdit, { params: async () => [makeInfos()], onSave: (d) => { console.log("ParamsArrayEdit → onSave:", d); setSaved3(fmt(d)); } }), _jsx("div", { style: { fontSize: 12, marginTop: 6 }, children: "what was sent to onSave:" }), _jsx("pre", { style: { background: "#f6f8fa", padding: 8, borderRadius: 6, maxHeight: 150, overflow: "auto", fontSize: 11 }, children: saved3 })] }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontWeight: 700, marginBottom: 6, color: "#1a7f37" }, children: "ParamsEdit - correct" }), _jsx(ParamsEdit, { params: async () => makeInfos(), onSave: (d) => { console.log("ParamsEdit → onSave:", d); setSaved2(fmt(d)); } }), _jsx("div", { style: { fontSize: 12, marginTop: 6 }, children: "what was sent to onSave:" }), _jsx("pre", { style: { background: "#f6f8fa", padding: 8, borderRadius: 6, maxHeight: 150, overflow: "auto", fontSize: 11 }, children: saved2 })] })] }));
+};
+const DebounceDemo = () => {
+    const [count, setCount] = useState(0);
+    const infos = useMemo(() => makeInfos(), []);
+    return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: 8 }, children: ["onChange called: ", _jsx("b", { style: { fontSize: 18 }, children: count }), " times ", _jsx("button", { onClick: () => setCount(0), children: "reset" })] }), _jsx(ParamsEditor, { params: infos, onChange: () => setCount((c) => c + 1) })] }));
+};
+const agQABuffer = {}; // module-level buffer that survives grid remounts
+const agQACols = [
+    { field: "name", headerName: "Name" },
+    { field: "price", headerName: "Price" },
+];
+const rndPrice = () => +(Math.random() * 1000).toFixed(2);
+const AgGrid4Inner = () => {
+    const grid = useAgGrid({ externalBuffer: agQABuffer });
+    return (_jsxs("div", { children: [_jsxs("div", { style: { display: "flex", gap: 8, marginBottom: 8, flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => grid.update({ newData: [{ id: "tsla", name: "Tesla", price: rndPrice() }] }), children: "add/update Tesla" }), _jsx("button", { onClick: () => grid.update({ newData: [{ id: "aapl", name: "Apple", price: rndPrice() }] }), children: "add/update Apple" }), _jsx("button", { onClick: () => grid.update({ removeData: [{ id: "tsla" }] }), children: "remove Tesla" }), _jsx("button", { onClick: () => grid.fit(), children: "fit via API" })] }), _jsx("div", { style: { height: 220 }, children: _jsx(AgGridTable, { controller: grid, columnDefs: agQACols }) })] }));
+};
+const AgGrid4Demo = () => {
+    const [on, setOn] = useState(true);
+    return (_jsxs("div", { children: [_jsxs("div", { style: { display: "flex", gap: 8, marginBottom: 8, flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => setOn(v => !v), children: on ? "unmount grid" : "mount grid" }), _jsx("button", { onClick: () => { agQABuffer["msft"] = { id: "msft", name: "Microsoft (outside the grid)", price: rndPrice() }; }, children: "write MSFT directly to the buffer" })] }), on ? _jsx(AgGrid4Inner, {}) : _jsx("div", { style: { padding: 20, color: "#57606a" }, children: "grid is unmounted - buffer lives in the module" })] }));
+};
+const overlayColumns = [
+    { field: "id", width: 90 },
+    { field: "name" },
+    { field: "price", headerName: "Stream price" },
+    { field: "note" },
+];
+const AgGrid4OverlayDemo = () => {
+    const [showC, setShowC] = useState(false);
+    const [core] = useState(() => createGridBuffer({
+        getId: row => String(row.id),
+        mode: "overlay",
+        pushDefaults: { add: false },
+    }));
+    const grid = useAgGrid({ core });
+    const rows = useMemo(() => [
+        { id: "a", name: "Alpha", note: "owned by rowData" },
+        { id: "b", name: "Beta", note: "owned by rowData" },
+        ...(showC ? [{ id: "c", name: "Gamma", note: "appears only after rowData adds it" }] : []),
+    ], [showC]);
+    useEffect(() => {
+        core.api.sync();
+    }, [core, rows]);
+    return (_jsxs("div", { children: [_jsxs("div", { style: { display: "flex", gap: 8, marginBottom: 8, flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => core.api.updateData({ newData: [{ id: "a", price: rndPrice() }] }), children: "stream update A" }), _jsx("button", { onClick: () => core.api.updateData({ newData: [{ id: "c", price: 777 }] }), children: "stream C before rowData" }), _jsx("button", { onClick: () => setShowC(v => !v), children: showC ? "remove C from rowData" : "add C to rowData" }), _jsx("button", { onClick: () => grid.sync(), children: "sync overlay" })] }), _jsx("div", { style: { height: 230 }, children: _jsx(AgGridTable, { controller: grid, rowData: rows, columnDefs: overlayColumns, getRowId: p => p.data.id }) })] }));
+};
+const dynamicRows = [
+    { id: "btc", symbol: "BTCUSDT", alpha: 11, beta: 21, gamma: 31 },
+    { id: "eth", symbol: "ETHUSDT", alpha: 12, beta: 22, gamma: 32 },
+];
+const dynamicBaseCols = [
+    { field: "symbol", width: 130 },
+    { headerName: "Dynamic", groupId: "qa-dynamic", children: [] },
+];
+const buildDynamicCol = (name) => ({
+    colId: `dynamic:${name}`,
+    field: name,
+    headerName: name,
+    width: 100,
+});
+function buildDynamicColumnDefs(names) {
+    return dynamicBaseCols.map(col => "children" in col && col.groupId == "qa-dynamic"
+        ? { ...col, children: names.map(buildDynamicCol) }
+        : col);
+}
+const AgGrid4ColumnBufferDemo = () => {
+    const [columns] = useState(() => createColumnBuffer());
+    return (_jsxs("div", { children: [_jsxs("div", { style: { display: "flex", gap: 8, marginBottom: 8, flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => columns.api.setNames(["alpha"]), children: "alpha" }), _jsx("button", { onClick: () => columns.api.setNames(["alpha", "beta"]), children: "alpha + beta" }), _jsx("button", { onClick: () => columns.api.setNames(["gamma", "alpha", "gamma"]), children: "gamma + alpha" }), _jsx("button", { onClick: () => columns.api.setNames([]), children: "clear dynamic" })] }), _jsx("div", { style: { height: 230 }, children: _jsx(AgGridTable, { rowData: dynamicRows, getRowId: p => p.data.id, columnDefs: dynamicBaseCols, onGridReady: event => columns.control.attach(event.api, {
+                        apply: ({ api, names }) => api.setGridOption("columnDefs", buildDynamicColumnDefs(names)),
+                    }), onGridPreDestroyed: () => columns.control.detach() }) })] }));
+};
+const colStateRows = [
+    { id: "a", name: "Alpha", price: 10.5, qty: 3 },
+    { id: "b", name: "Beta", price: 22.1, qty: 7 },
+    { id: "c", name: "Gamma", price: 5.8, qty: 1 },
+];
+const colStateCols = [
+    { colId: "name", field: "name" },
+    { colId: "price", field: "price" },
+    { colId: "qty", field: "qty", headerName: "Qty" },
+];
+// module-level like a real app wrapper: the config survives grid remounts and reloads
+const qaColumnState = createColumnState({
+    key: "qa28.columnState",
+    columns: [
+        { key: "name", title: "Name", fixed: true },
+        { key: "price", title: "Price" },
+        { key: "qty", title: "Qty" },
+    ],
+});
+const ColumnStateDemo = () => {
+    const [on, setOn] = useState(true);
+    const cfg = qaColumnState.api.useConfig();
+    return (_jsxs("div", { children: [_jsxs("div", { style: { display: "flex", gap: 8, marginBottom: 8, flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => setOn(v => !v), children: on ? "unmount grid" : "mount grid" }), _jsx("button", { onClick: () => qaColumnState.api.show("price", cfg.visible.price == false), children: cfg.visible.price == false ? "show price" : "hide price" }), _jsxs("button", { onClick: () => qaColumnState.api.toggleSort("price"), children: ["sort price: ", cfg.sort?.key == "price" ? cfg.sort.dir : "off"] }), _jsx("button", { onClick: () => qaColumnState.api.reset(), children: "reset" })] }), on ? (_jsx("div", { style: { height: 190 }, children: _jsx(AgGridTable, { rowData: colStateRows, getRowId: p => p.data.id, columnDefs: colStateCols, autoSizeColumns: false, onGridReady: e => qaColumnState.grid.attach(e.api), onGridPreDestroyed: () => qaColumnState.grid.detach() }) })) : (_jsx("div", { style: { padding: 20, color: "#57606a" }, children: "grid is unmounted - config lives in the module" })), _jsx("pre", { style: { fontSize: 11, background: "#f6f8fa", padding: 6, borderRadius: 6, margin: "8px 0 0", overflow: "auto" }, children: JSON.stringify({ order: cfg.order, visible: cfg.visible, width: cfg.width, sort: cfg.sort }, null, 1) })] }));
+};
+const mobRows = [
+    { id: "btc", name: "BTCUSDT", price: 64230.5, qty: 3, ver: "v2", note: "spot", base: "USDT", change: "+1.8%", risk: "low" },
+    { id: "eth", name: "ETHUSDT", price: 3120.2, qty: 12, ver: "v3", note: "spot", base: "USDT", change: "+0.7%", risk: "mid" },
+    { id: "sol", name: "SOLUSDT", price: 148.9, qty: 40, ver: "v1", note: "futures", base: "USDT", change: "-2.1%", risk: "high" },
+    { id: "ada", name: "ADAUSDT", price: 0.44, qty: 900, ver: "v2", note: "spot", base: "USDT", change: "+0.2%", risk: "low" },
+    { id: "dot", name: "DOTUSDT", price: 6.8, qty: 150, ver: "v4", note: "futures", base: "USDT", change: "-0.9%", risk: "mid" },
+    { id: "xrp", name: "XRPUSDT", price: 0.52, qty: 700, ver: "v1", note: "spot", base: "USDT", change: "+3.0%", risk: "mid" },
+];
+const qaMobColumns = createColumnState({
+    key: "qa29.mobileColumns",
+    columns: [
+        { key: "name", title: "Symbol", short: "sym", fixed: true, cardRole: "title" },
+        { key: "price", title: "Price", short: "price" },
+        { key: "qty", title: "Quantity", short: "qty", defaultVisible: false },
+        { key: "ver", title: "Version", short: "ver", cardRole: "accent", defaultVisible: false },
+        { key: "note", title: "Note", short: "note", defaultVisible: false },
+        { key: "base", title: "Base", short: "base", defaultVisible: false },
+        { key: "change", title: "Change", short: "chg", defaultVisible: false },
+        { key: "risk", title: "Risk", short: "risk", defaultVisible: false },
+    ],
+});
+const qa29MobileCss = `
+.qa29MobileShell {
+  position: relative;
+  max-width: 420px;
+}
+.qa29MobileCards .wenayCardListItem:last-child {
+  padding-bottom: 92px;
+}
+.qa29MobileDots {
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  z-index: 3;
+  padding: 6px 8px 8px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+.qa29MobileDots .wenayColDotsHead {
+  justify-content: flex-end;
+  gap: 0;
+  margin-bottom: 2px;
+  font-size: 11px;
+}
+.qa29MobileDots .wenayColDotsTrack {
+  height: 48px;
+  margin: 0 16px;
+}
+.qa29MobileDots .wenayColDotsMeta,
+.qa29MobileDots .wenayColDotsSpacer {
+  display: none;
+}
+.qa29MobileDots .wenayColDotsSort {
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  font-size: 0;
+  opacity: 0.82;
+  background: transparent;
+}
+.qa29MobileDots .wenayColDotsSort::before {
+  content: "⇅";
+  font-size: 16px;
+  line-height: 1;
+}
+`;
+const MobileColumnsDemo = () => (_jsxs("div", { className: "qa29MobileShell", children: [_jsx("style", { children: qa29MobileCss }), _jsx(CardList, { state: qaMobColumns, data: mobRows, getId: r => r.id, layout: "compact", className: "qa29MobileCards" }), _jsx(ColumnDots, { state: qaMobColumns, max: 8, className: "qa29MobileDots" })] }));
+const menuRows = [
+    { id: "a", name: "Alpha", price: 10.5, qty: 3, fee: 0, note: "", blockText: "red", blockZero: 0, blockEmpty: "" },
+    { id: "b", name: "Beta", price: 22.1, qty: 0, fee: 0, note: "", blockText: "green", blockZero: 0, blockEmpty: "" },
+    { id: "c", name: "Gamma", price: 5.8, qty: 1, fee: 0, note: "", blockText: "blue", blockZero: 0, blockEmpty: "" },
+];
+const menuBaseColDefs = [
+    { colId: "name", field: "name" },
+    { colId: "price", field: "price" },
+    { colId: "qty", field: "qty", headerName: "Qty" },
+    { colId: "fee", field: "fee" },
+    { colId: "note", field: "note" },
+];
+const qa30BlockGroup = "modeBlock";
+const qa30BlockColumns = [
+    { colId: "blockText", field: "blockText", headerName: "Values" },
+    { colId: "blockZero", field: "blockZero", headerName: "Zeros" },
+    { colId: "blockEmpty", field: "blockEmpty", headerName: "Empty" },
+];
+const qaMenuState = createColumnState({
+    key: "qa30.columnsMenu",
+    columns: [
+        { key: "name", title: "Name", fixed: true },
+        { key: "price", title: "Price (has sub-fields)", short: "price" },
+        { key: "qty", title: "Quantity", short: "qty" },
+        { key: "fee", title: "Fee", short: "fee" },
+        { key: "note", title: "Note", short: "note" },
+        { key: "blockText", title: "Block / Values", short: "val", group: qa30BlockGroup },
+        { key: "blockZero", title: "Block / Zeros", short: "zero", group: qa30BlockGroup },
+        { key: "blockEmpty", title: "Block / Empty", short: "empty", group: qa30BlockGroup },
+    ],
+});
+// The grouped block's mode is an app-level layer above columnState: columnDefs
+// stay stable, and a runtime presentGate hides/disables unavailable leaf columns.
+const qa30BlockModeState = { i: 0 };
+const menuValues = (key) => menuRows.map(r => r[key]);
+const menuColumnEmpty = (key, zeroIsEmpty) => menuValues(key).every(v => v == null || v === "" || (zeroIsEmpty && v === 0));
+const qa30BlockModes = [
+    { hint: "mode 1/4: show all 3 sub-columns", show: (_) => true },
+    { hint: "mode 2/4: hide empty sub-columns, 0 counts as empty", show: (key) => !menuColumnEmpty(key, true) },
+    { hint: "mode 3/4: hide empty sub-columns, 0 is a value", show: (key) => !menuColumnEmpty(key, false) },
+    { hint: "mode 4/4: skip the whole group block", show: (_) => false },
+];
+function qa30BlockMode() {
+    return qa30BlockModes[qa30BlockModeState.i];
+}
+function qa30BlockVisible(mode = qa30BlockMode()) {
+    return qa30BlockColumns.some(d => mode.show(String(d.colId)));
+}
+const qa30MenuColumnDefs = [
+    ...menuBaseColDefs,
+    { headerName: "Mode block", groupId: qa30BlockGroup, children: qa30BlockColumns },
+];
+const qa30BaseColumnKeys = menuBaseColDefs.map(d => String(d.colId));
+function qa30PresentKeys(mode = qa30BlockMode()) {
+    return [
+        ...qa30BaseColumnKeys,
+        ...qa30BlockColumns.filter(d => mode.show(String(d.colId))).map(d => String(d.colId)),
+    ];
+}
+function applyQa30BlockMode(mode = qa30BlockMode()) {
+    qaMenuState.api.setPresentGate(qa30PresentKeys(mode));
+}
+function nextQa30BlockMode() {
+    qa30BlockModeState.i = (qa30BlockModeState.i + 1) % qa30BlockModes.length;
+    applyQa30BlockMode();
+    renderBy(qa30BlockModeState);
+}
+const qa30BlockModeItem = { title: "Block display mode" };
+const qa30SquareButtonBase = {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3,
+    padding: "7px 11px",
+    borderRadius: 0,
+    margin: 0,
+    fontSize: 13,
+    lineHeight: "16px",
+    fontWeight: 400,
+    userSelect: "none",
+    whiteSpace: "nowrap",
+    transition: "background-color 120ms ease, border-color 120ms ease, color 120ms ease",
+};
+const qa30SquareGlyphStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 0,
+    fontWeight: 400,
+    letterSpacing: 0,
+};
+function qa30SquareGlyph(item, density) {
+    if (density == "icon") {
+        if (item.icon != null)
+            return _jsx("span", { style: qa30SquareGlyphStyle, children: item.icon });
+        return _jsx("span", { style: qa30SquareGlyphStyle, children: (item.short ?? item.title).slice(0, 3).toUpperCase() });
+    }
+    const text = density == "label" ? (item.short ?? item.title) : item.title;
+    return _jsx("span", { style: qa30SquareGlyphStyle, children: text });
+}
+const Qa30SquareButton = (p) => {
+    const [hover, setHover] = useState(false);
+    const interactive = (!!p.onClick || p.clickable) && !p.disabled;
+    const state = p.disabled
+        ? { background: "#0b1020", border: "1px dashed #526179", color: "#738096", opacity: 0.72 }
+        : p.pressed
+            ? { background: "#f8fafc", border: "1px solid #f8fafc", color: "#0f172a" }
+            : hover
+                ? { background: "#172238", border: "1px solid #f8fafc", color: "#f8fafc" }
+                : { background: "#111a2c", border: "1px solid #34445f", color: "#d8e7ff" };
+    return _jsx("div", { title: p.title, role: p.onClick && !p.disabled ? "button" : undefined, tabIndex: p.onClick && !p.disabled ? 0 : undefined, "aria-pressed": p.pressed, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: p.onClick && !p.disabled ? p.onClick : undefined, onKeyDown: p.onClick && !p.disabled ? e => {
+            if (e.key != "Enter" && e.key != " ")
+                return;
+            e.preventDefault();
+            p.onClick?.(e);
+        } : undefined, style: {
+            ...qa30SquareButtonBase,
+            ...state,
+            cursor: interactive ? "pointer" : "default",
+            ...(p.fixed ? { borderColor: "#9db3d1" } : null),
+        }, children: p.children });
+};
+const Qa30ModeDots = () => {
+    const count = qa30BlockModeState.i + 1;
+    return _jsx("span", { "aria-hidden": true, style: { display: "inline-flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 1, marginLeft: 1 }, children: Array.from({ length: count }, (_, i) => _jsx("span", { style: { width: 3, height: 3, borderRadius: 0, background: "currentColor", opacity: 0.95 } }, i)) });
+};
+const BlockModeButton = (p) => {
+    updateBy(qa30BlockModeState);
+    const mode = qa30BlockMode();
+    const visible = qa30BlockVisible(mode);
+    return _jsxs(Qa30SquareButton, { title: visible ? mode.hint : `${mode.hint}; block is not displayed`, pressed: visible, clickable: true, children: [qa30SquareGlyph(qa30BlockModeItem, p.density), _jsx(Qa30ModeDots, {})] });
+};
+// Client skin over the toolbar config: createToolbar owns order/membership/density,
+// while this stand draws the face as square-edged content tiles. State: pressed = column
+// visible in the grid, unpressed = hidden, dashed = removed by the block mode
+// (present=false). Click toggles the column's grid visibility.
+const MenuStateButton = (p) => {
+    const cfg = p.state.api.useConfig();
+    const present = p.state.api.usePresent();
+    const col = p.state.columns.find(c => c.key === p.colKey);
+    if (!col)
+        return null;
+    const disabled = !!present && !present[p.colKey];
+    const on = cfg.visible[p.colKey] != false;
+    return _jsx(Qa30SquareButton, { title: col.title, pressed: on, disabled: disabled, fixed: col.fixed, clickable: !disabled && !col.fixed, children: qa30SquareGlyph(col, p.density) });
+};
+// A "card 25" toolbar (createToolbar) whose ITEMS are those on/off buttons.
+// sourceMode:'order' lets columnState own only the real-column order while the
+// toolbar keeps MENU MEMBERSHIP local. The button's pressed/unpressed state is
+// still the grid visibility from qaMenuState, and blockMode is a local extra item
+// that is not pushed into the grid order.
+const qa30MenuToolbar = createToolbar({
+    key: "qa30.menuToolbar",
+    items: [
+        ...qaMenuState.columns.map(c => ({
+            key: c.key, title: c.title, short: c.short, icon: c.icon, fixed: c.fixed,
+            onClick: () => {
+                const present = qaMenuState.api.getPresent();
+                if (c.fixed || (!!present && !present[c.key]))
+                    return;
+                const cfg = qaMenuState.api.getConfig();
+                qaMenuState.api.show(c.key, cfg.visible[c.key] == false);
+            },
+            render: (density) => _jsx(MenuStateButton, { state: qaMenuState, colKey: c.key, density: density }),
+        })),
+        { key: "blockMode", title: "Block display mode", onClick: () => nextQa30BlockMode(), render: (density) => _jsx(BlockModeButton, { density: density }) },
+    ],
+    source: qaMenuState.api.listSource,
+    sourceMode: "order",
+});
+const Qa30ResetIcon = () => _jsx("svg", { width: "12", height: "12", 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" }) });
+const qa30ToolbarSkinCss = `
+.qa30MenuSkin {
+  display: inline-flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+  gap: 1px;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  color: inherit;
+}
+.qa30MenuSkin .wenayTbItem {
+  padding: 0;
+  border-radius: 0;
+  gap: 0;
+  align-items: stretch;
+  cursor: default;
+}
+.qa30MenuSkin .wenayTbItem:hover {
+  background: transparent;
+}
+.qa30MenuSkin .qa30MenuTile {
+  will-change: transform;
+}
+`;
+const Qa30AnimatedMenuBar = () => {
+    const items = qa30MenuToolbar.api.useItems();
+    const tileRefs = useRef(new Map());
+    const prevRects = useRef(new Map());
+    const layoutKey = items.map(x => `${x.item.key}:${x.density}`).join("|");
+    useLayoutEffect(() => {
+        const prev = prevRects.current;
+        const next = new Map();
+        tileRefs.current.forEach((node, key) => {
+            const rect = node.getBoundingClientRect();
+            next.set(key, { left: rect.left, top: rect.top });
+            const old = prev.get(key);
+            if (old == null)
+                return;
+            const dx = old.left - rect.left;
+            const dy = old.top - rect.top;
+            if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)
+                return;
+            node.style.transition = "none";
+            node.style.transform = `translate(${dx}px, ${dy}px)`;
+            node.getBoundingClientRect();
+            requestAnimationFrame(() => {
+                node.style.transition = "transform 180ms ease";
+                node.style.transform = "";
+            });
+        });
+        prevRects.current = next;
+    }, [layoutKey]);
+    return _jsx("div", { className: "wenayTb qa30MenuSkin", children: items.map(x => _jsx("div", { ref: node => {
+                if (node)
+                    tileRefs.current.set(x.item.key, node);
+                else
+                    tileRefs.current.delete(x.item.key);
+            }, className: "wenayTbItem qa30MenuTile", title: x.density == "icon" ? x.item.title : undefined, onClick: x.item.onClick, children: x.content }, x.item.key)) });
+};
+const ColumnsMenuDemo = () => {
+    const [win, setWin] = useState(false); // Settings window open? (client-owned container, see below)
+    const cfg = qa30MenuToolbar.api.useConfig();
+    const resetOn = cfg.visible["__reset"] != false;
+    return (
+    // position: relative -> the Settings window (its own layer, position: absolute) is
+    // anchored to THIS card, so it scrolls with the card instead of running off-screen.
+    // FloatingWindow's --wnd-* theme tokens are UNDECLARED by default (the window renders
+    // transparent) - declare them HERE for a dark modal look. Scoped to this card ON
+    // PURPOSE: stand-only styling, not a global tokens change (a client brings its own).
+    _jsxs("div", { style: {
+            position: "relative",
+            "--wnd-bg": "var(--color-bg-dark)",
+            "--wnd-border": "1px solid var(--color-border-common)",
+            "--wnd-radius": "8px",
+            "--wnd-shadow": "0 10px 30px rgba(0,0,0,0.55)",
+            "--wnd-header-bg": "rgba(255,255,255,0.06)",
+            "--wnd-header-border": "1px solid var(--color-border-common)",
+            "--wnd-header-color": "var(--color-text-base)",
+        }, children: [_jsxs("div", { style: { background: "#26354f", border: "1px solid #40516d", borderRadius: 0, padding: 1, width: "fit-content", maxWidth: "100%", marginBottom: 10, display: "inline-flex", alignItems: "stretch", gap: 1, flexWrap: "wrap" }, children: [_jsx("style", { children: qa30ToolbarSkinCss }), _jsx(Qa30AnimatedMenuBar, {}), resetOn && _jsx(Qa30SquareButton, { title: "Reset toolbar", onClick: () => qa30MenuToolbar.api.reset(), children: _jsx(Qa30ResetIcon, {}) }), _jsxs(OutsideClickArea, { status: win, outsideClick: () => setWin(false), style: { display: "inline-flex" }, children: [_jsx(Qa30SquareButton, { title: "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u043C\u0435\u043D\u044E", pressed: win, onClick: () => setWin(v => !v), children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 8 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H2a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H8a1.65 1.65 0 0 0 1-1.51V2a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V8a1.65 1.65 0 0 0 1.51 1H22a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })] }) }), win && (_jsx(FloatingWindow, { keyForSave: "qa30.menuSettingsWin", position: { x: 0, y: 44 }, size: { width: 300, height: 320 }, zIndex: 40, header: _jsx("span", { style: { padding: "0 10px", fontSize: 12, lineHeight: "26px", color: "#cdd6e4" }, children: "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u043C\u0435\u043D\u044E" }), onCLickClose: () => setWin(false), children: _jsx("div", { style: { padding: 12, color: "var(--color-text-base)", height: "100%", boxSizing: "border-box", overflow: "auto" }, children: _jsx(qa30MenuToolbar.Settings, {}) }) }))] })] }), _jsx("div", { style: { height: 190 }, children: _jsx(AgGridTable, { rowData: menuRows, getRowId: pp => pp.data.id, columnDefs: qa30MenuColumnDefs, autoSizeColumns: false, onGridReady: e => {
+                        qaMenuState.grid.attach(e.api);
+                        applyQa30BlockMode();
+                    }, onGridPreDestroyed: () => qaMenuState.grid.detach() }) })] }));
+};
+const tbColRows = [
+    { id: "a", name: "Alpha", price: 10.5, qty: 3, note: "spot" },
+    { id: "b", name: "Beta", price: 22.1, qty: 7, note: "swap" },
+    { id: "c", name: "Gamma", price: 5.8, qty: 1, note: "spot" },
+];
+const tbColDefs = [
+    { colId: "name", field: "name" },
+    { colId: "price", field: "price" },
+    { colId: "qty", field: "qty", headerName: "Qty" },
+    { colId: "note", field: "note" },
+];
+const qaTbColState = createColumnState({
+    key: "qa31.tbColumns",
+    columns: [
+        { key: "name", title: "Name", fixed: true },
+        { key: "price", title: "Price", icon: _jsx("span", { children: "\uD83D\uDCB0" }) },
+        { key: "qty", title: "Quantity", short: "qty" },
+        { key: "note", title: "Note", short: "note" },
+    ],
+});
+// the toolbar does NOT own order/visibility here: it runs on the columnState
+// config (source) - grid, toolbar, menu and Settings all edit the same thing.
+// Items without an icon get a letter pseudo-icon in icon density.
+const qaTbOverColumns = createToolbar({
+    key: "qa31.toolbar",
+    items: qaTbColState.columns.map(c => ({ key: c.key, title: c.title, short: c.short, icon: c.icon, fixed: c.fixed })),
+    source: qaTbColState.api.listSource,
+});
+const ToolbarColumnsDemo = () => (_jsxs("div", { children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 18, marginBottom: 8, flexWrap: "wrap" }, children: [_jsx(qaTbOverColumns.Bar, { settings: true, popAlign: "left" }), _jsx(ColumnsMenu, { state: qaTbColState, compact: true })] }), _jsx("div", { style: { height: 170 }, children: _jsx(AgGridTable, { rowData: tbColRows, getRowId: pp => pp.data.id, columnDefs: tbColDefs, autoSizeColumns: false, onGridReady: e => qaTbColState.grid.attach(e.api), onGridPreDestroyed: () => qaTbColState.grid.detach() }) }), _jsx("div", { style: { marginTop: 8, maxWidth: 320 }, children: _jsx(qaTbOverColumns.Settings, {}) })] }));
+/* ---------- 32. createColumnGrid: auto kit over table/cards/menu/dots ---------- */
+const qaAutoColumnGrid = createColumnGrid({
+    key: "qa32.columnGrid",
+    columnDefs: tbColDefs,
+    data: tbColRows,
+    getId: r => r.id,
+    autoSizeOnColumnCountChange: true,
+    columns: [
+        { key: "name", fixed: true, cardRole: "title" },
+        { key: "price", icon: _jsx("span", { children: "PX" }), cardRole: "accent" },
+        { key: "qty", short: "qty" },
+        { key: "note", short: "note", defaultVisible: false },
+    ],
+});
+const ColumnGridKitDemo = () => {
+    const [mode, setMode] = useState("table");
+    return _jsxs("div", { style: { display: "grid", gap: 10 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }, children: [_jsx("button", { style: btn(mode == "table", "#0969da"), onClick: () => setMode("table"), children: "table" }), _jsx("button", { style: btn(mode == "cards", "#0969da"), onClick: () => setMode("cards"), children: "cards" })] }), _jsx(qaAutoColumnGrid.View, { mode: mode, tableHeight: 180, table: { getRowId: pp => pp.data.id } })] });
+};
+const observeLocalMask = { count: true, meta: { status: true }, items: { a: true } };
+const ObserveStoreLocalDemo = () => {
+    const store = useMemo(() => Observe.createStore({
+        count: 0,
+        meta: { status: "idle" },
+        items: { a: 1, b: 2 },
+    }), []);
+    const count = useStoreNode(store.node.at("count"));
+    const status = useStoreNode(store.node.meta.status);
+    const itemKeys = useStoreKeys(store.node.items);
+    const selection = useStoreSelect(useMemo(() => store.update(observeLocalMask), [store]), { drain: "micro" });
+    const [emit, listen] = useMemo(() => createListen(), []);
+    const listenArgs = useListenArgs(listen, { initial: [0, "initial"] });
+    const listenValue = useListenValue(listen, { initial: 0, map: (n) => n });
+    function mutatePlainState() {
+        store.state.meta.status = "plain " + new Date().toLocaleTimeString();
+        void Observe.flushReactive(store.state);
+    }
+    return _jsxs("div", { style: { display: "grid", gap: 10 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => count.replace((count.value ?? 0) + 1), children: "node.at(\"count\") +1" }), _jsx("button", { onClick: () => status.replace("replace " + new Date().toLocaleTimeString()), children: "replace status" }), _jsx("button", { onClick: () => { store.state.items.c = Date.now(); void Observe.flushReactive(store.state); }, children: "add key c" }), _jsx("button", { onClick: () => { delete store.state.items.b; void Observe.flushReactive(store.state); }, children: "delete key b" }), _jsx("button", { onClick: mutatePlainState, children: "plain state mutation + flush" }), _jsx("button", { onClick: () => emit(Date.now(), status.value ?? "-"), children: "emit listen" }), _jsx("button", { onClick: () => store.replace({ count: 0, meta: { status: "reset" }, items: { a: 1, b: 2 } }), children: "replace whole store" })] }), _jsxs("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", fontSize: 13 }, children: [_jsxs("span", { children: ["count exists: ", _jsx("b", { children: String(count.exists) })] }), _jsxs("span", { children: ["count value: ", _jsx("b", { children: count.value })] }), _jsxs("span", { children: ["status: ", _jsx("b", { children: status.value })] }), _jsxs("span", { children: ["item keys: ", _jsx("b", { children: itemKeys.stringKeys.join(",") })] }), _jsxs("span", { children: ["listen value: ", _jsx("b", { children: listenValue })] })] }), _jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }, children: [_jsxs("pre", { style: { background: "#f6f8fa", padding: 8, borderRadius: 6, overflow: "auto", fontSize: 11 }, children: ["selection\\n", JSON.stringify(selection.value, null, 2)] }), _jsxs("pre", { style: { background: "#f6f8fa", padding: 8, borderRadius: 6, overflow: "auto", fontSize: 11 }, children: ["listen args\\n", JSON.stringify(listenArgs, null, 2)] })] })] });
+};
+const observeMirrorMask = { value: true, nested: { label: true }, updatedAt: true, events: true, bag: true, deep: { level1: { level2: { leaf: true, counters: true } } } };
+const observeLabelMask = { nested: { label: true }, events: true };
+function createSseChangedListen(url) {
+    const listeners = new Set();
+    let source = null;
+    function notify() {
+        listeners.forEach(listener => listener());
+    }
+    function ensureSource() {
+        if (source || typeof EventSource == "undefined")
+            return;
+        source = new EventSource(url);
+        source.addEventListener("changed", notify);
+        source.onerror = () => {
+            // EventSource reconnects itself; the visible QA state comes from fetch errors/successes.
+        };
+    }
+    return {
+        on(cb) {
+            listeners.add(cb);
+            ensureSource();
+            return () => {
+                listeners.delete(cb);
+                if (listeners.size == 0) {
+                    source?.close();
+                    source = null;
+                }
+            };
+        },
+    };
+}
+function createSseChangedPathsListen(url) {
+    const listeners = new Set();
+    let source = null;
+    function ensureSource() {
+        if (source || typeof EventSource == "undefined")
+            return;
+        source = new EventSource(url);
+        source.addEventListener("changedPaths", event => {
+            const change = JSON.parse(event.data);
+            listeners.forEach(listener => listener(change));
+        });
+        source.onerror = () => { };
+    }
+    return {
+        on(cb) {
+            listeners.add(cb);
+            ensureSource();
+            return () => {
+                listeners.delete(cb);
+                if (listeners.size == 0) {
+                    source?.close();
+                    source = null;
+                }
+            };
+        },
+    };
+}
+async function postObserveMutation(body) {
+    const res = await fetch("/__qa/observe-store/mutate", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body),
+    });
+    if (!res.ok)
+        throw new Error(await res.text());
+    return res.json();
+}
+const ObserveStoreMirrorDemo = () => {
+    const remote = useMemo(() => {
+        const changed = createSseChangedListen("/__qa/observe-store/events");
+        const changedPaths = createSseChangedPathsListen("/__qa/observe-store/events-paths");
+        return {
+            changed,
+            changedPaths,
+            async get(mask) {
+                const url = new URL("/__qa/observe-store/get", window.location.origin);
+                if (mask !== undefined)
+                    url.searchParams.set("mask", JSON.stringify(mask));
+                const res = await fetch(url);
+                if (!res.ok)
+                    throw new Error(await res.text());
+                return res.json();
+            },
+        };
+    }, []);
+    const initial = useMemo(() => ({
+        value: 0,
+        nested: { label: "client initial" },
+        updatedAt: "",
+        events: 0,
+        bag: {},
+        deep: { level1: { level2: { leaf: "client deep initial", counters: {} } } },
+    }), []);
+    const mirror = useStoreMirror(remote, initial, { mask: observeMirrorMask, current: true, drain: 50 });
+    const value = useStoreNode(mirror.store.node.value);
+    const label = useStoreNode(mirror.store.node.nested.label);
+    const bagKeys = useStoreKeys(mirror.store.node.bag);
+    const deepLeaf = useStoreNode(mirror.store.node.deep.level1.level2.leaf);
+    const deepCounterKeys = useStoreKeys(mirror.store.node.deep.level1.level2.counters);
+    const labelSelection = useStoreSelect(useMemo(() => mirror.store.update(observeLabelMask), [mirror.store]), { drain: 50 });
+    const pathEvents = useStoreChangedPaths(remote.changedPaths);
+    const [pushes, setPushes] = useState(0);
+    const [lastPost, setLastPost] = useState("-");
+    useListenEffect(remote.changed, () => setPushes(v => v + 1));
+    async function mutate(body) {
+        setLastPost("posting...");
+        try {
+            const data = await postObserveMutation(body);
+            setLastPost(JSON.stringify(data));
+        }
+        catch (e) {
+            setLastPost(String(e));
+        }
+    }
+    return _jsxs("div", { style: { display: "grid", gap: 10 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }, children: [_jsx("button", { onClick: () => mutate({ type: "inc" }), children: "server +1" }), _jsx("button", { onClick: () => mutate({ type: "label", label: "srv " + new Date().toLocaleTimeString() }), children: "server label" }), _jsx("button", { onClick: () => mutate({ type: "bag-add", key: "c", value: Date.now() }), children: "server add key c" }), _jsx("button", { onClick: () => mutate({ type: "bag-delete", key: "b" }), children: "server delete key b" }), _jsx("button", { onClick: () => mutate({ type: "deep-leaf", value: "deep " + new Date().toLocaleTimeString() }), children: "server deep leaf" }), _jsx("button", { onClick: () => mutate({ type: "deep-add", key: "z", value: Date.now() }), children: "server deep add z" }), _jsx("button", { onClick: () => mutate({ type: "deep-delete", key: "y" }), children: "server deep delete y" }), _jsx("button", { onClick: () => mutate({ type: "reset" }), children: "server reset" }), _jsx("button", { onClick: () => value.replace((value.value ?? 0) + 1000), children: "local mirror +1000" }), _jsx("button", { onClick: () => mirror.sync(), children: "manual sync" }), _jsx("button", { onClick: () => mirror.stop(), children: "stop sync" })] }), _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: ["syncing: ", _jsx("b", { children: String(mirror.syncing) })] }), _jsxs("span", { children: ["SSE pushes: ", _jsx("b", { children: pushes })] }), _jsxs("span", { children: ["path pushes: ", _jsx("b", { children: pathEvents.count })] }), _jsxs("span", { children: ["node value: ", _jsx("b", { children: value.value })] }), _jsxs("span", { children: ["node label: ", _jsx("b", { children: label.value })] }), _jsxs("span", { children: ["bag keys: ", _jsx("b", { children: bagKeys.stringKeys.join(",") })] }), _jsxs("span", { children: ["deep leaf: ", _jsx("b", { children: deepLeaf.value })] }), _jsxs("span", { children: ["deep keys: ", _jsx("b", { children: deepCounterKeys.stringKeys.join(",") })] })] }), mirror.error != null && _jsxs("div", { style: { color: "#cf222e" }, children: ["error: ", String(mirror.error)] }), _jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }, children: [_jsxs("pre", { style: { background: "#f6f8fa", padding: 8, borderRadius: 6, overflow: "auto", fontSize: 11 }, children: ["mirror.value\\n", JSON.stringify(mirror.value, null, 2)] }), _jsxs("pre", { style: { background: "#f6f8fa", padding: 8, borderRadius: 6, overflow: "auto", fontSize: 11 }, children: ["label selection\\n", JSON.stringify(labelSelection.value, null, 2), "\\n\\nchanged paths\\n", JSON.stringify(pathEvents.paths), "\\n\\nlast POST\\n", lastPost] })] })] });
+};
+/* ---------- 13. ModalProvider / useModal ---------- */
+const ModalOpener = () => {
+    const modal = useModal();
+    return (_jsx("button", { onClick: () => modal.open(_jsxs("div", { style: { background: "#fff", padding: 24, borderRadius: 8, minWidth: 260 }, children: [_jsx("b", { children: "Modal via useModal" }), _jsx("div", { style: { margin: "10px 0", fontSize: 13 }, children: "Close with Escape, an outside click, or the button." }), _jsx("button", { onClick: () => modal.close(), children: "close" })] })), children: "open modal" }));
+};
+const ModalDemo = () => _jsx(ModalProvider, { children: _jsx(ModalOpener, {}) });
+const resizeAssetRange = ["USDT", "BTC", "ETH", "BNB", "AMB"];
+function makeResizeParams(asset) {
+    return {
+        asset: {
+            name: "asset",
+            value: asset,
+            range: resizeAssetRange,
+        },
+    };
+}
+const ResizeBugRepro = () => {
+    const [n, setN] = useState(0);
+    const [asset, setAsset] = useState("USDT");
+    const [fixedWidth, setFixedWidth] = useState(150);
+    const [autoWidth, setAutoWidth] = useState(0);
+    const [fixedSelectWidth, setFixedSelectWidth] = useState(0);
+    const onChange = (params) => {
+        setAsset(params.asset.value);
+        setN(v => v + 1);
+    };
+    // Resize detection now rides the library singleton: useResizeObserver on the auto box,
+    // useElementSize on the user-resizable fixed box (its width/height come from the hook).
+    const readWidths = () => {
+        const autoSelect = autoBox.element()?.querySelector("select");
+        const fixedSelect = fixedBox.element()?.querySelector("select");
+        setAutoWidth(Math.round(autoSelect?.getBoundingClientRect().width ?? 0));
+        setFixedSelectWidth(Math.round(fixedSelect?.getBoundingClientRect().width ?? 0));
+    };
+    const autoBox = useResizeObserver(readWidths);
+    const fixedBox = useElementSize();
+    React.useLayoutEffect(() => {
+        readWidths();
+        // setResizeableElement's probing settles after paint - re-read one frame later
+        const id = requestAnimationFrame(readWidths);
+        return () => cancelAnimationFrame(id);
+    }, [n, asset, fixedWidth, fixedBox.width]);
+    const selectInfo = { fontSize: 12, color: "#57606a", marginTop: 6 };
+    return _jsxs("div", { style: { display: "grid", gap: 12 }, children: [_jsxs("div", { style: { display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap" }, children: [_jsxs("div", { children: [_jsxs("div", { ref: autoBox.ref, style: { display: "inline-flex", flexDirection: "column", alignItems: "stretch", border: "1px solid #cf222e", padding: 6 }, children: [_jsx(ParamsEditor, { params: makeResizeParams(asset), onChange: onChange }), _jsxs("button", { onClick: () => setN(v => v + 1), children: ["rerender ", n] })] }), _jsxs("div", { style: selectInfo, children: ["auto-width select: ", _jsxs("b", { children: [autoWidth, "px"] })] })] }), _jsxs("div", { children: [_jsx("div", { ref: fixedBox.ref, style: { width: fixedWidth, minWidth: 90, maxWidth: 300, resize: "horizontal", overflow: "auto", border: "1px solid #0969da", padding: 6 }, children: _jsx(ParamsEditor, { params: makeResizeParams(asset), onChange: onChange }) }), _jsxs("div", { style: { display: "flex", gap: 8, marginTop: 6, flexWrap: "wrap" }, children: [_jsxs("button", { onClick: () => setFixedWidth(w => w == 150 ? 240 : 150), children: ["parent ", fixedWidth, "px"] }), _jsx("button", { onClick: () => setN(v => v + 1), children: "rerender" })] }), _jsxs("div", { style: selectInfo, children: ["fixed-parent select: ", _jsxs("b", { children: [fixedSelectWidth, "px"] }), " \u00B7 container (useElementSize): ", _jsxs("b", { children: [fixedBox.width, "\u00D7", fixedBox.height, "px"] })] })] })] }), _jsxs("div", { style: { fontSize: 13 }, children: ["selected asset: ", _jsx("b", { children: asset })] })] });
+};
+/* ---------- 20. SettingsDialog + section registry ---------- */
+const dlgBody = { fontSize: 13, lineHeight: 1.6 };
+const dlgStaticSections = [
+    {
+        key: "general",
+        name: "General",
+        keywords: ["workspace", "startup"],
+        searchText: "autosave project defaults",
+        render: () => _jsxs("div", { style: dlgBody, children: [_jsx("b", { children: "General" }), _jsx("div", { children: "Static root section passed via the sections prop." })] }),
+        children: [
+            {
+                key: "general-project",
+                name: "Project",
+                searchText: "workspace autosave startup folder",
+                render: () => _jsxs("div", { style: dlgBody, children: [_jsx("b", { children: "Project" }), _jsx("div", { children: "Workspace folder, startup page, and autosave defaults." })] }),
+                children: [
+                    {
+                        key: "general-project-indexing",
+                        name: "Indexing",
+                        searchText: "file watcher cache suffix tree",
+                        render: () => _jsxs("div", { style: dlgBody, children: [_jsx("b", { children: "Indexing" }), _jsx("div", { children: "File watcher cache and recursive search index settings." })] }),
+                        children: [
+                            {
+                                key: "general-project-indexing-suffix",
+                                name: "Suffix tree",
+                                searchText: "suffix tree trie token depth recursive auto expand",
+                                render: () => _jsxs("div", { style: dlgBody, children: [_jsx("b", { children: "Suffix tree" }), _jsx("div", { children: "Deep branch used to verify auto-expansion for any tree depth." })] }),
+                                children: [
+                                    {
+                                        key: "general-project-indexing-suffix-leaves",
+                                        name: "Leaf buckets",
+                                        searchText: "suffix tree leaves buckets compact path",
+                                        render: () => _jsxs("div", { style: dlgBody, children: [_jsx("b", { children: "Leaf buckets" }), _jsx("div", { children: "Nested leaf configuration under the suffix tree branch." })] }),
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        key: "display",
+        name: "Display",
+        keywords: ["appearance", "theme"],
+        render: () => _jsxs("div", { style: dlgBody, children: [_jsx("b", { children: "Display" }), _jsx("div", { children: "Display root. Long content to test scrolling:" }), Array.from({ length: 30 }, (_, i) => _jsxs("div", { children: ["line ", i + 1] }, i))] }),
+        children: [
+            {
+                key: "display-theme",
+                name: "Theme",
+                searchText: "dark light contrast palette",
+                render: () => _jsxs("div", { style: dlgBody, children: [_jsx("b", { children: "Theme" }), _jsx("div", { children: "Dark, light, contrast, and palette options." })] }),
+                children: [
+                    {
+                        key: "display-theme-palette",
+                        name: "Palette",
+                        searchText: "semantic colors accent warning success",
+                        render: () => _jsxs("div", { style: dlgBody, children: [_jsx("b", { children: "Palette" }), _jsx("div", { children: "Semantic colors shared by settings, windows, and toolbars." })] }),
+                        children: [
+                            {
+                                key: "display-theme-palette-accent",
+                                name: "Accent color",
+                                searchText: "accent primary focus selected highlight",
+                                render: () => _jsxs("div", { style: dlgBody, children: [_jsx("b", { children: "Accent color" }), _jsx("div", { children: "Primary focus and selected-state color tokens." })] }),
+                            },
+                        ],
+                    },
+                ],
+            },
+            { key: "display-font", name: "Font", searchText: () => "font size editor line height", render: () => _jsxs("div", { style: dlgBody, children: [_jsx("b", { children: "Font" }), _jsx("div", { children: "Editor font size and line height settings." })] }) },
+        ],
+    },
+];
+// Any module: register on mount, the returned unregister runs on unmount.
+const ExternalSectionModule = () => {
+    useEffect(() => registerSettingsSection({
+        key: "external",
+        parentKey: "display",
+        name: "External module",
+        searchText: "registered plugin mount unmount external",
+        render: () => _jsxs("div", { style: dlgBody, children: [_jsx("b", { children: "External" }), _jsx("div", { children: "Registered by a module on mount and removed on unmount." })] }),
+    }), []);
+    return _jsx("span", { style: { padding: "2px 8px", background: "#dafbe1", borderRadius: 6, fontSize: 12 }, children: "external module mounted" });
+};
+const SettingsDialogDemo = () => {
+    const [mounted, setMounted] = useState(true);
+    useCacheMapPersistence(memoryCache);
+    return _jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }, children: [_jsx(SettingsDialog, { sections: dlgStaticSections, defaultSection: "general" }), _jsx("button", { onClick: () => setMounted(v => !v), children: mounted ? "unmount external module" : "mount external module" }), mounted && _jsx(ExternalSectionModule, {})] });
+};
+/* ---------- 21. createUiSlot - configurable placement ---------- */
+const qaSlot = createUiSlot({
+    key: "qa-ui-slot",
+    places: { top: "Top bar", side: "Sidebar" },
+    def: "top",
+});
+const slotContent = _jsx("span", { style: { padding: "4px 10px", background: "#0969da", color: "#fff", borderRadius: 6, fontSize: 12 }, children: "the block" });
+const UiSlotDemo = () => {
+    // App-side persistence contract in one hook: memoryCache.load() on start, then the dirty
+    // channel -> saveDebounced(300) - the persisted maps are observable and mark their
+    // memoryCache dirty themselves, the app owns the write policy.
+    useCacheMapPersistence(memoryCache);
+    return _jsxs("div", { style: { display: "grid", gap: 10 }, children: [_jsx("style", { children: `.qaChip{border:1px solid #6e7781;border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer;display:inline-block}.qaChipActive{background:#0969da;border-color:#0969da;color:#fff}` }), _jsxs("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [_jsx("span", { style: { fontSize: 13 }, children: "place:" }), _jsx(qaSlot.PlacementSetting, { className: "qaChip", activeClassName: "qaChipActive" })] }), _jsxs("div", { style: { border: "1px dashed #6e7781", borderRadius: 6, padding: 8, minHeight: 38, fontSize: 13 }, children: ["Top bar: ", _jsx(qaSlot.Slot, { place: "top", children: slotContent })] }), _jsxs("div", { style: { border: "1px dashed #6e7781", borderRadius: 6, padding: 8, minHeight: 38, fontSize: 13 }, children: ["Sidebar: ", _jsx(qaSlot.Slot, { place: "side", children: slotContent })] })] });
+};
+/* ---------- 22. createCallbackHub - single callback slot multiplexer ---------- */
+// Fake legacy API with ONE callback slot: a second direct subscriber would silently
+// overwrite the first. The hub takes the slot once and fans events out.
+const hubSlot = { cb: null };
+let hubTick = 0;
+const qaHub = createCallbackHub(emit => { hubSlot.cb = emit; });
+const HubDemo = () => {
+    const [a, setA] = useState([]);
+    const [b, setB] = useState([]);
+    const [aOn, setAOn] = useState(false);
+    const [bOn, setBOn] = useState(false);
+    useEffect(() => { if (aOn)
+        return qaHub.on(n => setA(v => [...v, n])); }, [aOn]);
+    useEffect(() => { if (bOn)
+        return qaHub.on(n => setB(v => [...v, n])); }, [bOn]);
+    return _jsxs("div", { style: { display: "grid", gap: 8, fontSize: 13 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }, children: [_jsx("button", { onClick: () => hubSlot.cb?.(++hubTick), children: "fire source event" }), _jsx("button", { onClick: () => setAOn(v => !v), children: aOn ? "off A" : "on A" }), _jsx("button", { onClick: () => setBOn(v => !v), children: bOn ? "off B" : "on B" }), _jsxs("span", { children: ["slot bound (lazy): ", _jsx("b", { children: String(hubSlot.cb != null) })] }), _jsxs("span", { children: ["hub.count(): ", _jsx("b", { children: qaHub.count() })] })] }), _jsxs("div", { children: ["A received: ", _jsx("b", { children: a.join(", ") || "-" })] }), _jsxs("div", { children: ["B received: ", _jsx("b", { children: b.join(", ") || "-" })] })] });
+};
+/* ---------- 35. DragBox - imperative delta drag (adapter over useDraggableApi) ---------- */
+const DragBoxDemo = () => {
+    const base = useRef({ x: 20, y: 20 });
+    const delta = useRef({ x: 0, y: 0 });
+    const chipRef = useRef(null);
+    const renders = useRef(0);
+    const [starts, setStarts] = useState(0);
+    const [stops, setStops] = useState(0);
+    renders.current++;
+    const apply = () => {
+        const el = chipRef.current;
+        if (el)
+            el.style.transform = `translate(${base.current.x + delta.current.x}px, ${base.current.y + delta.current.y}px)`;
+    };
+    useEffect(apply, []);
+    return _jsxs("div", { style: { position: "relative", height: 220, border: "1px dashed #d0d7de", borderRadius: 8, overflow: "hidden" }, children: [_jsx(DragBox, { onStart: () => { delta.current = { x: 0, y: 0 }; setStarts(v => v + 1); }, onX: x => { delta.current.x = x; apply(); }, onY: y => { delta.current.y = y; apply(); }, onStop: () => {
+                    base.current = { x: base.current.x + delta.current.x, y: base.current.y + delta.current.y };
+                    delta.current = { x: 0, y: 0 };
+                    apply();
+                    setStops(v => v + 1);
+                }, children: _jsx("div", { ref: chipRef, style: { width: 90, padding: "10px 0", textAlign: "center", background: "#0969da", color: "#fff", borderRadius: 8, cursor: "grab", userSelect: "none", touchAction: "none" }, children: "drag me" }) }), _jsxs("div", { style: { position: "absolute", right: 10, bottom: 8, fontSize: 12, color: "#57606a" }, children: ["starts: ", _jsx("b", { children: starts }), " \u00B7 stops: ", _jsx("b", { children: stops }), " \u00B7 renders: ", _jsx("b", { children: renders.current })] })] });
+};
+/* ---------- 25. createToolbar - customizable toolbar ---------- */
+// Item actions land in a module store (the demo component reads it via updateBy).
+const tbActions = { last: "-", count: 0 };
+function tbAct(name) {
+    return () => {
+        tbActions.last = name;
+        tbActions.count++;
+        renderBy(tbActions);
+    };
+}
+const tbBaseItems = [
+    { key: "home", title: "Home (fixed)", short: "Home", icon: _jsx("span", { children: "\uD83C\uDFE0" }), fixed: true, onClick: tbAct("home") },
+    { key: "star", title: "Add to favorites", short: "Star", icon: _jsx("span", { children: "\u2B50" }), onClick: tbAct("star") },
+    { key: "bell", title: "Notifications", short: "Alerts", icon: _jsx("span", { children: "\uD83D\uDD14" }), onClick: tbAct("bell") },
+    { key: "chart", title: "Open chart window", short: "Chart", icon: _jsx("span", { children: "\uD83D\uDCC8" }), onClick: tbAct("chart") },
+    { key: "trash", title: "Clear workspace", short: "Clear", icon: _jsx("span", { children: "\uD83D\uDDD1\uFE0F" }), defaultVisible: false, onClick: tbAct("trash") },
+];
+const qaToolbar = createToolbar({ key: "qa-toolbar", items: tbBaseItems });
+// The merge case (acceptance #3): the SAME persist key, one EXTRA item - as if the app
+// shipped an update. Created lazily so the base bar is what the page starts with.
+let qaToolbarExtra = null;
+const getQaToolbarExtra = () => qaToolbarExtra ??= createToolbar({
+    key: "qa-toolbar",
+    items: [...tbBaseItems, { key: "help", title: "Help (added in the update)", short: "Help", icon: _jsx("span", { children: "\u2753" }), onClick: tbAct("help") }],
+});
+const ToolbarDemo = () => {
+    updateBy(tbActions);
+    const [extra, setExtra] = useState(false);
+    const [thirdDensity, setThirdDensity] = useState(false);
+    const [changes, setChanges] = useState(0);
+    const [lastCfg, setLastCfg] = useState(null);
+    const tb = extra ? getQaToolbarExtra() : qaToolbar;
+    // App-side persistence contract - same wiring as the UiSlot card.
+    useCacheMapPersistence(memoryCache);
+    // Same pure Settings element registered as a global settings section (see card 20's dialog).
+    useEffect(() => registerSettingsSection({
+        key: "qa-toolbar",
+        name: "Toolbar",
+        render: () => _jsx(tb.Settings, {}),
+    }), [tb]);
+    // Both bars share one persist key -> both apis emit; subscribe to the visible one.
+    useListenEffect(tb.api.onChange, cfg => {
+        setChanges(v => v + 1);
+        setLastCfg(cfg);
+    });
+    // Density registry extensibility: a third level is just one more registration.
+    useEffect(() => {
+        if (!thirdDensity)
+            return;
+        return registerToolbarDensity({
+            key: "full",
+            name: "Full text",
+            renderItem: item => _jsxs("span", { children: [item.icon, " ", item.title] }),
+        });
+    }, [thirdDensity]);
+    return _jsxs("div", { style: { display: "grid", gap: 10 }, children: [_jsx("div", { style: { background: "#17202e", borderRadius: 8, padding: 6, width: "fit-content", maxWidth: "100%" }, children: _jsx(tb.Bar, { settings: true, popAlign: "left" }) }), _jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center", fontSize: 13 }, children: [_jsx(SettingsDialog, { trigger: _jsx("span", { style: { display: "inline-block", padding: "4px 10px", border: "1px solid #0969da", borderRadius: 6, color: "#0969da" }, children: "global settings" }) }), _jsx("button", { onClick: () => setExtra(v => !v), children: extra ? "app update: extra item ON" : "simulate app update (+1 item)" }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: thirdDensity, onChange: e => setThirdDensity(e.target.checked) }), " register 3rd density (Full text)"] })] }), _jsxs("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", fontSize: 13 }, children: [_jsxs("span", { children: ["last action: ", _jsx("b", { children: tbActions.last }), " (", tbActions.count, ")"] }), _jsxs("span", { children: ["onChange fired: ", _jsx("b", { children: changes })] })] }), lastCfg && _jsx("div", { style: { fontSize: 11, fontFamily: "monospace", color: "#57606a", overflowX: "auto" }, children: JSON.stringify(lastCfg) })] });
+};
+/* ---------- 26. useReorder - a field of blocks ---------- */
+// Module store: the hook owns NO state beyond the live drag - order lives with the app.
+const reorderState = { order: ["A", "B", "C", "D", "E", "F", "G", "H"], varied: false, commits: 0 };
+const ReorderDemo = () => {
+    updateBy(reorderState);
+    const r = useReorder({
+        order: reorderState.order,
+        commit: next => {
+            reorderState.order = next;
+            reorderState.commits++;
+            renderBy(reorderState);
+        },
+        // equal blocks: 'slots' is exact; varied sizes: FLIP-measure the real layout
+        preview: reorderState.varied ? "measure" : "slots",
+    });
+    const width = (k) => reorderState.varied ? 56 + (k.charCodeAt(0) % 4) * 26 : 64;
+    return _jsxs("div", { style: { display: "grid", gap: 8, fontSize: 13 }, children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: reorderState.varied, onChange: () => { reorderState.varied = !reorderState.varied; renderBy(reorderState); } }), " ", "varied block widths (preview: measure / FLIP)"] }), _jsx("div", { ref: r.listRef, style: { display: "flex", flexWrap: "wrap", gap: 8, width: 300, background: "#17202e", padding: 8, borderRadius: 8 }, children: reorderState.order.map(k => {
+                    const it = r.item(k);
+                    return _jsx("div", { ...it.props, style: {
+                            width: width(k), height: 44, lineHeight: "44px", textAlign: "center",
+                            background: it.dragging ? "#2f5a8f" : "#2b3648", color: "#dfe6ef", borderRadius: 6,
+                            cursor: "grab", userSelect: "none", touchAction: "none",
+                            transition: it.active && !it.dragging ? "transform 0.12s ease" : undefined,
+                            position: it.dragging ? "relative" : undefined, zIndex: it.dragging ? 1 : undefined,
+                            boxShadow: it.dragging ? "0 4px 14px rgba(0,0,0,0.4)" : undefined,
+                            ...it.style,
+                        }, children: k }, k);
+                }) }), _jsxs("div", { style: { color: "#57606a", fontFamily: "monospace", fontSize: 12 }, children: ["order: ", reorderState.order.join(" "), " | commits: ", reorderState.commits] })] });
+};
+/* ---------- 27. useReorderBoard - columns with per-column gravity ---------- */
+const boardState = {
+    cols: [
+        { key: "c1", items: ["A1", "A2", "A3"] },
+        { key: "c2", items: ["B1", "B2"] },
+        { key: "c3", items: ["C1", "C2", "C3", "C4"] },
+        { key: "c4", items: ["D1"] },
+        { key: "c5", items: [] },
+    ],
+    gravity: { c1: "top", c2: "bottom", c3: "top", c4: "bottom", c5: "top" },
+    // side tray: freshly created blocks land here, then drag into the board
+    tray: [],
+    commits: 0, events: 0, last: "-", nextCol: 6, nextItem: 1,
+};
+const qaBoardTray = "tray";
+// left-rail trash: a registered board column whose content the commit discards
+const qaBoardTrash = "trash";
+const qaBoardStyles = {
+    root: { display: "grid", gap: 8, fontSize: 13 },
+    columns: { display: "grid", alignItems: "start", columnGap: 6 },
+    columnControls: { display: "grid", alignItems: "center", columnGap: 6, marginTop: -6 },
+    insertStrip: {
+        width: 20, height: 20, borderRadius: 10, cursor: "pointer", userSelect: "none",
+        display: "flex", alignItems: "center", justifyContent: "center",
+        color: "#9fb3c8", background: "#202c3c", border: "1px solid #38506d", fontSize: 11, fontWeight: 700,
+    },
+    column: { display: "flex", flexDirection: "column", gap: 6, width: 78, height: 240, padding: 6, borderRadius: 8 },
+    columnWrap: { display: "grid", width: 90 },
+    tray: { display: "grid", gap: 6, width: 90, alignContent: "start" },
+    newItem: {
+        height: 24, borderRadius: 6, cursor: "pointer", userSelect: "none",
+        border: "1px dashed #38506d", background: "#202c3c", color: "#9fb3c8", fontSize: 12,
+    },
+    leftRail: { display: "grid", gap: 8, alignContent: "start", width: 44 },
+    addColumn: {
+        width: 44, height: 44, borderRadius: 8, cursor: "pointer", userSelect: "none",
+        border: "1px solid #38506d", background: "#202c3c", color: "#9fb3c8", fontSize: 18, lineHeight: "42px",
+    },
+    trashZone: {
+        width: 44, height: 64, borderRadius: 8, boxSizing: "border-box", userSelect: "none",
+        display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18,
+    },
+    removeColumn: { width: 24, height: 20, border: "1px solid #f4b1aa", borderRadius: 6, cursor: "pointer", color: "#cf222e", background: "#fff", fontSize: 15, lineHeight: "16px" },
+    item: {
+        height: 32, width: "100%", boxSizing: "border-box", lineHeight: "32px", textAlign: "center", borderRadius: 6,
+        color: "#dfe6ef", cursor: "grab", userSelect: "none", touchAction: "none",
+    },
+    status: { color: "#57606a", fontFamily: "monospace", fontSize: 12 },
+};
+function qaBoardColumnStyle(over, bottom) {
+    return {
+        ...qaBoardStyles.column,
+        justifyContent: bottom ? "flex-end" : "flex-start",
+        background: over ? "#1d2b40" : "#17202e",
+        outline: over ? "1px solid #2f5a8f" : undefined,
+    };
+}
+function qaBoardItemStyle(it) {
+    return {
+        ...qaBoardStyles.item,
+        background: it.dragging ? "#2f5a8f" : "#2b3648",
+        transition: it.active && !it.dragging ? "transform 0.12s ease" : undefined,
+        position: it.dragging ? "relative" : undefined,
+        zIndex: it.dragging ? 1 : undefined,
+        boxShadow: it.dragging ? "0 4px 14px rgba(0,0,0,0.4)" : undefined,
+        ...it.style,
+        // The hook may supply a measured drag width. It is valid only while
+        // dragging; idle board items must fill their own column.
+        width: it.dragging ? it.style?.width : "100%",
+    };
+}
+const BoardDemo = () => {
+    updateBy(boardState);
+    const log = (s) => { boardState.last = s; boardState.events++; renderBy(boardState); };
+    // The tray and the trash are just MORE columns of the same hook (registered
+    // via columnRef like the rest) - rendered aside, excluded from the board grid.
+    // Whatever lands in the trash column is simply not stored back: it disappears.
+    const r = useReorderBoard({
+        columns: [...boardState.cols, { key: qaBoardTray, items: boardState.tray }, { key: qaBoardTrash, items: [] }],
+        commit: next => {
+            const trashed = next.find(c => c.key == qaBoardTrash)?.items ?? [];
+            boardState.tray = next.find(c => c.key == qaBoardTray)?.items ?? [];
+            boardState.cols = next.filter(c => c.key != qaBoardTray && c.key != qaBoardTrash);
+            boardState.commits++;
+            if (trashed.length) {
+                boardState.last = `deleted ${trashed.join(",")}`;
+                boardState.events++;
+            }
+            renderBy(boardState);
+        },
+        onOverChange: e => log(`over ${e.over.col}#${e.over.index}` + (e.prev && e.prev.col != e.over.col ? " (column crossed)" : "")),
+        onDragEnd: e => log(`drop ${e.key} -> ${e.over.col}#${e.over.index} committed=${e.committed}`),
+    });
+    // A column is consumer state: splice at ANY position, the hook picks it up
+    // via the live columnRef registry - nothing to tell the hook.
+    const addColumnAt = (i) => {
+        const k = "c" + boardState.nextCol++;
+        const cols = boardState.cols.slice();
+        cols.splice(i, 0, { key: k, items: [] });
+        boardState.cols = cols;
+        boardState.gravity[k] = boardState.nextCol % 2 ? "bottom" : "top";
+        renderBy(boardState);
+    };
+    const removeColumn = (key) => {
+        const removed = boardState.cols.find(column => column.key == key);
+        boardState.cols = boardState.cols.filter(column => column.key != key);
+        delete boardState.gravity[key];
+        log(`removed ${key}${removed?.items.length ? ` (${removed.items.length} items)` : ""}`);
+    };
+    const InsertStrip = ({ at }) => (_jsx("button", { title: "insert column between", onClick: () => addColumnAt(at), style: qaBoardStyles.insertStrip, children: "\u2194" }));
+    const addItem = () => {
+        const k = "E" + boardState.nextItem++;
+        boardState.tray = [...boardState.tray, k];
+        log(`created ${k}`);
+    };
+    const tracks = boardState.cols.map((_, i) => i < boardState.cols.length - 1 ? "90px 20px" : "90px").join(" ");
+    const trashOver = r.over?.col == qaBoardTrash;
+    return _jsxs("div", { style: qaBoardStyles.root, children: [_jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: 14 }, children: [_jsxs("div", { style: qaBoardStyles.leftRail, children: [_jsx("button", { title: "add a column at the start", onClick: () => addColumnAt(0), style: qaBoardStyles.addColumn, children: "+" }), _jsx("div", { ref: r.columnRef(qaBoardTrash), title: "drop a block here to delete it", style: {
+                                    ...qaBoardStyles.trashZone,
+                                    border: trashOver ? "1px solid #cf5b6a" : "1px dashed #6b4a55",
+                                    background: trashOver ? "#3a2230" : "#1c1622",
+                                    color: trashOver ? "#ff8896" : "#cf5b6a",
+                                }, children: "\u2212" })] }), _jsxs("div", { style: { display: "grid", gap: 8 }, children: [_jsx("div", { style: { ...qaBoardStyles.columns, gridTemplateColumns: tracks }, children: boardState.cols.map((c, ci) => (_jsx("div", { style: { ...qaBoardStyles.columnWrap, gridColumn: ci * 2 + 1 }, children: _jsx("div", { ref: r.columnRef(c.key), style: qaBoardColumnStyle(r.over?.col == c.key, boardState.gravity[c.key] == "bottom"), children: c.items.map(k => {
+                                            const it = r.item(k);
+                                            return _jsx("div", { ...it.props, style: qaBoardItemStyle(it), children: k }, k);
+                                        }) }) }, c.key))) }), _jsx("div", { style: { ...qaBoardStyles.columnControls, gridTemplateColumns: tracks }, children: boardState.cols.map((c, ci) => _jsxs(React.Fragment, { children: [_jsx("button", { title: `remove ${c.key}`, onClick: () => removeColumn(c.key), style: { ...qaBoardStyles.removeColumn, gridColumn: ci * 2 + 1, justifySelf: "center" }, children: "\u2212" }), ci < boardState.cols.length - 1 && _jsx("span", { style: { gridColumn: ci * 2 + 2, justifySelf: "center" }, children: _jsx(InsertStrip, { at: ci + 1 }) })] }, c.key)) })] }), _jsxs("div", { style: qaBoardStyles.tray, children: [_jsx("button", { title: "create a new block in the tray", onClick: addItem, style: qaBoardStyles.newItem, children: "+ item" }), _jsx("div", { ref: r.columnRef(qaBoardTray), style: { ...qaBoardColumnStyle(r.over?.col == qaBoardTray, false), border: "1px dashed #2c3c55" }, children: boardState.tray.map(k => {
+                                    const it = r.item(k);
+                                    return _jsx("div", { ...it.props, style: qaBoardItemStyle(it), children: k }, k);
+                                }) })] })] }), _jsxs("div", { style: qaBoardStyles.status, children: [boardState.cols.map(c => c.key + (boardState.gravity[c.key] == "bottom" ? "↓" : "↑") + ":[" + c.items.join(",") + "]").join(" "), " tray:[", boardState.tray.join(","), "] | commits: ", boardState.commits, " | events: ", boardState.events, " | last: ", boardState.last] })] });
+};
+/* ---------- borad ---------- */
+function ActiveChecks() {
+    return (_jsxs(_Fragment, { children: [_jsx(Check, { n: 18, title: "Observe hooks - local store and listen", do: "Click node.at(count) +1, replace status, plain state mutation + flush, emit listen, and replace whole store.", expect: "Leaf node, selection, direct state mutation after flush, add/delete object keys, and listen hooks all rerender. The count key is read through node.at(count), so it does not conflict with node.count().", note: "This isolates the React adapter from transport: no fetch/SSE/RPC involved.", tall: true, children: _jsx(ObserveStoreLocalDemo, {}) }), _jsx(Check, { n: 17, title: "Observe hooks - store mirror over HTTP/SSE", do: "Click server +1, label, add/delete key, deep leaf/deep add/deep delete, local mirror +1000, stop sync, then manual sync.", expect: "Server buttons POST to the Vite QA server, including add/delete object keys and deep mutations. SSE pushes changedPaths; mirror pulls only the intersecting mask when possible. Local mirror edits render immediately and are overwritten by the next server sync.", note: "This checks the React adapter only in wenay-react2: common2 remains React-free; transport policy stays outside the hook.", tall: true, children: _jsx(ObserveStoreMirrorDemo, {}) }), _jsx(Check, { n: 23, title: "Replay hooks - video line, conflation, time travel, freshness", do: "Watch A and B play the same synthetic video. Toggle slow network for B, switch resolution, unmount/remount A. In C drag the slider (playback pauses), then press live. In D: note the renders counter while the line is fresh, check stall producer, wait 2s, uncheck; while stalled press new client (keyframe). In E: switch pull pace (250ms/1s/3s), press pull now.", expect: "A plays smoothly at 10 fps. B on slow network stays CURRENT (bounded latency): frames drop (dropped/coalesced counters grow), the wire buffer never grows past highWater, and each recovery is one coalesced last-frame envelope. Resolution switches on all clients within a frame. Remounting A continues from the kept seq (seq does not reset, frames counter continues from the tail). C seeks to any archived seq via keyframe+tail fold and hands over to live seamlessly. D: renders stays FLAT while frames grow (no per-event re-renders); on stall the STALE badge appears after ~2s and disappears on the first frame after resume; a client mounted during a stall goes STALE within staleMs (this in-proc keyframe is stamped at request time; a tail/keyframe carrying an old producer ts goes stale from the first paint); StrictMode double-effect leaves one watchdog and no badge flicker. E advances ONLY at the pull cadence: frames jumps by ~pace\u00D710fps per pull while pulls grows by one; seq keeps up with head; switching pace keeps the position (no keyframe restart, frames does not re-fold); pull now folds immediately.", note: "All in-proc: the socket transport is already proven in wenay-common2 (replay/video-socket.demo, canvas-socket.test). This card tests the React side: useReplaySubscribe lifecycle (off on unmount, reconnect by since), useReplayHistory scrubber, frames drawn to canvas via ref - bypassing VDOM, stale/staleMs mirroring common2's edge-triggered watchdog into React state, useReplayFrame pull path (timer around remote.frame(), rev2 frame model; policy:'frame'/hint ride ReplaySubscribeOpts but need a server frameLine - the wire test lives in common2 replay/rpc-auto.test.ts). The producer starts on first render and runs until page reload.", tall: true, children: _jsx(ReplayVideoDemo, {}) }), _jsx(Check, { n: 24, title: "Replay hooks - store sync (useStoreReplayMirror)", do: "Watch ticks/price advance. Click server note / add key / delete key. Uncheck sync enabled, mutate the server a few times, recheck. Click restart. Check stall producer, wait 2.5s, then click server note.", expect: "Mirror follows the server store with seq ascending. While sync is disabled the mirror freezes; on re-enable it catches up through the journal tail (seq jumps to head, no full reset flicker). Object key add/delete replicate. restart resubscribes from the kept seq. On stall the stale flag flips true after 2.5s and lastTs freezes; any server mutation (e.g. server note) flips it back to fresh.", note: "exposeStoreReplay/syncStoreReplay in-proc: the remote is the exposed {line, since, keyframe} facade, exactly what createRpcServerAuto would expose over a socket. staleMs rides the same ReplaySubscribeOpts as the video card.", children: _jsx(ReplayStoreDemo, {}) }), _jsx(Check, { n: 33, title: "Replay hooks - per-key feed (useStoreReplayEach)", do: "Watch the table for a few producer ticks. Click server add row, server delete row, server replace ALL, then remount client (fresh keyframe).", expect: "On mount every row appears with cb calls=1 (keyframe expanded per key). Between clicks only the mutated row's cb calls counter grows - the whole dict is never re-delivered per tick. Delete removes the row via (key, undefined). replace ALL swaps the table: removed rows leave, new rows enter with cb calls=1. Remount folds a fresh keyframe (all counters reset to 1); StrictMode double-effect does not double-count.", note: "React counterpart of Observe.syncStoreReplayEach (wenay-common2 1.0.62): internal mirror store + syncStoreReplay + store.each(). The mirror lives in a ref, so in-mount resubscribes reconnect by journal tail on top of kept state; the fold target is a plain Map (grid-api style), not React state. drain:100 coalesces multiple writes to one key into one call per window.", tall: true, children: _jsx(ReplayStoreEachDemo, {}) }), _jsx(Check, { n: 34, title: "Replay hooks - route hand-off (useReplayRouteSubscribe)", do: "Watch one canvas draw the synthetic video. Click switch direct, then switch relay, then fail route. Repeat while the producer is moving.", expect: "The canvas keeps advancing as one logical fold: route switches catch up by seq before the old route closes, so frames do not reset or duplicate. The label changes to direct/relay only after ready. fail route reports an error but keeps the previous active route alive and the canvas continues.", note: "React wrapper over wenay-common2 1.0.65 Replay.replayRouteSubscribe. Route hand-off is explicit through switchRoute(); changing the remote prop remains a fresh subscription boundary. This route helper does not expose stale/lastTs, so freshness stays on the non-route hooks until common2 grows that surface.", tall: true, children: _jsx(ReplayRouteDemo, {}) }), _jsx(Check, { n: 13, title: "ModalProvider / useModal - Escape and outside click", do: "Click open modal. Close it with Escape. Open it again and close with an outside click. Open it again and close with the close button.", expect: "All three methods close it. The dimmed backdrop is above everything (z-index from token --wenay-z-modal).", note: "M1: Escape and closeOnEscape/closeOnOutsideClick options were added; useModal remains the app-level path and createModalElementStore remains low-level.", children: _jsx(ModalDemo, {}) }), _jsx(Check, { n: 20, title: "SettingsDialog - searchable settings tree + registry", do: "Click the three-dot toolbar-style settings button: drag the window by its header, drag the divider between tree and content, double-click it to reset width, use the tree icons and the dotted tree-cycle button, search for suffix/leaf/palette/accent/font/external and wrong-layout examples like \u044B\u0433\u0430\u0430\u0448\u0447 for suffix. Press Enter to save a query into search history, reopen history from the clock button, pick a saved query, then clear history. Clear search via the x and via Escape, then close via window x/outside click/Escape with empty search. Unmount external module and open again.", expect: "The default trigger is the same compact toolbar-button style as createToolbar, using a three-dot icon. Dialog opens as the standard draggable FloatingWindow with a header, larger size, shared close x, and outside-click close. The tree/content divider changes the tree width, persists it through memoryCache, supports keyboard arrows, and double-click/Enter resets to default. Search uses original input plus RU/EN keyboard-layout variants, selects the first real match, auto-expands parents, and highlights only the matched word once. Enter stores non-empty queries in a small persisted search history; choosing a history item restores the query; clearing history removes the dropdown; leaving the search box closes the dropdown. The dotted tree-cycle button switches expanded/current branch/collapsed and stays in the search row. The clear x and Escape both cancel search text; Escape with empty search closes the dialog. The external child under Display appears only while mounted.", note: "Registry is a module singleton (registerSettingsSection -> unregister), no React context. Tree shape comes from children or parentKey. Search history uses createSearchHistory -> memoryGetOrCreate/memoryCache dirty channel; this demo loads memoryCache and saves dirty changes with saveDebounced(300). Look via --dlg-* tokens; apps pass their own section classes via sectionClassName/sectionActiveClassName.", children: _jsx(SettingsDialogDemo, {}) }), _jsx(Check, { n: 38, title: "Media video - capture lifecycle + canvas viewer", do: "Press start camera and grant permission. Move the tab to background for a short time, then return. Press stop, then start again.", expect: "The canvas renders without React re-rendering per frame. State changes idle \u2192 requesting \u2192 live; the stats line shows drawn frames and frame age. Hidden-tab capture is owned by common2 worker/ImageCapture defaults.", note: "useMediaSource owns only permission/device lifecycle. Media.attachVideoCanvas owns JPEG decode and drawing; frame data never enters React state.", children: _jsx(MediaVideoDemo, {}) }), _jsx(Check, { n: 39, title: "Media audio - mic lifecycle + sequential player", do: "Press enable + start mic, grant permission, speak briefly, then stop. If browser autoplay blocks audio, press the same button again.", expect: "Audio activation happens in a user gesture; common2 player keeps a short live backlog and reports played/dropped frames. React renders only the half-second stats snapshot.", note: "The PCM player is common2 imperative code. This card proves the React wrapper's start/stop cleanup and gesture boundary, not an audio implementation in React.", children: _jsx(MediaAudioDemo, {}) }), _jsx(Check, { n: 40, title: "Peer SDK - mirrored store + explicit resync", do: "Click peer A +1 several times. Watch mirrored value on peer B. Press resync B; the mirror must stay coherent.", expect: "Peer SDK owns relay journal and repair. React reads the peer store normally and exposes route/ready/seq as low-frequency control state; no transport or patch protocol is reimplemented here.", note: "In-process host replaces a fake UI mock: this card proves the actual Peer.createPeerClient contract. Direct WebRTC needs the app's real signaling/rtc factory and remains a separate browser recipe.", children: _jsx(PeerSdkDemo, {}) }), _jsx(Check, { n: 41, title: "Peer calls - ring, accept, hangup", do: "Click call B. On B press accept; both sides become active. Then hang up from A. Repeat and decline on B.", expect: "The incoming ring, active state and terminal reason propagate through the existing Peer signal hub. React only renders manager state; common2 owns call IDs, busy/glare resolution and timeout/offline verdicts.", note: "In-process host, no fake call protocol: usePeerCalls binds Peer.createCallManager. A real app supplies its server-side authorize policy before allowing media viewers.", children: _jsx(PeerCallDemo, {}) }), _jsx(Check, { n: 42, title: "Peer presence - snapshot plus online/offline edges", do: "Observe both accounts online. Toggle B connection off and on.", expect: "The list updates on connection edges without polling. The hook subscribes before it reads the snapshot, so it follows the host protocol rather than creating a second presence store.", note: "Presence is common2 host state. React receives only list/edge data and does not decide authentication or account validity.", children: _jsx(PeerPresenceDemo, {}) }), "            ", _jsx(Check, { n: 43, title: "Media relay - actual camera stream with live ACL revoke", do: "Start camera and grant permission: the right canvas must show the relayed stream. Revoke ACL: the viewer frame counter stops while capture keeps running. Grant it again: frames resume. Stop camera.", expect: "The path is camera \u2192 Media source \u2192 common2 relay \u2192 policy-filtered viewer canvas. ACL revocation gates an already-open viewer without trusting React to detach it; the source stats continue because publishing and viewing are separate responsibilities.", note: "This is an in-process relay, so it proves the React/lifecycle seam and live policy filter. A deployed app exposes publishOf/watchOf through its RPC server and keeps canWatch plus call authorization on the server.", children: _jsx(MediaRelayAclDemo, {}) }), "            ", _jsx(Check, { n: 44, title: "Audio relay - actual microphone stream with live ACL revoke", do: "Press enable + start relay mic and grant permission, then speak. Revoke ACL: playback and viewer counters stop while capture remains live. Grant it again and confirm playback resumes.", expect: "The path is microphone \u2192 Media source \u2192 common2 audio relay \u2192 policy-filtered AudioContext player. Audio activation is a user gesture; ACL gates the existing viewer without React deciding access.", note: "This uses the relay's short lossless audio queue. In production publishOf/watchOf/canWatch are exposed by the server next to the call authorization policy.", children: _jsx(MediaRelayAudioDemo, {}) }), "            ", _jsx(Check, { n: 45, title: "Peer call with live video and audio relay", do: "Enable camera + mic, call B, then accept on B. The canvas starts receiving video only after accept; speak to hear the relayed audio. Hang up: the viewer detaches.", expect: "One real scenario: call state gates server-style relay access and viewer lifecycle. Before/after the active call, capture may run but B receives no media.", note: "This is the complete in-process consumer demo exported from wenay-react2/demo/peer-media; production keeps the same ACL decision on its server.", children: _jsx(PeerCallVideoAudioDemo, {}) }), "            ", _jsx(Check, { n: 21, title: "createUiSlot - configurable block placement", do: "Switch Top bar / Sidebar. Then reload the page (F5).", expect: "The block moves between the two containers WITHOUT a reload; only one mount point shows it at a time. After F5 the chosen place is restored (memoryGetOrCreate -> memoryCache).", note: "Mount points render <Slot place=...> themselves and stay ignorant of each other. The demo calls memoryCache.load() on mount and subscribes memoryCache.onDirty -> saveDebounced(300): the persisted maps are observable and mark memoryCache dirty themselves, the app owns the write policy.", children: _jsx(UiSlotDemo, {}) }), _jsx(Check, { n: 22, title: "createCallbackHub - one slot, many subscribers", do: "Note slot bound = false. Click on A (bound becomes true), fire source event, then on B and fire again. Then off A and fire once more.", expect: "Before the first on() the slot is untouched (lazy bind). With A+B subscribed both receive the same events. After off A, B keeps receiving; hub.count() tracks subscribers.", note: "Fixes the real bug where two onX(cb) subscribers silently overwrote each other. Built on `listen` from wenay-common2; bind(emit) runs once.", children: _jsx(HubDemo, {}) }), _jsx(Check, { n: 25, title: "createToolbar - customizable toolbar (config / Bar / Settings)", do: "Click toolbar items (last action updates). Open the gear popover: toggle Clear workspace on, drag rows to reorder - grab ANYWHERE on the row, mouse or touch, try dragging above the fixed Home too (or focus the handle and press arrow keys), switch density Icons / Icons + labels. Open global settings -> Toolbar section and repeat an edit there. Register the 3rd density and switch to Full text. Uncheck the separated Toolbar settings row at the bottom - the gear (and this popover) disappears from the bar; re-enable it via global settings -> Toolbar. Click simulate app update. Reload the page (F5). In Settings, click the Reset toolbar action button inside its row. Then check the Reset toolbar row, confirm the reset icon appears in the bar, click it, and uncheck the row again.", expect: "The bar renders visible items in config order; density switches icon-only <-> icon+label (tooltips show titles in icon mode). Home is fixed: checkbox disabled, no drag handle, pinned first - it never moves during a drag preview and a row dragged above it lands right below it, exactly as previewed (no snap-back on drop). The gear popover and the global settings section are THE SAME editor - an edit in one is instantly visible in the other and on the bar. The 3rd density appears in the editor as one more segment and renders icon + full title. The app update appends Help as visible WITHOUT wiping your order/visibility. After F5 everything is restored (memoryGetOrCreate -> memoryCache). onChange fires on every edit with the new config (JSON below); Settings is visible by default, the reset icon is hidden by default, the Reset toolbar row action restores defaults, and that row can hide/show the bar icon.", note: "Three decoupled layers: serializable config (single source of truth, persisted like createUiSlot), Bar, and a PURE Settings editor over config. Density levels live in an extensible module registry (registerToolbarDensity); reorder is a built-in nearest-slot pointer sort (no dnd deps, layout-agnostic: list / bar / grid) + keyboard arrows; the preview simulates the commit incl. fixed pinning, so what you see is what you drop. v1 has no overflow menu - visibility is the space tool.", tall: true, children: _jsx(ToolbarDemo, {}) }), _jsx(Check, { n: 26, title: "useReorder - drag blocks in a field (mini dnd)", do: "Drag blocks around the wrapped field (mouse or touch) - within a row, across rows, to the first/last slot. Click a block without moving. Then enable varied block widths and repeat: rows re-wrap differently, blocks still glide exactly to where they will land.", expect: "During a drag the grabbed block follows the pointer, the rest GLIDE to their preview slots; on drop everything is already where the preview showed - no snap-back, no jumps. A plain click commits nothing (commits counter unchanged). With varied widths the preview is measured from the real CSS layout (FLIP via the order property), so wrapping changes are previewed exactly too.", note: "The library's own mini reorder-by-drag (useReorder, extracted from the Toolbar editor): keyed blocks in ANY CSS layout - list, bar, wrapped grid; DOM order never changes mid-drag, targeting runs against START slots (no boundary oscillation), ONE commit on drop. Deliberately not a dnd framework: no nesting, no cross-container moves, no collision packing.", children: _jsx(ReorderDemo, {}) }), _jsx(Check, { n: 27, title: "useReorderBoard - columns, per-column gravity, cross-column drag", do: "Drag blocks between columns: from a top-packed (up arrow) into a bottom-packed (down arrow) column, into the EMPTY column, back. Watch the landing gap: in a bottom-packed column the blocks ABOVE the slot slide UP to make room. Drag within one column too. Use \u2194 strictly between two columns to insert a new one. The \u2212 directly below a column removes that column; all actions form one aligned lower rail. Click + item in the side tray a few times, drag the created blocks into any column and drag a block back into the tray. On the left rail: + adds a column at the start; drag any block onto the \u2212 trash to delete it. Watch the events line: over changes, column crossings, drop.", expect: "The dragged block follows the pointer; the hovered column highlights (r.over); survivors glide to exactly where they land on drop - including the source column compacting per ITS gravity and the target column opening a real gap per ITS gravity. One commit per drop (counter); a plain click commits nothing. onOverChange fires only when the slot changes, onDragEnd reports the final slot and committed flag. + item spawns E1, E2... into the dashed tray; the tray highlights on hover-over and accepts blocks like any column, and the status line tracks tray:[...]. The \u2212 trash highlights while hovered and swallows the dropped block (last: deleted ...) - it is one more registered column whose content the commit discards.", note: "useReorderBoard - the columns extension of useReorder: column gravity is pure consumer CSS (justify-content), the hook never knows it - it measures the real layout (offset-based FLIP with display:none for the dragged and a real margin gap at the landing slot, so CSS decides who moves aside). Columns register via live callback refs - adding one is just consumer state; the side tray IS one more such column rendered aside, so creating blocks needed no new hook API. Same non-goals: no nesting, no collision packing, no autoscroll.", tall: true, children: _jsx(BoardDemo, {}) }), _jsx(Check, { n: 35, title: "DragBox - imperative delta drag (adapter over useDraggableApi)", do: "Drag the blue chip around (mouse or touch), several gestures in a row. Watch the counters while moving.", expect: "The chip follows the pointer 1:1; releasing commits the position - the next drag continues from where it stopped (no jump-back, no accumulation drift). starts/stops grow by 1 per gesture; renders grows only with starts/stops, NOT per move pixel (the per-tick path is imperative onX/onY over refs).", note: "DragBox is now a thin adapter over useDraggableApi (holdMs 0, trackState:false, onMove) - the old bespoke document-listener loop is gone; contract pinned by __test/dragBox.test.tsx. Production consumer: LeftModal sidebar. DragArea deliberately stays as-is (@deprecated: unique semantics - body listeners, stopPropagation per tick, absolute coords).", children: _jsx(DragBoxDemo, {}) }), _jsx(Check, { n: 31, title: "Toolbar over columnState - one config drives toolbar + menu + grid", do: "Drag the qty column in the GRID before price and HOLD it over the target - toolbar buttons and compact menu must preview the same order BEFORE drop. Open the toolbar gear: drag rows in Settings, toggle checkboxes - the grid and the menu follow. Toggle a button in the compact menu - the toolbar Bar drops/regains the item. Switch density in Settings (Icons / Icons + labels).", expect: "All four surfaces (grid, toolbar Bar, Settings editor, compact menu) mirror ONE config: any reorder or visibility change made on any of them lands on all others. In icon density, items without an icon show their first letters (NAM, QTY, NOT) as a text pseudo-icon; price keeps its emoji. Density and the gear checkbox are toolbar-local (they do not touch the column config); Name is fixed everywhere - not draggable, not hideable.", note: "createToolbar({source}) - the toolbar's order/visibility now can live OUTSIDE it: UiListSource is the extracted control contract, and columnState.api.listSource implements it over the same config the grid adapter syncs. No bridge, no double storage - Toolbar became a VIEW. Backward compatible: without source the toolbar keeps its own store exactly as in card 25.", tall: true, children: _jsx(ToolbarColumnsDemo, {}) }), _jsx(Check, { n: 32, title: "createColumnGrid - default grid menu + mobile dots for table/cards", do: "Switch table/cards. Use the dots overlay: hide/show/replace fields. DRAG a dot slowly along the track and watch the table/cards: every empty mark it crosses swaps the shown column IMMEDIATELY, and a small label above the finger names the column - this is how you search for a column on a phone. Release anywhere.", expect: "createColumnGrid inferred column metadata from columnDefs, applied small overrides, took default data/getId at the controller level, and rendered dots as the built-in overlay with no manual max. Dots are not card-only: the same selector drives the table through columnState.grid.attach - LIVE while dragging (show/hide follows the finger, nothing waits for the drop; the drop only settles selection). Width restore stays protected because Table defaults autoSizeColumns=false; this card explicitly enables fit on visible column-count changes.", note: "This is the reusable wrapper for the card-29/30/31 pattern: one keyed controller, auto ColumnMeta from ag-grid defs, optional overrides/default data, built-in dots overlay, and ready-made representations. Use View for quick table/card switching, or use the returned pieces manually.", tall: true, children: _jsx(ColumnGridKitDemo, {}) }), _jsx(Check, { n: 30, title: "columnState toolbar menu - grouped sub-columns", do: "TOP is our menu drawn with a square-edged client skin over the card-25 toolbar config; the old lower ColumnsMenu is intentionally gone. Drag menu order in Settings and HOLD before drop: the grid and horizontal tiles must preview the same order live, then click column tiles to toggle grid visibility; switch density in Settings and check that labels expand by content. Click the BLO tile with vertical square dots several times. The grid has a Mode block group with 3 sub-columns: Values has text, Zeros has only 0, Empty has blanks. Enable Reset toolbar in Settings and click its tile.", expect: "The grouped block changes by dot count without rebuilding grid columnDefs: 1 dot shows Values+Zeros+Empty; 2 dots shows only Values; 3 dots shows Values+Zeros; 4 dots hides the whole group. The top menu has large square-edged content tiles: 1px separators between tiles, comfortable internal padding, dark by default, white border on hover, white fill when pressed/open. When order/density changes elsewhere, existing tiles animate to their new places; the menu itself remains click-only, without drag handles or drag reorder. Label/full densities grow by text content. BLO uses square vertical dots and remains clickable when the whole group is off. Hidden-by-mode sub-columns keep dashed/inert tiles and revive when the mode brings them back. Reset appears as a small-icon tile only when enabled.", note: "This demonstrates the multi-state layer and replaceable face: the menu uses the standard Toolbar.Bar for structure/order/membership/density while the client fully draws the square-edged item face. The mode tile is not a column; it changes a runtime columnState presentGate over a stable grouped schema. columnState presence marks gated leaf columns disabled; createToolbar({source, sourceMode:'order'}) lets the source own only real-column order, while blockMode position/membership stay local and are never pushed into the grid config.", tall: true, children: _jsx(ColumnsMenuDemo, {}) }), _jsx(Check, { n: 29, title: "columnState mobile - ColumnDots + CardList (dots create the blocks)", do: "Tap an EMPTY mark (qty / ver / note) - a dot appears and the field is created in every card below. Drag a dot slowly along the track - every empty mark it crosses replaces the field LIVE in the cards (a small label above the finger names the current field); release anywhere. Swipe a dot UP (quick vertical flick) - the dot tears off, the field disappears. Tap a dot without moving - the field gets selected (blue); press the sort button several times (asc -> desc -> off). Select ANOTHER dot - note the sort did not change. Enable sort by price, then swipe the price dot away - cards stay ordered by price.", expect: "Dots ARE the visible fields: every dot change instantly rebuilds the cards (no table involved), INCLUDING mid-drag - the swap happens as the dot crosses an empty mark, the drop commits nothing extra. Symbol is fixed (ring): its dot cannot be dragged away or torn off, it is the card title. ver shows as a badge (accent role). The sort is STICKY: it survives selecting other dots AND hiding its own field; the arrow marker above the track shows the sorted column. Max 4 dots: taps on empty marks beyond that are ignored.", note: "ColumnDots + CardList run on the columnState config alone; this stand uses optional layout=compact (two-column key/value fields, one column below 320px) - no ag-grid, no storage. The same config could drive a desktop grid via grid.attach (card 28). Touch works: gestures are pointer events with a dominant-axis test, so a horizontal drag never removes and a vertical flick never reorders.", tall: true, children: _jsx(MobileColumnsDemo, {}) }), _jsx(Check, { n: 28, title: "columnState - persisted column layout (external layer)", do: "Drag the qty column before price, resize it, hide price via the button, click the qty header to sort. Try dragging a column BEFORE the fixed Name too. Then: unmount -> mount the grid.", expect: "The JSON below mirrors every change (order/visible/width/sort) - the reverse reactivity: whatever the GRID does lands in the config. A column dropped before Name snaps back: Name is fixed and stays first, in the grid AND in the config. After remount the grid restores the exact layout from the in-memory config. sort price cycles asc -> desc -> off and the header arrow follows; sort survives hiding the column (sticky sort).", note: "createColumnState: standalone config store + two-way ag-grid adapter attached via onGridReady - agGrid4 itself is untouched. Name is fixed (fixed: true): it cannot be hidden and always stays first. Storage wiring is deliberately NOT here: what to persist will become a library-level setting later, components stay storage-free.", tall: true, children: _jsx(ColumnStateDemo, {}) }), _jsx(Check, { n: 8, title: "Outside-click closing (OutsideClickArea)", do: "Click open. Then click ANY place outside the panel, including on the same horizontal line and slightly to the right of the open button, within the panel width where there used to be a dead zone.", expect: "A click anywhere outside the panel/button closes it, including the area to the right of the button above the panel. Clicking the panel or button does NOT close it.", note: "Library BUG, this card used to fail on it: Button+outClick wraps in OutsideClickArea, which is a full-width block div, so the entire horizontal strip counts as inside. Here OutsideClickArea uses display:inline-block, and the popup uses position:absolute; otherwise it expands the wrapper rectangle and creates a dead zone to the right of the button. Real library fix: wrap content by default, or let Button narrow the wrapper.", children: _jsx(OutsideDemo, {}) })] }));
+}
+function ArchiveChecks() {
+    return (_jsxs(_Fragment, { children: [_jsx(Check, { n: 1, title: "Reactivity updateBy / renderBy", do: "Click +1 and renderBy, then +1 WITHOUT renderBy, then renderBy only.", expect: "+1 and renderBy increases the number. +1 WITHOUT renderBy does NOT change the number on screen. renderBy only shows the accumulated value.", note: "This is the split between change and notification. After migration to the store, app.set(...) performs both steps at once.", children: _jsx(ReactivityDemo, {}) }), _jsx(Check, { n: 14, title: "Keyboard API - useKeyboard / keyboard", do: "Press any key, then click clear.", expect: "Last key updates through keyboard.on; reset clears the value and also notifies subscribers.", note: "The new pub/sub is built with `listen`: listen.on(cb) -> off(). The old keyboardState remains compatible.", children: _jsx(KeyDownDemo, {}) }), _jsx(Check, { n: 2, title: "Drag + Resize (FloatingWindow / FloatingWindow)", do: "Click window, drag the window by its header, resize it from the edges, and close it with the x button. Open the console (F12).", expect: "The window moves and resizes smoothly; the x button closes it; position and size are restored on reopen (keyForSave).", note: "Plan bug: the console must NOT contain xxx spam (FloatingWindow:532); listener resubscription on every tick is a candidate for usePointerDrag.", tall: true, children: _jsx(Button, { button: (e) => _jsx("div", { style: { display: "inline-block", padding: "6px 12px", border: "1px solid #0969da", borderRadius: 6, cursor: "pointer", background: e ? "#0969da" : "#fff", color: e ? "#fff" : "#0969da" }, children: "window" }), children: (api) => (_jsx(FloatingWindow, { keyForSave: "qa-rnd", size: { height: 220, width: 280 }, className: "fon border fonLight", moveOnlyHeader: true, onCLickClose: api.onClose, limit: { y: { min: 0 } }, onUpdate: () => { }, children: _jsx("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "#eef2f6" }, children: "drag header / resize / close" }) }, "qa-rnd")) }) }), _jsx(Check, { n: 3, title: "Nested menu (Menu) + hover", do: "Hover menu, then move the cursor to the item with \u25B6 and into its submenu.", expect: "The menu opens ONLY when hovering the menu trigger itself, not the full row width.", note: "Library BUG confirmed: HoverButton wraps in a <div> with no width, so it becomes a full-row block, unlike ButtonBase (width:min-content). This board wraps it with width:min-content as a workaround; add width:min-content to HoverButton in the library.", children: _jsx("div", { style: { width: "min-content" }, children: _jsx(HoverButton, { button: () => _jsx("div", { style: { display: "inline-block", padding: "6px 12px", border: "1px solid #888", borderRadius: 6, cursor: "pointer", whiteSpace: "nowrap" }, children: "menu" }), children: _jsx(Menu, { zIndex: 50, coordinate: { x: 0, y: 0 }, data: [
+                                { name: "item 1", onClick: () => alert("item 1") },
+                                { name: "submenu ▶", next: () => [{ name: "leaf A", onClick: () => alert("A") }, { name: "leaf B", onClick: () => alert("B") }] },
+                            ] }) }) }) }), _jsx(Check, { n: 5, title: "Grid + transactions (applyGridRows)", do: "update Tesla uses a random price and updates by ID. Then remove Tesla should make the row disappear.", expect: "Update by ID without duplicates. remove Tesla removes the row. \u2705 Remove-only updates used to be lost, leaving the row in place.", note: "Fix: applyGridRows applies remove once, INDEPENDENTLY of add/update. Previously remove was lost when add/update were empty, and duplicated when both were present.", tall: true, children: _jsxs("div", { children: [_jsx("button", { style: { marginBottom: 8 }, onClick: () => renderBy(tt), children: "update Tesla (random price)" }), _jsx("div", { style: { height: 280 }, children: _jsx(GridExample, {}) })] }) }), _jsx(Check, { n: 6, title: "Chart (MyChartEngine) - LOD min+max", do: "Let the chart collect data, then zoom out with the mouse wheel. Watch the line amplitude.", expect: "When zooming out, the line keeps its amplitude and peaks do not collapse into a straight line. \u2705 Fix: LOD takes min+max per pixel. Both panels, line and bars, stay fully inside the card; nothing slides down.", note: "Fixed: drawLineChartLOD now takes min+max points per pixel instead of the first point, so peaks/dips are not clipped. Height fix: MyChartEngine had a hardcoded height 600px, so the lower panel left the card; an optional style prop was added, with the 600px default unchanged. Perf, dirty flag/filter each frame, was not touched.", tall: true, children: _jsx("div", { style: { height: 300 }, children: _jsx(MyChartEngine, { style: { height: "100%" } }) }) }), _jsx(Check, { n: 7, title: "Parameters (ParamsEditor / ParamsEditor)", do: "Move sliders and fields. The test3 field has a name and a hover comment.", expect: "The value changes in the UI while editing; range/number stay in sync; commentary appears on hover.", note: "Plan bugs: ParamsArrayEdit loses edits (Other.tsx); broken debounce and missing ResizeObserver cleanup in ParamsEditor.", tall: true, children: _jsx("div", { style: { minHeight: 260 }, children: _jsx(TestParams, {}) }) }), _jsx(Check, { n: 19, title: "Parameters - resize observer shrink repro", do: "Click rerender many times and change the asset select. Then click parent 150/240px, or narrow the blue wrapper in DevTools.", expect: "The red auto-width select does not ratchet down. The blue fixed-parent select gets narrower when the parent is 150px and grows back when the parent is 240px.", note: "This is the setResizeableElement repro: repeated ref/ResizeObserver runs must keep the natural width and avoid feedback in shrink-to-content containers.", tall: true, children: _jsx(ResizeBugRepro, {}) }), _jsx(Check, { n: 12, title: "agGrid4 - controller, removal, external buffer", do: "add/update Tesla and Apple should make rows appear/update. remove Tesla should remove it. Then: unmount grid -> write MSFT directly to the buffer -> mount grid.", expect: "Updates by ID have no duplicates; removal works. After remount, the grid catches up with the buffer itself: Tesla/Apple are still present, MSFT appears (attach->sync). Theme is dark, like production grids (GridStyleDefault).", note: "Controller path over createGridBuffer; the old transaction helper names were removed. The createGridBuffer core also works outside React.", tall: true, children: _jsx(AgGrid4Demo, {}) }), _jsx(Check, { n: 15, title: "agGrid4 - overlay rowData", do: "Click stream C before rowData. C must not appear. Then add C to rowData: C appears and receives the buffered stream price. Stream A updates A only.", expect: "Overlay sync updates only rowData-owned rows, never adds stream-only rows and never removes rowData rows.", note: "This covers selectHistory/portfolio/symbol tables where React state owns the row set.", tall: true, children: _jsx(AgGrid4OverlayDemo, {}) }), _jsx(Check, { n: 16, title: "agGrid4 - dynamic column buffer", do: "Switch alpha / alpha+beta / gamma+alpha / clear. Reloading the stand should keep the component API path clean; detach itself does not clear names.", expect: "The explicit dynamic group shows exactly the selected columns, deduped and in order. Base columns remain intact.", note: "This covers dynamic add/remove columns without any business-specific default in the shared utility.", tall: true, children: _jsx(AgGrid4ColumnBufferDemo, {}) }), _jsx(Check, { n: 4, title: "Right-click context menu (contextMenu)", do: "Right-click the gray area to open the menu. Then right-click somewhere ELSE.", expect: "Right-clicking elsewhere closes the previous menu and opens a new one with items. \u2705 Fixed.", note: "Fix: menuR stores an item snapshot on open + menuMouse onConsume. Menu items now use explicit actionKey for local action stats.", tall: true, children: _jsx(contextMenu.Layer, { zIndex: 40, children: _jsx("div", { style: { width: "100%", height: 300, background: "#e7ebef", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", color: "#57606a" }, onContextMenu: (e) => contextMenu.openAt(e, [
+                            { name: "action 1", actionKey: "qa4.action1", onClick: () => alert("action 1") },
+                            { name: "submenu ▶", actionKey: "qa4.submenu", next: () => [{ name: "nested", actionKey: "qa4.nested", onClick: () => alert("nested") }] },
+                        ]), children: "right-click here" }) }) }), _jsx(Check, { n: 9, title: "Logs - time format + MiniLogs layers", do: "Click add log several times, watch the corner notification layer, then click a row in the compact MiniLogs table.", expect: "PageLogs and MiniLogs show time in hh:mm:ss format; a temporary notification appears in the card corner; MiniLogs row click updates the small click label.", note: "This card mounts logsApi.React.Message; that compatibility wrapper now uses useMessageEventLogsController -> MessageEventLogsView. The newer context LogsNotifications remains a separate LogsProvider-based surface. MiniLogs is hook/controller-first: useMiniLogsTable -> MiniLogsView/MiniLogsTable -> compatibility MiniLogs.", tall: true, children: _jsx(LogsDemo, {}) }), _jsx(Check, { n: 10, title: "ParamsArrayEdit vs ParamsEdit - what is sent to onSave", do: "Change the value in EACH column (test/test2), then click save. Compare what was sent to onSave and the console (F12).", expect: "BOTH save the CHANGED value (ParamsArrayEdit matches ParamsEdit). \u2705 Fixed (regression check).", note: "Fix in Other.tsx: params[i]=z -> params[i]=e. z was a placeholder and discarded the edited clone e.", tall: true, children: _jsx(ParamsSaveDemo, {}) }), _jsx(Check, { n: 11, title: "Parameters - debounce onChange", do: "Quickly move the slider/number several times in a row, then stop.", expect: "The counter does NOT grow on every tiny movement, but roughly once after ~200ms of stopping. \u2705 Fixed.", note: "Fix: timeoutId -> useRef + cleanup on unmount.", tall: true, children: _jsx(DebounceDemo, {}) })] }));
+}
+export function QABoard() {
+    const [hash, setHash] = useState(typeof location !== "undefined" ? location.hash : "");
+    useEffect(() => {
+        const f = () => setHash(location.hash);
+        window.addEventListener("hashchange", f);
+        return () => window.removeEventListener("hashchange", f);
+    }, []);
+    const archive = hash === "#archive";
+    const link = (on) => ({ padding: "4px 10px", borderRadius: 6, textDecoration: "none", color: on ? "#fff" : "#0969da", background: on ? "#0969da" : "#fff", border: "1px solid #0969da", fontSize: 13 });
+    return (_jsxs("div", { style: { maxWidth: 920, margin: "0 auto", padding: 20, fontFamily: "system-ui, sans-serif" }, children: [_jsx("h2", { style: { margin: "0 0 4px" }, children: "QA board wenay-react2" }), _jsxs("div", { style: { display: "flex", gap: 8, margin: "8px 0" }, children: [_jsx("a", { href: "#", style: link(!archive), children: "Active checks" }), _jsx("a", { href: "#archive", style: link(archive), children: "Verified archive" })] }), _jsx("div", { style: { color: "#57606a", fontSize: 13, marginBottom: 8 }, children: archive ? "Verified and fixed nodes are kept for repeated checks." : "Click elements, compare with Expected, and mark ✓/✗. Token regression (S1): the appearance of ALL cards/menus/grids should not have changed; variables were moved to tokens.css without changing values." }), archive ? _jsx(ArchiveChecks, {}) : _jsx(ActiveChecks, {})] }));
+}
+/* ---------- 38/39. Media sources: common2 capture + viewer helpers ---------- */
+const MediaVideoDemo = () => {
+    const media = useMediaSource("video", { fps: 12, replay: { history: 32, current: "last" } });
+    const canvasRef = useRef(null);
+    const [stats, setStats] = useState({ frames: 0, drawn: 0, perSec: 0, ageMs: 0 });
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const view = Media.attachVideoCanvas(media.listen, canvas, { onError: e => setError(String(e)) });
+        const timer = window.setInterval(() => setStats(view.stats()), 500);
+        return () => { window.clearInterval(timer); view.off(); };
+    }, [media.listen]);
+    return _jsxs("div", { style: { display: "grid", gap: 8 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => void media.start(), children: "start camera" }), _jsx("button", { onClick: media.stop, children: "stop" }), _jsxs("b", { children: ["state: ", media.state] }), _jsxs("span", { style: { fontSize: 12 }, children: ["drawn ", stats.drawn, ", ", stats.perSec, "/s, age ", Math.round(stats.ageMs), "ms"] })] }), error && _jsxs("div", { style: { color: "#cf222e" }, children: ["viewer error: ", error] }), _jsx("canvas", { ref: canvasRef, width: 320, height: 180, style: { width: 320, height: 180, background: "#111", borderRadius: 8 } })] });
+};
+const MediaAudioDemo = () => {
+    const media = useMediaSource("audio", { mode: "pcm", bufferSize: 4096, replay: { history: 64, current: "last" } });
+    const playerRef = useRef(null);
+    const [stats, setStats] = useState({ frames: 0, played: 0, dropped: 0, perSec: 0, ageMs: 0 });
+    useEffect(() => {
+        const player = Media.attachAudioPlayer(media.listen, { maxBacklogSec: .35 });
+        playerRef.current = player;
+        const timer = window.setInterval(() => setStats(player.stats()), 500);
+        return () => { window.clearInterval(timer); player.off(); playerRef.current = null; };
+    }, [media.listen]);
+    return _jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => { playerRef.current?.enable(); void media.start(); }, children: "enable + start mic" }), _jsx("button", { onClick: media.stop, children: "stop" }), _jsxs("b", { children: ["state: ", media.state] }), _jsxs("span", { style: { fontSize: 12 }, children: ["played ", stats.played, ", dropped ", stats.dropped, ", ", stats.perSec, "/s"] })] });
+};
+/* ---------- 40. Peer SDK: in-process mirrored store ---------- */
+const PeerSdkDemo = () => {
+    const pair = useMemo(() => {
+        const host = Peer.createPeerHost();
+        const a = Peer.createPeerClient({ remote: host.connection("qa-peer-a").fragment, account: "qa-peer-a", initial: { value: 0 } });
+        const b = Peer.createPeerClient({ remote: host.connection("qa-peer-b").fragment, account: "qa-peer-b", initial: { value: 0 } });
+        return { host, a, b };
+    }, []);
+    useEffect(() => () => { pair.a.close(); pair.b.close(); }, [pair]);
+    const remote = usePeer(pair.b, "qa-peer-a");
+    const value = useStoreNode(remote.store.node.value);
+    return _jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => { pair.a.store.state.value += 1; }, children: "peer A +1" }), _jsx("button", { onClick: () => void remote.resync(), children: "resync B" }), _jsxs("b", { children: ["mirrored value: ", value.value] }), _jsxs("span", { style: { fontSize: 12 }, children: ["ready=", String(remote.ready), " route=", remote.route, " state=", remote.state, " seq=", remote.seq()] })] });
+};