wenay-react2 1.0.45 → 1.0.47

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

@@ -7,3 +7,4 @@ export * from './useReorder';
 export * from './useReorderBoard';
 export * from './useMedia';
 export * from './usePeer';
+export * from './usePeerCall';

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

@@ -7,3 +7,4 @@ export * from './useReorder';
 export * from './useReorderBoard';
 export * from './useMedia';
 export * from './usePeer';
+export * from './usePeerCall';

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;