@abloatai/humans 0.63.1 → 0.64.0

package/dist/react/useAblo.js

@@ -1,9 +1,8 @@
 'use client';
-import { useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo } from 'react';
 import { AbloInternalContext } from './internalContext.js';
 import { getModelClientMeta, } from '../local/client/createModelOperations.js';
-import { Model } from '../local/Model.js';
-import { useReactive } from '../useReactive.js';
+import { useReactive } from './useReactive.js';
 const EMPTY_CLAIMS = Object.freeze([]);
 /**
  * Restore the caller's schema generics on the context-held engine. React
@@ -27,50 +26,15 @@ function readModelResult(engine, modelClient, id, initial) {
     if (!modelClient || id === undefined) {
         return { data: initial, claims: EMPTY_CLAIMS, claimed: false };
     }
-    const data = snapshotValue(modelClient.local.get(id) ?? initial);
+    const data = modelClient.local.get(id) ?? initial;
     const meta = getModelClientMeta(modelClient);
     const claims = meta && engine
         ? engine.claims.list({ model: meta.key, id })
         : EMPTY_CLAIMS;
     return { data, claims, claimed: claims.length > 0 };
 }
-/**
- * Projects a reactive read into the value that `useReactive` caches and
- * returns.
- *
- * For a `Model`, this reads the row's fields through `toReactiveSnapshot`
- * rather than returning the instance itself. Property access is what subscribes
- * the reaction to those fields, so the read has to happen inside this tracked
- * function; returning the live instance without reading its fields would leave
- * the component blind to later edits. The fresh object it produces also lets
- * `useReactive`'s equality check detect an in-place update.
- */
-function snapshotValue(value) {
-    if (value instanceof Model) {
-        return value.toReactiveSnapshot();
-    }
-    if (Array.isArray(value)) {
-        return value.map((item) => snapshotValue(item));
-    }
-    return value;
-}
 export function useAblo(modelOrSelect, id, options) {
-    return useAbloImpl(null, modelOrSelect, id, options);
-}
-/**
- * @internal The one implementation behind `useAblo` and the bound hooks a
- * `createAbloReact` binding returns — written once so the reactive read path
- * cannot fork between the global hook and a factory's.
- *
- * `boundClient` is a binding's own context value — typed `Ablo<S>` at the
- * factory, so that path never rebinds and never casts. `null` means "no
- * binding provider in this tree": the global hook always passes it, and a
- * binding hook mounted under a legacy provider falls through to the erased
- * internal context, which is what keeps both mounts working while the last
- * legacy mount migrates.
- */
-export function useAbloImpl(boundClient, modelOrSelect, id, options) {
-    const engine = useAbloClientImpl(boundClient);
+    const engine = useAbloClient();
     const initial = options?.initial;
     const isSelectorOnly = typeof modelOrSelect === 'function' && id === undefined;
     const modelClient = typeof modelOrSelect === 'function' && id !== undefined
@@ -80,43 +44,44 @@ export function useAbloImpl(boundClient, modelOrSelect, id, options) {
         : typeof modelOrSelect === 'function'
             ? undefined
             : modelOrSelect;
-    // Claims arrive through an event emitter (engine.claims), not through MobX, so
-    // the useReactive reactions below cannot track them; we bridge changes with a
-    // setState bump instead. Subscribe the model-row form (`id !== undefined`)
-    // to claims. Selector-only reads track MobX model data; callers displaying
-    // ownership use the row form's `claims` / `claimed` result.
-    const [claimVersion, setClaimVersion] = useState(0);
-    useEffect(() => {
-        if (!engine || id === undefined)
-            return;
-        return engine.claims.onChange(() => { setClaimVersion((version) => version + 1); });
-    }, [engine, id]);
-    const selected = useReactive(() => {
-        if (!engine || !isSelectorOnly || typeof modelOrSelect !== 'function') {
-            return undefined;
+    // The initial row is a seed for this client/model/id, not a permanent
+    // fallback: once local data has been committed to the UI, its removal must
+    // not resurrect the seed. Only committed effects change this marker.
+    // These dependencies define when the seed belongs to a different row.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const seed = useMemo(() => ({ received: false }), [engine, modelClient, id]);
+    const reading = modelOrSelect !== undefined;
+    const subscribe = useCallback((notify) => {
+        if (!engine || !reading)
+            return () => undefined;
+        return engine.claims.onChange(notify);
+    }, [engine, reading]);
+    const value = useReactive(() => {
+        if (isSelectorOnly && typeof modelOrSelect === 'function') {
+            return engine ? modelOrSelect(reactiveReads(engine)) : undefined;
         }
-        // The selector runs against the real engine — reads inside it return the
-        // pool's model instances. `snapshotValue` then converts the RESULT to
-        // plain snapshot rows, which is what the selector's `AbloReads`
-        // parameter type already promised.
-        return snapshotValue(modelOrSelect(reactiveReads(engine)));
-    });
-    const modelResult = useReactive(() => {
-        void claimVersion;
-        return readModelResult(engine, modelClient, id, initial);
+        if (modelOrSelect) {
+            return readModelResult(engine, modelClient, id, seed.received ? undefined : initial);
+        }
+        return undefined;
+    }, {
+        subscribe,
+        // The same seed produces the server HTML and the first hydration render,
+        // even if the browser already has a newer row or claim in its local cache.
+        ...(id !== undefined && initial !== undefined ? {
+            serverSnapshot: () => ({ data: initial, claims: EMPTY_CLAIMS, claimed: false }),
+        } : {}),
     });
-    if (isSelectorOnly)
-        return selected;
-    if (modelOrSelect)
-        return modelResult;
+    useEffect(() => {
+        if (id !== undefined && modelClient?.local.get(id) !== undefined)
+            seed.received = true;
+    }, [seed, modelClient, id, value]);
+    if (isSelectorOnly || modelOrSelect)
+        return value;
     return engine;
 }
-/** @internal Resolve the bound or legacy provider client through one rebind seam. */
-export function useAbloClientImpl(boundClient) {
+/** @internal Resolve the nearest provider's client through one schema rebind. */
+export function useAbloClient() {
     const ctx = useContext(AbloInternalContext);
-    // The bound client wins — it is already `Ablo<R>`, no rebinding. The
-    // fallback is the ONE remaining schema rebind in the SDK; it retires with
-    // the last legacy provider mount (docs/plans/typed-react-binding.md).
-    const engine = boundClient ?? (ctx?.engine ? rebindEngine(ctx.engine) : null);
-    return engine;
+    return ctx?.engine ? rebindEngine(ctx.engine) : null;
 }

package/dist/react/useMutators.d.ts

@@ -14,7 +14,7 @@ import type { ResolveSchema } from '@abloatai/transaction/types/global';
  * If a mutator throws, the error propagates to the caller and any writes it
  * already dispatched stay in place — there is no automatic rollback. Wrap the
  * call in your own try/catch and issue compensating writes when you need to
- * undo a partial change, or pass an `undoScope` (see {@link UseMutatorsOptions})
+ * undo a partial change, or pass an `undoScope` (see {@link useMutators.Options})
  * to record inverses for undo and redo.
  */
 /**
@@ -34,23 +34,26 @@ export type InvokerFor<F> = F extends (options: infer O) => Promise<infer R> ? O
  * The hook's return shape: same tree as the input `MutatorDefs`, every leaf
  * rewritten to its invoker form.
  */
-export type MutatorInvokers<M> = {
-    [K in keyof M]: {
-        [N in keyof M[K]]: InvokerFor<M[K][N]>;
-    };
-};
-/**
- * Options passed to `useMutators`. When `undoScope` is set, every mutator
- * invocation is wrapped in a `RecordingMutation` and its inverses are
- * pushed to the scope as one undo entry.
- */
-export interface UseMutatorsOptions<S extends Schema> {
-    /** Target undo scope for recording inverses. Omit to disable recording. */
-    undoScope?: UndoScope<S>;
-}
 /** Mutator invokers (explicit schema arg). */
-export declare function useMutators<S extends Schema, M extends MutatorDefs<S>>(schema: S, mutators: M, options?: UseMutatorsOptions<S>): MutatorInvokers<M>;
+export declare function useMutators<S extends Schema, M extends MutatorDefs<S>>(schema: S, mutators: M, options?: useMutators.Options<S>): useMutators.Result<M>;
 /** Mutator invokers via the `Register` module augmentation. Schema comes
  * from the `SyncProvider`'s context; the mutator tree is typed against
  * `ResolveSchema` at the call site. */
-export declare function useMutators<M extends ResolveSchema extends Schema ? MutatorDefs<ResolveSchema> : MutatorDefs<Schema>>(mutators: M, options?: UseMutatorsOptions<ResolveSchema extends Schema ? ResolveSchema : Schema>): MutatorInvokers<M>;
+export declare function useMutators<M extends ResolveSchema extends Schema ? MutatorDefs<ResolveSchema> : MutatorDefs<Schema>>(mutators: M, options?: useMutators.Options<ResolveSchema extends Schema ? ResolveSchema : Schema>): useMutators.Result<M>;
+/** Optional annotations for custom mutation bindings. */
+export declare namespace useMutators {
+    type Result<M> = {
+        [K in keyof M]: {
+            [N in keyof M[K]]: InvokerFor<M[K][N]>;
+        };
+    };
+    /**
+     * Options passed to `useMutators`. When `undoScope` is set, every mutator
+     * invocation is wrapped in a `RecordingMutation` and its inverses are
+     * pushed to the scope as one undo entry.
+     */
+    interface Options<S extends Schema> {
+        /** Target undo scope for recording inverses. Omit to disable recording. */
+        undoScope?: UndoScope<S>;
+    }
+}

package/dist/react/usePresence.js

@@ -1,10 +1,11 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { AbloValidationError } from '@abloatai/transaction/errors';
 import { getModelClientMeta, } from '../local/client/createModelOperations.js';
-import { useAbloClientImpl } from './useAblo.js';
+import { useAbloClient } from './useAblo.js';
+import { useReactive } from './useReactive.js';
 export function usePresence(modelOrSelect, recordId) {
-    const engine = useAbloClientImpl(null);
+    const engine = useAbloClient();
     return usePresenceImpl(engine, modelOrSelect, recordId);
 }
 /** @internal Shared by the global hook and schema-bound React factory. */
@@ -21,8 +22,8 @@ export function usePresenceImpl(engine, modelOrSelect, recordId) {
     if (modelClient !== null && presence === undefined) {
         throw new AbloValidationError('usePresence requires a model from the reactive Ablo client.', { code: 'invalid_request', param: 'modelClient' });
     }
-    const [, render] = useState(0);
-    useEffect(() => presence?.subscribe(() => { render((version) => version + 1); }), [presence]);
+    const subscribe = useCallback((notify) => 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/dist/react/useReactive.d.ts

@@ -0,0 +1,12 @@
+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 declare function useReactive<T>(compute: () => T, options?: ObservationOptions<T>): T;
+export {};

package/dist/react/useReactive.js

@@ -0,0 +1,57 @@
+'use client';
+import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { reaction } from 'mobx';
+import { equalSnapshots, snapshotValue } from './snapshot.js';
+/**
+ * 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(compute, options = {}) {
+    const { equals = equalSnapshots, subscribe, serverSnapshot = compute } = options;
+    const committed = useRef(null);
+    const observation = useMemo(() => {
+        let cached = committed.current;
+        let server = null;
+        const failed = Symbol('selector error');
+        const read = () => {
+            const next = snapshotValue(compute());
+            if (cached === null || !equals(cached.value, next))
+                cached = { value: next };
+            return cached.value;
+        };
+        return {
+            read,
+            readServer: () => {
+                server ??= { value: snapshotValue(serverSnapshot()) };
+                return server.value;
+            },
+            subscribe: (notify) => {
+                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;
+                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/dist/react/useUndoScope.d.ts

@@ -1,34 +1,20 @@
 import type { Schema } from '@abloatai/transaction/schema/schema';
 import { type UndoScope, type UndoScopeOptions } from '../local/mutators/UndoManager.js';
 import type { ResolveSchema } from '@abloatai/transaction/types/global';
-/**
- * Provides per-surface undo and redo for mutator invocations. Each named scope
- * owns an independent undo/redo stack, so different parts of your app — a main
- * editor, a sidebar form — can undo separately without stepping on each other.
- *
- * Wire the returned `scope` into `useMutators(schema, mutators, { undoScope:
- * scope })` and those invocations become recorded. `undo()` and `redo()` replay
- * the captured inverses and forwards as new transactions that do not record
- * themselves; the manager moves the entry between the two stacks explicitly.
- *
- * @example
- * const { undo, redo, canUndo, canRedo, scope } = useUndoScope('report-editor');
- * const mutate = useMutators(schema, reportMutators, { undoScope: scope });
- *
- * // Cmd+Z handler
- * 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;
-}
 /** Per-surface undo/redo (explicit schema arg). */
-export declare function useUndoScope<S extends Schema>(schema: S, name: string, options?: UndoScopeOptions): UseUndoScopeResult<S>;
+export declare function useUndoScope<S extends Schema>(schema: S, name: string, options?: UndoScopeOptions): useUndoScope.Result<S>;
 /** Per-surface undo/redo via the `Register` module augmentation. */
-export declare function useUndoScope(name: string, options?: UndoScopeOptions): UseUndoScopeResult<ResolveSchema extends Schema ? ResolveSchema : Schema>;
+export declare function useUndoScope(name: string, options?: UndoScopeOptions): useUndoScope.Result<ResolveSchema extends Schema ? ResolveSchema : Schema>;
+/** The state returned by an undo scope; inferred for ordinary hook calls. */
+export declare namespace useUndoScope {
+    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/dist/react/useUndoScope.js

@@ -3,6 +3,23 @@ import { useEffect, useMemo, useState } from 'react';
 import { UndoManager, } from '../local/mutators/UndoManager.js';
 import { useSyncContext } from './context.js';
 import { AbloValidationError } from '@abloatai/transaction/errors';
+/**
+ * Provides per-surface undo and redo for mutator invocations. Each named scope
+ * owns an independent undo/redo stack, so different parts of your app — a main
+ * editor, a sidebar form — can undo separately without stepping on each other.
+ *
+ * Wire the returned `scope` into `useMutators(schema, mutators, { undoScope:
+ * scope })` and those invocations become recorded. `undo()` and `redo()` replay
+ * the captured inverses and forwards as new transactions that do not record
+ * themselves; the manager moves the entry between the two stacks explicitly.
+ *
+ * @example
+ * const { undo, redo, canUndo, canRedo, scope } = useUndoScope('report-editor');
+ * const mutate = useMutators(schema, reportMutators, { undoScope: scope });
+ *
+ * // Cmd+Z handler
+ * useHotkey('mod+z', () => { if (canUndo) void undo(); });
+ */
 // 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.

package/dist/react.d.ts

@@ -1,19 +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.js

@@ -1,15 +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 } from './react/useSyncStatus.js';
-export { usePresence, } from './react/usePresence.js';
-export { useMutationFailureListener, } from './react/useMutationFailureListener.js';
-export { AbloProvider, usePeers, useSync, useSyncStore, } from './react/AbloProvider.js';
-export { ClientSideSuspense, } from './react/ClientSideSuspense.js';
-export { DefaultFallback } from './react/DefaultFallback.js';
-export { createAbloReact, } from './react/createAbloReact.js';
-export { useAblo, } from './react/useAblo.js';
-export { useMutators, } from './react/useMutators.js';
-export { useUndoScope, } from './react/useUndoScope.js';
-export { ModelScope } from '@abloatai/transaction/types';
+/** 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abloatai/humans",
-  "version": "0.63.1",
+  "version": "0.64.0",
   "description": "The optional human-facing local-state package for Ablo: presence, live queries, and React bindings.",
   "license": "Apache-2.0",
   "type": "module",
@@ -71,7 +71,8 @@
     "lint:eslint": "eslint . --cache --suppressions-location eslint-suppressions.json",
     "check:boundary": "node scripts/check-boundary.mjs",
     "test:integration": "npm run build && node scripts/check-package-integration.mjs",
-    "lint:pkg": "publint"
+    "lint:pkg": "publint",
+    "typecheck:react": "tsc -p typetests/binding/tsconfig.json"
   },
   "publishConfig": {
     "access": "public",
@@ -84,7 +85,7 @@
     "directory": "packages/humans"
   },
   "dependencies": {
-    "@abloatai/transaction": "^0.63.1",
+    "@abloatai/transaction": "^0.64.0",
     "mobx": "^6.13.7",
     "uuid": "^11.1.0",
     "zod": "^4.4.3"

package/src/Ablo.ts

@@ -264,6 +264,11 @@ import type * as _Global from '@abloatai/transaction/types/global';
  */
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Ablo {
+  /** Payload delivered by the core client's onMutationFailure subscription. */
+  export type MutationFailure = Parameters<Parameters<AbloClient<SchemaRecord>['onMutationFailure']>[0]>[0];
+  /** Current client lifecycle, also selected through React's useAblo. */
+  export type Status = import('./local/client/status.js').ClientStatus;
+
   // ── Factory options ────────────────────────────────────────────────
   export type Options<S extends SchemaRecord = SchemaRecord> = AbloOptions<S>;
   /**

package/src/client.ts

@@ -19,9 +19,9 @@ import type {
   InferRow,
 } from '@abloatai/transaction/schema/schema';
 import type { InstanceCache } from './local/InstanceCache.js';
-import type { SyncStoreContract } from './react/context.js';
+import type { SyncStoreContract } from './local/storeContract.js';
 import type { SyncWebSocket, CoreSyncEventMap } from './local/sync/SyncWebSocket.js';
-import type { SyncStatus } from './local/BaseSyncedStore.js';
+import type { ClientStatus } from './local/client/status.js';
 import type { ModelOperations } from './local/client/createModelOperations.js';
 import type {
   ClaimResource,
@@ -39,7 +39,10 @@ export type AbloClient<S extends SchemaRecord> = {
     Model<Schema<S>, K>,
     InferCreate<Schema<S>, K>
   >;
-} & {
+} & AbloCore<S>;
+
+/** Core members stay intact even when the model schema is not registered. */
+interface AbloCore<S extends SchemaRecord> {
   /**
    * Wait for the sync engine to finish its initial bootstrap.
    * Resolves once entity data is loaded and the WebSocket is connected.
@@ -65,7 +68,7 @@ export type AbloClient<S extends SchemaRecord> = {
    * acknowledged everything before continuing — for example, before
    * navigating away, before triggering a server-side workflow, or in tests.
    *
-   * Resolves when `syncStatus.pendingChanges` reaches 0. If the engine is
+   * Resolves when all pending local changes are confirmed. If the engine is
    * offline, this waits until reconnect + flush completes.
    *
    * ```ts
@@ -205,32 +208,10 @@ export type AbloClient<S extends SchemaRecord> = {
   waitForConfirmation(modelName: string, modelId: string): Promise<void>;
 
   /**
-   * Reactive sync status — a MobX observable.
-   *
-   * Single source of truth for "what's the sync engine doing?" Contains:
-   * - `state`: `'idle' | 'syncing' | 'error' | 'offline' | 'reconnecting'`
-   * - `progress`: 0-100 for bootstrap progress
-   * - `error?`: Error object when `state === 'error'`
-   * - `pendingChanges`: Number of unconfirmed mutations in the queue
-   * - `lastSyncAt?`: Timestamp of the last successful delta processing
-   * - `offlineSince?`: When the connection dropped
-   * - `isSessionError`: True when the error requires re-authentication
-   *
-   * React components using `observer()` re-render automatically when
-   * any field changes — no manual subscription or polling needed.
-   *
-   * ```tsx
-   * import { observer } from 'mobx-react-lite';
-   *
-   * const SyncIndicator = observer(() => {
-   *   if (sync.syncStatus.state === 'syncing') return <Spinner />;
-   *   if (sync.syncStatus.state === 'error') return <Error msg={sync.syncStatus.error} />;
-   *   if (sync.syncStatus.state === 'offline') return <OfflineBadge />;
-   *   return null;
-   * });
-   * ```
+   * Current connection and confirmation state. Available before ready().
+   * React reads the same value with `useAblo(ablo => ablo.status)`.
    */
-  readonly syncStatus: SyncStatus;
+  readonly status: ClientStatus;
 
   /**
    * Session-owned live activity projected from this client's existing
@@ -290,7 +271,7 @@ export type AbloClient<S extends SchemaRecord> = {
    * no window in which this is absent and nothing needs to guard for one.
    */
   readonly _ws: SyncWebSocket;
-};
+}
 
 /**
  * The reactive-read client a `useAblo` selector receives. The same surface as
@@ -301,7 +282,7 @@ export type AbloClient<S extends SchemaRecord> = {
  * compile error here instead of a silent runtime `undefined`; compose
  * relations through selectors or hooks that resolve the pool's instance.
  */
-export type AbloReads<S extends SchemaRecord> = Omit<AbloClient<S>, keyof S & string> & {
+export type AbloReads<S extends SchemaRecord> = AbloCore<S> & {
   readonly [K in keyof S & string]: ModelOperations<
     InferRow<Schema<S>, K>,
     InferCreate<Schema<S>, K>

package/src/local/client/reactiveEngine.ts

@@ -29,6 +29,7 @@ import {
 	streamTarget,
 	subTarget,
 } from '@abloatai/transaction/coordination';
+import { readStatus } from './status.js';
 import { validateAbloOptions } from './validateAbloOptions.js';
 import type { StoreCluster } from './storeCluster.js';
 import { startStoreLifecycle } from './storeLifecycle.js';
@@ -842,11 +843,9 @@ export function buildReactiveEngine<const S extends SchemaRecord>(
       return store.waitForConfirmation(modelName, modelId);
     },
 
-    // Expose the store's MobX observable directly — single source of truth.
-    // React components using observer() will re-render automatically on
-    // any state change (syncing, error, offline, pendingChanges, progress).
-    get syncStatus() {
-      return store.syncStatus;
+    // One core lifecycle projection; React selects the same observable reads.
+    get status() {
+      return readStatus(store);
     },
 
     // The humans capability owns the connection-backed presence projection.

package/src/local/client/status.ts

@@ -0,0 +1,20 @@
+import type { SyncStoreContract } from '../storeContract.js';
+
+/** The client lifecycle, shared by every framework binding. */
+export type ClientStatus =
+  | { 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' };
+
+export function readStatus(store: SyncStoreContract): ClientStatus {
+  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 };
+  return { name: 'connecting', progress };
+}

package/src/local/client/storeLifecycle.ts

@@ -301,7 +301,7 @@ export function startStoreLifecycle<S extends SchemaRecord>(
         //
         // The store.initialize() generator updates store.syncStatus as it
         // progresses (syncing → idle on success, error on failure), so the
-        // consumer's `sync.syncStatus` observable reflects real-time state.
+        // consumer's `ablo.status` projection reflects real-time state.
         // Resolve bootstrap mode: explicit option wins; otherwise
         // agents default to 'none' (transactional participant — see
         // option doc) and everyone else defaults to 'full'.
@@ -386,7 +386,7 @@ export function startStoreLifecycle<S extends SchemaRecord>(
   if (!validationError && internalOptions.autoStart) {
     void ready().catch(() => {
       // Error is captured in store.syncStatus; consumers should check
-      // `sync.syncStatus.state === 'error'` to detect failures.
+      // `ablo.status.name === 'disconnected'` to detect failures.
     });
   }