wenay-react2 1.0.44 → 1.0.46

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

@@ -21,6 +21,8 @@ export function createColumnState(opts) {
     const st = memoryGetOrCreate(opts.key, defConfig());
     const stApi = createUpdateApi(st);
     const [emitChange, onChange] = createListen();
+    const previewRt = { order: null };
+    const previewApi = createUpdateApi(previewRt);
     /** Runtime-only, never persisted: actual = which keys the attached grid has;
      *  gate = optional app-level availability over a stable grid schema (standards,
      *  mode blocks). Consumers see actual AND gate as one presence map. */
@@ -126,6 +128,33 @@ export function createColumnState(opts) {
     const getConfig = () => normalize();
     const setConfig = (next) => commit(next, false);
     const reset = () => commit(defConfig(), false);
+    function displayConfig() {
+        const cfg = normalize();
+        return previewRt.order ? { ...cfg, order: previewRt.order.slice() } : cfg;
+    }
+    function useDisplayConfig() {
+        stApi.use();
+        previewApi.use();
+        return displayConfig();
+    }
+    function setPreviewOrder(order) {
+        const cfg = normalize();
+        const known = new Set(cfg.order);
+        const next = order ? pinFixedOrder(order.filter(k => known.has(k)), opts.columns) : null;
+        if (JSON.stringify(next) == JSON.stringify(previewRt.order))
+            return;
+        previewRt.order = next;
+        previewApi.render();
+        if (!gridApi || gridApi.isDestroyed?.())
+            return;
+        applying = true;
+        try {
+            gridApi.applyColumnState({ state: (next ?? cfg.order).map(colId => ({ colId })), applyOrder: true });
+        }
+        finally {
+            applying = false;
+        }
+    }
     function useConfig() {
         stApi.use();
         return normalize();
@@ -154,14 +183,22 @@ export function createColumnState(opts) {
      *  they edit the SAME config. */
     const listSource = {
         useConfig() {
-            const c = useConfig();
+            const c = useDisplayConfig();
             return { order: c.order, visible: c.visible };
         },
         getConfig() {
+            const c = displayConfig();
+            return { order: c.order, visible: c.visible };
+        },
+        useBaseConfig() {
+            const c = useConfig();
+            return { order: c.order, visible: c.visible };
+        },
+        getBaseConfig() {
             const c = normalize();
             return { order: c.order, visible: c.visible };
         },
-        setConfig(next) {
+        setPreview: setPreviewOrder, setConfig(next) {
             const cfg = normalize();
             // an editor over a SUBSET of columns must not lose the rest:
             // unknown incoming keys are dropped by normalize, missing ones re-appended
@@ -262,9 +299,20 @@ export function createColumnState(opts) {
     function onGridEvent(e) {
         if (applying || e?.source == 'api')
             return;
-        // resize/move fire per animation frame during a drag; persist the final shape only
-        if (e?.finished === false)
+        if (e?.type == 'columnMoved' && e.finished === false && gridApi) {
+            const known = new Set(opts.columns.map(c => c.key));
+            const order = gridApi.getColumnState().map(c => c.colId).filter((k) => !!k && known.has(k));
+            for (const k of normalize().order)
+                if (!order.includes(k))
+                    order.push(k);
+            setPreviewOrder(order);
             return;
+        }
+        if (e?.type == 'columnMoved' && previewRt.order) {
+            readFromGrid();
+            setPreviewOrder(null);
+            return;
+        }
         clearTimeout(saveTimer);
         saveTimer = setTimeout(readFromGrid, opts.saveMs ?? 300);
     }
@@ -310,7 +358,7 @@ export function createColumnState(opts) {
          *  (dots, cards, icon menus) render from these + the config. */
         columns: opts.columns,
         api: { getConfig, setConfig, useConfig, onChange, reset, show, move, setSort, toggleSort, visibleKeys,
-            getPresent, usePresent, isPresent, setPresent, getPresentGate, setPresentGate, listSource },
+            getPresent, usePresent, isPresent, setPresent, getPresentGate, setPresentGate, useDisplayConfig, setPreviewOrder, listSource },
         grid: { attach, detach },
     };
 }

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

@@ -1,7 +1,10 @@
+export * from './useReplay';
+export * from './useObserveStore';
+export * from './useOutside';
 export * from './useKeyboard';
 export * from './useDraggable';
 export * from './useReorder';
 export * from './useReorderBoard';
-export * from './useObserveStore';
-export * from './useReplay';
-export * from './useOutside';
+export * from './useMedia';
+export * from './usePeer';
+export * from './usePeerCall';

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

@@ -1,7 +1,10 @@
+export * from './useReplay';
+export * from './useObserveStore';
+export * from './useOutside';
 export * from './useKeyboard';
 export * from './useDraggable';
 export * from './useReorder';
 export * from './useReorderBoard';
-export * from './useObserveStore';
-export * from './useReplay';
-export * from './useOutside';
+export * from './useMedia';
+export * from './usePeer';
+export * from './usePeerCall';

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

@@ -0,0 +1,14 @@
+import { Media } from "wenay-common2";
+export type UseMediaSourceController = {
+    source: Media.MediaSource;
+    listen: Media.MediaAnyListen;
+    state: Media.MediaSourceState;
+    start(): Promise<Media.MediaSourceState>;
+    stop(): void;
+    setDevice(id: string): Promise<Media.MediaSourceState>;
+    listDevices(): Promise<Media.MediaSourceDevice[]>;
+    stats(): Media.MediaStats;
+};
+/** React lifecycle adapter for a common2 Media source. Frames stay on `listen`:
+ * draw/play them through a canvas or AudioContext, never through React state. */
+export declare function useMediaSource(kind: "audio" | "video", options?: Media.AudioSourceOpts | Media.VideoSourceOpts): UseMediaSourceController;

package/lib/common/src/hooks/useMedia.js

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Media } from "wenay-common2";
+/** React lifecycle adapter for a common2 Media source. Frames stay on `listen`:
+ * draw/play them through a canvas or AudioContext, never through React state. */
+export function useMediaSource(kind, options = {}) {
+    const sourceRef = useRef(null);
+    if (!sourceRef.current)
+        sourceRef.current = kind == "video"
+            ? Media.createVideoSource(options)
+            : Media.createAudioSource(options);
+    const source = sourceRef.current;
+    const [state, setState] = useState(source.state);
+    const sync = useCallback(() => setState(source.state), [source]);
+    const start = useCallback(async () => {
+        const next = await source.start();
+        setState(next);
+        return next;
+    }, [source]);
+    const stop = useCallback(() => {
+        source.stop();
+        sync();
+    }, [source, sync]);
+    const setDevice = useCallback(async (id) => {
+        const next = await source.setDevice(id);
+        setState(next);
+        return next;
+    }, [source]);
+    useEffect(() => () => source.stop(), [source]);
+    return useMemo(() => ({
+        source,
+        listen: source[1],
+        state,
+        start,
+        stop,
+        setDevice,
+        listDevices: () => source.listDevices(),
+        stats: () => source.getStats(),
+    }), [source, state, start, stop, setDevice]);
+}

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

@@ -0,0 +1,16 @@
+import { Peer } from "wenay-common2";
+/** Thin React view over common2 Peer SDK. The SDK keeps route/repair ownership;
+ * consumers use `store` with useStoreNode/useStoreKeys as usual. */
+export declare function usePeer<T extends object>(client: Peer.PeerClient<T>, account: string): {
+    store: import("wenay-common2/lib/Common/Observe").Store<T>;
+    ready: boolean;
+    route: string;
+    state: import("wenay-common2/lib/Common/events/route-coordinator").tRouteState;
+    seq: () => number;
+    promoteDirect: (opts?: import("wenay-common2/lib/Common/events/route-coordinator").PromoteDirectOpts) => Promise<import("wenay-common2/lib/Common/events/route-coordinator").RouteOpResult>;
+    reinterposeRelay: (reason?: unknown) => Promise<import("wenay-common2/lib/Common/events/route-coordinator").RouteOpResult>;
+    fallback: (reason?: unknown) => Promise<import("wenay-common2/lib/Common/events/route-coordinator").RouteOpResult>;
+    block: (reason?: unknown) => Promise<import("wenay-common2/lib/Common/events/route-coordinator").RouteOpResult>;
+    resync: () => Promise<void>;
+    close: () => void;
+};

package/lib/common/src/hooks/usePeer.js

@@ -0,0 +1,29 @@
+import { useEffect, useMemo, useState } from "react";
+/** Thin React view over common2 Peer SDK. The SDK keeps route/repair ownership;
+ * consumers use `store` with useStoreNode/useStoreKeys as usual. */
+export function usePeer(client, account) {
+    const peer = useMemo(() => client.peer(account), [client, account]);
+    const [epoch, setEpoch] = useState(0);
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        let alive = true;
+        setReady(false);
+        peer.ready.then(() => { if (alive)
+            setReady(true); });
+        const off = client.onRoute(() => setEpoch(v => v + 1));
+        return () => { alive = false; off(); };
+    }, [client, peer]);
+    return useMemo(() => ({
+        store: peer.store,
+        ready,
+        route: peer.route(),
+        state: peer.state(),
+        seq: peer.seq,
+        promoteDirect: peer.promoteDirect,
+        reinterposeRelay: peer.reinterposeRelay,
+        fallback: peer.fallback,
+        block: peer.block,
+        resync: client.resync,
+        close: peer.close,
+    }), [client, peer, ready, epoch]);
+}

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

@@ -0,0 +1,68 @@
+import { Peer } from "wenay-common2";
+export type PeerPresence = {
+    account: string;
+    online: boolean;
+};
+/** React binding for common2 host presence. Subscribe before list(): `changes` is the
+ * authoritative edge stream and React does not create its own presence transport. */
+export declare function usePeerPresence(presence: Peer.PeerRemote["presence"] | undefined): {
+    accounts: string[];
+    online: (account: string) => boolean;
+};
+/** Thin UI binding over common2 CallManager. Signaling, busy/glare policy, timeout,
+ * offline verdict and lifecycle ownership stay in common2; callers own manager.close(). */
+export declare function usePeerCalls(manager: Peer.CallManager): {
+    ready: boolean;
+    active: {
+        id: string;
+        peer: string;
+        direction: "out" | "in";
+        meta: unknown;
+        state: () => Peer.tCallState;
+        reason: () => Peer.tCallEnd | null;
+        changed: import("wenay-common2").ListenApi<[Peer.tCallState]>;
+        ended: Promise<Peer.tCallEnd>;
+        accept(): void;
+        decline(why?: Peer.tCallEnd): void;
+        hangup(): void;
+    } | null;
+    rings: {
+        id: string;
+        peer: string;
+        direction: "out" | "in";
+        meta: unknown;
+        state: () => Peer.tCallState;
+        reason: () => Peer.tCallEnd | null;
+        changed: import("wenay-common2").ListenApi<[Peer.tCallState]>;
+        ended: Promise<Peer.tCallEnd>;
+        accept(): void;
+        decline(why?: Peer.tCallEnd): void;
+        hangup(): void;
+    }[];
+    calls: {
+        id: string;
+        peer: string;
+        direction: "out" | "in";
+        meta: unknown;
+        state: () => Peer.tCallState;
+        reason: () => Peer.tCallEnd | null;
+        changed: import("wenay-common2").ListenApi<[Peer.tCallState]>;
+        ended: Promise<Peer.tCallEnd>;
+        accept(): void;
+        decline(why?: Peer.tCallEnd): void;
+        hangup(): void;
+    }[];
+    call: (account: string, meta?: unknown) => {
+        id: string;
+        peer: string;
+        direction: "out" | "in";
+        meta: unknown;
+        state: () => Peer.tCallState;
+        reason: () => Peer.tCallEnd | null;
+        changed: import("wenay-common2").ListenApi<[Peer.tCallState]>;
+        ended: Promise<Peer.tCallEnd>;
+        accept(): void;
+        decline(why?: Peer.tCallEnd): void;
+        hangup(): void;
+    };
+};

package/lib/common/src/hooks/usePeerCall.js

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+/** React binding for common2 host presence. Subscribe before list(): `changes` is the
+ * authoritative edge stream and React does not create its own presence transport. */
+export function usePeerPresence(presence) {
+    const [accounts, setAccounts] = useState([]);
+    useEffect(() => {
+        if (!presence) {
+            setAccounts([]);
+            return;
+        }
+        let alive = true;
+        const off = presence.changes.on(({ account, online }) => {
+            if (!alive)
+                return;
+            setAccounts(current => online
+                ? current.includes(account) ? current : [...current, account].sort()
+                : current.filter(value => value !== account));
+        });
+        Promise.resolve(presence.list()).then(list => {
+            if (alive)
+                setAccounts([...new Set(list)].sort());
+        });
+        return () => { alive = false; off(); };
+    }, [presence]);
+    return useMemo(() => ({ accounts, online: (account) => accounts.includes(account) }), [accounts]);
+}
+/** Thin UI binding over common2 CallManager. Signaling, busy/glare policy, timeout,
+ * offline verdict and lifecycle ownership stay in common2; callers own manager.close(). */
+export function usePeerCalls(manager) {
+    const calls = useRef(new Map());
+    const [version, setVersion] = useState(0);
+    const touch = useCallback(() => setVersion(value => value + 1), []);
+    useEffect(() => {
+        let alive = true;
+        const offs = new Map();
+        const watch = (call) => {
+            if (calls.current.has(call.id))
+                return;
+            calls.current.set(call.id, call);
+            offs.set(call.id, call.changed.on(touch));
+            void call.ended.then(() => {
+                offs.get(call.id)?.();
+                offs.delete(call.id);
+                calls.current.delete(call.id);
+                if (alive)
+                    touch();
+            });
+            touch();
+        };
+        const offRings = manager.rings.on(watch);
+        void manager.ready.then(() => { if (alive)
+            touch(); });
+        return () => {
+            alive = false;
+            offRings();
+            offs.forEach(off => off());
+            calls.current.clear();
+        };
+    }, [manager, touch]);
+    const call = useCallback((account, meta) => {
+        const handle = manager.call(account, meta);
+        // Outgoing calls do not arrive through `rings`; register them immediately.
+        calls.current.set(handle.id, handle);
+        const off = handle.changed.on(touch);
+        void handle.ended.then(() => { off(); calls.current.delete(handle.id); touch(); });
+        touch();
+        return handle;
+    }, [manager, touch]);
+    return useMemo(() => {
+        const known = [...calls.current.values()];
+        return {
+            ready: version > 0,
+            active: manager.active(),
+            rings: known.filter(handle => handle.state() === "ringing"),
+            calls: known,
+            call,
+        };
+    }, [manager, call, version]);
+}

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

@@ -27,6 +27,8 @@ export type ReorderOptions = {
     preview?: 'slots' | 'measure';
     /** hold before the drag starts (touch-friendly fields); default 0 */
     holdMs?: number;
+    /** transient simulated order while dragging; null on drop/cancel */
+    onPreviewChange?: (next: string[] | null) => void;
 };
 export type ReorderItem = {
     /** spread on the block element */

package/lib/common/src/hooks/useReorder.js

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useDraggableApi } from './useDraggable';
 export function useReorder(o) {
     const listRef = useRef(null);
@@ -96,6 +96,8 @@ export function useReorder(o) {
     const from = dragKey != null ? o.order.indexOf(dragKey) : -1;
     const target = from != -1 ? dragTarget(from, local(drag.position.x), local(drag.position.y)) : -1;
     const preview = from != -1 && dragKey != null ? move(o.order, dragKey, target) : null;
+    const previewKey = preview?.join("\u0000") ?? "";
+    useEffect(() => o.onPreviewChange?.(preview), [previewKey]);
     function item(key) {
         const active = preview != null;
         const dragging = key == dragKey;

package/lib/common/src/utils/memoryStore.d.ts

@@ -27,8 +27,8 @@ export declare const memoryCache: {
     getArr: [k: string, v: Map<string, unknown>][];
 };
 export declare const memoryMaps: {
-    rnd: ObservableMap<string, import("../components/Dnd").FloatingWindowSavedGeometry>;
+    rnd: ObservableMap<string, import("../components").FloatingWindowSavedGeometry>;
     resize: ObservableMap<string, import("./persistedMaps").ResizableSavedSize>;
-    rightMenu: ObservableMap<string, import("../components/Menu").MenuRightSavedState>;
+    rightMenu: ObservableMap<string, import("../components").MenuRightSavedState>;
     other: ObservableMap<string, object>;
 };

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

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