@fatagnus/dink-sync 1.0.0

package/dist/react/SyncedOfflineEdgeProvider.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SyncedOfflineEdgeProvider - React context provider for SyncedOfflineEdge.
+ *
+ * Provides the SyncedOfflineEdge instance to the component tree and handles
+ * initialization lifecycle including loading and error states.
+ *
+ * @example
+ * ```tsx
+ * import { SyncedOfflineEdgeProvider, useSyncedOfflineEdgeClient } from '@fatagnus/dink-sync/react';
+ * import { MemoryPersistence } from '@fatagnus/dink-sync/persistence';
+ *
+ * function App() {
+ *   return (
+ *     <SyncedOfflineEdgeProvider
+ *       config={{ serverUrl: 'nats://localhost:4222', apiKey: 'your-api-key' }}
+ *       persistence={new MemoryPersistence()}
+ *       syncConfig={{ tasks: 'auto', drafts: 'manual' }}
+ *     >
+ *       <TaskList />
+ *     </SyncedOfflineEdgeProvider>
+ *   );
+ * }
+ *
+ * function TaskList() {
+ *   const { edge, isReady } = useSyncedOfflineEdgeClient();
+ *   if (!isReady) return <Loading />;
+ *
+ *   const tasks = edge.collection<Task>('tasks');
+ *   // ...
+ * }
+ * ```
+ */
+import { createContext, useContext, useState, useEffect, useRef, } from 'react';
+import { createSyncedOfflineEdge } from '../client/synced-offline-edge.js';
+/**
+ * Internal context for the SyncedOfflineEdge provider.
+ * Exported for use by custom hooks.
+ */
+export const SyncedOfflineEdgeContext = createContext(null);
+/**
+ * SyncedOfflineEdgeProvider component.
+ *
+ * Wraps your app to provide the SyncedOfflineEdge to all child components.
+ * Handles initialization on mount and cleanup on unmount.
+ */
+export function SyncedOfflineEdgeProvider({ config, persistence, syncConfig, hooks, children, onError, transport, }) {
+    const [state, setState] = useState({
+        edge: null,
+        isLoading: true,
+        isReady: false,
+        error: null,
+    });
+    // Track the edge instance for cleanup
+    const edgeRef = useRef(null);
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        mountedRef.current = true;
+        const initializeEdge = async () => {
+            try {
+                // Create the SyncedOfflineEdge instance
+                const edge = await createSyncedOfflineEdge({
+                    persistence,
+                    config,
+                    syncConfig,
+                    hooks,
+                    transport,
+                });
+                edgeRef.current = edge;
+                if (mountedRef.current) {
+                    setState({
+                        edge,
+                        isLoading: false,
+                        isReady: true,
+                        error: null,
+                    });
+                }
+                else {
+                    // Component unmounted during initialization, cleanup
+                    await edge.destroy();
+                }
+            }
+            catch (err) {
+                const error = err instanceof Error ? err : new Error(String(err));
+                if (mountedRef.current) {
+                    setState({
+                        edge: null,
+                        isLoading: false,
+                        isReady: false,
+                        error,
+                    });
+                    onError?.(error);
+                }
+            }
+        };
+        initializeEdge();
+        // Cleanup on unmount
+        return () => {
+            mountedRef.current = false;
+            if (edgeRef.current) {
+                edgeRef.current.destroy().catch((err) => {
+                    console.error('Error destroying SyncedOfflineEdge:', err);
+                });
+                edgeRef.current = null;
+            }
+        };
+    }, [config, persistence, syncConfig, hooks, onError, transport]);
+    return (_jsx(SyncedOfflineEdgeContext.Provider, { value: state, children: children }));
+}
+/**
+ * Hook to access the SyncedOfflineEdge context.
+ *
+ * Returns the full context state including loading state, error, and the edge instance.
+ *
+ * @throws Error if used outside of SyncedOfflineEdgeProvider
+ *
+ * @example
+ * ```tsx
+ * function TaskList() {
+ *   const { edge, isLoading, isReady, error } = useSyncedOfflineEdgeClient();
+ *
+ *   if (isLoading) return <Loading />;
+ *   if (error) return <Error error={error} />;
+ *   if (!isReady) return null;
+ *
+ *   const tasks = edge.collection<Task>('tasks');
+ *   // ...
+ * }
+ * ```
+ */
+export function useSyncedOfflineEdgeClient() {
+    const context = useContext(SyncedOfflineEdgeContext);
+    if (context === null) {
+        throw new Error('useSyncedOfflineEdgeClient must be used within a SyncedOfflineEdgeProvider');
+    }
+    return context;
+}
+//# sourceMappingURL=SyncedOfflineEdgeProvider.js.map

package/dist/react/SyncedOfflineEdgeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SyncedOfflineEdgeProvider.js","sourceRoot":"","sources":["../../src/react/SyncedOfflineEdgeProvider.tsx"],"names":[],"mappings":"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"}

package/dist/react/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * React hooks for the dink offline-first sync SDK.
+ *
+ * @example
+ * ```tsx
+ * import { useCollection, useSyncStatus, useConnectionState } from '@fatagnus/dink-sync/react';
+ *
+ * function TaskList() {
+ *   const { data: tasks, isLoading } = useCollection<Task>(tasksCollection);
+ *   const connectionState = useConnectionState(client);
+ *
+ *   return (
+ *     <div>
+ *       <SyncIndicator state={connectionState} />
+ *       {tasks.map(task => (
+ *         <TaskItem key={task.id} task={task} />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ *
+ * function TaskItem({ task }: { task: SyncedDocument<Task> }) {
+ *   const syncStatus = useSyncStatus(task);
+ *
+ *   return (
+ *     <div className={syncStatus.isRejected ? 'error' : ''}>
+ *       {task.title}
+ *       {syncStatus.isPending && <Spinner />}
+ *       {syncStatus.isRejected && <ErrorBadge error={syncStatus.error} />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export { useCollection, type UseCollectionResult, type UseCollectionOptions, } from './useCollection.js';
+export { useSyncStatus, type SyncStatusResult, } from './useSyncStatus.js';
+export { useConnectionState, type ConnectionStateResult, } from './useConnectionState.js';
+export { useSyncRejected, type UseSyncRejectedOptions, } from './useSyncRejected.js';
+export { useDocumentSyncStatus, type UseDocumentSyncStatusResult, } from './useDocumentSyncStatus.js';
+export { usePendingChanges, type UsePendingChangesResult, } from './usePendingChanges.js';
+export { useSyncProgress, type UseSyncProgressResult, type SyncProgress, } from './useSyncProgress.js';
+export { useRejectedDocuments, type UseRejectedDocumentsResult, type RejectedDocument, } from './useRejectedDocuments.js';
+export { OfflineEdgeProvider, useOfflineEdgeClient, type OfflineEdgeProviderProps, } from './OfflineEdgeProvider.js';
+export { SyncedOfflineEdgeProvider, SyncedOfflineEdgeContext, useSyncedOfflineEdgeClient, type SyncedOfflineEdgeProviderProps, } from './SyncedOfflineEdgeProvider.js';
+export { useOfflineEdge, type UseOfflineEdgeResult, } from './useOfflineEdge.js';
+export { useSyncedOfflineEdge, type UseSyncedOfflineEdgeResult, } from './useSyncedOfflineEdge.js';
+export { useSyncControls, type UseSyncControlsResult, } from './useSyncControls.js';
+export { useCollectionSyncMode, type UseCollectionSyncModeResult, } from './useCollectionSyncMode.js';
+export { SyncStatus, SyncErrorCode, ConnectionState, type SyncMetadata, type SyncError, type SyncedDocument, type SyncRejectedEvent, type ConflictInfo, type ConflictDetectedEvent, type Collection, type OfflineEdgeClient, } from '../client/types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EACL,aAAa,EACb,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,aAAa,EACb,KAAK,gBAAgB,GACtB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,kBAAkB,EAClB,KAAK,qBAAqB,GAC3B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,eAAe,EACf,KAAK,sBAAsB,GAC5B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,qBAAqB,EACrB,KAAK,2BAA2B,GACjC,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,iBAAiB,EACjB,KAAK,uBAAuB,GAC7B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,eAAe,EACf,KAAK,qBAAqB,EAC1B,KAAK,YAAY,GAClB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,oBAAoB,EACpB,KAAK,0BAA0B,EAC/B,KAAK,gBAAgB,GACtB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,KAAK,wBAAwB,GAC9B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,yBAAyB,EACzB,wBAAwB,EACxB,0BAA0B,EAC1B,KAAK,8BAA8B,GACpC,MAAM,gCAAgC,CAAC;AAExC,OAAO,EACL,cAAc,EACd,KAAK,oBAAoB,GAC1B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,oBAAoB,EACpB,KAAK,0BAA0B,GAChC,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,eAAe,EACf,KAAK,qBAAqB,GAC3B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,qBAAqB,EACrB,KAAK,2BAA2B,GACjC,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EACL,UAAU,EACV,aAAa,EACb,eAAe,EACf,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,iBAAiB,GACvB,MAAM,oBAAoB,CAAC"}

package/dist/react/index.js

@@ -0,0 +1,51 @@
+/**
+ * React hooks for the dink offline-first sync SDK.
+ *
+ * @example
+ * ```tsx
+ * import { useCollection, useSyncStatus, useConnectionState } from '@fatagnus/dink-sync/react';
+ *
+ * function TaskList() {
+ *   const { data: tasks, isLoading } = useCollection<Task>(tasksCollection);
+ *   const connectionState = useConnectionState(client);
+ *
+ *   return (
+ *     <div>
+ *       <SyncIndicator state={connectionState} />
+ *       {tasks.map(task => (
+ *         <TaskItem key={task.id} task={task} />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ *
+ * function TaskItem({ task }: { task: SyncedDocument<Task> }) {
+ *   const syncStatus = useSyncStatus(task);
+ *
+ *   return (
+ *     <div className={syncStatus.isRejected ? 'error' : ''}>
+ *       {task.title}
+ *       {syncStatus.isPending && <Spinner />}
+ *       {syncStatus.isRejected && <ErrorBadge error={syncStatus.error} />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export { useCollection, } from './useCollection.js';
+export { useSyncStatus, } from './useSyncStatus.js';
+export { useConnectionState, } from './useConnectionState.js';
+export { useSyncRejected, } from './useSyncRejected.js';
+export { useDocumentSyncStatus, } from './useDocumentSyncStatus.js';
+export { usePendingChanges, } from './usePendingChanges.js';
+export { useSyncProgress, } from './useSyncProgress.js';
+export { useRejectedDocuments, } from './useRejectedDocuments.js';
+export { OfflineEdgeProvider, useOfflineEdgeClient, } from './OfflineEdgeProvider.js';
+export { SyncedOfflineEdgeProvider, SyncedOfflineEdgeContext, useSyncedOfflineEdgeClient, } from './SyncedOfflineEdgeProvider.js';
+export { useOfflineEdge, } from './useOfflineEdge.js';
+export { useSyncedOfflineEdge, } from './useSyncedOfflineEdge.js';
+export { useSyncControls, } from './useSyncControls.js';
+export { useCollectionSyncMode, } from './useCollectionSyncMode.js';
+// Re-export types that are useful for React consumers
+export { SyncStatus, SyncErrorCode, ConnectionState, } from '../client/types.js';
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EACL,aAAa,GAGd,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,aAAa,GAEd,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,kBAAkB,GAEnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,eAAe,GAEhB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,qBAAqB,GAEtB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,iBAAiB,GAElB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,eAAe,GAGhB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,oBAAoB,GAGrB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,mBAAmB,EACnB,oBAAoB,GAErB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,yBAAyB,EACzB,wBAAwB,EACxB,0BAA0B,GAE3B,MAAM,gCAAgC,CAAC;AAExC,OAAO,EACL,cAAc,GAEf,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,oBAAoB,GAErB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,eAAe,GAEhB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,qBAAqB,GAEtB,MAAM,4BAA4B,CAAC;AAEpC,sDAAsD;AACtD,OAAO,EACL,UAAU,EACV,aAAa,EACb,eAAe,GAShB,MAAM,oBAAoB,CAAC"}

package/dist/react/useCollection.d.ts

@@ -0,0 +1,77 @@
+/**
+ * useCollection - React hook for subscribing to a collection with reactive updates.
+ */
+import { type Collection, type SyncedDocument } from '../client/types.js';
+/**
+ * Options for useCollection hook.
+ */
+export interface UseCollectionOptions {
+    /** If true, don't subscribe to updates (useful for one-time fetches) */
+    readonly skip?: boolean;
+}
+/**
+ * Result of useCollection hook.
+ */
+export interface UseCollectionResult<T extends {
+    id: string;
+}> {
+    /** Array of documents with sync metadata */
+    readonly data: SyncedDocument<T>[];
+    /** True while initial data is loading */
+    readonly isLoading: boolean;
+    /** Error if initial load failed */
+    readonly error: Error | null;
+    /** Refetch data manually */
+    readonly refetch: () => Promise<void>;
+    /** Count of documents with local (unsynced) changes */
+    readonly pendingCount: number;
+    /** Count of documents with rejected sync */
+    readonly rejectedCount: number;
+    /** True if any documents have pending changes */
+    readonly hasPendingChanges: boolean;
+    /** True if any documents have rejected syncs */
+    readonly hasRejectedSyncs: boolean;
+    /** Get a specific document by ID */
+    readonly getById: (id: string) => SyncedDocument<T> | undefined;
+}
+/**
+ * Subscribe to a collection with reactive updates.
+ *
+ * @param collection - The collection to subscribe to
+ * @param options - Optional configuration
+ * @returns Reactive collection data with loading state and utilities
+ *
+ * @example
+ * ```tsx
+ * function TaskList() {
+ *   const tasks = client.collection<Task>('tasks');
+ *   const {
+ *     data,
+ *     isLoading,
+ *     hasPendingChanges,
+ *     hasRejectedSyncs,
+ *     pendingCount
+ *   } = useCollection(tasks);
+ *
+ *   if (isLoading) return <Spinner />;
+ *
+ *   return (
+ *     <div>
+ *       {hasPendingChanges && (
+ *         <Banner>Syncing {pendingCount} changes...</Banner>
+ *       )}
+ *       {hasRejectedSyncs && (
+ *         <Banner variant="error">Some changes failed to sync</Banner>
+ *       )}
+ *       {data.map(task => (
+ *         <TaskItem key={task.id} task={task} />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useCollection<T extends {
+    id: string;
+}>(collection: Collection<T>, options?: UseCollectionOptions): UseCollectionResult<T>;
+//# sourceMappingURL=useCollection.d.ts.map

package/dist/react/useCollection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollection.d.ts","sourceRoot":"","sources":["../../src/react/useCollection.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAc,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEtF;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,wEAAwE;IACxE,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;IAC3D,4CAA4C;IAC5C,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,yCAAyC;IACzC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,mCAAmC;IACnC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,uDAAuD;IACvD,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,iDAAiD;IACjD,QAAQ,CAAC,iBAAiB,EAAE,OAAO,CAAC;IACpC,gDAAgD;IAChD,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACnC,oCAAoC;IACpC,QAAQ,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,cAAc,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;CACjE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EACpD,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,EACzB,OAAO,CAAC,EAAE,oBAAoB,GAC7B,mBAAmB,CAAC,CAAC,CAAC,CA+ExB"}

package/dist/react/useCollection.js

@@ -0,0 +1,113 @@
+/**
+ * useCollection - React hook for subscribing to a collection with reactive updates.
+ */
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { SyncStatus } from '../client/types.js';
+/**
+ * Subscribe to a collection with reactive updates.
+ *
+ * @param collection - The collection to subscribe to
+ * @param options - Optional configuration
+ * @returns Reactive collection data with loading state and utilities
+ *
+ * @example
+ * ```tsx
+ * function TaskList() {
+ *   const tasks = client.collection<Task>('tasks');
+ *   const {
+ *     data,
+ *     isLoading,
+ *     hasPendingChanges,
+ *     hasRejectedSyncs,
+ *     pendingCount
+ *   } = useCollection(tasks);
+ *
+ *   if (isLoading) return <Spinner />;
+ *
+ *   return (
+ *     <div>
+ *       {hasPendingChanges && (
+ *         <Banner>Syncing {pendingCount} changes...</Banner>
+ *       )}
+ *       {hasRejectedSyncs && (
+ *         <Banner variant="error">Some changes failed to sync</Banner>
+ *       )}
+ *       {data.map(task => (
+ *         <TaskItem key={task.id} task={task} />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useCollection(collection, options) {
+    const [data, setData] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const skip = options?.skip ?? false;
+    // Subscribe to collection changes
+    useEffect(() => {
+        if (skip) {
+            setIsLoading(false);
+            return;
+        }
+        let isMounted = true;
+        const unsubscribe = collection.subscribe((docs) => {
+            if (isMounted) {
+                setData(docs);
+                setIsLoading(false);
+                setError(null);
+            }
+        });
+        return () => {
+            isMounted = false;
+            unsubscribe();
+        };
+    }, [collection, skip]);
+    // Refetch function
+    const refetch = useCallback(async () => {
+        try {
+            setIsLoading(true);
+            const docs = await collection.list();
+            setData(docs);
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error(String(err)));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [collection]);
+    // Compute derived values
+    const { pendingCount, rejectedCount } = useMemo(() => {
+        let pending = 0;
+        let rejected = 0;
+        for (const doc of data) {
+            const status = doc._sync?.status;
+            if (status === SyncStatus.Local || status === SyncStatus.Syncing) {
+                pending++;
+            }
+            if (status === SyncStatus.Rejected) {
+                rejected++;
+            }
+        }
+        return { pendingCount: pending, rejectedCount: rejected };
+    }, [data]);
+    // Get document by ID
+    const getById = useCallback((id) => {
+        return data.find(doc => doc.id === id);
+    }, [data]);
+    return {
+        data,
+        isLoading,
+        error,
+        refetch,
+        pendingCount,
+        rejectedCount,
+        hasPendingChanges: pendingCount > 0,
+        hasRejectedSyncs: rejectedCount > 0,
+        getById,
+    };
+}
+//# sourceMappingURL=useCollection.js.map

package/dist/react/useCollection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollection.js","sourceRoot":"","sources":["../../src/react/useCollection.ts"],"names":[],"mappings":"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"}

package/dist/react/useCollectionSyncMode.d.ts

@@ -0,0 +1,61 @@
+/**
+ * useCollectionSyncMode - React hook for getting and setting sync mode for a collection.
+ *
+ * Provides a useState-like API for controlling per-collection sync behavior.
+ *
+ * Must be used within a SyncedOfflineEdgeProvider.
+ *
+ * @example
+ * ```tsx
+ * import { useCollectionSyncMode } from '@fatagnus/dink-sync/react';
+ *
+ * function SyncModeSelector({ collection }: { collection: string }) {
+ *   const [mode, setMode] = useCollectionSyncMode(collection);
+ *
+ *   return (
+ *     <select value={mode} onChange={(e) => setMode(e.target.value as SyncMode)}>
+ *       <option value="auto">Auto</option>
+ *       <option value="manual">Manual</option>
+ *       <option value="disabled">Disabled</option>
+ *     </select>
+ *   );
+ * }
+ * ```
+ */
+import type { SyncMode } from '../client/synced-offline-edge-types.js';
+/**
+ * Result of useCollectionSyncMode hook.
+ * A tuple similar to useState: [currentMode, setMode]
+ */
+export type UseCollectionSyncModeResult = [SyncMode, (mode: SyncMode) => void];
+/**
+ * Hook to get and set sync mode for a specific collection.
+ *
+ * Returns a tuple [mode, setMode] similar to useState, where:
+ * - mode: The current sync mode for the collection ('auto' | 'manual' | 'disabled')
+ * - setMode: Function to update the sync mode
+ *
+ * The mode is reactive and will trigger re-renders when the sync mode changes,
+ * whether changed through this hook or via the edge directly.
+ *
+ * @param collection - The name of the collection
+ * @throws Error if used outside of SyncedOfflineEdgeProvider
+ *
+ * @example
+ * ```tsx
+ * function TaskSyncSettings() {
+ *   const [mode, setMode] = useCollectionSyncMode('tasks');
+ *
+ *   return (
+ *     <div>
+ *       <p>Current mode: {mode}</p>
+ *       <button onClick={() => setMode('manual')}>Switch to Manual</button>
+ *       <button onClick={() => setMode('auto')}>Switch to Auto</button>
+ *       <button onClick={() => setMode('disabled')}>Disable Sync</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useCollectionSyncMode(collection: string): UseCollectionSyncModeResult;
+//# sourceMappingURL=useCollectionSyncMode.d.ts.map

package/dist/react/useCollectionSyncMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollectionSyncMode.d.ts","sourceRoot":"","sources":["../../src/react/useCollectionSyncMode.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAEvE;;;GAGG;AACH,MAAM,MAAM,2BAA2B,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,2BAA2B,CA6CrF"}

package/dist/react/useCollectionSyncMode.js

@@ -0,0 +1,93 @@
+/**
+ * useCollectionSyncMode - React hook for getting and setting sync mode for a collection.
+ *
+ * Provides a useState-like API for controlling per-collection sync behavior.
+ *
+ * Must be used within a SyncedOfflineEdgeProvider.
+ *
+ * @example
+ * ```tsx
+ * import { useCollectionSyncMode } from '@fatagnus/dink-sync/react';
+ *
+ * function SyncModeSelector({ collection }: { collection: string }) {
+ *   const [mode, setMode] = useCollectionSyncMode(collection);
+ *
+ *   return (
+ *     <select value={mode} onChange={(e) => setMode(e.target.value as SyncMode)}>
+ *       <option value="auto">Auto</option>
+ *       <option value="manual">Manual</option>
+ *       <option value="disabled">Disabled</option>
+ *     </select>
+ *   );
+ * }
+ * ```
+ */
+import { useContext, useState, useCallback, useEffect, useRef } from 'react';
+import { SyncedOfflineEdgeContext } from './SyncedOfflineEdgeProvider.js';
+/**
+ * Hook to get and set sync mode for a specific collection.
+ *
+ * Returns a tuple [mode, setMode] similar to useState, where:
+ * - mode: The current sync mode for the collection ('auto' | 'manual' | 'disabled')
+ * - setMode: Function to update the sync mode
+ *
+ * The mode is reactive and will trigger re-renders when the sync mode changes,
+ * whether changed through this hook or via the edge directly.
+ *
+ * @param collection - The name of the collection
+ * @throws Error if used outside of SyncedOfflineEdgeProvider
+ *
+ * @example
+ * ```tsx
+ * function TaskSyncSettings() {
+ *   const [mode, setMode] = useCollectionSyncMode('tasks');
+ *
+ *   return (
+ *     <div>
+ *       <p>Current mode: {mode}</p>
+ *       <button onClick={() => setMode('manual')}>Switch to Manual</button>
+ *       <button onClick={() => setMode('auto')}>Switch to Auto</button>
+ *       <button onClick={() => setMode('disabled')}>Disable Sync</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useCollectionSyncMode(collection) {
+    const context = useContext(SyncedOfflineEdgeContext);
+    if (context === null) {
+        throw new Error('useCollectionSyncMode must be used within a SyncedOfflineEdgeProvider');
+    }
+    const { edge } = context;
+    // Track the current mode reactively
+    const [mode, setModeState] = useState(() => edge?.getSyncMode(collection) ?? 'auto');
+    // Store edge reference for stable callbacks
+    const edgeRef = useRef(edge);
+    edgeRef.current = edge;
+    // Update mode when edge becomes available or collection changes
+    useEffect(() => {
+        if (edge) {
+            setModeState(edge.getSyncMode(collection));
+        }
+    }, [edge, collection]);
+    // Subscribe to sync mode changes
+    useEffect(() => {
+        if (!edge)
+            return;
+        const unsubscribe = edge.onSyncModeChange((changedCollection, newMode) => {
+            if (changedCollection === collection) {
+                setModeState(newMode);
+            }
+        });
+        return unsubscribe;
+    }, [edge, collection]);
+    // Stable setMode callback that updates both edge and local state
+    const setMode = useCallback((newMode) => {
+        if (edgeRef.current) {
+            edgeRef.current.setSyncMode(collection, newMode);
+            // State will be updated via the onSyncModeChange subscription
+        }
+    }, [collection]);
+    return [mode, setMode];
+}
+//# sourceMappingURL=useCollectionSyncMode.js.map

package/dist/react/useCollectionSyncMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollectionSyncMode.js","sourceRoot":"","sources":["../../src/react/useCollectionSyncMode.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAS1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,qBAAqB,CAAC,UAAkB;IACtD,MAAM,OAAO,GAAG,UAAU,CAAC,wBAAwB,CAAC,CAAC;IAErD,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAC;IAC3F,CAAC;IAED,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAEzB,oCAAoC;IACpC,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAW,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,CAAC;IAE/F,4CAA4C;IAC5C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAEvB,gEAAgE;IAChE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,CAAC;YACT,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,iBAAiB,EAAE,OAAO,EAAE,EAAE;YACvE,IAAI,iBAAiB,KAAK,UAAU,EAAE,CAAC;gBACrC,YAAY,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,iEAAiE;IACjE,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,OAAiB,EAAE,EAAE;QAChD,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YACpB,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;YACjD,8DAA8D;QAChE,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AACzB,CAAC"}

package/dist/react/useConnectionState.d.ts

@@ -0,0 +1,44 @@
+/**
+ * useConnectionState - React hook for tracking connection state.
+ */
+import { ConnectionState, type OfflineEdgeClient, type Signal } from '../client/types.js';
+/**
+ * Result of useConnectionState with derived boolean flags.
+ */
+export interface ConnectionStateResult {
+    /** Current connection state */
+    readonly state: ConnectionState;
+    /** True if fully offline */
+    readonly isOffline: boolean;
+    /** True if attempting to connect */
+    readonly isConnecting: boolean;
+    /** True if connected and online */
+    readonly isOnline: boolean;
+    /** True if reconnecting after disconnect */
+    readonly isReconnecting: boolean;
+    /** True if in any connecting state (connecting or reconnecting) */
+    readonly isConnectingAny: boolean;
+}
+/**
+ * Subscribe to connection state changes from an OfflineEdgeClient.
+ *
+ * @param client - The offline edge client
+ * @returns Connection state with convenience boolean flags
+ *
+ * @example
+ * ```tsx
+ * function SyncIndicator() {
+ *   const { isOnline, isConnecting, isOffline } = useConnectionState(client);
+ *
+ *   if (isOnline) {
+ *     return <Badge color="green">Online</Badge>;
+ *   }
+ *   if (isConnecting) {
+ *     return <Badge color="yellow"><Spinner /> Connecting...</Badge>;
+ *   }
+ *   return <Badge color="gray">Offline</Badge>;
+ * }
+ * ```
+ */
+export declare function useConnectionState(client: OfflineEdgeClient | Signal<ConnectionState>): ConnectionStateResult;
+//# sourceMappingURL=useConnectionState.d.ts.map

package/dist/react/useConnectionState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConnectionState.d.ts","sourceRoot":"","sources":["../../src/react/useConnectionState.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,eAAe,EAAE,KAAK,iBAAiB,EAAE,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE1F;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;IAChC,4BAA4B;IAC5B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,oCAAoC;IACpC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,mCAAmC;IACnC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,4CAA4C;IAC5C,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;IACjC,mEAAmE;IACnE,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,iBAAiB,GAAG,MAAM,CAAC,eAAe,CAAC,GAClD,qBAAqB,CAsBvB"}