@replanejs/react 0.7.2 → 0.7.4

package/README.md

@@ -51,23 +51,26 @@ function MyComponent() {
 
 ### ReplaneProvider
 
-Provider component that makes the Replane client available to your component tree. Supports three usage patterns:
+Provider component that makes the Replane client available to your component tree. Supports four usage patterns:
 
 #### 1. With options (recommended)
 
-The provider creates and manages the client internally:
+The provider creates and manages the client internally. Use an Error Boundary to handle initialization errors:
 
 ```tsx
-<ReplaneProvider
-  options={{
-    baseUrl: 'https://your-replane-server.com',
-    sdkKey: 'your-sdk-key',
-  }}
-  loader={<LoadingSpinner />}
-  onError={(error) => console.error('Failed to initialize:', error)}
->
-  <App />
-</ReplaneProvider>
+import { ErrorBoundary } from 'react-error-boundary';
+
+<ErrorBoundary fallback={<div>Failed to load configuration</div>}>
+  <ReplaneProvider
+    options={{
+      baseUrl: 'https://your-replane-server.com',
+      sdkKey: 'your-sdk-key',
+    }}
+    loader={<LoadingSpinner />}
+  >
+    <App />
+  </ReplaneProvider>
+</ErrorBoundary>
 ```
 
 #### 2. With pre-created client
@@ -92,19 +95,48 @@ const client = await createReplaneClient({
 Integrates with React Suspense for loading states:
 
 ```tsx
-<Suspense fallback={<LoadingSpinner />}>
-  <ReplaneProvider
-    options={{
+<ErrorBoundary fallback={<div>Failed to load configuration</div>}>
+  <Suspense fallback={<LoadingSpinner />}>
+    <ReplaneProvider
+      options={{
+        baseUrl: 'https://your-replane-server.com',
+        sdkKey: 'your-sdk-key',
+      }}
+      suspense
+    >
+      <App />
+    </ReplaneProvider>
+  </Suspense>
+</ErrorBoundary>
+```
+
+#### 4. With snapshot (for SSR/hydration)
+
+Restore a client from a snapshot obtained on the server. This is synchronous and useful for SSR scenarios:
+
+```tsx
+// On the server
+const serverClient = await createReplaneClient({ baseUrl: '...', sdkKey: '...' });
+const snapshot = serverClient.getSnapshot();
+// Pass snapshot to client via props, context, or serialized HTML
+
+// On the client
+<ReplaneProvider
+  restoreOptions={{
+    snapshot,
+    // Optional: connect for live updates
+    connection: {
       baseUrl: 'https://your-replane-server.com',
       sdkKey: 'your-sdk-key',
-    }}
-    suspense
-  >
-    <App />
-  </ReplaneProvider>
-</Suspense>
+    },
+  }}
+>
+  <App />
+</ReplaneProvider>
 ```
 
+The restored client is immediately available with no loading state. If `connection` is provided, it will establish a connection for real-time updates in the background.
+
 ### useConfig
 
 Hook to retrieve a configuration value. Automatically subscribes to updates and re-renders when the value changes.
@@ -128,15 +160,15 @@ function MyComponent() {
 
 ### useReplane
 
-Hook to access the underlying Replane client directly:
+Hook to access the underlying Replane client directly. Returns the client instance:
 
 ```tsx
 function MyComponent() {
-  const { client } = useReplane();
+  const replane = useReplane();
 
   const handleClick = () => {
-    // Access client methods directly
-    const value = client.get('some-config');
+    // Access replane methods directly
+    const value = replane.get('some-config');
     console.log(value);
   };
 
@@ -144,6 +176,77 @@ function MyComponent() {
 }
 ```
 
+### createReplaneHook
+
+Factory function to create a typed version of `useReplane`. Returns a hook that provides the typed client directly:
+
+```tsx
+import { createReplaneHook } from '@replanejs/react';
+
+// Define your config types
+interface AppConfigs {
+  theme: { darkMode: boolean; primaryColor: string };
+  features: { beta: boolean; analytics: boolean };
+  maxItems: number;
+}
+
+// Create a typed hook
+const useAppReplane = createReplaneHook<AppConfigs>();
+
+function MyComponent() {
+  const replane = useAppReplane();
+
+  // replane.get is now typed - autocomplete works!
+  const theme = replane.get('theme');
+  //    ^? { darkMode: boolean; primaryColor: string }
+
+  return <div>Dark mode: {theme.darkMode ? 'on' : 'off'}</div>;
+}
+```
+
+### createConfigHook
+
+Factory function to create a typed version of `useConfig`. This provides autocomplete for config names and type inference for values:
+
+```tsx
+import { createConfigHook } from '@replanejs/react';
+
+// Define your config types
+interface AppConfigs {
+  theme: { darkMode: boolean; primaryColor: string };
+  features: { beta: boolean; analytics: boolean };
+  maxItems: number;
+}
+
+// Create a typed hook
+const useAppConfig = createConfigHook<AppConfigs>();
+
+function MyComponent() {
+  // Autocomplete for config names, automatic type inference
+  const theme = useAppConfig('theme');
+  //    ^? { darkMode: boolean; primaryColor: string }
+
+  const features = useAppConfig('features');
+  //    ^? { beta: boolean; analytics: boolean }
+
+  const maxItems = useAppConfig('maxItems');
+  //    ^? number
+
+  // With context override
+  const premiumFeatures = useAppConfig('features', {
+    context: { userId: '123', plan: 'premium' },
+  });
+
+  return (
+    <div>
+      <p>Dark mode: {theme.darkMode ? 'on' : 'off'}</p>
+      <p>Beta enabled: {features.beta ? 'yes' : 'no'}</p>
+      <p>Max items: {maxItems}</p>
+    </div>
+  );
+}
+```
+
 ### clearSuspenseCache
 
 Utility function to clear the suspense cache. Useful for testing or forcing re-initialization:
@@ -163,21 +266,95 @@ clearSuspenseCache();
 
 ## TypeScript
 
-The SDK is fully typed. You can provide a type parameter to get type-safe configuration values:
+The SDK is fully typed. For the best TypeScript experience, use the hook factory functions:
 
 ```tsx
-interface MyConfig {
-  theme: 'light' | 'dark';
-  maxItems: number;
-  features: {
-    analytics: boolean;
-    notifications: boolean;
+// Define all your config types in one interface
+interface AppConfigs {
+  'theme-config': {
+    darkMode: boolean;
+    primaryColor: string;
+  };
+  'feature-flags': {
+    newUI: boolean;
+    beta: boolean;
   };
+  'max-items': number;
+  'welcome-message': string;
 }
 
-// Type-safe hooks
-const { client } = useReplane<MyConfig>();
-const theme = useConfig<MyConfig['theme']>('theme');
+// Create typed hooks once
+const useAppReplane = createReplaneHook<AppConfigs>();
+const useAppConfig = createConfigHook<AppConfigs>();
+
+// Use throughout your app with full type safety
+function Settings() {
+  const theme = useAppConfig('theme-config');
+  //    ^? { darkMode: boolean; primaryColor: string }
+
+  const replane = useAppReplane();
+  const snapshot = replane.getSnapshot();
+  //    ^? { configs: ConfigSnapshot<AppConfigs>[] }
+
+  return (
+    <div style={{ color: theme.primaryColor }}>
+      Dark mode: {theme.darkMode ? 'enabled' : 'disabled'}
+    </div>
+  );
+}
+```
+
+## Error Handling
+
+The provider throws errors during rendering so they can be caught by React Error Boundaries:
+
+```tsx
+import { Component, ReactNode } from 'react';
+
+class ErrorBoundary extends Component<
+  { children: ReactNode; fallback: ReactNode },
+  { hasError: boolean }
+> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+}
+
+// Usage
+<ErrorBoundary fallback={<div>Configuration failed to load</div>}>
+  <ReplaneProvider options={options} loader={<Loading />}>
+    <App />
+  </ReplaneProvider>
+</ErrorBoundary>
+```
+
+Or use a library like `react-error-boundary`:
+
+```tsx
+import { ErrorBoundary } from 'react-error-boundary';
+
+<ErrorBoundary
+  fallbackRender={({ error, resetErrorBoundary }) => (
+    <div>
+      <p>Error: {error.message}</p>
+      <button onClick={resetErrorBoundary}>Retry</button>
+    </div>
+  )}
+  onReset={() => clearSuspenseCache()}
+>
+  <ReplaneProvider options={options} loader={<Loading />}>
+    <App />
+  </ReplaneProvider>
+</ErrorBoundary>
 ```
 
 ## License

package/dist/index.cjs

@@ -38,7 +38,7 @@ function getCacheKey(options) {
 * Hook to manage ReplaneClient creation internally.
 * Handles loading state and cleanup.
 */
-function useReplaneClient(options, onError) {
+function useReplaneClientInternal(options) {
 	const [state, setState] = (0, react.useState)({
 		status: "loading",
 		client: null,
@@ -63,13 +63,12 @@ function useReplaneClient(options, onError) {
 				});
 			} catch (err) {
 				if (cancelled) return;
-				const error = err instanceof Error ? err : new Error(String(err));
+				const error = err instanceof Error ? err : new Error(String(err), { cause: err });
 				setState({
 					status: "error",
 					client: null,
 					error
 				});
-				onError?.(error);
 			}
 		}
 		initClient();
@@ -124,6 +123,12 @@ function clearSuspenseCache(options) {
 function hasClient(props) {
 	return "client" in props && props.client !== void 0;
 }
+/**
+* Type guard to check if props contain restore options.
+*/
+function hasRestoreOptions(props) {
+	return "restoreOptions" in props && props.restoreOptions !== void 0;
+}
 
 //#endregion
 //#region src/provider.tsx
@@ -139,11 +144,12 @@ function ReplaneProviderWithClient({ client, children }) {
 }
 /**
 * Internal provider component for options-based client creation (non-suspense).
+* Throws errors during rendering so they can be caught by Error Boundaries.
 */
-function ReplaneProviderWithOptions({ options, children, loader, onError }) {
-	const state = useReplaneClient(options, onError);
+function ReplaneProviderWithOptions({ options, children, loader }) {
+	const state = useReplaneClientInternal(options);
 	if (state.status === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: loader ?? null });
-	if (state.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: loader ?? null });
+	if (state.status === "error") throw state.error;
 	const value = { client: state.client };
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneContext.Provider, {
 		value,
@@ -162,9 +168,21 @@ function ReplaneProviderWithSuspense({ options, children }) {
 	});
 }
 /**
+* Internal provider component for restoring client from snapshot.
+* Uses restoreReplaneClient which is synchronous.
+*/
+function ReplaneProviderWithSnapshot({ restoreOptions, children }) {
+	const client = (0, react.useMemo)(() => (0, __replanejs_sdk.restoreReplaneClient)(restoreOptions), [restoreOptions]);
+	const value = (0, react.useMemo)(() => ({ client }), [client]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneContext.Provider, {
+		value,
+		children
+	});
+}
+/**
 * Provider component that makes a ReplaneClient available to the component tree.
 *
-* Can be used in two ways:
+* Can be used in four ways:
 *
 * 1. With a pre-created client:
 * ```tsx
@@ -176,28 +194,52 @@ function ReplaneProviderWithSuspense({ options, children }) {
 *
 * 2. With options (client managed internally):
 * ```tsx
-* <ReplaneProvider
-*   options={{ baseUrl: '...', sdkKey: '...' }}
-*   loader={<LoadingSpinner />}
-* >
-*   <App />
-* </ReplaneProvider>
-* ```
-*
-* 3. With Suspense:
-* ```tsx
-* <Suspense fallback={<LoadingSpinner />}>
+* <ErrorBoundary fallback={<ErrorMessage />}>
 *   <ReplaneProvider
 *     options={{ baseUrl: '...', sdkKey: '...' }}
-*     suspense
+*     loader={<LoadingSpinner />}
 *   >
 *     <App />
 *   </ReplaneProvider>
-* </Suspense>
+* </ErrorBoundary>
+* ```
+*
+* 3. With Suspense:
+* ```tsx
+* <ErrorBoundary fallback={<ErrorMessage />}>
+*   <Suspense fallback={<LoadingSpinner />}>
+*     <ReplaneProvider
+*       options={{ baseUrl: '...', sdkKey: '...' }}
+*       suspense
+*     >
+*       <App />
+*     </ReplaneProvider>
+*   </Suspense>
+* </ErrorBoundary>
+* ```
+*
+* 4. With a snapshot (for SSR/hydration):
+* ```tsx
+* // On the server, get a snapshot from the client
+* const snapshot = serverClient.getSnapshot();
+*
+* // On the client, restore from the snapshot
+* <ReplaneProvider
+*   restoreOptions={{
+*     snapshot,
+*     connection: { baseUrl: '...', sdkKey: '...' } // optional, for live updates
+*   }}
+* >
+*   <App />
+* </ReplaneProvider>
 * ```
+*
+* Errors during client initialization are thrown during rendering,
+* allowing them to be caught by React Error Boundaries.
 */
 function ReplaneProvider(props) {
 	if (hasClient(props)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneProviderWithClient, { ...props });
+	if (hasRestoreOptions(props)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneProviderWithSnapshot, { ...props });
 	if (props.suspense) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneProviderWithSuspense, { ...props });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplaneProviderWithOptions, { ...props });
 }
@@ -207,18 +249,66 @@ function ReplaneProvider(props) {
 function useReplane() {
 	const context = (0, react.useContext)(ReplaneContext);
 	if (!context) throw new Error("useReplane must be used within a ReplaneProvider");
-	return context;
+	return context.client;
 }
 function useConfig(name, options) {
-	const { client } = useReplane();
+	const client = useReplane();
 	const value = (0, react.useSyncExternalStore)((onStoreChange) => {
 		return client.subscribe(name, onStoreChange);
 	}, () => client.get(name, options), () => client.get(name, options));
 	return value;
 }
+/**
+* Creates a typed version of useReplane hook.
+*
+* @example
+* ```tsx
+* interface AppConfigs {
+*   theme: { darkMode: boolean };
+*   features: { beta: boolean };
+* }
+*
+* const useAppReplane = createReplaneHook<AppConfigs>();
+*
+* function MyComponent() {
+*   const replane = useAppReplane();
+*   // replane.get("theme") returns { darkMode: boolean }
+* }
+* ```
+*/
+function createReplaneHook() {
+	return function useTypedReplane() {
+		return useReplane();
+	};
+}
+/**
+* Creates a typed version of useConfig hook.
+*
+* @example
+* ```tsx
+* interface AppConfigs {
+*   theme: { darkMode: boolean };
+*   features: { beta: boolean };
+* }
+*
+* const useAppConfig = createConfigHook<AppConfigs>();
+*
+* function MyComponent() {
+*   const theme = useAppConfig("theme");
+*   // theme is typed as { darkMode: boolean }
+* }
+* ```
+*/
+function createConfigHook() {
+	return function useTypedConfig(name, options) {
+		return useConfig(String(name), options);
+	};
+}
 
 //#endregion
 exports.ReplaneProvider = ReplaneProvider;
 exports.clearSuspenseCache = clearSuspenseCache;
+exports.createConfigHook = createConfigHook;
+exports.createReplaneHook = createReplaneHook;
 exports.useConfig = useConfig;
 exports.useReplane = useReplane;

package/dist/index.d.cts

@@ -1,15 +1,13 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { ReplaneClient, ReplaneClientOptions } from "@replanejs/sdk";
+import { GetConfigOptions, ReplaneClient, ReplaneClientOptions, RestoreReplaneClientOptions } from "@replanejs/sdk";
 import { ReactNode } from "react";
 
 //#region src/types.d.ts
-interface ReplaneContextValue<T extends object = any> {
-  client: ReplaneClient<T>;
-}
+type UntypedReplaneConfig = Record<string, unknown>;
 /**
  * Props for ReplaneProvider when using a pre-created client.
  */
-interface ReplaneProviderWithClientProps<T extends object = any> {
+interface ReplaneProviderWithClientProps<T extends object = UntypedReplaneConfig> {
   /** Pre-created ReplaneClient instance */
   client: ReplaneClient<T>;
   children: ReactNode;
@@ -17,7 +15,7 @@ interface ReplaneProviderWithClientProps<T extends object = any> {
 /**
  * Props for ReplaneProvider when letting it manage the client internally.
  */
-interface ReplaneProviderWithOptionsProps<T extends object = any> {
+interface ReplaneProviderWithOptionsProps<T extends object = UntypedReplaneConfig> {
   /** Options to create the ReplaneClient */
   options: ReplaneClientOptions<T>;
   children: ReactNode;
@@ -32,21 +30,27 @@ interface ReplaneProviderWithOptionsProps<T extends object = any> {
    * @default false
    */
   suspense?: boolean;
-  /**
-   * Callback when client initialization fails.
-   */
-  onError?: (error: Error) => void;
 }
-type ReplaneProviderProps<T extends object = any> = ReplaneProviderWithClientProps<T> | ReplaneProviderWithOptionsProps<T>;
+/**
+ * Props for ReplaneProvider when restoring from a snapshot.
+ * Uses restoreReplaneClient from the SDK for synchronous client creation.
+ */
+interface ReplaneProviderWithSnapshotProps<T extends object = UntypedReplaneConfig> {
+  /** Options to restore the ReplaneClient from a snapshot */
+  restoreOptions: RestoreReplaneClientOptions<T>;
+  children: ReactNode;
+}
+type ReplaneProviderProps<T extends object = UntypedReplaneConfig> = ReplaneProviderWithClientProps<T> | ReplaneProviderWithOptionsProps<T> | ReplaneProviderWithSnapshotProps<T>;
 /**
  * Type guard to check if props contain a pre-created client.
  */
+
 //#endregion
 //#region src/provider.d.ts
 /**
  * Provider component that makes a ReplaneClient available to the component tree.
  *
- * Can be used in two ways:
+ * Can be used in four ways:
  *
  * 1. With a pre-created client:
  * ```tsx
@@ -58,36 +62,94 @@ type ReplaneProviderProps<T extends object = any> = ReplaneProviderWithClientPro
  *
  * 2. With options (client managed internally):
  * ```tsx
- * <ReplaneProvider
- *   options={{ baseUrl: '...', sdkKey: '...' }}
- *   loader={<LoadingSpinner />}
- * >
- *   <App />
- * </ReplaneProvider>
- * ```
- *
- * 3. With Suspense:
- * ```tsx
- * <Suspense fallback={<LoadingSpinner />}>
+ * <ErrorBoundary fallback={<ErrorMessage />}>
  *   <ReplaneProvider
  *     options={{ baseUrl: '...', sdkKey: '...' }}
- *     suspense
+ *     loader={<LoadingSpinner />}
  *   >
  *     <App />
  *   </ReplaneProvider>
- * </Suspense>
+ * </ErrorBoundary>
  * ```
+ *
+ * 3. With Suspense:
+ * ```tsx
+ * <ErrorBoundary fallback={<ErrorMessage />}>
+ *   <Suspense fallback={<LoadingSpinner />}>
+ *     <ReplaneProvider
+ *       options={{ baseUrl: '...', sdkKey: '...' }}
+ *       suspense
+ *     >
+ *       <App />
+ *     </ReplaneProvider>
+ *   </Suspense>
+ * </ErrorBoundary>
+ * ```
+ *
+ * 4. With a snapshot (for SSR/hydration):
+ * ```tsx
+ * // On the server, get a snapshot from the client
+ * const snapshot = serverClient.getSnapshot();
+ *
+ * // On the client, restore from the snapshot
+ * <ReplaneProvider
+ *   restoreOptions={{
+ *     snapshot,
+ *     connection: { baseUrl: '...', sdkKey: '...' } // optional, for live updates
+ *   }}
+ * >
+ *   <App />
+ * </ReplaneProvider>
+ * ```
+ *
+ * Errors during client initialization are thrown during rendering,
+ * allowing them to be caught by React Error Boundaries.
  */
 declare function ReplaneProvider<T extends object>(props: ReplaneProviderProps<T>): react_jsx_runtime0.JSX.Element;
 //# sourceMappingURL=provider.d.ts.map
 //#endregion
 //#region src/hooks.d.ts
-declare function useReplane<T extends object = Record<string, unknown>>(): ReplaneContextValue<T>;
-declare function useConfig<T>(name: string, options?: {
-  context?: Record<string, string | number | boolean | null>;
-}): T;
+declare function useReplane<T extends object = UntypedReplaneConfig>(): ReplaneClient<T>;
+declare function useConfig<T>(name: string, options?: GetConfigOptions): T;
+/**
+ * Creates a typed version of useReplane hook.
+ *
+ * @example
+ * ```tsx
+ * interface AppConfigs {
+ *   theme: { darkMode: boolean };
+ *   features: { beta: boolean };
+ * }
+ *
+ * const useAppReplane = createReplaneHook<AppConfigs>();
+ *
+ * function MyComponent() {
+ *   const replane = useAppReplane();
+ *   // replane.get("theme") returns { darkMode: boolean }
+ * }
+ * ```
+ */
+declare function createReplaneHook<TConfigs extends object>(): () => ReplaneClient<TConfigs>;
+/**
+ * Creates a typed version of useConfig hook.
+ *
+ * @example
+ * ```tsx
+ * interface AppConfigs {
+ *   theme: { darkMode: boolean };
+ *   features: { beta: boolean };
+ * }
+ *
+ * const useAppConfig = createConfigHook<AppConfigs>();
+ *
+ * function MyComponent() {
+ *   const theme = useAppConfig("theme");
+ *   // theme is typed as { darkMode: boolean }
+ * }
+ * ```
+ */
+declare function createConfigHook<TConfigs extends object>(): <K extends keyof TConfigs>(name: K, options?: GetConfigOptions) => TConfigs[K];
 //# sourceMappingURL=hooks.d.ts.map
-
 //#endregion
 //#region src/useReplaneClient.d.ts
 /**
@@ -96,5 +158,5 @@ declare function useConfig<T>(name: string, options?: {
  */
 declare function clearSuspenseCache<T extends object>(options?: ReplaneClientOptions<T>): void;
 //#endregion
-export { type ReplaneContextValue, ReplaneProvider, type ReplaneProviderProps, type ReplaneProviderWithClientProps, type ReplaneProviderWithOptionsProps, clearSuspenseCache, useConfig, useReplane };
+export { ReplaneProvider, type ReplaneProviderProps, type ReplaneProviderWithClientProps, type ReplaneProviderWithOptionsProps, type ReplaneProviderWithSnapshotProps, clearSuspenseCache, createConfigHook, createReplaneHook, useConfig, useReplane };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/provider.tsx","../src/hooks.ts","../src/useReplaneClient.ts"],"sourcesContent":[],"mappings":";;;;;UAIiB;UACP,cAAc;;AADxB;;;AACU,UAOO,8BAPP,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,CAAA;EAAa;EAON,MAAA,EAEP,aAFO,CAEO,CAFP,CAAA;EAA8B,QAAA,EAGnC,SAHmC;;;;AAG1B;AAOJ,UAAA,+BAA+B,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,CAAA;EAAA;EAAA,OAEhB,EAArB,oBAAqB,CAAA,CAAA,CAAA;EAAC,QAAtB,EACC,SADD;EAAoB;;;AAgBN;EAIb,MAAA,CAAA,EAdD,SAcC;EAAoB;;;;;EAEG,QAAA,CAAA,EAAA,OAAA;;;;ECgDnB,OAAA,CAAA,EAAA,CAAA,KAAA,EDtDI,KCsDW,EAAA,GAAA,IAAA;;AAA+C,KDlDlE,oBCkDkE,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,GDjD1E,8BCiD0E,CDjD3C,CCiD2C,CAAA,GDhD1E,+BCgD0E,CDhD1C,CCgD0C,CAAA;;;AAAE;;;;;;;AD1FhF;;;;AACuB;AAOvB;;;;;AAGqB;AAOrB;;;;;;;AAkByB;AAIzB;;;;;;AAEmC;;;;ACgDnC;;AAA8E,iBAA9D,eAA8D,CAAA,UAAA,MAAA,CAAA,CAAA,KAAA,EAArB,oBAAqB,CAAA,CAAA,CAAA,CAAA,EAAE,kBAAA,CAAA,GAAA,CAAA,OAAF;;;;iBC1F9D,8BAA8B,4BAA4B,oBAAoB;iBAQ9E;YAEQ;IACrB;AFXH;;;;AAwCA;;;;AAEoC,iBGgFpB,kBHhFoB,CAAA,UAAA,MAAA,CAAA,CAAA,OAAA,CAAA,EGgF2B,oBHhF3B,CGgFgD,CHhFhD,CAAA,CAAA,EAAA,IAAA"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/provider.tsx","../src/hooks.ts","../src/useReplaneClient.ts"],"sourcesContent":[],"mappings":";;;;;KAOY,oBAAA,GAAuB;AASnC;;;AAEwB,UAFP,8BAEO,CAAA,UAAA,MAAA,GAF2C,oBAE3C,CAAA,CAAA;EAAC;EAAF,MACX,EADF,aACE,CADY,CACZ,CAAA;EAAS,QAAA,EAAT,SAAS;AAMrB;;;;AAEW,UAFM,+BAEN,CAAA,UAAA,MAAA,GAFyD,oBAEzD,CAAA,CAAA;EAAoB;EACV,OAKV,EANA,oBAMA,CANqB,CAMrB,CAAA;EAAS,QAAA,EALR,SAKQ;EAaH;;;;EAE8B,MAA7B,CAAA,EAfP,SAeO;EAA2B;AACxB;AAGrB;;;EAAwE,QACrC,CAAA,EAAA,OAAA;;;;;;AAEC,UATnB,gCASmB,CAAA,UAAA,MAAA,GATiC,oBASjC,CAAA,CAAA;;kBAPlB,4BAA4B;YAClC;ACkFZ;AAA+B,KD/EnB,oBC+EmB,CAAA,UAAA,MAAA,GD/EqB,oBC+ErB,CAAA,GD9E3B,8BC8E2B,CD9EI,CC8EJ,CAAA,GD7E3B,+BC6E2B,CD7EK,CC6EL,CAAA,GD5E3B,gCC4E2B,CD5EM,CC4EN,CAAA;;;;;;;;;;;AD5H/B;AASA;;;;;;AAGqB;AAMrB;;;;;;;AAQoB;AAapB;;;;;;AAGqB;AAGrB;;;;;;;;;AAGoC;;;;AC4EpC;;;;;AAAgF;;;;AC9HhF;;;;;AAAoF;AAQpF;;;AAAwE,iBDsHxD,eCtHwD,CAAA,UAAA,MAAA,CAAA,CAAA,KAAA,EDsHf,oBCtHe,CDsHM,CCtHN,CAAA,CAAA,EDsHQ,kBAAA,CAAA,GAAA,CAAA,OCtHR;AAAC;;;iBARzD,8BAA8B,yBAAyB,cAAc;iBAQrE,qCAAqC,mBAAmB;;AFNxE;AASA;;;;;;AAGqB;AAMrB;;;;;;;AAQoB;AAapB;AAAiD,iBEDjC,iBFCiC,CAAA,iBAAA,MAAA,CAAA,CAAA,CAAA,EAAA,GAAA,GEAZ,aFAY,CEAE,QFAF,CAAA;;;;;AAG5B;AAGrB;;;;;;;;;AAGoC;;;;AC4EpB,iBC9DA,gBD8De,CAAA,iBAAA,MAAA,CAAA,CAAA,CAAA,EAAA,CAAA,UAAA,MC7DkB,QD6DlB,CAAA,CAAA,IAAA,EC5DrB,CD4DqB,EAAA,OAAA,CAAA,EC3DjB,gBD2DiB,EAAA,GC1D1B,QD0D0B,CC1DjB,CD0DiB,CAAA;;;;;;;ADlFV;AAGT,iBGwEI,kBHxEgB,CAAA,UAAA,MAAA,CAAA,CAAA,OAAA,CAAA,EGwE+B,oBHxE/B,CGwEoD,CHxEpD,CAAA,CAAA,EAAA,IAAA"}

package/dist/index.d.ts

@@ -1,15 +1,13 @@
 import { ReactNode } from "react";
-import { ReplaneClient, ReplaneClientOptions } from "@replanejs/sdk";
+import { GetConfigOptions, ReplaneClient, ReplaneClientOptions, RestoreReplaneClientOptions } from "@replanejs/sdk";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/types.d.ts
-interface ReplaneContextValue<T extends object = any> {
-  client: ReplaneClient<T>;
-}
+type UntypedReplaneConfig = Record<string, unknown>;
 /**
  * Props for ReplaneProvider when using a pre-created client.
  */
-interface ReplaneProviderWithClientProps<T extends object = any> {
+interface ReplaneProviderWithClientProps<T extends object = UntypedReplaneConfig> {
   /** Pre-created ReplaneClient instance */
   client: ReplaneClient<T>;
   children: ReactNode;
@@ -17,7 +15,7 @@ interface ReplaneProviderWithClientProps<T extends object = any> {
 /**
  * Props for ReplaneProvider when letting it manage the client internally.
  */
-interface ReplaneProviderWithOptionsProps<T extends object = any> {
+interface ReplaneProviderWithOptionsProps<T extends object = UntypedReplaneConfig> {
   /** Options to create the ReplaneClient */
   options: ReplaneClientOptions<T>;
   children: ReactNode;
@@ -32,21 +30,27 @@ interface ReplaneProviderWithOptionsProps<T extends object = any> {
    * @default false
    */
   suspense?: boolean;
-  /**
-   * Callback when client initialization fails.
-   */
-  onError?: (error: Error) => void;
 }
-type ReplaneProviderProps<T extends object = any> = ReplaneProviderWithClientProps<T> | ReplaneProviderWithOptionsProps<T>;
+/**
+ * Props for ReplaneProvider when restoring from a snapshot.
+ * Uses restoreReplaneClient from the SDK for synchronous client creation.
+ */
+interface ReplaneProviderWithSnapshotProps<T extends object = UntypedReplaneConfig> {
+  /** Options to restore the ReplaneClient from a snapshot */
+  restoreOptions: RestoreReplaneClientOptions<T>;
+  children: ReactNode;
+}
+type ReplaneProviderProps<T extends object = UntypedReplaneConfig> = ReplaneProviderWithClientProps<T> | ReplaneProviderWithOptionsProps<T> | ReplaneProviderWithSnapshotProps<T>;
 /**
  * Type guard to check if props contain a pre-created client.
  */
+
 //#endregion
 //#region src/provider.d.ts
 /**
  * Provider component that makes a ReplaneClient available to the component tree.
  *
- * Can be used in two ways:
+ * Can be used in four ways:
  *
  * 1. With a pre-created client:
  * ```tsx
@@ -58,36 +62,94 @@ type ReplaneProviderProps<T extends object = any> = ReplaneProviderWithClientPro
  *
  * 2. With options (client managed internally):
  * ```tsx
- * <ReplaneProvider
- *   options={{ baseUrl: '...', sdkKey: '...' }}
- *   loader={<LoadingSpinner />}
- * >
- *   <App />
- * </ReplaneProvider>
- * ```
- *
- * 3. With Suspense:
- * ```tsx
- * <Suspense fallback={<LoadingSpinner />}>
+ * <ErrorBoundary fallback={<ErrorMessage />}>
  *   <ReplaneProvider
  *     options={{ baseUrl: '...', sdkKey: '...' }}
- *     suspense
+ *     loader={<LoadingSpinner />}
  *   >
  *     <App />
  *   </ReplaneProvider>
- * </Suspense>
+ * </ErrorBoundary>
  * ```
+ *
+ * 3. With Suspense:
+ * ```tsx
+ * <ErrorBoundary fallback={<ErrorMessage />}>
+ *   <Suspense fallback={<LoadingSpinner />}>
+ *     <ReplaneProvider
+ *       options={{ baseUrl: '...', sdkKey: '...' }}
+ *       suspense
+ *     >
+ *       <App />
+ *     </ReplaneProvider>
+ *   </Suspense>
+ * </ErrorBoundary>
+ * ```
+ *
+ * 4. With a snapshot (for SSR/hydration):
+ * ```tsx
+ * // On the server, get a snapshot from the client
+ * const snapshot = serverClient.getSnapshot();
+ *
+ * // On the client, restore from the snapshot
+ * <ReplaneProvider
+ *   restoreOptions={{
+ *     snapshot,
+ *     connection: { baseUrl: '...', sdkKey: '...' } // optional, for live updates
+ *   }}
+ * >
+ *   <App />
+ * </ReplaneProvider>
+ * ```
+ *
+ * Errors during client initialization are thrown during rendering,
+ * allowing them to be caught by React Error Boundaries.
  */
 declare function ReplaneProvider<T extends object>(props: ReplaneProviderProps<T>): react_jsx_runtime0.JSX.Element;
 //# sourceMappingURL=provider.d.ts.map
 //#endregion
 //#region src/hooks.d.ts
-declare function useReplane<T extends object = Record<string, unknown>>(): ReplaneContextValue<T>;
-declare function useConfig<T>(name: string, options?: {
-  context?: Record<string, string | number | boolean | null>;
-}): T;
+declare function useReplane<T extends object = UntypedReplaneConfig>(): ReplaneClient<T>;
+declare function useConfig<T>(name: string, options?: GetConfigOptions): T;
+/**
+ * Creates a typed version of useReplane hook.
+ *
+ * @example
+ * ```tsx
+ * interface AppConfigs {
+ *   theme: { darkMode: boolean };
+ *   features: { beta: boolean };
+ * }
+ *
+ * const useAppReplane = createReplaneHook<AppConfigs>();
+ *
+ * function MyComponent() {
+ *   const replane = useAppReplane();
+ *   // replane.get("theme") returns { darkMode: boolean }
+ * }
+ * ```
+ */
+declare function createReplaneHook<TConfigs extends object>(): () => ReplaneClient<TConfigs>;
+/**
+ * Creates a typed version of useConfig hook.
+ *
+ * @example
+ * ```tsx
+ * interface AppConfigs {
+ *   theme: { darkMode: boolean };
+ *   features: { beta: boolean };
+ * }
+ *
+ * const useAppConfig = createConfigHook<AppConfigs>();
+ *
+ * function MyComponent() {
+ *   const theme = useAppConfig("theme");
+ *   // theme is typed as { darkMode: boolean }
+ * }
+ * ```
+ */
+declare function createConfigHook<TConfigs extends object>(): <K extends keyof TConfigs>(name: K, options?: GetConfigOptions) => TConfigs[K];
 //# sourceMappingURL=hooks.d.ts.map
-
 //#endregion
 //#region src/useReplaneClient.d.ts
 /**
@@ -96,5 +158,5 @@ declare function useConfig<T>(name: string, options?: {
  */
 declare function clearSuspenseCache<T extends object>(options?: ReplaneClientOptions<T>): void;
 //#endregion
-export { type ReplaneContextValue, ReplaneProvider, type ReplaneProviderProps, type ReplaneProviderWithClientProps, type ReplaneProviderWithOptionsProps, clearSuspenseCache, useConfig, useReplane };
+export { ReplaneProvider, type ReplaneProviderProps, type ReplaneProviderWithClientProps, type ReplaneProviderWithOptionsProps, type ReplaneProviderWithSnapshotProps, clearSuspenseCache, createConfigHook, createReplaneHook, useConfig, useReplane };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/provider.tsx","../src/hooks.ts","../src/useReplaneClient.ts"],"sourcesContent":[],"mappings":";;;;;UAIiB;UACP,cAAc;;AADxB;;;AACU,UAOO,8BAPP,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,CAAA;EAAa;EAON,MAAA,EAEP,aAFO,CAEO,CAFP,CAAA;EAA8B,QAAA,EAGnC,SAHmC;;;;AAG1B;AAOJ,UAAA,+BAA+B,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,CAAA;EAAA;EAAA,OAEhB,EAArB,oBAAqB,CAAA,CAAA,CAAA;EAAC,QAAtB,EACC,SADD;EAAoB;;;AAgBN;EAIb,MAAA,CAAA,EAdD,SAcC;EAAoB;;;;;EAEG,QAAA,CAAA,EAAA,OAAA;;;;ECgDnB,OAAA,CAAA,EAAA,CAAA,KAAA,EDtDI,KCsDW,EAAA,GAAA,IAAA;;AAA+C,KDlDlE,oBCkDkE,CAAA,UAAA,MAAA,GAAA,GAAA,CAAA,GDjD1E,8BCiD0E,CDjD3C,CCiD2C,CAAA,GDhD1E,+BCgD0E,CDhD1C,CCgD0C,CAAA;;;AAAE;;;;;;;AD1FhF;;;;AACuB;AAOvB;;;;;AAGqB;AAOrB;;;;;;;AAkByB;AAIzB;;;;;;AAEmC;;;;ACgDnC;;AAA8E,iBAA9D,eAA8D,CAAA,UAAA,MAAA,CAAA,CAAA,KAAA,EAArB,oBAAqB,CAAA,CAAA,CAAA,CAAA,EAAE,kBAAA,CAAA,GAAA,CAAA,OAAF;;;;iBC1F9D,8BAA8B,4BAA4B,oBAAoB;iBAQ9E;YAEQ;IACrB;AFXH;;;;AAwCA;;;;AAEoC,iBGgFpB,kBHhFoB,CAAA,UAAA,MAAA,CAAA,CAAA,OAAA,CAAA,EGgF2B,oBHhF3B,CGgFgD,CHhFhD,CAAA,CAAA,EAAA,IAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/provider.tsx","../src/hooks.ts","../src/useReplaneClient.ts"],"sourcesContent":[],"mappings":";;;;;KAOY,oBAAA,GAAuB;AASnC;;;AAEwB,UAFP,8BAEO,CAAA,UAAA,MAAA,GAF2C,oBAE3C,CAAA,CAAA;EAAC;EAAF,MACX,EADF,aACE,CADY,CACZ,CAAA;EAAS,QAAA,EAAT,SAAS;AAMrB;;;;AAEW,UAFM,+BAEN,CAAA,UAAA,MAAA,GAFyD,oBAEzD,CAAA,CAAA;EAAoB;EACV,OAKV,EANA,oBAMA,CANqB,CAMrB,CAAA;EAAS,QAAA,EALR,SAKQ;EAaH;;;;EAE8B,MAA7B,CAAA,EAfP,SAeO;EAA2B;AACxB;AAGrB;;;EAAwE,QACrC,CAAA,EAAA,OAAA;;;;;;AAEC,UATnB,gCASmB,CAAA,UAAA,MAAA,GATiC,oBASjC,CAAA,CAAA;;kBAPlB,4BAA4B;YAClC;ACkFZ;AAA+B,KD/EnB,oBC+EmB,CAAA,UAAA,MAAA,GD/EqB,oBC+ErB,CAAA,GD9E3B,8BC8E2B,CD9EI,CC8EJ,CAAA,GD7E3B,+BC6E2B,CD7EK,CC6EL,CAAA,GD5E3B,gCC4E2B,CD5EM,CC4EN,CAAA;;;;;;;;;;;AD5H/B;AASA;;;;;;AAGqB;AAMrB;;;;;;;AAQoB;AAapB;;;;;;AAGqB;AAGrB;;;;;;;;;AAGoC;;;;AC4EpC;;;;;AAAgF;;;;AC9HhF;;;;;AAAoF;AAQpF;;;AAAwE,iBDsHxD,eCtHwD,CAAA,UAAA,MAAA,CAAA,CAAA,KAAA,EDsHf,oBCtHe,CDsHM,CCtHN,CAAA,CAAA,EDsHQ,kBAAA,CAAA,GAAA,CAAA,OCtHR;AAAC;;;iBARzD,8BAA8B,yBAAyB,cAAc;iBAQrE,qCAAqC,mBAAmB;;AFNxE;AASA;;;;;;AAGqB;AAMrB;;;;;;;AAQoB;AAapB;AAAiD,iBEDjC,iBFCiC,CAAA,iBAAA,MAAA,CAAA,CAAA,CAAA,EAAA,GAAA,GEAZ,aFAY,CEAE,QFAF,CAAA;;;;;AAG5B;AAGrB;;;;;;;;;AAGoC;;;;AC4EpB,iBC9DA,gBD8De,CAAA,iBAAA,MAAA,CAAA,CAAA,CAAA,EAAA,CAAA,UAAA,MC7DkB,QD6DlB,CAAA,CAAA,IAAA,EC5DrB,CD4DqB,EAAA,OAAA,CAAA,EC3DjB,gBD2DiB,EAAA,GC1D1B,QD0D0B,CC1DjB,CD0DiB,CAAA;;;;;;;ADlFV;AAGT,iBGwEI,kBHxEgB,CAAA,UAAA,MAAA,CAAA,CAAA,OAAA,CAAA,EGwE+B,oBHxE/B,CGwEoD,CHxEpD,CAAA,CAAA,EAAA,IAAA"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { createReplaneClient } from "@replanejs/sdk";
+import { createReplaneClient, restoreReplaneClient } from "@replanejs/sdk";
 import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/context.ts
@@ -15,7 +15,7 @@ function getCacheKey(options) {
 * Hook to manage ReplaneClient creation internally.
 * Handles loading state and cleanup.
 */
-function useReplaneClient(options, onError) {
+function useReplaneClientInternal(options) {
 	const [state, setState] = useState({
 		status: "loading",
 		client: null,
@@ -40,13 +40,12 @@ function useReplaneClient(options, onError) {
 				});
 			} catch (err) {
 				if (cancelled) return;
-				const error = err instanceof Error ? err : new Error(String(err));
+				const error = err instanceof Error ? err : new Error(String(err), { cause: err });
 				setState({
 					status: "error",
 					client: null,
 					error
 				});
-				onError?.(error);
 			}
 		}
 		initClient();
@@ -101,6 +100,12 @@ function clearSuspenseCache(options) {
 function hasClient(props) {
 	return "client" in props && props.client !== void 0;
 }
+/**
+* Type guard to check if props contain restore options.
+*/
+function hasRestoreOptions(props) {
+	return "restoreOptions" in props && props.restoreOptions !== void 0;
+}
 
 //#endregion
 //#region src/provider.tsx
@@ -116,11 +121,12 @@ function ReplaneProviderWithClient({ client, children }) {
 }
 /**
 * Internal provider component for options-based client creation (non-suspense).
+* Throws errors during rendering so they can be caught by Error Boundaries.
 */
-function ReplaneProviderWithOptions({ options, children, loader, onError }) {
-	const state = useReplaneClient(options, onError);
+function ReplaneProviderWithOptions({ options, children, loader }) {
+	const state = useReplaneClientInternal(options);
 	if (state.status === "loading") return /* @__PURE__ */ jsx(Fragment, { children: loader ?? null });
-	if (state.status === "error") return /* @__PURE__ */ jsx(Fragment, { children: loader ?? null });
+	if (state.status === "error") throw state.error;
 	const value = { client: state.client };
 	return /* @__PURE__ */ jsx(ReplaneContext.Provider, {
 		value,
@@ -139,9 +145,21 @@ function ReplaneProviderWithSuspense({ options, children }) {
 	});
 }
 /**
+* Internal provider component for restoring client from snapshot.
+* Uses restoreReplaneClient which is synchronous.
+*/
+function ReplaneProviderWithSnapshot({ restoreOptions, children }) {
+	const client = useMemo(() => restoreReplaneClient(restoreOptions), [restoreOptions]);
+	const value = useMemo(() => ({ client }), [client]);
+	return /* @__PURE__ */ jsx(ReplaneContext.Provider, {
+		value,
+		children
+	});
+}
+/**
 * Provider component that makes a ReplaneClient available to the component tree.
 *
-* Can be used in two ways:
+* Can be used in four ways:
 *
 * 1. With a pre-created client:
 * ```tsx
@@ -153,28 +171,52 @@ function ReplaneProviderWithSuspense({ options, children }) {
 *
 * 2. With options (client managed internally):
 * ```tsx
-* <ReplaneProvider
-*   options={{ baseUrl: '...', sdkKey: '...' }}
-*   loader={<LoadingSpinner />}
-* >
-*   <App />
-* </ReplaneProvider>
-* ```
-*
-* 3. With Suspense:
-* ```tsx
-* <Suspense fallback={<LoadingSpinner />}>
+* <ErrorBoundary fallback={<ErrorMessage />}>
 *   <ReplaneProvider
 *     options={{ baseUrl: '...', sdkKey: '...' }}
-*     suspense
+*     loader={<LoadingSpinner />}
 *   >
 *     <App />
 *   </ReplaneProvider>
-* </Suspense>
+* </ErrorBoundary>
+* ```
+*
+* 3. With Suspense:
+* ```tsx
+* <ErrorBoundary fallback={<ErrorMessage />}>
+*   <Suspense fallback={<LoadingSpinner />}>
+*     <ReplaneProvider
+*       options={{ baseUrl: '...', sdkKey: '...' }}
+*       suspense
+*     >
+*       <App />
+*     </ReplaneProvider>
+*   </Suspense>
+* </ErrorBoundary>
+* ```
+*
+* 4. With a snapshot (for SSR/hydration):
+* ```tsx
+* // On the server, get a snapshot from the client
+* const snapshot = serverClient.getSnapshot();
+*
+* // On the client, restore from the snapshot
+* <ReplaneProvider
+*   restoreOptions={{
+*     snapshot,
+*     connection: { baseUrl: '...', sdkKey: '...' } // optional, for live updates
+*   }}
+* >
+*   <App />
+* </ReplaneProvider>
 * ```
+*
+* Errors during client initialization are thrown during rendering,
+* allowing them to be caught by React Error Boundaries.
 */
 function ReplaneProvider(props) {
 	if (hasClient(props)) return /* @__PURE__ */ jsx(ReplaneProviderWithClient, { ...props });
+	if (hasRestoreOptions(props)) return /* @__PURE__ */ jsx(ReplaneProviderWithSnapshot, { ...props });
 	if (props.suspense) return /* @__PURE__ */ jsx(ReplaneProviderWithSuspense, { ...props });
 	return /* @__PURE__ */ jsx(ReplaneProviderWithOptions, { ...props });
 }
@@ -184,16 +226,62 @@ function ReplaneProvider(props) {
 function useReplane() {
 	const context = useContext(ReplaneContext);
 	if (!context) throw new Error("useReplane must be used within a ReplaneProvider");
-	return context;
+	return context.client;
 }
 function useConfig(name, options) {
-	const { client } = useReplane();
+	const client = useReplane();
 	const value = useSyncExternalStore((onStoreChange) => {
 		return client.subscribe(name, onStoreChange);
 	}, () => client.get(name, options), () => client.get(name, options));
 	return value;
 }
+/**
+* Creates a typed version of useReplane hook.
+*
+* @example
+* ```tsx
+* interface AppConfigs {
+*   theme: { darkMode: boolean };
+*   features: { beta: boolean };
+* }
+*
+* const useAppReplane = createReplaneHook<AppConfigs>();
+*
+* function MyComponent() {
+*   const replane = useAppReplane();
+*   // replane.get("theme") returns { darkMode: boolean }
+* }
+* ```
+*/
+function createReplaneHook() {
+	return function useTypedReplane() {
+		return useReplane();
+	};
+}
+/**
+* Creates a typed version of useConfig hook.
+*
+* @example
+* ```tsx
+* interface AppConfigs {
+*   theme: { darkMode: boolean };
+*   features: { beta: boolean };
+* }
+*
+* const useAppConfig = createConfigHook<AppConfigs>();
+*
+* function MyComponent() {
+*   const theme = useAppConfig("theme");
+*   // theme is typed as { darkMode: boolean }
+* }
+* ```
+*/
+function createConfigHook() {
+	return function useTypedConfig(name, options) {
+		return useConfig(String(name), options);
+	};
+}
 
 //#endregion
-export { ReplaneProvider, clearSuspenseCache, useConfig, useReplane };
+export { ReplaneProvider, clearSuspenseCache, createConfigHook, createReplaneHook, useConfig, useReplane };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["options: ReplaneClientOptions<T>","onError?: (error: Error) => void","options?: ReplaneClientOptions<T>","props: ReplaneProviderProps<T>","value: ReplaneContextValue<T>","props: ReplaneProviderProps<T>","name: string","options?: { context?: Record<string, string | number | boolean | null> }"],"sources":["../src/context.ts","../src/useReplaneClient.ts","../src/types.ts","../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { ReplaneContextValue } from \"./types\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const ReplaneContext = createContext<ReplaneContextValue<any> | null>(null);\n","import { useEffect, useRef, useState } from \"react\";\nimport { createReplaneClient } from \"@replanejs/sdk\";\nimport type { ReplaneClient, ReplaneClientOptions } from \"@replanejs/sdk\";\n\ntype ClientState<T extends object> =\n  | { status: \"loading\"; client: null; error: null }\n  | { status: \"ready\"; client: ReplaneClient<T>; error: null }\n  | { status: \"error\"; client: null; error: Error };\n\n// Cache for suspense promise tracking\nconst suspenseCache = new  Map<\n  string,\n  {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    promise: Promise<ReplaneClient<any>>;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    result?: ReplaneClient<any>;\n    error?: Error;\n  }\n>();\n\nfunction getCacheKey<T extends object>(options: ReplaneClientOptions<T>): string {\n  return `${options.baseUrl}:${options.sdkKey}`;\n}\n\n/**\n * Hook to manage ReplaneClient creation internally.\n * Handles loading state and cleanup.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useReplaneClient<T extends object = any>(\n  options: ReplaneClientOptions<T>,\n  onError?: (error: Error) => void\n): ClientState<T> {\n  const [state, setState] = useState<ClientState<T>>({\n    status: \"loading\",\n    client: null,\n    error: null,\n  });\n  const clientRef = useRef<ReplaneClient<T> | null>(null);\n  const optionsRef = useRef(options);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    async function initClient() {\n      try {\n        const client = await createReplaneClient<T>(optionsRef.current);\n        if (cancelled) {\n          client.close();\n          return;\n        }\n        clientRef.current = client;\n        setState({ status: \"ready\", client, error: null });\n      } catch (err) {\n        if (cancelled) return;\n        const error = err instanceof Error ? err : new Error(String(err));\n        setState({ status: \"error\", client: null, error });\n        onError?.(error);\n      }\n    }\n\n    initClient();\n\n    return () => {\n      cancelled = true;\n      if (clientRef.current) {\n        clientRef.current.close();\n        clientRef.current = null;\n      }\n    };\n    // We intentionally only run this effect once on mount\n    // Options changes would require remounting the provider\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return state;\n}\n\n/**\n * Hook for Suspense-based client creation.\n * Throws a promise while loading, throws error on failure.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useReplaneClientSuspense<T extends object = any>(\n  options: ReplaneClientOptions<T>\n): ReplaneClient<T> {\n  const cacheKey = getCacheKey(options);\n  const cached = suspenseCache.get(cacheKey);\n\n  if (cached) {\n    if (cached.error) {\n      throw cached.error;\n    }\n    if (cached.result) {\n      return cached.result as ReplaneClient<T>;\n    }\n    // Still loading, throw the promise\n    throw cached.promise;\n  }\n\n  // First time - create the promise\n  const promise = createReplaneClient<T>(options)\n    .then((client) => {\n      const entry = suspenseCache.get(cacheKey);\n      if (entry) {\n        entry.result = client;\n      }\n      return client;\n    })\n    .catch((err) => {\n      const entry = suspenseCache.get(cacheKey);\n      if (entry) {\n        entry.error = err instanceof Error ? err : new Error(String(err));\n      }\n      throw err;\n    });\n\n  suspenseCache.set(cacheKey, { promise });\n  throw promise;\n}\n\n/**\n * Clear the suspense cache for a specific options configuration.\n * Useful for testing or when you need to force re-initialization.\n */\nexport function clearSuspenseCache<T extends object>(options?: ReplaneClientOptions<T>): void {\n  if (options) {\n    suspenseCache.delete(getCacheKey(options));\n  } else {\n    suspenseCache.clear();\n  }\n}\n","import type { ReplaneClient, ReplaneClientOptions } from \"@replanejs/sdk\";\nimport type { ReactNode } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface ReplaneContextValue<T extends object = any> {\n  client: ReplaneClient<T>;\n}\n\n/**\n * Props for ReplaneProvider when using a pre-created client.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface ReplaneProviderWithClientProps<T extends object = any> {\n  /** Pre-created ReplaneClient instance */\n  client: ReplaneClient<T>;\n  children: ReactNode;\n}\n\n/**\n * Props for ReplaneProvider when letting it manage the client internally.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface ReplaneProviderWithOptionsProps<T extends object = any> {\n  /** Options to create the ReplaneClient */\n  options: ReplaneClientOptions<T>;\n  children: ReactNode;\n  /**\n   * Optional loading component to show while the client is initializing.\n   * If not provided and suspense is false/undefined, children will not render until ready.\n   */\n  loader?: ReactNode;\n  /**\n   * If true, uses React Suspense for loading state.\n   * The provider will throw a promise that Suspense can catch.\n   * @default false\n   */\n  suspense?: boolean;\n  /**\n   * Callback when client initialization fails.\n   */\n  onError?: (error: Error) => void;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ReplaneProviderProps<T extends object = any> =\n  | ReplaneProviderWithClientProps<T>\n  | ReplaneProviderWithOptionsProps<T>;\n\n/**\n * Type guard to check if props contain a pre-created client.\n */\nexport function hasClient<T extends object>(\n  props: ReplaneProviderProps<T>\n): props is ReplaneProviderWithClientProps<T> {\n  return \"client\" in props && props.client !== undefined;\n}\n","import { useMemo } from \"react\";\nimport { ReplaneContext } from \"./context\";\nimport { useReplaneClient, useReplaneClientSuspense } from \"./useReplaneClient\";\nimport type {\n  ReplaneProviderProps,\n  ReplaneProviderWithClientProps,\n  ReplaneProviderWithOptionsProps,\n  ReplaneContextValue,\n} from \"./types\";\nimport { hasClient } from \"./types\";\n\n/**\n * Internal provider component for pre-created client.\n */\nfunction ReplaneProviderWithClient<T extends object>({\n  client,\n  children,\n}: ReplaneProviderWithClientProps<T>) {\n  const value = useMemo<ReplaneContextValue<T>>(() => ({ client }), [client]);\n  return <ReplaneContext.Provider value={value}>{children}</ReplaneContext.Provider>;\n}\n\n/**\n * Internal provider component for options-based client creation (non-suspense).\n */\nfunction ReplaneProviderWithOptions<T extends object>({\n  options,\n  children,\n  loader,\n  onError,\n}: ReplaneProviderWithOptionsProps<T>) {\n  const state = useReplaneClient<T>(options, onError);\n\n  if (state.status === \"loading\") {\n    return <>{loader ?? null}</>;\n  }\n\n  if (state.status === \"error\") {\n    // Error was already reported via onError callback\n    // Return loader or null to prevent rendering children without a client\n    return <>{loader ?? null}</>;\n  }\n\n  const value: ReplaneContextValue<T> = { client: state.client };\n  return <ReplaneContext.Provider value={value}>{children}</ReplaneContext.Provider>;\n}\n\n/**\n * Internal provider component for options-based client creation with Suspense.\n */\nfunction ReplaneProviderWithSuspense<T extends object>({\n  options,\n  children,\n}: ReplaneProviderWithOptionsProps<T>) {\n  const client = useReplaneClientSuspense<T>(options);\n  const value = useMemo<ReplaneContextValue<T>>(() => ({ client }), [client]);\n  return <ReplaneContext.Provider value={value}>{children}</ReplaneContext.Provider>;\n}\n\n/**\n * Provider component that makes a ReplaneClient available to the component tree.\n *\n * Can be used in two ways:\n *\n * 1. With a pre-created client:\n * ```tsx\n * const client = await createReplaneClient({ ... });\n * <ReplaneProvider client={client}>\n *   <App />\n * </ReplaneProvider>\n * ```\n *\n * 2. With options (client managed internally):\n * ```tsx\n * <ReplaneProvider\n *   options={{ baseUrl: '...', sdkKey: '...' }}\n *   loader={<LoadingSpinner />}\n * >\n *   <App />\n * </ReplaneProvider>\n * ```\n *\n * 3. With Suspense:\n * ```tsx\n * <Suspense fallback={<LoadingSpinner />}>\n *   <ReplaneProvider\n *     options={{ baseUrl: '...', sdkKey: '...' }}\n *     suspense\n *   >\n *     <App />\n *   </ReplaneProvider>\n * </Suspense>\n * ```\n */\nexport function ReplaneProvider<T extends object>(props: ReplaneProviderProps<T>) {\n  if (hasClient(props)) {\n    return <ReplaneProviderWithClient {...props} />;\n  }\n\n  if (props.suspense) {\n    return <ReplaneProviderWithSuspense {...props} />;\n  }\n\n  return <ReplaneProviderWithOptions {...props} />;\n}\n","import { useContext, useSyncExternalStore } from \"react\";\nimport { ReplaneContext } from \"./context\";\nimport type { ReplaneContextValue } from \"./types\";\n\nexport function useReplane<T extends object = Record<string, unknown>>(): ReplaneContextValue<T> {\n  const context = useContext(ReplaneContext);\n  if (!context) {\n    throw new Error(\"useReplane must be used within a ReplaneProvider\");\n  }\n  return context as ReplaneContextValue<T>;\n}\n\nexport function useConfig<T>(\n  name: string,\n  options?: { context?: Record<string, string | number | boolean | null> }\n): T {\n  const { client } = useReplane();\n\n  const value = useSyncExternalStore(\n    (onStoreChange) => {\n      return client.subscribe(name, onStoreChange);\n    },\n    () => client.get(name, options) as T,\n    () => client.get(name, options) as T\n  );\n\n  return value;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["options: ReplaneClientOptions<T>","options?: ReplaneClientOptions<T>","props: ReplaneProviderProps<T>","value: ReplaneContextValue<T>","props: ReplaneProviderProps<T>","name: string","options?: GetConfigOptions","name: K"],"sources":["../src/context.ts","../src/useReplaneClient.ts","../src/types.ts","../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { ReplaneContextValue } from \"./types\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const ReplaneContext = createContext<ReplaneContextValue<any> | null>(null);\n","import { useEffect, useRef, useState } from \"react\";\nimport { createReplaneClient } from \"@replanejs/sdk\";\nimport type { ReplaneClient, ReplaneClientOptions } from \"@replanejs/sdk\";\n\ntype ClientState<T extends object> =\n  | { status: \"loading\"; client: null; error: null }\n  | { status: \"ready\"; client: ReplaneClient<T>; error: null }\n  | { status: \"error\"; client: null; error: Error };\n\n// Cache for suspense promise tracking\nconst suspenseCache = new Map<\n  string,\n  {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    promise: Promise<ReplaneClient<any>>;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    result?: ReplaneClient<any>;\n    error?: Error;\n  }\n>();\n\nfunction getCacheKey<T extends object>(options: ReplaneClientOptions<T>): string {\n  return `${options.baseUrl}:${options.sdkKey}`;\n}\n\ntype ErrorConstructor = new (message: string, options?: { cause?: unknown }) => Error;\n\n/**\n * Hook to manage ReplaneClient creation internally.\n * Handles loading state and cleanup.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useReplaneClientInternal<T extends object = any>(\n  options: ReplaneClientOptions<T>\n): ClientState<T> {\n  const [state, setState] = useState<ClientState<T>>({\n    status: \"loading\",\n    client: null,\n    error: null,\n  });\n  const clientRef = useRef<ReplaneClient<T> | null>(null);\n  const optionsRef = useRef(options);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    async function initClient() {\n      try {\n        const client = await createReplaneClient<T>(optionsRef.current);\n        if (cancelled) {\n          client.close();\n          return;\n        }\n        clientRef.current = client;\n        setState({ status: \"ready\", client, error: null });\n      } catch (err) {\n        if (cancelled) return;\n        const error =\n          err instanceof Error ? err : new (Error as ErrorConstructor)(String(err), { cause: err });\n        setState({ status: \"error\", client: null, error });\n      }\n    }\n\n    initClient();\n\n    return () => {\n      cancelled = true;\n      if (clientRef.current) {\n        clientRef.current.close();\n        clientRef.current = null;\n      }\n    };\n  }, []);\n\n  return state;\n}\n\n/**\n * Hook for Suspense-based client creation.\n * Throws a promise while loading, throws error on failure.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useReplaneClientSuspense<T extends object = any>(\n  options: ReplaneClientOptions<T>\n): ReplaneClient<T> {\n  const cacheKey = getCacheKey(options);\n  const cached = suspenseCache.get(cacheKey);\n\n  if (cached) {\n    if (cached.error) {\n      throw cached.error;\n    }\n    if (cached.result) {\n      return cached.result as ReplaneClient<T>;\n    }\n    // Still loading, throw the promise\n    throw cached.promise;\n  }\n\n  // First time - create the promise\n  const promise = createReplaneClient<T>(options)\n    .then((client) => {\n      const entry = suspenseCache.get(cacheKey);\n      if (entry) {\n        entry.result = client;\n      }\n      return client;\n    })\n    .catch((err) => {\n      const entry = suspenseCache.get(cacheKey);\n      if (entry) {\n        entry.error = err instanceof Error ? err : new Error(String(err));\n      }\n      throw err;\n    });\n\n  suspenseCache.set(cacheKey, { promise });\n  throw promise;\n}\n\n/**\n * Clear the suspense cache for a specific options configuration.\n * Useful for testing or when you need to force re-initialization.\n */\nexport function clearSuspenseCache<T extends object>(options?: ReplaneClientOptions<T>): void {\n  if (options) {\n    suspenseCache.delete(getCacheKey(options));\n  } else {\n    suspenseCache.clear();\n  }\n}\n","import type {\n  ReplaneClient,\n  ReplaneClientOptions,\n  RestoreReplaneClientOptions,\n} from \"@replanejs/sdk\";\nimport type { ReactNode } from \"react\";\n\nexport type UntypedReplaneConfig = Record<string, unknown>;\n\nexport interface ReplaneContextValue<T extends object = UntypedReplaneConfig> {\n  client: ReplaneClient<T>;\n}\n\n/**\n * Props for ReplaneProvider when using a pre-created client.\n */\nexport interface ReplaneProviderWithClientProps<T extends object = UntypedReplaneConfig> {\n  /** Pre-created ReplaneClient instance */\n  client: ReplaneClient<T>;\n  children: ReactNode;\n}\n\n/**\n * Props for ReplaneProvider when letting it manage the client internally.\n */\nexport interface ReplaneProviderWithOptionsProps<T extends object = UntypedReplaneConfig> {\n  /** Options to create the ReplaneClient */\n  options: ReplaneClientOptions<T>;\n  children: ReactNode;\n  /**\n   * Optional loading component to show while the client is initializing.\n   * If not provided and suspense is false/undefined, children will not render until ready.\n   */\n  loader?: ReactNode;\n  /**\n   * If true, uses React Suspense for loading state.\n   * The provider will throw a promise that Suspense can catch.\n   * @default false\n   */\n  suspense?: boolean;\n}\n\n/**\n * Props for ReplaneProvider when restoring from a snapshot.\n * Uses restoreReplaneClient from the SDK for synchronous client creation.\n */\nexport interface ReplaneProviderWithSnapshotProps<T extends object = UntypedReplaneConfig> {\n  /** Options to restore the ReplaneClient from a snapshot */\n  restoreOptions: RestoreReplaneClientOptions<T>;\n  children: ReactNode;\n}\n\nexport type ReplaneProviderProps<T extends object = UntypedReplaneConfig> =\n  | ReplaneProviderWithClientProps<T>\n  | ReplaneProviderWithOptionsProps<T>\n  | ReplaneProviderWithSnapshotProps<T>;\n\n/**\n * Type guard to check if props contain a pre-created client.\n */\nexport function hasClient<T extends object>(\n  props: ReplaneProviderProps<T>\n): props is ReplaneProviderWithClientProps<T> {\n  return \"client\" in props && props.client !== undefined;\n}\n\n/**\n * Type guard to check if props contain restore options.\n */\nexport function hasRestoreOptions<T extends object>(\n  props: ReplaneProviderProps<T>\n): props is ReplaneProviderWithSnapshotProps<T> {\n  return \"restoreOptions\" in props && props.restoreOptions !== undefined;\n}\n","import { useMemo } from \"react\";\nimport { restoreReplaneClient } from \"@replanejs/sdk\";\nimport { ReplaneContext } from \"./context\";\nimport { useReplaneClientInternal, useReplaneClientSuspense } from \"./useReplaneClient\";\nimport type {\n  ReplaneProviderProps,\n  ReplaneProviderWithClientProps,\n  ReplaneProviderWithOptionsProps,\n  ReplaneProviderWithSnapshotProps,\n  ReplaneContextValue,\n} from \"./types\";\nimport { hasClient, hasRestoreOptions } from \"./types\";\n\n/**\n * Internal provider component for pre-created client.\n */\nfunction ReplaneProviderWithClient<T extends object>({\n  client,\n  children,\n}: ReplaneProviderWithClientProps<T>) {\n  const value = useMemo<ReplaneContextValue<T>>(() => ({ client }), [client]);\n  return <ReplaneContext.Provider value={value}>{children}</ReplaneContext.Provider>;\n}\n\n/**\n * Internal provider component for options-based client creation (non-suspense).\n * Throws errors during rendering so they can be caught by Error Boundaries.\n */\nfunction ReplaneProviderWithOptions<T extends object>({\n  options,\n  children,\n  loader,\n}: ReplaneProviderWithOptionsProps<T>) {\n  const state = useReplaneClientInternal<T>(options);\n\n  if (state.status === \"loading\") {\n    return <>{loader ?? null}</>;\n  }\n\n  if (state.status === \"error\") {\n    // Throw error during render so it can be caught by Error Boundary\n    throw state.error;\n  }\n\n  const value: ReplaneContextValue<T> = { client: state.client };\n  return <ReplaneContext.Provider value={value}>{children}</ReplaneContext.Provider>;\n}\n\n/**\n * Internal provider component for options-based client creation with Suspense.\n */\nfunction ReplaneProviderWithSuspense<T extends object>({\n  options,\n  children,\n}: ReplaneProviderWithOptionsProps<T>) {\n  const client = useReplaneClientSuspense<T>(options);\n  const value = useMemo<ReplaneContextValue<T>>(() => ({ client }), [client]);\n  return <ReplaneContext.Provider value={value}>{children}</ReplaneContext.Provider>;\n}\n\n/**\n * Internal provider component for restoring client from snapshot.\n * Uses restoreReplaneClient which is synchronous.\n */\nfunction ReplaneProviderWithSnapshot<T extends object>({\n  restoreOptions,\n  children,\n}: ReplaneProviderWithSnapshotProps<T>) {\n  const client = useMemo(() => restoreReplaneClient<T>(restoreOptions), [restoreOptions]);\n  const value = useMemo<ReplaneContextValue<T>>(() => ({ client }), [client]);\n  return <ReplaneContext.Provider value={value}>{children}</ReplaneContext.Provider>;\n}\n\n/**\n * Provider component that makes a ReplaneClient available to the component tree.\n *\n * Can be used in four ways:\n *\n * 1. With a pre-created client:\n * ```tsx\n * const client = await createReplaneClient({ ... });\n * <ReplaneProvider client={client}>\n *   <App />\n * </ReplaneProvider>\n * ```\n *\n * 2. With options (client managed internally):\n * ```tsx\n * <ErrorBoundary fallback={<ErrorMessage />}>\n *   <ReplaneProvider\n *     options={{ baseUrl: '...', sdkKey: '...' }}\n *     loader={<LoadingSpinner />}\n *   >\n *     <App />\n *   </ReplaneProvider>\n * </ErrorBoundary>\n * ```\n *\n * 3. With Suspense:\n * ```tsx\n * <ErrorBoundary fallback={<ErrorMessage />}>\n *   <Suspense fallback={<LoadingSpinner />}>\n *     <ReplaneProvider\n *       options={{ baseUrl: '...', sdkKey: '...' }}\n *       suspense\n *     >\n *       <App />\n *     </ReplaneProvider>\n *   </Suspense>\n * </ErrorBoundary>\n * ```\n *\n * 4. With a snapshot (for SSR/hydration):\n * ```tsx\n * // On the server, get a snapshot from the client\n * const snapshot = serverClient.getSnapshot();\n *\n * // On the client, restore from the snapshot\n * <ReplaneProvider\n *   restoreOptions={{\n *     snapshot,\n *     connection: { baseUrl: '...', sdkKey: '...' } // optional, for live updates\n *   }}\n * >\n *   <App />\n * </ReplaneProvider>\n * ```\n *\n * Errors during client initialization are thrown during rendering,\n * allowing them to be caught by React Error Boundaries.\n */\nexport function ReplaneProvider<T extends object>(props: ReplaneProviderProps<T>) {\n  if (hasClient(props)) {\n    return <ReplaneProviderWithClient {...props} />;\n  }\n\n  if (hasRestoreOptions(props)) {\n    return <ReplaneProviderWithSnapshot {...props} />;\n  }\n\n  if (props.suspense) {\n    return <ReplaneProviderWithSuspense {...props} />;\n  }\n\n  return <ReplaneProviderWithOptions {...props} />;\n}\n","import { useContext, useSyncExternalStore } from \"react\";\nimport { ReplaneContext } from \"./context\";\nimport type { UntypedReplaneConfig } from \"./types\";\nimport type { ReplaneClient, GetConfigOptions } from \"@replanejs/sdk\";\n\nexport function useReplane<T extends object = UntypedReplaneConfig>(): ReplaneClient<T> {\n  const context = useContext(ReplaneContext);\n  if (!context) {\n    throw new Error(\"useReplane must be used within a ReplaneProvider\");\n  }\n  return context.client as ReplaneClient<T>;\n}\n\nexport function useConfig<T>(name: string, options?: GetConfigOptions): T {\n  const client = useReplane();\n\n  const value = useSyncExternalStore(\n    (onStoreChange) => {\n      return client.subscribe(name, onStoreChange);\n    },\n    () => client.get(name, options) as T,\n    () => client.get(name, options) as T\n  );\n\n  return value;\n}\n\n/**\n * Creates a typed version of useReplane hook.\n *\n * @example\n * ```tsx\n * interface AppConfigs {\n *   theme: { darkMode: boolean };\n *   features: { beta: boolean };\n * }\n *\n * const useAppReplane = createReplaneHook<AppConfigs>();\n *\n * function MyComponent() {\n *   const replane = useAppReplane();\n *   // replane.get(\"theme\") returns { darkMode: boolean }\n * }\n * ```\n */\nexport function createReplaneHook<TConfigs extends object>() {\n  return function useTypedReplane(): ReplaneClient<TConfigs> {\n    return useReplane<TConfigs>();\n  };\n}\n\n/**\n * Creates a typed version of useConfig hook.\n *\n * @example\n * ```tsx\n * interface AppConfigs {\n *   theme: { darkMode: boolean };\n *   features: { beta: boolean };\n * }\n *\n * const useAppConfig = createConfigHook<AppConfigs>();\n *\n * function MyComponent() {\n *   const theme = useAppConfig(\"theme\");\n *   // theme is typed as { darkMode: boolean }\n * }\n * ```\n */\nexport function createConfigHook<TConfigs extends object>() {\n  return function useTypedConfig<K extends keyof TConfigs>(\n    name: K,\n    options?: GetConfigOptions\n  ): TConfigs[K] {\n    return useConfig<TConfigs[K]>(String(name), options);\n  };\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@replanejs/react",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "React SDK for Replane - feature flags and remote configuration",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -40,7 +40,7 @@
     "react": ">=18.0.0"
   },
   "dependencies": {
-    "@replanejs/sdk": "^0.7.2"
+    "@replanejs/sdk": "^0.7.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",