wenay-react2 1.0.45 → 1.0.47

package/README.md

@@ -2,7 +2,8 @@
 
 Documentation index only.
 
-- Brief API guide: [doc/wenay-react2.md](doc/wenay-react2.md)
+- Brief API guide: [doc/wenay-react2.md](doc/wenay-react2.md)
+- React Native/headless entrypoint: [doc/native.md](doc/native.md)
 - Detailed / rare API guide: [doc/wenay-react2-rare.md](doc/wenay-react2-rare.md)
 - Project functionality map: [doc/PROJECT_FUNCTIONALITY.md](doc/PROJECT_FUNCTIONALITY.md)
 - Example usage standards: [doc/EXAMPLE_USAGE.md](doc/EXAMPLE_USAGE.md)
@@ -13,3 +14,8 @@ Documentation index only.
 `wenay-common2` is an external dependency. Read its current docs from the installed module/package when needed; keep this README focused on `wenay-react2` documentation.
 
 Feature-specific docs may also live next to their code, for example agGrid4 docs under `src/common/src/grid/agGrid4/`.
+
+## Shipped examples
+
+- [doc/examples/stand.tsx](doc/examples/stand.tsx) — весь интерактивный стенд (`wenay-react2/demo/stand`); Active = канон, Archive = regression/compat.
+- [doc/examples/peer-call-media.tsx](doc/examples/peer-call-media.tsx) — Peer calls, presence, camera and microphone relay with server-owned ACL.

package/doc/changes/v1.0.46.md

@@ -0,0 +1,16 @@
+# v1.0.46 — common2 Calls, presence and media relay adoption
+
+Status: ready for publication.
+
+- Updated the declared `wenay-common2` dependency to `^1.0.74`.
+- Added `usePeerCalls` over the common2 call manager; React renders call lifecycle but does not own signaling, busy/glare, timeout or closure policy.
+- Added `usePeerPresence` for the host presence snapshot and edge stream.
+- Added QA cards 41–44 and in-process tests for call lifecycle, presence edges and ACL revocation; card 43 carries a real camera frame through Media → relay → policy-filtered canvas.
+- Verified with qa-check TypeScript, Jest, package build and the QA stand.
+- Ships doc/examples/peer-call-media.tsx: a consumer template for calls, presence, camera/microphone relay and server-owned ACL.
+
+- Ships the entire QA stand as wenay-react2/demo/stand; Active cards are canonical examples, Archive cards are regression/compat context.
+
+- Added runtime-only live drag-preview across `useReorder`, Toolbar, ColumnsMenu, columnState and attached grid; persistence still happens only on drop.
+- Added optional `CardList layout="compact"` for dense mobile key/value cards; the stacked layout remains default.
+- Rebuilt QA card 27 controls on one CSS-grid track system so remove/insert actions cannot drift from their columns.

package/doc/changes/v1.0.47.md

@@ -0,0 +1,9 @@
+# 1.0.47
+
+- Added the platform-neutral `wenay-react2/native` entrypoint.
+- Added `createNativeColumnState`: an AsyncStorage-compatible controller for order, visibility, width, sorting, filters and groups without DOM, CSS, React DOM or ag-grid dependencies.
+- Added `createNativeColumnDots`: a renderer-independent gesture model with live replacement, reorder, visibility, sorting and tear-off behavior.
+- Added focused hydration, persistence, gesture and dependency-boundary tests.
+- Fixed the shipped examples list formatting in README.
+
+Verification: Jest, TypeScript build, package archive inspection and runtime import of `wenay-react2/native` from the packed artifact.

package/doc/examples/README.md

@@ -0,0 +1,6 @@
+# Runnable consumer examples
+
+- [`peer-call-media.tsx`](peer-call-media.tsx) — re-exports the interactive Peer/Media demos used by QA cards 41–44. Install the package and import from `wenay-react2/demo/peer-media`.
+
+The component uses an in-process `Peer.createPeerHost`, so calls, presence, camera and microphone relay work without server credentials. For production, expose `publishOf(account)` and `watchOf(account)` from the RPC server and keep `canWatch` plus call authorization on that server.
+- [stand.tsx](stand.tsx) — exports the entire interactive stand from wenay-react2/demo/stand. Active cards teach canonical APIs; Archive cards remain visible regression/compat examples.

package/doc/examples/peer-call-media.tsx

@@ -0,0 +1,8 @@
+/**
+ * This is the same interactive component used by the QA stand cards 41–44.
+ * It is shipped as a supported demo entrypoint, not a private test helper.
+ *
+ * import {PeerCallDemo, PeerPresenceDemo, MediaRelayAclDemo, MediaRelayAudioDemo}
+ *   from "wenay-react2/demo/peer-media"
+ */
+export {PeerCallDemo, PeerPresenceDemo, MediaRelayAclDemo, MediaRelayAudioDemo} from "wenay-react2/demo/peer-media";

package/doc/examples/stand.tsx

@@ -0,0 +1,6 @@
+/** The complete interactive wenay-react2 stand, shipped in the package. */
+export {QABoard} from "wenay-react2/demo/stand";
+
+// import {createRoot} from "react-dom/client";
+// import {QABoard} from "wenay-react2/demo/stand";
+// createRoot(document.getElementById("root")!).render(<QABoard />);

package/doc/native.md

@@ -0,0 +1,37 @@
+# React Native entrypoint
+
+Import the renderer-neutral API from `wenay-react2/native`. It has no React DOM,
+CSS, browser-global or ag-grid dependency.
+
+```ts
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import {createNativeColumnDots, createNativeColumnState} from 'wenay-react2/native'
+
+const columns = createNativeColumnState({
+    key: 'super-admin.columns',
+    columns: [
+        {key: 'server', title: 'Server', fixed: true},
+        {key: 'status', title: 'Status'},
+        {key: 'panic', title: 'Panic'},
+    ],
+    storage: AsyncStorage,
+})
+await columns.ready
+
+const dots = createNativeColumnDots({state: columns, max: 8})
+dots.begin('status', 40, 0)
+dots.move(120, 0, {start: 0, length: 240})
+dots.end()
+```
+
+The persisted `v/order/visible/width/sort/filter/groups` shape matches the web
+`ColumnsConfig`. Writes are serialized and local edits made while hydration is
+pending win over stale storage.
+
+`createNativeColumnDots` is a view-independent interaction model. Connect its
+`begin/move/end` coordinates to PanResponder or Gesture Handler. Set `removeDirection` to `up`, `down` or `either` (the renderer-neutral default). It supports
+live field replacement along the slider, explicit reorder and toggle, sticky
+`asc -> desc -> off` sorting, and upward tear-off.
+
+Call `dots.dispose()` and `columns.dispose()` with the owning screen. Use
+`columns.api.flush()` when the latest AsyncStorage write must be awaited.

package/doc/progress/common2-adoption-1.0.74.md

@@ -0,0 +1,24 @@
+# wenay-common2 1.0.74 — adoption assessment
+
+## Upgrade
+
+- Updated the workspace lockfile from `wenay-common2` 1.0.73 to 1.0.74.
+- Compatibility: qa-check TypeScript, full Jest (20 suites / 67 tests), package build and diff-check pass.
+
+## Architecture decision
+
+- `Peer.createCallManager` is a new application interaction lifecycle, not an extension of the mirrored-store `usePeer` adapter.
+- React may bind call state and controls; common2 retains signaling envelopes, call-id ordering, busy/glare handling, timeouts and offline verdicts.
+- Presence belongs to the host protocol (`list()` plus edge-triggered `changes`), not polling or a second React-owned store.
+- `createMediaRelay` remains relay-first and server-authorized through `watchOf` / `canWatch`; a call UI attaches viewers only while active. React must not make ACL decisions.
+
+## Planned validation batch
+
+Presence edges; ring/accept/active; media keyframe; hangup/decline/offline/busy; ACL revoke of an already-open viewer.
+## Implementation batch — 1.0.46
+
+- Added `usePeerCalls(manager)`: a thin binding for ring/active state and explicit `call`; the app owns `manager.close()`.
+- Added `usePeerPresence(presence)`: subscribe-first snapshot plus online/offline edge projection.
+- QA cards 41–44 verify an in-process call lifecycle, presence disconnect/reconnect and media relay ACL revocation on an open viewer.
+- Automated verification: qa-check TypeScript, real in-process hook tests, full Jest and package build.
+- Manual Verify pending: QA card 43 — grant camera access, confirm canvas receives frames; revoke ACL and confirm viewer frame count freezes while source remains live; grant again and confirm it resumes. QA card 44 — grant microphone access, confirm audio player receives frames/plays; revoke and grant ACL with the same expectation.

package/doc/progress/stand-as-examples-audit.md

@@ -0,0 +1,22 @@
+# Stand as examples — audit
+
+## Current shape
+
+- `src/common/testUseReact/qa.tsx` owns 44 hand-written cards and the component implementations are mostly in the same file.
+- The board has only Active/Archive separation. It does not declare whether a card is canonical consumer guidance or internal regression/compat coverage.
+- `doc/examples/peer-call-media.tsx` is shipped, but card 41–44 currently use a parallel implementation.
+
+## Decision
+
+Turn the stand into a renderer/acceptance layer over a small set of canonical demo modules. Ship those modules in `demo/`; keep isolated repros and compat examples in QA/regression only. Use a manifest per card to link source demo, automated test and manual verification.
+
+## First migration
+
+Extract Media/Peer calls, presence, camera relay and microphone relay. The QA cards must import the same component that is shipped in the package. No new transport/ACL code belongs in React.
+## Batch 1 complete — Media/Peer
+
+- Extracted cards 41–44 into `src/common/demo/peerMedia.tsx`.
+- QA imports those exact components; package exports `wenay-react2/demo/peer-media`.
+- `doc/examples/peer-call-media.tsx` re-exports the public demo entrypoint.
+- Remaining batches: Replay, then toolbar/columnState/grid; archive stays internal.
+- Verification: qa-check TypeScript, full Jest (21 suites / 71 tests), package build and Vite stand cards 41–44 all pass. The package is browser-oriented; direct Node require is not a supported validation surface for its extensionless ESM build.

package/doc/target/my.md

@@ -27,6 +27,18 @@ _Пусто._
   - Оценка: 1 — simple/low-risk (аддитивно); 2 — medium (in-proc fake стенд, по образцу peer-sdk oracle); 3 — docs-first. Приоритет: после architecture-fix очереди A1-A10.
   - **Аудит 1.0.71–1.0.73 (2026-07-10, dependency обновлена до 1.0.73)**: `Peer` repair/resync (1.0.71) остаётся core protocol — React не должен повторять gap/journal state machine; `usePeer` может лишь отразить `peer(account)` store/route и вызвать `resync()` по app-owned transport reconnect. Media hidden-tab workers/ImageCapture (1.0.72) принимаем автоматически через core defaults, без React-кода. Media viewer helpers (1.0.73: canvas/audio/publish pipe) — core imperative hot path; React-кандидаты только тонкие lifecycle bindings над ref (`useMediaVideoCanvas`, `useMediaAudioPlayer`), без frame-level React state. Сначала docs/recipe + QA card с реальным consumer; хук — лишь если recipe повторяется.
 
+- **common2 1.0.74 adoption: Calls, presence and protected Media relay — implementation complete in 1.0.46; manual camera verify pending.** Отдельный продуктовый проход; не смешан с `usePeer`.
+  - **Call controller/view — DONE.** — поверх `Peer.createCallManager({port: callPortOf(remote), self})`: lifecycle `ringing → active → ended`, входящий звонок, accept/decline/hangup, offline/busy/timeout reason. React хранит только UI-состояние/подписки; signal envelopes, glare и busy gate остаются в common2.
+  - **Presence — DONE.** — тонкая подписка на `peerHost.presence` с initial `list()` после subscription; показывать только edges online/offline, не polling и не собственный presence-store.
+  - **Media relay + ACL — DONE (binding/QA recipe).** — call view подключает viewers только в active состоянии. Сервер задаёт `watchOf(watcher)` + `canWatch`; React не получает права решать доступ. Relay-first остаётся default, direct — явный opt-in.
+  - **Стенд и тесты одним batch:** два in-process peer-клиента: presence edge, ring/accept/active, audio/video relay keyframe, hangup/decline/offline/busy; отдельный ACL-revoke кейс, доказывающий закрытие уже открытой подписки.
+  - Оценка: medium/high; сначала определить server-owned authorize policy и UX входящего звонка, затем делать адаптер. `usePeer` не расширять до call manager — это другой lifecycle.
+- **Stand → shipped examples: разделить интерактивные consumer demos и internal QA-regressions** (архитектурная переработка стенда).
+  - Проблема: 44 карточки живут в одном `testUseReact/qa.tsx`; сценарий может одновременно быть хорошим consumer-примером и проверкой, но npm сейчас получает отдельную копию в `doc/examples`. Это создаёт риск расхождения.
+  - Целевая модель: весь `demo/stand` поставляется как интерактивный пример; Active-карточки — canonical consumer guidance, Archive-карточки — явный regression/compat context. QA-доска добавляет manual acceptance metadata. Карточка получает manifest: category, canonical/regression, source example, automated test, manual check.
+  - Миграция batch-ами: **1) Media/Peer calls/presence/relay — DONE in 1.0.46**: единый export `wenay-react2/demo/peer-media`, который рендерят QA cards 41–44; **2) Replay cards 23/24/33/34**; **3) toolbar/columnState/grid**; legacy archive оставить internal до отдельного решения. Никакого big-bang rewrite и никаких изменений публичного API.
+  - Acceptance: npm tarball содержит запускаемые исходники `demo/` + README; QA card импортирует тот же canonical component, а не его копию; каждое demo имеет test/ручной чек; archive regression-карточки явно не называются рекомендуемым путём.
+  - Оценка: high usability / medium effort / medium migration risk. Сначала extraction Media/Peer, потому что его уже можно проверить картами 41–44.
 - **Context menu / Menu: controller-first split**.
   - Прогресс/оценка: [../progress/hook-controller-opportunities.md](../progress/hook-controller-opportunities.md)
   - Смысл: выделить `createContextMenuController` / `useMenuLayer` + `MenuView` и action-layer для async/progress/submenu flow, не ломая `contextMenu.openAt`, `contextMenu.Layer` и `contextMenu.stats`.

package/doc/wenay-react2.md

@@ -472,7 +472,7 @@ const tt = useReplayHistory(history, (frame) => draw(frame), {head: () => replay
 tt.live; tt.seq; tt.head; tt.pause(); tt.play(); tt.seek({seq})
 ```
 
-Route hand-off here is the MANUAL surface (`switchRoute`). common2 1.0.67 `Replay.createRouteCoordinator` moves route decisions (policy, promote/fallback/shadow) out of the consumer; a coordinator `link.subscribe(cb)` handle has the same shape (`ready, seq(), label(), active()`) and survives every route change, so components consuming a coordinator link do not need `switchRoute` at all. common2 1.0.68 supplies the direct transport for it: `createWebRtcConnector` with an app-injected `rtc: () => new RTCPeerConnection(cfg)` factory (the browser — i.e. the React app — owns that injection) and signaling over the existing RPC socket (`createSignalHub`). common2 1.0.69 wraps the whole stack into the `Peer` SDK (`wenay-common2/peer`): `createPeerClient(...).peer(account)` returns a live mirrored store (works with `useStoreNode`/`useStoreKeys` as-is) + route control, surviving relay<->direct hand-offs in one seq space. `usePeer(client, account)` is the thin React adapter: it returns that mirror plus low-frequency route/status and explicit route/resync controls; it does not own journal, repair or transport state.
+Route hand-off here is the MANUAL surface (`switchRoute`). common2 1.0.67 `Replay.createRouteCoordinator` moves route decisions (policy, promote/fallback/shadow) out of the consumer; a coordinator `link.subscribe(cb)` handle has the same shape (`ready, seq(), label(), active()`) and survives every route change, so components consuming a coordinator link do not need `switchRoute` at all. common2 1.0.68 supplies the direct transport for it: `createWebRtcConnector` with an app-injected `rtc: () => new RTCPeerConnection(cfg)` factory (the browser — i.e. the React app — owns that injection) and signaling over the existing RPC socket (`createSignalHub`). common2 1.0.69 wraps the whole stack into the `Peer` SDK (`wenay-common2/peer`): `createPeerClient(...).peer(account)` returns a live mirrored store (works with `useStoreNode`/`useStoreKeys` as-is) + route control, surviving relay<->direct hand-offs in one seq space. `usePeer(client, account)` is the thin React adapter: it returns that mirror plus low-frequency route/status and explicit route/resync controls; it does not own journal, repair or transport state. `usePeerCalls(manager)` binds a `Peer.createCallManager` to rings/active/call UI state without owning `manager.close()` or signal policy. The exact interactive components used by QA cards 41–44 ship from `wenay-react2/demo/peer-media`; [`doc/examples/peer-call-media.tsx`](examples/peer-call-media.tsx) shows the import. `usePeerPresence(fragment.presence)` subscribes before reading the host snapshot and exposes online/offline edges. For calls with media, wire `Peer.createMediaRelay` on the server (`publishOf(owner)`, `watchOf(watcher)`, `canWatch`) and attach viewers only when the server-owned call policy grants access; React must never make the ACL decision.
 
 Media lines (common2 1.0.66 `Media.createAudioSource` / `Media.createVideoSource`) are ordinary binary Listen sources; with `replay:true` their `listen` is a replay line, so `useReplaySubscribe` / `useReplayFrame` consume mic/camera frames with no media-specific hook. `useMediaSource(kind, options)` is only the capture lifecycle adapter (`start`, `stop`, device selection, state and stats); it stops a started source on unmount and returns `listen` unchanged. Each frame is one `Uint8Array` (`Media.decodeMediaFrame`); draw/play it via ref (canvas, AudioContext), never useState — the same rule as any high-frequency line. Without `replay`, the plain `listen` works with the listen hooks above.
 

package/lib/common/demo/peerMedia.d.ts

@@ -0,0 +1,6 @@
+export declare const PeerCallDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const PeerPresenceDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const MediaRelayAclDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const MediaRelayAudioDemo: () => import("react/jsx-runtime").JSX.Element;
+/** Complete messenger-style call: viewer attachment follows the active call. */
+export declare const PeerCallVideoAudioDemo: () => import("react/jsx-runtime").JSX.Element;

package/lib/common/demo/peerMedia.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shipped interactive Peer/Media demonstrations. The QA board imports these exact
+ * components; consumers can import them from `wenay-react2/demo/peer-media`.
+ * They use an in-process host intentionally, so no server credentials are needed.
+ */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Media, Peer } from "wenay-common2";
+import { useMediaSource } from "../src/hooks/useMedia";
+import { usePeerCalls, usePeerPresence } from "../src/hooks/usePeerCall";
+/* ---------- 41/42. Peer calls and host presence ---------- */
+export const PeerCallDemo = () => {
+    const pair = useMemo(() => {
+        const host = Peer.createPeerHost();
+        const a = host.connection("qa-call-a");
+        const b = host.connection("qa-call-b");
+        return {
+            host,
+            caller: Peer.createCallManager({ port: Peer.callPortOf(a.fragment), self: "qa-call-a" }),
+            callee: Peer.createCallManager({ port: Peer.callPortOf(b.fragment), self: "qa-call-b" }),
+        };
+    }, []);
+    useEffect(() => () => { pair.caller.close(); pair.callee.close(); pair.host.close(); }, [pair]);
+    const a = usePeerCalls(pair.caller);
+    const b = usePeerCalls(pair.callee);
+    const incoming = b.rings.find(call => call.direction === "in");
+    return _jsxs("div", { style: { display: "grid", gap: 8 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [_jsx("button", { disabled: !a.ready || Boolean(a.active), onClick: () => a.call("qa-call-b", { from: "QA" }), children: "call B" }), incoming && _jsxs(_Fragment, { children: [_jsx("button", { onClick: () => incoming.accept(), children: "B accept" }), _jsx("button", { onClick: () => incoming.decline(), children: "B decline" })] }), a.active && _jsx("button", { onClick: () => a.active?.hangup(), children: "A hang up" }), _jsxs("b", { children: ["A: ", a.active?.state() ?? "idle", "; B: ", b.active?.state() ?? (incoming ? "ringing" : "idle")] })] }), _jsxs("span", { style: { fontSize: 12 }, children: ["manager ready: A=", String(a.ready), " B=", String(b.ready), "; rings B=", b.rings.length] })] });
+};
+export const PeerPresenceDemo = () => {
+    const pair = useMemo(() => {
+        const host = Peer.createPeerHost();
+        const a = host.connection("qa-presence-a");
+        const b = host.connection("qa-presence-b");
+        return { host, a, b };
+    }, []);
+    const [connected, setConnected] = useState(true);
+    useEffect(() => () => { pair.a.close(); pair.b.close(); pair.host.close(); }, [pair]);
+    const presence = usePeerPresence(pair.a.fragment.presence);
+    return _jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [_jsx("button", { disabled: !connected, onClick: () => { pair.b.close(); setConnected(false); }, children: "disconnect B" }), _jsx("button", { disabled: connected, onClick: () => { pair.b = pair.host.connection("qa-presence-b"); setConnected(true); }, children: "reconnect B" }), _jsxs("b", { children: ["online: ", presence.accounts.join(", ") || "none"] })] });
+};
+export const MediaRelayAclDemo = () => {
+    const media = useMediaSource("video", { fps: 12, replay: { history: 8, current: "last" } });
+    const allowed = useRef(true);
+    const relay = useMemo(() => Peer.createMediaRelay({ lines: { camera: "video" }, canWatch: () => allowed.current }), [allowed]);
+    const canvasRef = useRef(null);
+    const [granted, setGranted] = useState(true);
+    const [stats, setStats] = useState({ frames: 0, drawn: 0, ageMs: 0 });
+    const [error, setError] = useState(null);
+    const publish = useMemo(() => {
+        const publishLine = relay.publishOf("qa-media-owner");
+        return (frame, sentAt) => publishLine("camera", frame, sentAt ?? Date.now());
+    }, [relay]);
+    useEffect(() => Media.pipeMediaPublish(media.listen, publish, { onError: error => setError(String(error)) }), [media.listen, publish]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const watcher = relay.watchOf("qa-media-watcher");
+        const view = Media.attachVideoCanvas(watcher["qa-media-owner"].camera, canvas, { onError: error => setError(String(error)) });
+        const timer = window.setInterval(() => setStats(view.stats()), 500);
+        return () => { window.clearInterval(timer); view.off(); };
+    }, [relay]);
+    useEffect(() => () => relay.close(), [relay]);
+    const setAccess = (next) => { allowed.current = next; setGranted(next); };
+    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 relay camera" }), _jsx("button", { onClick: media.stop, children: "stop" }), _jsx("button", { onClick: () => setAccess(!granted), children: granted ? "revoke ACL" : "grant ACL" }), _jsxs("b", { children: ["source: ", media.state, "; ACL: ", granted ? "granted" : "revoked"] }), _jsxs("span", { style: { fontSize: 12 }, children: ["viewer drawn ", stats.drawn, ", frames ", stats.frames, ", age ", Math.round(stats.ageMs), "ms"] })] }), error && _jsxs("div", { style: { color: "#cf222e" }, children: ["relay viewer error: ", error] }), _jsx("canvas", { ref: canvasRef, width: 320, height: 180, style: { width: 320, height: 180, background: "#111", borderRadius: 8 } })] });
+};
+export const MediaRelayAudioDemo = () => {
+    const media = useMediaSource("audio", { mode: "pcm", bufferSize: 4096, replay: { history: 64, current: "last" } });
+    const allowed = useRef(true);
+    const relay = useMemo(() => Peer.createMediaRelay({ lines: { mic: "audio" }, canWatch: () => allowed.current }), [allowed]);
+    const playerRef = useRef(null);
+    const [granted, setGranted] = useState(true);
+    const [stats, setStats] = useState({ frames: 0, played: 0, dropped: 0, ageMs: 0 });
+    const [error, setError] = useState(null);
+    const publish = useMemo(() => {
+        const publishLine = relay.publishOf("qa-audio-owner");
+        return (frame, sentAt) => publishLine("mic", frame, sentAt ?? Date.now());
+    }, [relay]);
+    useEffect(() => Media.pipeMediaPublish(media.listen, publish, { onError: error => setError(String(error)) }), [media.listen, publish]);
+    useEffect(() => {
+        const watcher = relay.watchOf("qa-audio-watcher");
+        const player = Media.attachAudioPlayer(watcher["qa-audio-owner"].mic, { maxBacklogSec: .35, onError: error => setError(String(error)) });
+        playerRef.current = player;
+        const timer = window.setInterval(() => setStats(player.stats()), 500);
+        return () => { window.clearInterval(timer); player.off(); playerRef.current = null; };
+    }, [relay]);
+    useEffect(() => () => relay.close(), [relay]);
+    const setAccess = (next) => { allowed.current = next; setGranted(next); };
+    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 relay mic" }), _jsx("button", { onClick: media.stop, children: "stop" }), _jsx("button", { onClick: () => setAccess(!granted), children: granted ? "revoke audio ACL" : "grant audio ACL" }), _jsxs("b", { children: ["source: ", media.state, "; ACL: ", granted ? "granted" : "revoked"] }), _jsxs("span", { style: { fontSize: 12 }, children: ["played ", stats.played, ", frames ", stats.frames, ", dropped ", stats.dropped, ", age ", Math.round(stats.ageMs), "ms"] }), error && _jsxs("span", { style: { color: "#cf222e" }, children: ["player error: ", error] })] });
+};
+/** Complete messenger-style call: viewer attachment follows the active call. */
+export const PeerCallVideoAudioDemo = () => {
+    const pair = useMemo(() => {
+        const host = Peer.createPeerHost();
+        const a = host.connection("qa-av-a");
+        const b = host.connection("qa-av-b");
+        return { host, caller: Peer.createCallManager({ port: Peer.callPortOf(a.fragment), self: "qa-av-a" }), callee: Peer.createCallManager({ port: Peer.callPortOf(b.fragment), self: "qa-av-b" }) };
+    }, []);
+    useEffect(() => () => { pair.caller.close(); pair.callee.close(); pair.host.close(); }, [pair]);
+    const caller = usePeerCalls(pair.caller);
+    const callee = usePeerCalls(pair.callee);
+    const active = Boolean(caller.active || callee.active);
+    const allowed = useRef(false);
+    allowed.current = active;
+    const relay = useMemo(() => Peer.createMediaRelay({ lines: { camera: "video", microphone: "audio" }, canWatch: () => allowed.current }), [allowed]);
+    useEffect(() => () => relay.close(), [relay]);
+    const video = useMediaSource("video", { fps: 12 });
+    const audio = useMediaSource("audio", { mode: "pcm", bufferSize: 4096 });
+    const canvasRef = useRef(null);
+    const playerRef = useRef(null);
+    const [drawn, setDrawn] = useState(0);
+    const publishVideo = useMemo(() => { const send = relay.publishOf("qa-av-a"); return (frame, sentAt) => send("camera", frame, sentAt ?? Date.now()); }, [relay]);
+    const publishAudio = useMemo(() => { const send = relay.publishOf("qa-av-a"); return (frame, sentAt) => send("microphone", frame, sentAt ?? Date.now()); }, [relay]);
+    useEffect(() => Media.pipeMediaPublish(video.listen, publishVideo), [video.listen, publishVideo]);
+    useEffect(() => Media.pipeMediaPublish(audio.listen, publishAudio), [audio.listen, publishAudio]);
+    useEffect(() => {
+        if (!active || !canvasRef.current)
+            return;
+        const watcher = relay.watchOf("qa-av-b");
+        const view = Media.attachVideoCanvas(watcher["qa-av-a"].camera, canvasRef.current);
+        const player = Media.attachAudioPlayer(watcher["qa-av-a"].microphone, { maxBacklogSec: .35 });
+        playerRef.current = player;
+        const timer = window.setInterval(() => setDrawn(view.stats().drawn), 500);
+        return () => { window.clearInterval(timer); view.off(); player.off(); playerRef.current = null; };
+    }, [active, relay]);
+    const incoming = callee.rings.find(call => call.direction === "in");
+    return _jsxs("div", { style: { display: "grid", gap: 8 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => { playerRef.current?.enable(); void video.start(); void audio.start(); }, children: "enable camera + mic" }), !active && !incoming && _jsx("button", { onClick: () => caller.call("qa-av-b"), children: "call B" }), incoming && _jsx("button", { onClick: () => incoming.accept(), children: "B accept call" }), caller.active && _jsx("button", { onClick: () => caller.active?.hangup(), children: "hang up" }), _jsxs("b", { children: ["call: ", active ? "active — media attached" : incoming ? "ringing" : "idle", "; video frames: ", drawn] })] }), _jsx("canvas", { ref: canvasRef, width: 320, height: 180, style: { width: 320, height: 180, background: "#111", borderRadius: 8 } })] });
+};

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

@@ -54,6 +54,10 @@ export type UiListSource = {
     setConfig: (next: UiListConfig) => void;
     /** re-emitted as the toolbar's own onChange (grid-driven changes included) */
     onChange?: (cb: (cfg: UiListConfig) => void) => () => void;
+    /** optional transient display order; never persisted */
+    useBaseConfig?: () => UiListConfig;
+    getBaseConfig?: () => UiListConfig;
+    setPreview?: (order: string[] | null) => void;
 };
 export type ToolbarDensity = {
     key: string;

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

@@ -135,9 +135,9 @@ export function createToolbar(opts) {
      *  items, an unregistered density) - never crash, never drop user data that
      *  still applies: unknown keys are filtered out, missing items are appended
      *  (default-visible), fixed items are pinned back to their descriptor index. */
-    function normalize() {
+    function normalize(base = false) {
         const known = new Set(opts.items.map(i => i.key));
-        const extRaw = ext?.getConfig();
+        const extRaw = ext ? (base ? (ext.getBaseConfig?.() ?? ext.getConfig()) : ext.getConfig()) : undefined;
         const localRaw = { order: st.order, visible: st.visible };
         const raw = ext && sourceMode == 'orderVisible' ? extRaw : localRaw;
         const sourceKeys = ext && sourceMode == 'order' ? sourceKeySet(extRaw, known) : new Set();
@@ -189,7 +189,7 @@ export function createToolbar(opts) {
                 emitChange(normalize());
         }
         else if (ext && sourceMode == 'order') {
-            const extRaw = ext.getConfig();
+            const extRaw = ext.getBaseConfig?.() ?? ext.getConfig();
             const known = new Set(opts.items.map(i => i.key));
             const sourceKeys = sourceKeySet(extRaw, known);
             const curSourceOrder = (Array.isArray(extRaw.order) ? extRaw.order : []).filter(k => sourceKeys.has(k));
@@ -219,9 +219,12 @@ export function createToolbar(opts) {
     }
     const getConfig = () => normalize();
     /** subscription to everything the toolbar renders from (hook) */
-    function useSubscribe() {
+    function useSubscribe(base = false) {
         stApi.use();
-        ext?.useConfig(); // ext is per-instance constant - hook order is stable
+        if (base && ext?.useBaseConfig)
+            ext.useBaseConfig();
+        else
+            ext?.useConfig(); // ext is per-instance constant - hook order is stable
     }
     function useConfig() {
         useSubscribe();
@@ -303,9 +306,14 @@ export function createToolbar(opts) {
      *  never move in the preview and a drop never lands elsewhere than shown.
      *  Plus arrow keys on the focused handle; fixed rows have neither. */
     function Settings(p = {}) {
-        useSubscribe();
+        // BASE config on purpose: Settings is the preview AUTHOR (onPreviewChange ->
+        // ext.setPreview). Rendering from the display config would feed its own
+        // preview back mid-drag: the rows' DOM order changes under the pointer
+        // (useReorder requires it stable), styles jump, and the drop re-applies
+        // the move over the already-previewed order - one extra row.
+        useSubscribe(true);
         densitiesApi.use();
-        const cfg = normalize();
+        const cfg = normalize(true);
         const base = p.className ?? 'wenaySegBtn';
         const activeCls = p.activeClassName ?? 'wenaySegBtnActive';
         const byKey = new Map(opts.items.map(i => [i.key, i]));
@@ -318,6 +326,7 @@ export function createToolbar(opts) {
             commit: order => setConfig({ ...cfg, order }),
             move: movedOrder,
             canDrag: k => !byKey.get(k)?.fixed,
+            onPreviewChange: order => ext?.setPreview?.(order),
         });
         function onHandleKey(key, e) {
             const step = { ArrowUp: -1, ArrowLeft: -1, ArrowDown: 1, ArrowRight: 1 }[e.key];

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

@@ -0,0 +1,12 @@
+export * from './Buttons';
+export * from './Dnd';
+export * from './Menu';
+export * from './Modal';
+export * from './Input';
+export * from './Parameters';
+export * from './ParamsEditor';
+export * from './MyResizeObserver';
+export * from './Other';
+export * from './Settings';
+export * from './UiSlot';
+export * from './Toolbar';

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

@@ -0,0 +1,12 @@
+export * from './Buttons';
+export * from './Dnd';
+export * from './Menu';
+export * from './Modal';
+export * from './Input';
+export * from './Parameters';
+export * from './ParamsEditor';
+export * from './MyResizeObserver';
+export * from './Other';
+export * from './Settings';
+export * from './UiSlot';
+export * from './Toolbar';

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

@@ -6,6 +6,8 @@ export declare function CardList<T extends object>(p: {
     getId?: (row: T, index: number) => string;
     /** custom field renderer; default = String(row[key]) */
     renderValue?: (key: string, row: T) => React.ReactNode;
+    /** default stacked key/value rows; compact packs fields into a responsive two-column grid */
+    layout?: 'stack' | 'compact';
     className?: string;
     style?: React.CSSProperties;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -27,5 +27,5 @@ export function CardList(p) {
         const { key, dir } = cfg.sort;
         rows.sort((a, b) => cmpValues(a[key], b[key]) * (dir == 'asc' ? 1 : -1));
     }
-    return _jsx("div", { className: cx(['wenayCardList', p.className]), style: p.style, children: rows.map((row, i) => (_jsxs("div", { className: 'wenayCardListItem', children: [_jsxs("div", { className: cx(['wenayCardListHeader', fieldKeys.length == 0 && 'wenayCardListHeader_compact']), children: [_jsx("b", { className: 'wenayCardListTitle', children: titleKey ? value(titleKey, row) : '' }), accentKey && _jsx("span", { className: 'wenayCardListAccent', children: value(accentKey, row) })] }), fieldKeys.map(k => (_jsxs("div", { className: 'wenayCardListField', children: [_jsx("span", { className: 'wenayCardListLabel', children: byKey.get(k)?.title ?? k }), _jsx("span", { className: 'wenayCardListValue', children: value(k, row) })] }, k)))] }, p.getId?.(row, i) ?? i))) });
+    return _jsx("div", { className: cx(['wenayCardList', p.className]), style: p.style, children: rows.map((row, i) => (_jsxs("div", { className: cx(['wenayCardListItem', p.layout == 'compact' && 'wenayCardListItem_compact']), children: [_jsxs("div", { className: cx(['wenayCardListHeader', fieldKeys.length == 0 && 'wenayCardListHeader_compact']), children: [_jsx("b", { className: 'wenayCardListTitle', children: titleKey ? value(titleKey, row) : '' }), accentKey && _jsx("span", { className: 'wenayCardListAccent', children: value(accentKey, row) })] }), _jsx("div", { className: 'wenayCardListFields', children: fieldKeys.map(k => (_jsxs("div", { className: 'wenayCardListField', children: [_jsx("span", { className: 'wenayCardListLabel', children: byKey.get(k)?.short ?? byKey.get(k)?.title ?? k }), _jsx("span", { className: 'wenayCardListValue', children: value(k, row) })] }, k))) })] }, p.getId?.(row, i) ?? i))) });
 }

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

@@ -25,6 +25,8 @@ export declare function MenuStrip(p: {
     onItem?: (key: string, e: React.MouseEvent) => void;
     /** present = items are drag-reorderable (one commit per drop) */
     onMove?: (order: string[]) => void;
+    /** transient order while pointer is held; null on drop/cancel */
+    onPreview?: (order: string[] | null) => void;
     /** preview rule for the drop (fixed pinning etc.) - same contract as
      *  useReorder.move, so the preview shows exactly what onMove receives */
     move?: (order: string[], key: string, to: number) => string[];

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

@@ -45,6 +45,7 @@ export function MenuStrip(p) {
         move: p.move,
         canDrag: k => !!p.onMove && !p.items.find(i => i.key == k)?.fixed,
         holdMs: p.holdMs ?? 150,
+        onPreviewChange: p.onPreview,
     });
     // A drag that ends over the button it started on still produces a browser
     // click - without this guard every snapped-back drag would ALSO toggle the
@@ -76,7 +77,7 @@ export function MenuStrip(p) {
  *  on / off. Default click toggles visibility; pass onItem for richer,
  *  multi-state semantics - the strip below stays untouched. */
 export function ColumnsMenu(p) {
-    const cfg = p.state.api.useConfig();
+    const cfg = p.state.api.useDisplayConfig();
     const present = p.state.api.usePresent();
     const byKey = new Map(p.state.columns.map(c => [c.key, c]));
     const items = cfg.order.filter(k => byKey.has(k)).map(k => {
@@ -102,5 +103,5 @@ export function ColumnsMenu(p) {
     function movedOrder(order, key, to) {
         return movedOrderWithFixed(order, key, to, p.state.columns);
     }
-    return _jsx(MenuStrip, { items: items, tail: p.tail, onItem: onItem, onMove: p.reorder == false ? undefined : order => p.state.api.move(order), move: movedOrder, holdMs: p.holdMs, compact: p.compact, className: p.className, style: p.style });
+    return _jsx(MenuStrip, { items: items, tail: p.tail, onItem: onItem, onMove: p.reorder == false ? undefined : order => p.state.api.move(order), onPreview: p.reorder == false ? undefined : order => p.state.api.setPreviewOrder(order), move: movedOrder, holdMs: p.holdMs, compact: p.compact, className: p.className, style: p.style });
 }

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

@@ -82,6 +82,8 @@ export declare function createColumnState(opts: {
             [key: string]: true;
         } | null;
         setPresentGate: (keys: string[] | null) => void;
+        useDisplayConfig: () => ColumnsConfig;
+        setPreviewOrder: (order: string[] | null) => void;
         listSource: {
             useConfig(): {
                 order: string[];
@@ -95,6 +97,19 @@ export declare function createColumnState(opts: {
                     [key: string]: boolean;
                 };
             };
+            useBaseConfig(): {
+                order: string[];
+                visible: {
+                    [key: string]: boolean;
+                };
+            };
+            getBaseConfig(): {
+                order: string[];
+                visible: {
+                    [key: string]: boolean;
+                };
+            };
+            setPreview: (order: string[] | null) => void;
             setConfig(next: {
                 order: string[];
                 visible: {