@abloatai/humans 0.63.0 → 0.64.0

package/src/react/usePresence.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import type { PresenceSession } from '@abloatai/transaction/presence';
 import { AbloValidationError } from '@abloatai/transaction/errors';
 import {
@@ -10,7 +10,8 @@ import {
 import type { AbloClient as Ablo } from '../client.js';
 import type { SchemaRecord } from '@abloatai/transaction/schema/schema';
 import type { ResolveSchema } from '@abloatai/transaction/types/global';
-import { useAbloClientImpl } from './useAblo.js';
+import { useAbloClient } from './useAblo.js';
+import { useReactive } from './useReactive.js';
 
 type DefaultModels = ResolveSchema extends { models: infer M }
   ? M extends SchemaRecord
@@ -46,7 +47,7 @@ export function usePresence<
   modelOrSelect: ModelOperations<T, C> | PresenceModelSelector<R, T, C>,
   recordId: string,
 ): readonly PresenceSession[] {
-  const engine = useAbloClientImpl<R>(null);
+  const engine = useAbloClient<R>();
   return usePresenceImpl(engine, modelOrSelect, recordId);
 }
 
@@ -75,14 +76,8 @@ export function usePresenceImpl<R extends SchemaRecord, T, C>(
     );
   }
 
-  const [, render] = useState(0);
-
-  useEffect(
-    () => presence?.subscribe(() => { render((version) => version + 1); }),
-    [presence],
-  );
-
+  const subscribe = useCallback((notify: () => void) => presence?.subscribe(notify) ?? (() => undefined), [presence]);
+  const sessions = useReactive(() => presence?.get(recordId) ?? [], { subscribe });
   useEffect(() => presence?.read(recordId), [presence, recordId]);
-
-  return presence?.get(recordId) ?? [];
+  return sessions;
 }

package/src/react/useReactive.ts

@@ -0,0 +1,56 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { reaction } from 'mobx';
+import { equalSnapshots, snapshotValue } from './snapshot.js';
+
+interface ObservationOptions<T> {
+  equals?: (a: T, b: T) => boolean;
+  subscribe?: (listener: () => void) => () => void;
+  serverSnapshot?: () => T;
+}
+
+/**
+ * Each render's computation has its own observation. A suspended render cannot
+ * replace the computation used by the committed tree's subscription. Reactions
+ * start only on subscription, so abandoned renders retain no store observers.
+ */
+export function useReactive<T>(compute: () => T, options: ObservationOptions<T> = {}): T {
+  const { equals = equalSnapshots, subscribe, serverSnapshot = compute } = options;
+  const committed = useRef<{ value: T } | null>(null);
+  const observation = useMemo(() => {
+    let cached = committed.current;
+    let server: { value: T } | null = null;
+    const failed = Symbol('selector error');
+    const read = (): T => {
+      const next = snapshotValue(compute());
+      if (cached === null || !equals(cached.value, next)) cached = { value: next };
+      return cached.value;
+    };
+    return {
+      read,
+      readServer: (): T => {
+        server ??= { value: snapshotValue(serverSnapshot()) };
+        return server.value;
+      },
+      subscribe: (notify: () => void): (() => void) => {
+        const stop = reaction(
+          () => {
+            // Notify React of selector failures; React re-reads and delivers the
+            // exception to its error boundary instead of MobX swallowing it.
+            try { return read(); } catch { return failed; }
+          },
+          () => { notify(); },
+        );
+        let stopExternal: (() => void) | undefined;
+        try { stopExternal = subscribe?.(notify); } catch (error) { stop(); throw error; }
+        return () => { stop(); stopExternal?.(); };
+      },
+    };
+  }, [compute, equals, subscribe, serverSnapshot]);
+  // read() recomputes from the actual store, including React's consistency
+  // checks between render and commit, while equal snapshots retain identity.
+  const value = useSyncExternalStore(observation.subscribe, observation.read, observation.readServer);
+  useEffect(() => { committed.current = { value }; }, [value]);
+  return value;
+}

package/src/react/useUndoScope.ts

@@ -29,17 +29,6 @@ import { AbloValidationError } from '@abloatai/transaction/errors';
  * useHotkey('mod+z', () => { if (canUndo) void undo(); });
  */
 
-export interface UseUndoScopeResult<S extends Schema> {
-  /** Pass to `useMutators(..., { undoScope })` to enable recording. */
-  scope: UndoScope<S>;
-  undo: () => Promise<void>;
-  redo: () => Promise<void>;
-  canUndo: boolean;
-  canRedo: boolean;
-  /** Drop history. Use after sync errors / auth context changes. */
-  clear: () => void;
-}
-
 // Module-level weak registry: `SyncStoreContract` → `UndoManager`.
 // A single app wiring through one SyncProvider shares one manager across
 // every useUndoScope call, so scopes with the same name are identity-equal.
@@ -66,19 +55,19 @@ export function useUndoScope<S extends Schema>(
   schema: S,
   name: string,
   options?: UndoScopeOptions,
-): UseUndoScopeResult<S>;
+): useUndoScope.Result<S>;
 
 /** Per-surface undo/redo via the `Register` module augmentation. */
 export function useUndoScope(
   name: string,
   options?: UndoScopeOptions,
-): UseUndoScopeResult<ResolveSchema extends Schema ? ResolveSchema : Schema>;
+): useUndoScope.Result<ResolveSchema extends Schema ? ResolveSchema : Schema>;
 
 export function useUndoScope(
   schemaOrName: Schema | string,
   nameOrOptions?: string | UndoScopeOptions,
   maybeOptions?: UndoScopeOptions,
-): UseUndoScopeResult<Schema> {
+): useUndoScope.Result<Schema> {
   const { store, organizationId, schema: ctxSchema } = useSyncContext();
 
   const isExplicit = typeof schemaOrName !== 'string';
@@ -141,3 +130,18 @@ export function useUndoScope(
     },
   };
 }
+
+/** The state returned by an undo scope; inferred for ordinary hook calls. */
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace useUndoScope {
+  export interface Result<S extends Schema> {
+    /** Pass to `useMutators(..., { undoScope })` to enable recording. */
+    scope: UndoScope<S>;
+    undo: () => Promise<void>;
+    redo: () => Promise<void>;
+    canUndo: boolean;
+    canRedo: boolean;
+    /** Drop history. Use after sync errors / auth context changes. */
+    clear: () => void;
+  }
+}

package/src/react.ts

@@ -1,69 +1,7 @@
-/** React bindings for the optional human-facing local-state package. */
-export { useReactive } from './useReactive.js';
-export { useCurrentUserId } from './react/useCurrentUserId.js';
-export { useErrorListener } from './react/useErrorListener.js';
-export { useSyncStatus, type SyncStatusSnapshot } from './react/useSyncStatus.js';
-export {
-  usePresence,
-  type PresenceModelSelector,
-} from './react/usePresence.js';
-export {
-  useMutationFailureListener,
-  type MutationFailurePayload,
-} from './react/useMutationFailureListener.js';
-
-export {
-  AbloProvider,
-  usePeers,
-  useSync,
-  useSyncStore,
-  type AbloProviderProps,
-  type GroupScope,
-} from './react/AbloProvider.js';
-
-export {
-  ClientSideSuspense,
-  type ClientSideSuspenseProps,
-} from './react/ClientSideSuspense.js';
-
-export { DefaultFallback } from './react/DefaultFallback.js';
-
-export {
-  createAbloReact,
-  type AbloReactBinding,
-} from './react/createAbloReact.js';
-
-export {
-  useAblo,
-  type UseAbloHydratedModelResult,
-  type UseAbloModelOptions,
-  type UseAbloModelResult,
-} from './react/useAblo.js';
-
-export {
-  useMutators,
-  type InvokerFor,
-  type MutatorInvokers,
-  type UseMutatorsOptions,
-} from './react/useMutators.js';
-
-export {
-  useUndoScope,
-  type UseUndoScopeResult,
-} from './react/useUndoScope.js';
-
-export type {
-  DefaultSyncShape,
-  ResolveSchema,
-  ResolveUserMeta,
-  ResolveClaimMeta,
-  ResolveModelKey,
-} from '@abloatai/transaction/types/global';
-
-export { ModelScope } from '@abloatai/transaction/types';
-export type { SyncStoreContract } from './react/context.js';
-export type { MutateActions } from './local/mutators/mutateActions.js';
-export type {
-  ReaderActions,
-  ReaderFindOptions,
-} from './local/mutators/readerActions.js';
+/** React owns context, subscriptions and component lifetimes over core Ablo. */
+export { AbloProvider } from './react/AbloProvider.js';
+export { createAbloReact } from './react/createAbloReact.js';
+export { useAblo } from './react/useAblo.js';
+export { usePresence } from './react/usePresence.js';
+export { useMutators } from './react/useMutators.js';
+export { useUndoScope } from './react/useUndoScope.js';

package/dist/react/ClientSideSuspense.d.ts

@@ -1,36 +0,0 @@
-import { type ReactNode } from 'react';
-/**
- * Nested bootstrap gate for a subtree. `<AbloProvider>` already ships
- * its own built-in gate (via its `fallback` prop) that handles the
- * common "wait for first bootstrap" case. Use `ClientSideSuspense`
- * only when you need a SEPARATE gate inside an already-ready provider —
- * for example, rendering app chrome immediately while gating a single
- * heavy product surface on its own query resolving.
- *
- * Like the provider-level gate, this component latches open on the
- * first `connected` / `reconnecting` / `disconnected` transition and
- * stays open. Subsequent transient `connecting` states (hard reconnect
- * after offline) do NOT re-show the fallback — the app has already
- * rendered once and its own reconnect UI should take over.
- *
- * v0.3.x implementation is non-Suspense: reads `useSyncStatus()` and
- * conditionally renders. v0.3.x+ will ship a
- * the React suspense entry point where `useQuery` / `useOne`
- * actually throw Promises; this component becomes a thin wrapper around
- * React's real `<Suspense>` at that point.
- *
- * @example
- * <AbloProvider fallback={<AppSkeleton />}>
- *   <AppChrome />
- *   <ClientSideSuspense fallback={<CanvasSkeleton />}>
- *     <HeavyCanvas />
- *   </ClientSideSuspense>
- * </AbloProvider>
- */
-export interface ClientSideSuspenseProps {
-    /** What to render while the nested subtree is waiting for first bootstrap. */
-    fallback: ReactNode;
-    /** What to render once the subtree is cleared to render. */
-    children: ReactNode;
-}
-export declare function ClientSideSuspense({ fallback, children }: ClientSideSuspenseProps): import("react").JSX.Element;

package/dist/react/ClientSideSuspense.js

@@ -1,17 +0,0 @@
-'use client';
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { useSyncStatus } from './useSyncStatus.js';
-export function ClientSideSuspense({ fallback, children }) {
-    const status = useSyncStatus();
-    const [everConnected, setEverConnected] = useState(false);
-    useEffect(() => {
-        if (status.name === 'connected' ||
-            status.name === 'reconnecting' ||
-            status.name === 'disconnected') {
-            setEverConnected(true);
-        }
-    }, [status.name]);
-    const showFallback = !everConnected && status.name === 'connecting';
-    return _jsx(_Fragment, { children: showFallback ? fallback : children });
-}

package/dist/react/useCurrentUserId.d.ts

@@ -1,2 +0,0 @@
-/** Returns the application user id supplied to the nearest AbloProvider. */
-export declare function useCurrentUserId(): string | null;

package/dist/react/useCurrentUserId.js

@@ -1,12 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import { AbloInternalContext } from './internalContext.js';
-import { AbloValidationError } from '@abloatai/transaction/errors';
-/** Returns the application user id supplied to the nearest AbloProvider. */
-export function useCurrentUserId() {
-    const context = useContext(AbloInternalContext);
-    if (!context) {
-        throw new AbloValidationError('useCurrentUserId: no <AbloProvider> mounted above this component.', { code: 'no_ablo_provider' });
-    }
-    return context.currentUserId;
-}

package/dist/react/useErrorListener.d.ts

@@ -1,2 +0,0 @@
-/** Subscribe to provider-level errors without causing component re-renders. */
-export declare function useErrorListener(listener: (error: Error) => void): void;

package/dist/react/useErrorListener.js

@@ -1,14 +0,0 @@
-'use client';
-import { useContext, useEffect, useRef } from 'react';
-import { AbloInternalContext } from './internalContext.js';
-import { AbloValidationError } from '@abloatai/transaction/errors';
-/** Subscribe to provider-level errors without causing component re-renders. */
-export function useErrorListener(listener) {
-    const context = useContext(AbloInternalContext);
-    if (!context) {
-        throw new AbloValidationError('useErrorListener: no <AbloProvider> mounted above this component.', { code: 'no_ablo_provider' });
-    }
-    const listenerRef = useRef(listener);
-    listenerRef.current = listener;
-    useEffect(() => context.subscribeError((error) => { listenerRef.current(error); }), [context]);
-}

package/dist/react/useMutationFailureListener.d.ts

@@ -1,8 +0,0 @@
-import { type QueuedMutation } from '../reactRuntime.js';
-export interface MutationFailurePayload {
-    transaction: QueuedMutation;
-    error: Error;
-    permanent?: boolean;
-}
-/** Subscribe to optimistic mutation rollbacks and permanent write failures. */
-export declare function useMutationFailureListener(listener: (payload: MutationFailurePayload) => void): void;

package/dist/react/useMutationFailureListener.js

@@ -1,19 +0,0 @@
-'use client';
-import { useContext, useEffect, useRef } from 'react';
-import { AbloInternalContext, } from '../reactRuntime.js';
-import { AbloValidationError } from '@abloatai/transaction/errors';
-/** Subscribe to optimistic mutation rollbacks and permanent write failures. */
-export function useMutationFailureListener(listener) {
-    const context = useContext(AbloInternalContext);
-    if (!context) {
-        throw new AbloValidationError('useMutationFailureListener: no <AbloProvider> mounted above this component.', { code: 'no_ablo_provider' });
-    }
-    const listenerRef = useRef(listener);
-    listenerRef.current = listener;
-    useEffect(() => {
-        const engine = context.engine;
-        if (!engine)
-            return;
-        return engine.onMutationFailure((payload) => { listenerRef.current(payload); });
-    }, [context, context.engine]);
-}

package/dist/react/useSyncStatus.js

@@ -1,37 +0,0 @@
-'use client';
-import { useCallback } from 'react';
-import { useSyncContext, } from './context.js';
-import { useReactive } from '../useReactive.js';
-/** Reactively exposes the local store's connection and confirmation status. */
-export function useSyncStatus() {
-    const { store } = useSyncContext();
-    const compute = useCallback(() => deriveStatus(store), [store]);
-    return useReactive(compute, sameSnapshot);
-}
-function deriveStatus(store) {
-    const { state, progress, pendingChanges, isSessionError, error } = store.syncStatus;
-    if (isSessionError)
-        return { name: 'needs-auth' };
-    if (state === 'reconnecting')
-        return { name: 'reconnecting', reason: error?.message };
-    if (state === 'offline')
-        return { name: 'disconnected', reason: 'offline' };
-    if (state === 'error')
-        return { name: 'disconnected', reason: error?.message };
-    if (store.isReady)
-        return { name: 'connected', hasUnsyncedChanges: pendingChanges > 0 };
-    if (state === 'idle' || state === 'syncing')
-        return { name: 'connecting', progress };
-    return { name: 'initial' };
-}
-function sameSnapshot(a, b) {
-    if (a.name !== b.name)
-        return false;
-    if (a.name === 'initial' || a.name === 'needs-auth')
-        return true;
-    if (a.name === 'connecting')
-        return b.name === 'connecting' && a.progress === b.progress;
-    if (a.name === 'connected')
-        return b.name === 'connected' && a.hasUnsyncedChanges === b.hasUnsyncedChanges;
-    return (b.name === 'reconnecting' || b.name === 'disconnected') && a.reason === b.reason;
-}

package/dist/useReactive.d.ts

@@ -1,6 +0,0 @@
-/**
- * Subscribe a React component to a MobX computation with a cached snapshot.
- * This is the framework-level reactive primitive owned by @abloatai/humans;
- * store/model hooks are layered above it.
- */
-export declare function useReactive<T>(compute: () => T, equals?: (a: T, b: T) => boolean): T;

package/dist/useReactive.js

@@ -1,43 +0,0 @@
-'use client';
-import { useCallback, useRef } from 'react';
-import { useSyncExternalStore } from 'react';
-import { reaction } from 'mobx';
-/**
- * Subscribe a React component to a MobX computation with a cached snapshot.
- * This is the framework-level reactive primitive owned by @abloatai/humans;
- * store/model hooks are layered above it.
- */
-export function useReactive(compute, equals = defaultEquals) {
-    const computeRef = useRef(compute);
-    const equalsRef = useRef(equals);
-    const snapshotRef = useRef(null);
-    const versionRef = useRef(0);
-    equalsRef.current = equals;
-    if (snapshotRef.current === null) {
-        snapshotRef.current = { value: compute() };
-    }
-    else if (computeRef.current !== compute) {
-        const next = compute();
-        if (!equals(snapshotRef.current.value, next)) {
-            snapshotRef.current = { value: next };
-            versionRef.current++;
-        }
-    }
-    computeRef.current = compute;
-    const subscribe = useCallback((onChange) => reaction(() => computeRef.current(), (next) => {
-        const current = snapshotRef.current.value;
-        if (!equalsRef.current(current, next)) {
-            snapshotRef.current = { value: next };
-            onChange();
-        }
-    }), [versionRef.current]);
-    const getSnapshot = useCallback(() => snapshotRef.current.value, []);
-    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-function defaultEquals(a, b) {
-    if (Object.is(a, b))
-        return true;
-    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)
-        return false;
-    return a.every((value, index) => Object.is(value, b[index]));
-}

package/src/react/ClientSideSuspense.tsx

@@ -1,57 +0,0 @@
-'use client';
-
-import { useEffect, useState, type ReactNode } from 'react';
-import { useSyncStatus } from './useSyncStatus.js';
-
-/**
- * Nested bootstrap gate for a subtree. `<AbloProvider>` already ships
- * its own built-in gate (via its `fallback` prop) that handles the
- * common "wait for first bootstrap" case. Use `ClientSideSuspense`
- * only when you need a SEPARATE gate inside an already-ready provider —
- * for example, rendering app chrome immediately while gating a single
- * heavy product surface on its own query resolving.
- *
- * Like the provider-level gate, this component latches open on the
- * first `connected` / `reconnecting` / `disconnected` transition and
- * stays open. Subsequent transient `connecting` states (hard reconnect
- * after offline) do NOT re-show the fallback — the app has already
- * rendered once and its own reconnect UI should take over.
- *
- * v0.3.x implementation is non-Suspense: reads `useSyncStatus()` and
- * conditionally renders. v0.3.x+ will ship a
- * the React suspense entry point where `useQuery` / `useOne`
- * actually throw Promises; this component becomes a thin wrapper around
- * React's real `<Suspense>` at that point.
- *
- * @example
- * <AbloProvider fallback={<AppSkeleton />}>
- *   <AppChrome />
- *   <ClientSideSuspense fallback={<CanvasSkeleton />}>
- *     <HeavyCanvas />
- *   </ClientSideSuspense>
- * </AbloProvider>
- */
-export interface ClientSideSuspenseProps {
-  /** What to render while the nested subtree is waiting for first bootstrap. */
-  fallback: ReactNode;
-  /** What to render once the subtree is cleared to render. */
-  children: ReactNode;
-}
-
-export function ClientSideSuspense({ fallback, children }: ClientSideSuspenseProps) {
-  const status = useSyncStatus();
-  const [everConnected, setEverConnected] = useState(false);
-
-  useEffect(() => {
-    if (
-      status.name === 'connected' ||
-      status.name === 'reconnecting' ||
-      status.name === 'disconnected'
-    ) {
-      setEverConnected(true);
-    }
-  }, [status.name]);
-
-  const showFallback = !everConnected && status.name === 'connecting';
-  return <>{showFallback ? fallback : children}</>;
-}

package/src/react/useCurrentUserId.ts

@@ -1,17 +0,0 @@
-'use client';
-
-import { useContext } from 'react';
-import { AbloInternalContext } from './internalContext.js';
-import { AbloValidationError } from '@abloatai/transaction/errors';
-
-/** Returns the application user id supplied to the nearest AbloProvider. */
-export function useCurrentUserId(): string | null {
-  const context = useContext(AbloInternalContext);
-  if (!context) {
-    throw new AbloValidationError(
-      'useCurrentUserId: no <AbloProvider> mounted above this component.',
-      { code: 'no_ablo_provider' },
-    );
-  }
-  return context.currentUserId;
-}

package/src/react/useErrorListener.ts

@@ -1,22 +0,0 @@
-'use client';
-
-import { useContext, useEffect, useRef } from 'react';
-import { AbloInternalContext } from './internalContext.js';
-import { AbloValidationError } from '@abloatai/transaction/errors';
-
-/** Subscribe to provider-level errors without causing component re-renders. */
-export function useErrorListener(listener: (error: Error) => void): void {
-  const context = useContext(AbloInternalContext);
-  if (!context) {
-    throw new AbloValidationError(
-      'useErrorListener: no <AbloProvider> mounted above this component.',
-      { code: 'no_ablo_provider' },
-    );
-  }
-  const listenerRef = useRef(listener);
-  listenerRef.current = listener;
-  useEffect(
-    () => context.subscribeError((error) => { listenerRef.current(error); }),
-    [context],
-  );
-}

package/src/react/useMutationFailureListener.ts

@@ -1,34 +0,0 @@
-'use client';
-
-import { useContext, useEffect, useRef } from 'react';
-import {
-  AbloInternalContext,
-  type QueuedMutation,
-} from '../reactRuntime.js';
-import { AbloValidationError } from '@abloatai/transaction/errors';
-
-export interface MutationFailurePayload {
-  transaction: QueuedMutation;
-  error: Error;
-  permanent?: boolean;
-}
-
-/** Subscribe to optimistic mutation rollbacks and permanent write failures. */
-export function useMutationFailureListener(
-  listener: (payload: MutationFailurePayload) => void,
-): void {
-  const context = useContext(AbloInternalContext);
-  if (!context) {
-    throw new AbloValidationError(
-      'useMutationFailureListener: no <AbloProvider> mounted above this component.',
-      { code: 'no_ablo_provider' },
-    );
-  }
-  const listenerRef = useRef(listener);
-  listenerRef.current = listener;
-  useEffect(() => {
-    const engine = context.engine;
-    if (!engine) return;
-    return engine.onMutationFailure((payload) => { listenerRef.current(payload); });
-  }, [context, context.engine]);
-}

package/src/react/useSyncStatus.ts

@@ -1,42 +0,0 @@
-'use client';
-
-import { useCallback } from 'react';
-import {
-  useSyncContext,
-  type SyncStoreContract,
-} from './context.js';
-import { useReactive } from '../useReactive.js';
-
-export type SyncStatusSnapshot =
-  | { readonly name: 'initial' }
-  | { readonly name: 'connecting'; readonly progress: number }
-  | { readonly name: 'connected'; readonly hasUnsyncedChanges: boolean }
-  | { readonly name: 'reconnecting'; readonly reason?: string }
-  | { readonly name: 'disconnected'; readonly reason?: string }
-  | { readonly name: 'needs-auth' };
-
-/** Reactively exposes the local store's connection and confirmation status. */
-export function useSyncStatus(): SyncStatusSnapshot {
-  const { store } = useSyncContext();
-  const compute = useCallback(() => deriveStatus(store), [store]);
-  return useReactive(compute, sameSnapshot);
-}
-
-function deriveStatus(store: SyncStoreContract): SyncStatusSnapshot {
-  const { state, progress, pendingChanges, isSessionError, error } = store.syncStatus;
-  if (isSessionError) return { name: 'needs-auth' };
-  if (state === 'reconnecting') return { name: 'reconnecting', reason: error?.message };
-  if (state === 'offline') return { name: 'disconnected', reason: 'offline' };
-  if (state === 'error') return { name: 'disconnected', reason: error?.message };
-  if (store.isReady) return { name: 'connected', hasUnsyncedChanges: pendingChanges > 0 };
-  if (state === 'idle' || state === 'syncing') return { name: 'connecting', progress };
-  return { name: 'initial' };
-}
-
-function sameSnapshot(a: SyncStatusSnapshot, b: SyncStatusSnapshot): boolean {
-  if (a.name !== b.name) return false;
-  if (a.name === 'initial' || a.name === 'needs-auth') return true;
-  if (a.name === 'connecting') return b.name === 'connecting' && a.progress === b.progress;
-  if (a.name === 'connected') return b.name === 'connected' && a.hasUnsyncedChanges === b.hasUnsyncedChanges;
-  return (b.name === 'reconnecting' || b.name === 'disconnected') && a.reason === b.reason;
-}