react-state-custom 1.0.26 → 1.0.28

package/README.md

@@ -37,7 +37,7 @@ function useCounterState() {
 // 2. Create shared context (one line!)
 const { useCtxState } = createAutoCtx(createRootCtx('counter', useCounterState));
 
-// 3. Add AutoRootCtx to your app root
+// 3. Add AutoRootCtx to your app root (mount it once near the top of your tree)
 function App() {
   return (
     <>
@@ -62,6 +62,8 @@ function Counter() {
 }
 ```
 
+> ℹ️ `AutoRootCtx` accepts optional `Wrapper` and `debugging` props. Pass an ErrorBoundary-like component through `Wrapper` to isolate failures, or set `debugging` to `true` to render raw state snapshots in the DOM (handy alongside React DevTools when tracking updates).
+
 **That's it!** No reducers, no actions, no providers to wrap—just hooks.
 
 ## 🎯 Key Features
@@ -94,7 +96,7 @@ const { user, loading } = useDataSubscribeMultiple(ctx, 'user', 'loading');
 ```
 
 ### 3. **Automatic Context Management**
-With `AutoRootCtx`, state contexts are automatically created and destroyed as needed. No manual provider management.
+With `AutoRootCtx`, state contexts are automatically created and destroyed as needed. Mount it once near your application root, optionally providing a `Wrapper` (for error boundaries) or enabling `debugging` to render live state snapshots in the DOM—useful context when pairing with React DevTools. No manual provider management required.
 
 ### 4. **TypeScript First**
 Full type inference and type safety throughout. Your IDE knows exactly what's in your state.
@@ -267,6 +269,8 @@ function App() {
 }
 ```
 
+The toggle reveals a bottom-docked inspector that now uses resizable split panes powered by `@uiw/react-split`. Drag the gutter to adjust how much space the context list or detail view occupies while keeping your application visible above.
+
 **Custom data viewer with rich object visualization:**
 ```typescript
 import { DataViewComponent } from 'react-state-custom';
@@ -288,18 +292,20 @@ function useUserState({ userId }: { userId: string }) {
   // State logic here
 }
 
-const { useCtxState: useUserState } = createAutoCtx(
+const { useCtxState: useUserCtxState } = createAutoCtx(
   createRootCtx('user', useUserState)
 );
 
 // Different instances for different users
 function UserProfile({ userId }) {
-  const ctx = useUserState({ userId }); // Automatic instance per userId
+  const ctx = useUserCtxState({ userId }); // Automatic instance per userId
   const { user } = useQuickSubscribe(ctx);
   return <div>{user?.name}</div>;
 }
 ```
 
+> Need to avoid rapid mount/unmount churn? Pass a second argument to `createAutoCtx` (for example `createAutoCtx(rootCtx, 200)`) to keep instances alive for a few extra milliseconds before disposal.
+
 ### Debounced Subscriptions
 Optimize performance for frequently changing values:
 

package/dist/dev-tool/useHighlight.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 export declare function useHighlight(filterString: string): {
-    highlight: RegExp;
+    highlight: RegExp | undefined;
 };
 export declare const HightlightWrapper: React.FC<{
     highlight: string;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { Context, getContext, useDataContext, useDataSource, useDataSourceMultiple, useDataSubscribe, useDataSubscribeMultiple, useDataSubscribeMultipleWithDebounce, useDataSubscribeWithTransform } from './state-utils/ctx';
 export { createRootCtx } from './state-utils/createRootCtx';
 export { AutoRootCtx, createAutoCtx } from './state-utils/createAutoCtx';
-export { useArrayHash } from './state-utils/useArrayHash';
+export { useArrayChangeId } from './state-utils/useArrayChangeId';
 export { useQuickSubscribe } from './state-utils/useQuickSubscribe';
 export { DevToolContainer } from './dev-tool/DevTool';
 export type { DataViewComponent } from './dev-tool/DataViewComponent';