@bemedev/app-reactjs 1.8.0 → 1.9.1

package/README.md

@@ -8,6 +8,13 @@ trees.
 
 <br/>
 
+## Demo
+
+Check out the live interactive demo on Vercel:
+[https://bemedev-app-reactjs.vercel.app](https://bemedev-app-reactjs.vercel.app)
+
+<br/>
+
 ## Installation
 
 ```bash
@@ -32,10 +39,10 @@ service.start();
 
 function MyComponent() {
   // 1. Select a specific slice of context
-  const count = useService(service, s => s.context.count);
+  const count = useService(service, { selector: s => s.context.count });
 
   // 2. Or track the active state value
-  const stateValue = useService(service, s => s.value);
+  const stateValue = useService(service, { selector: s => s.value });
 
   // 3. Or track the whole state object
   const state = useService(service);
@@ -53,15 +60,15 @@ function MyComponent() {
 
 ## API Reference
 
-### `useService(service, selector?)`
+### `useService(service, options?)`
 
 Creates a React state hook that updates whenever the interpreter
 transitions, using deep comparison to prevent unnecessary renders.
 
-| Parameter  | Type                    | Description                                                            |
-| ---------- | ----------------------- | ---------------------------------------------------------------------- |
-| `service`  | `Interpreter`           | The `@bemedev/app` interpreter service instance.                       |
-| `selector` | `(state: State) => any` | Optional selector function to slice and track specific parts of state. |
+| Parameter | Type                | Description                                                                         |
+| --------- | ------------------- | ----------------------------------------------------------------------------------- |
+| `service` | `Interpreter`       | The `@bemedev/app` interpreter service instance.                                    |
+| `options` | `UseServiceOptions` | Optional object containing `selector` and/or custom `equality` comparison function. |
 
 Returns the selected state or slice.
 

package/lib/index.cjs

@@ -1,3 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useState = require("./useState.cjs");
+const require_useCan = require("./useCan.cjs");
+const require_useIsInside = require("./useIsInside.cjs");
 const require_useService = require("./useService.cjs");
+exports.createHooks = require_useService.createHooks;
+exports.useCan = require_useCan.useCan;
+exports.useIsInside = require_useIsInside.useIsInside;
 exports.useService = require_useService.useService;
+exports.useState = require_useState.useState;

package/lib/index.d.ts

@@ -1,2 +1,6 @@
 export * from './useService';
+export * from './useState';
+export * from './useCan';
+export * from './useIsInside';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/lib/index.js

@@ -1,2 +1,5 @@
-import { useService } from "./useService.js";
-export { useService };
+import { useState } from "./useState.js";
+import { useCan } from "./useCan.js";
+import { useIsInside } from "./useIsInside.js";
+import { createHooks, useService } from "./useService.js";
+export { createHooks, useCan, useIsInside, useService, useState };

package/lib/types.d.ts

@@ -0,0 +1,6 @@
+import type { EventObject, State, PrimitiveObject } from '@bemedev/app';
+export type UseServiceOptions<Tc extends PrimitiveObject, Ta extends string, Eo extends EventObject, T = State<Eo, Tc, Ta>> = {
+    selector?: (state: State<Eo, Tc, Ta>) => T;
+    equals?: (first: T, next: T) => boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAExE,MAAM,MAAM,iBAAiB,CAC3B,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,CAAC,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,IACnB;IACF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CACzC,CAAC"}

package/lib/useCan.cjs

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+let _bemedev_app_bemedev = require("@bemedev/app/bemedev");
+//#region src/useCan.ts
+function useCan(service) {
+	const dispatch = (matcher) => {
+		return (...events) => {
+			const selector = (_state) => {
+				return events[matcher]((event) => service.canEvent(event));
+			};
+			const [_state, setState] = (0, react.useState)(() => selector(service.state));
+			const sub = service.subscribe(() => {
+				setState(selector(service.state));
+			});
+			(0, react.useEffect)(() => sub.unsubscribe, []);
+			return _state;
+		};
+	};
+	const or = dispatch("some");
+	const and = dispatch("every");
+	return (0, _bemedev_app_bemedev.expandFn)(and, {
+		or,
+		and
+	});
+}
+//#endregion
+exports.useCan = useCan;
+
+//# sourceMappingURL=useCan.cjs.map

package/lib/useCan.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCan.cjs","names":["useState","expandFn"],"sources":["../src/useCan.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { useEffect, useState } from 'react';\n\nexport function useCan<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n>(service: {\n  subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n  state: State<Eo, Tc, Ta>;\n  canEvent: (event: Eo['type']) => boolean;\n}) {\n  const dispatch = (matcher: 'some' | 'every') => {\n    return (...events: Eo['type'][]) => {\n      const selector = (_state: State<Eo, Tc, Ta>) => {\n        return events[matcher](event => service.canEvent(event));\n      };\n\n      const [_state, setState] = useState(() => selector(service.state));\n\n      const sub = service.subscribe(() => {\n        setState(selector(service.state));\n      });\n\n      useEffect(() => sub.unsubscribe, []);\n      return _state;\n    };\n  };\n\n  const or = dispatch('some');\n  const and = dispatch('every');\n  const out = expandFn(and, { or, and });\n  return out;\n}\n"],"mappings":";;;;AASA,SAAgB,OAId,SAIC;CACD,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAyB;GAClC,MAAM,YAAY,WAA8B;IAC9C,OAAO,OAAO,QAAQ,EAAC,UAAS,QAAQ,SAAS,KAAK,CAAC;GACzD;GAEA,MAAM,CAAC,QAAQ,aAAA,GAAYA,MAAAA,SAAAA,OAAe,SAAS,QAAQ,KAAK,CAAC;GAEjE,MAAM,MAAM,QAAQ,gBAAgB;IAClC,SAAS,SAAS,QAAQ,KAAK,CAAC;GAClC,CAAC;GAED,CAAA,GAAA,MAAA,UAAA,OAAgB,IAAI,aAAa,CAAC,CAAC;GACnC,OAAO;EACT;CACF;CAEA,MAAM,KAAK,SAAS,MAAM;CAC1B,MAAM,MAAM,SAAS,OAAO;CAE5B,QAAA,GADYC,qBAAAA,SAAAA,CAAS,KAAK;EAAE;EAAI;CAAI,CAC3B;AACX"}

package/lib/useCan.d.ts

@@ -0,0 +1,10 @@
+import type { AddSubscriber_F, EventObject, PrimitiveObject, State } from '@bemedev/app';
+export declare function useCan<Tc extends PrimitiveObject, Ta extends string, Eo extends EventObject>(service: {
+    subscribe: AddSubscriber_F<Tc, Ta, Eo>;
+    state: State<Eo, Tc, Ta>;
+    canEvent: (event: Eo['type']) => boolean;
+}): import("@bemedev/app/bemedev").FnBasic<(...events: Eo["type"][]) => boolean, {
+    readonly or: (...events: Eo["type"][]) => boolean;
+    readonly and: (...events: Eo["type"][]) => boolean;
+}>;
+//# sourceMappingURL=useCan.d.ts.map

package/lib/useCan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCan.d.ts","sourceRoot":"","sources":["../src/useCan.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,cAAc,CAAC;AAItB,wBAAgB,MAAM,CACpB,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,OAAO,EAAE;IACT,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;CAC1C,sDAEsB,EAAE,CAAC,MAAM,CAAC,EAAE;6BAAZ,EAAE,CAAC,MAAM,CAAC,EAAE;8BAAZ,EAAE,CAAC,MAAM,CAAC,EAAE;GAoBlC"}

package/lib/useCan.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { expandFn } from "@bemedev/app/bemedev";
+//#region src/useCan.ts
+function useCan(service) {
+	const dispatch = (matcher) => {
+		return (...events) => {
+			const selector = (_state) => {
+				return events[matcher]((event) => service.canEvent(event));
+			};
+			const [_state, setState] = useState(() => selector(service.state));
+			const sub = service.subscribe(() => {
+				setState(selector(service.state));
+			});
+			useEffect(() => sub.unsubscribe, []);
+			return _state;
+		};
+	};
+	const or = dispatch("some");
+	const and = dispatch("every");
+	return expandFn(and, {
+		or,
+		and
+	});
+}
+//#endregion
+export { useCan };
+
+//# sourceMappingURL=useCan.js.map

package/lib/useCan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCan.js","names":[],"sources":["../src/useCan.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { useEffect, useState } from 'react';\n\nexport function useCan<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n>(service: {\n  subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n  state: State<Eo, Tc, Ta>;\n  canEvent: (event: Eo['type']) => boolean;\n}) {\n  const dispatch = (matcher: 'some' | 'every') => {\n    return (...events: Eo['type'][]) => {\n      const selector = (_state: State<Eo, Tc, Ta>) => {\n        return events[matcher](event => service.canEvent(event));\n      };\n\n      const [_state, setState] = useState(() => selector(service.state));\n\n      const sub = service.subscribe(() => {\n        setState(selector(service.state));\n      });\n\n      useEffect(() => sub.unsubscribe, []);\n      return _state;\n    };\n  };\n\n  const or = dispatch('some');\n  const and = dispatch('every');\n  const out = expandFn(and, { or, and });\n  return out;\n}\n"],"mappings":";;;AASA,SAAgB,OAId,SAIC;CACD,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAyB;GAClC,MAAM,YAAY,WAA8B;IAC9C,OAAO,OAAO,QAAQ,EAAC,UAAS,QAAQ,SAAS,KAAK,CAAC;GACzD;GAEA,MAAM,CAAC,QAAQ,YAAY,eAAe,SAAS,QAAQ,KAAK,CAAC;GAEjE,MAAM,MAAM,QAAQ,gBAAgB;IAClC,SAAS,SAAS,QAAQ,KAAK,CAAC;GAClC,CAAC;GAED,gBAAgB,IAAI,aAAa,CAAC,CAAC;GACnC,OAAO;EACT;CACF;CAEA,MAAM,KAAK,SAAS,MAAM;CAC1B,MAAM,MAAM,SAAS,OAAO;CAE5B,OADY,SAAS,KAAK;EAAE;EAAI;CAAI,CAC3B;AACX"}

package/lib/useIsInside.cjs

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _bemedev_app = require("@bemedev/app");
+let react = require("react");
+let _bemedev_app_bemedev = require("@bemedev/app/bemedev");
+//#region src/useIsInside.ts
+function useIsInside(service) {
+	const selector1 = (_state) => {
+		return (0, _bemedev_app.decomposeSV)(_state.value);
+	};
+	const dispatch = (matcher) => {
+		return (...states) => {
+			const selector = (_state) => {
+				return states[matcher]((state) => selector1(_state).includes(state));
+			};
+			const [_state, setState] = (0, react.useState)(() => selector(service.state));
+			const sub = service.subscribe((nextState) => {
+				setState(selector(nextState));
+			}, { equals: (first, next) => {
+				return selector(first) === selector(next);
+			} });
+			(0, react.useEffect)(() => sub.unsubscribe, []);
+			return _state;
+		};
+	};
+	const or = dispatch("some");
+	const and = dispatch("every");
+	return (0, _bemedev_app_bemedev.expandFn)(and, {
+		or,
+		and
+	});
+}
+//#endregion
+exports.useIsInside = useIsInside;
+
+//# sourceMappingURL=useIsInside.cjs.map

package/lib/useIsInside.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsInside.cjs","names":["decomposeSV","useState","expandFn"],"sources":["../src/useIsInside.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app';\nimport { decomposeSV } from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { useEffect, useState } from 'react';\n\nexport function useIsInside<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n>(service: {\n  subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n  state: State<Eo, Tc, Ta>;\n}) {\n  const selector1 = (_state: State<Eo, Tc, Ta>) => {\n    return decomposeSV(_state.value);\n  };\n\n  const dispatch = (matcher: 'some' | 'every') => {\n    return (...states: string[]) => {\n      const selector = (_state: State<Eo, Tc, Ta>) => {\n        return states[matcher](state => selector1(_state).includes(state));\n      };\n\n      const [_state, setState] = useState(() => selector(service.state));\n\n      const sub = service.subscribe(\n        nextState => {\n          setState(selector(nextState));\n        },\n        {\n          equals: (first, next) => {\n            const _first = selector(first);\n            const _next = selector(next);\n            return _first === _next;\n          },\n        },\n      );\n\n      useEffect(() => sub.unsubscribe, []);\n      return _state;\n    };\n  };\n\n  const or = dispatch('some');\n  const and = dispatch('every');\n  const out = expandFn(and, { or, and });\n  return out;\n}\n"],"mappings":";;;;;AAUA,SAAgB,YAId,SAGC;CACD,MAAM,aAAa,WAA8B;EAC/C,QAAA,GAAOA,aAAAA,YAAAA,CAAY,OAAO,KAAK;CACjC;CAEA,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAqB;GAC9B,MAAM,YAAY,WAA8B;IAC9C,OAAO,OAAO,QAAQ,EAAC,UAAS,UAAU,MAAM,CAAC,CAAC,SAAS,KAAK,CAAC;GACnE;GAEA,MAAM,CAAC,QAAQ,aAAA,GAAYC,MAAAA,SAAAA,OAAe,SAAS,QAAQ,KAAK,CAAC;GAEjE,MAAM,MAAM,QAAQ,WAClB,cAAa;IACX,SAAS,SAAS,SAAS,CAAC;GAC9B,GACA,EACE,SAAS,OAAO,SAAS;IAGvB,OAFe,SAAS,KAEZ,MADE,SAAS,IACD;GACxB,EACF,CACF;GAEA,CAAA,GAAA,MAAA,UAAA,OAAgB,IAAI,aAAa,CAAC,CAAC;GACnC,OAAO;EACT;CACF;CAEA,MAAM,KAAK,SAAS,MAAM;CAC1B,MAAM,MAAM,SAAS,OAAO;CAE5B,QAAA,GADYC,qBAAAA,SAAAA,CAAS,KAAK;EAAE;EAAI;CAAI,CAC3B;AACX"}

package/lib/useIsInside.d.ts

@@ -0,0 +1,9 @@
+import type { AddSubscriber_F, EventObject, PrimitiveObject, State } from '@bemedev/app';
+export declare function useIsInside<Tc extends PrimitiveObject, Ta extends string, Eo extends EventObject>(service: {
+    subscribe: AddSubscriber_F<Tc, Ta, Eo>;
+    state: State<Eo, Tc, Ta>;
+}): import("@bemedev/app/bemedev").FnBasic<(...states: string[]) => boolean, {
+    readonly or: (...states: string[]) => boolean;
+    readonly and: (...states: string[]) => boolean;
+}>;
+//# sourceMappingURL=useIsInside.d.ts.map

package/lib/useIsInside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsInside.d.ts","sourceRoot":"","sources":["../src/useIsInside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,cAAc,CAAC;AAKtB,wBAAgB,WAAW,CACzB,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,OAAO,EAAE;IACT,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;CAC1B,sDAMsB,MAAM,EAAE;6BAAR,MAAM,EAAE;8BAAR,MAAM,EAAE;GA6B9B"}

package/lib/useIsInside.js

@@ -0,0 +1,34 @@
+import { decomposeSV } from "@bemedev/app";
+import { useEffect, useState } from "react";
+import { expandFn } from "@bemedev/app/bemedev";
+//#region src/useIsInside.ts
+function useIsInside(service) {
+	const selector1 = (_state) => {
+		return decomposeSV(_state.value);
+	};
+	const dispatch = (matcher) => {
+		return (...states) => {
+			const selector = (_state) => {
+				return states[matcher]((state) => selector1(_state).includes(state));
+			};
+			const [_state, setState] = useState(() => selector(service.state));
+			const sub = service.subscribe((nextState) => {
+				setState(selector(nextState));
+			}, { equals: (first, next) => {
+				return selector(first) === selector(next);
+			} });
+			useEffect(() => sub.unsubscribe, []);
+			return _state;
+		};
+	};
+	const or = dispatch("some");
+	const and = dispatch("every");
+	return expandFn(and, {
+		or,
+		and
+	});
+}
+//#endregion
+export { useIsInside };
+
+//# sourceMappingURL=useIsInside.js.map

package/lib/useIsInside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsInside.js","names":[],"sources":["../src/useIsInside.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app';\nimport { decomposeSV } from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { useEffect, useState } from 'react';\n\nexport function useIsInside<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n>(service: {\n  subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n  state: State<Eo, Tc, Ta>;\n}) {\n  const selector1 = (_state: State<Eo, Tc, Ta>) => {\n    return decomposeSV(_state.value);\n  };\n\n  const dispatch = (matcher: 'some' | 'every') => {\n    return (...states: string[]) => {\n      const selector = (_state: State<Eo, Tc, Ta>) => {\n        return states[matcher](state => selector1(_state).includes(state));\n      };\n\n      const [_state, setState] = useState(() => selector(service.state));\n\n      const sub = service.subscribe(\n        nextState => {\n          setState(selector(nextState));\n        },\n        {\n          equals: (first, next) => {\n            const _first = selector(first);\n            const _next = selector(next);\n            return _first === _next;\n          },\n        },\n      );\n\n      useEffect(() => sub.unsubscribe, []);\n      return _state;\n    };\n  };\n\n  const or = dispatch('some');\n  const and = dispatch('every');\n  const out = expandFn(and, { or, and });\n  return out;\n}\n"],"mappings":";;;;AAUA,SAAgB,YAId,SAGC;CACD,MAAM,aAAa,WAA8B;EAC/C,OAAO,YAAY,OAAO,KAAK;CACjC;CAEA,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAqB;GAC9B,MAAM,YAAY,WAA8B;IAC9C,OAAO,OAAO,QAAQ,EAAC,UAAS,UAAU,MAAM,CAAC,CAAC,SAAS,KAAK,CAAC;GACnE;GAEA,MAAM,CAAC,QAAQ,YAAY,eAAe,SAAS,QAAQ,KAAK,CAAC;GAEjE,MAAM,MAAM,QAAQ,WAClB,cAAa;IACX,SAAS,SAAS,SAAS,CAAC;GAC9B,GACA,EACE,SAAS,OAAO,SAAS;IAGvB,OAFe,SAAS,KAEZ,MADE,SAAS,IACD;GACxB,EACF,CACF;GAEA,gBAAgB,IAAI,aAAa,CAAC,CAAC;GACnC,OAAO;EACT;CACF;CAEA,MAAM,KAAK,SAAS,MAAM;CAC1B,MAAM,MAAM,SAAS,OAAO;CAE5B,OADY,SAAS,KAAK;EAAE;EAAI;CAAI,CAC3B;AACX"}

package/lib/useService.cjs

@@ -1,25 +1,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-let _bemedev_app_utils = require("@bemedev/app/utils");
-let react = require("react");
+const require_useState = require("./useState.cjs");
+const require_useCan = require("./useCan.cjs");
+const require_useIsInside = require("./useIsInside.cjs");
 //#region src/useService.ts
-/**
-* A hook that creates a React state from a service with a subscribe function.
-*
-* @param service - The service containing the state and subscribe method.
-* @param selector - A function to select the desired slice of state.
-* @returns The selected state.
-*/
-function useService(service, selector = (s) => s) {
-	const [state, setState] = (0, react.useState)(() => selector(service.state));
-	const sub = service.subscribe((nextState) => setState(selector(nextState)), { equals: (first, next) => {
-		const _first = selector(first);
-		const _next = selector(next);
-		return (0, _bemedev_app_utils.deepEqual)(_first, _next);
-	} });
-	(0, react.useEffect)(() => sub.unsubscribe, [service, selector]);
-	return state;
+function useService(service) {
+	return {
+		state: (options) => require_useState.useState(service, options),
+		can: require_useCan.useCan(service),
+		isInside: require_useIsInside.useIsInside(service)
+	};
 }
+const createHooks = useService;
 //#endregion
+exports.createHooks = createHooks;
 exports.useService = useService;
 
 //# sourceMappingURL=useService.cjs.map

package/lib/useService.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useService.cjs","names":["useState","deepEqual"],"sources":["../src/useService.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app/types';\nimport { deepEqual } from '@bemedev/app/utils';\nimport { useEffect, useState } from 'react';\n\n/**\n * A hook that creates a React state from a service with a subscribe function.\n *\n * @param service - The service containing the state and subscribe method.\n * @param selector - A function to select the desired slice of state.\n * @returns The selected state.\n */\nexport function useService<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n  T = State<Eo, Tc, Ta>,\n>(\n  service: {\n    subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n    state: State<Eo, Tc, Ta>;\n  },\n  selector: (state: State<Eo, Tc, Ta>) => T = (s: State<Eo, Tc, Ta>) =>\n    s as unknown as T,\n): T {\n  const [state, setState] = useState<T>(() => selector(service.state));\n\n  const sub = service.subscribe(\n    nextState => setState(selector(nextState)),\n    {\n      equals: (first, next) => {\n        const _first = selector(first);\n        const _next = selector(next);\n        return deepEqual(_first, _next);\n      },\n    },\n  );\n\n  useEffect(() => sub.unsubscribe, [service, selector]);\n  return state;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAgB,WAMd,SAIA,YAA6C,MAC3C,GACC;CACH,MAAM,CAAC,OAAO,aAAA,GAAYA,MAAAA,SAAAA,OAAkB,SAAS,QAAQ,KAAK,CAAC;CAEnE,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,SAAS,SAAS,CAAC,GACzC,EACE,SAAS,OAAO,SAAS;EACvB,MAAM,SAAS,SAAS,KAAK;EAC7B,MAAM,QAAQ,SAAS,IAAI;EAC3B,QAAA,GAAOC,mBAAAA,UAAAA,CAAU,QAAQ,KAAK;CAChC,EACF,CACF;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB,IAAI,aAAa,CAAC,SAAS,QAAQ,CAAC;CACpD,OAAO;AACT"}
+{"version":3,"file":"useService.cjs","names":["useState","useCan","useIsInside"],"sources":["../src/useService.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app';\nimport type { UseServiceOptions } from './types';\nimport { useCan } from './useCan';\nimport { useIsInside } from './useIsInside';\nimport { useState } from './useState';\n\nexport function useService<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n>(service: {\n  subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n  state: State<Eo, Tc, Ta>;\n  canEvent: (event: Eo['type']) => boolean;\n}) {\n  return {\n    state: <T = State<Eo, Tc, Ta>>(\n      options?: UseServiceOptions<Tc, Ta, Eo, T>,\n    ) => useState<Tc, Ta, Eo, T>(service, options),\n\n    can: useCan(service),\n    isInside: useIsInside(service),\n  };\n}\n\nexport const createHooks = useService;\n"],"mappings":";;;;;AAWA,SAAgB,WAId,SAIC;CACD,OAAO;EACL,QACE,YACGA,iBAAAA,SAAwB,SAAS,OAAO;EAE7C,KAAKC,eAAAA,OAAO,OAAO;EACnB,UAAUC,oBAAAA,YAAY,OAAO;CAC/B;AACF;AAEA,MAAa,cAAc"}

package/lib/useService.d.ts

@@ -1,13 +1,19 @@
-import type { AddSubscriber_F, EventObject, PrimitiveObject, State } from '@bemedev/app/types';
-/**
- * A hook that creates a React state from a service with a subscribe function.
- *
- * @param service - The service containing the state and subscribe method.
- * @param selector - A function to select the desired slice of state.
- * @returns The selected state.
- */
-export declare function useService<Tc extends PrimitiveObject, Ta extends string, Eo extends EventObject, T = State<Eo, Tc, Ta>>(service: {
+import type { AddSubscriber_F, EventObject, PrimitiveObject, State } from '@bemedev/app';
+import type { UseServiceOptions } from './types';
+export declare function useService<Tc extends PrimitiveObject, Ta extends string, Eo extends EventObject>(service: {
     subscribe: AddSubscriber_F<Tc, Ta, Eo>;
     state: State<Eo, Tc, Ta>;
-}, selector?: (state: State<Eo, Tc, Ta>) => T): T;
+    canEvent: (event: Eo['type']) => boolean;
+}): {
+    state: <T = State<Eo, Tc, Ta>>(options?: UseServiceOptions<Tc, Ta, Eo, T>) => T;
+    can: import("@bemedev/app/bemedev").FnBasic<(...events: Eo["type"][]) => boolean, {
+        readonly or: (...events: Eo["type"][]) => boolean;
+        readonly and: (...events: Eo["type"][]) => boolean;
+    }>;
+    isInside: import("@bemedev/app/bemedev").FnBasic<(...states: string[]) => boolean, {
+        readonly or: (...states: string[]) => boolean;
+        readonly and: (...states: string[]) => boolean;
+    }>;
+};
+export declare const createHooks: typeof useService;
 //# sourceMappingURL=useService.d.ts.map

package/lib/useService.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useService.d.ts","sourceRoot":"","sources":["../src/useService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,oBAAoB,CAAC;AAI5B;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,CAAC,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAErB,OAAO,EAAE;IACP,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;CAC1B,EACD,QAAQ,GAAE,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,KAAK,CACrB,GAClB,CAAC,CAgBH"}
+{"version":3,"file":"useService.d.ts","sourceRoot":"","sources":["../src/useService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAKjD,wBAAgB,UAAU,CACxB,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,OAAO,EAAE;IACT,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;CAC1C;YAEW,CAAC,gCACG,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;;;;;;;;EAM/C;AAED,eAAO,MAAM,WAAW,mBAAa,CAAC"}

package/lib/useService.js

@@ -1,24 +1,16 @@
-import { deepEqual } from "@bemedev/app/utils";
-import { useEffect, useState } from "react";
+import { useState } from "./useState.js";
+import { useCan } from "./useCan.js";
+import { useIsInside } from "./useIsInside.js";
 //#region src/useService.ts
-/**
-* A hook that creates a React state from a service with a subscribe function.
-*
-* @param service - The service containing the state and subscribe method.
-* @param selector - A function to select the desired slice of state.
-* @returns The selected state.
-*/
-function useService(service, selector = (s) => s) {
-	const [state, setState] = useState(() => selector(service.state));
-	const sub = service.subscribe((nextState) => setState(selector(nextState)), { equals: (first, next) => {
-		const _first = selector(first);
-		const _next = selector(next);
-		return deepEqual(_first, _next);
-	} });
-	useEffect(() => sub.unsubscribe, [service, selector]);
-	return state;
+function useService(service) {
+	return {
+		state: (options) => useState(service, options),
+		can: useCan(service),
+		isInside: useIsInside(service)
+	};
 }
+const createHooks = useService;
 //#endregion
-export { useService };
+export { createHooks, useService };
 
 //# sourceMappingURL=useService.js.map

package/lib/useService.js.map

@@ -1 +1 @@
-{"version":3,"file":"useService.js","names":[],"sources":["../src/useService.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app/types';\nimport { deepEqual } from '@bemedev/app/utils';\nimport { useEffect, useState } from 'react';\n\n/**\n * A hook that creates a React state from a service with a subscribe function.\n *\n * @param service - The service containing the state and subscribe method.\n * @param selector - A function to select the desired slice of state.\n * @returns The selected state.\n */\nexport function useService<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n  T = State<Eo, Tc, Ta>,\n>(\n  service: {\n    subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n    state: State<Eo, Tc, Ta>;\n  },\n  selector: (state: State<Eo, Tc, Ta>) => T = (s: State<Eo, Tc, Ta>) =>\n    s as unknown as T,\n): T {\n  const [state, setState] = useState<T>(() => selector(service.state));\n\n  const sub = service.subscribe(\n    nextState => setState(selector(nextState)),\n    {\n      equals: (first, next) => {\n        const _first = selector(first);\n        const _next = selector(next);\n        return deepEqual(_first, _next);\n      },\n    },\n  );\n\n  useEffect(() => sub.unsubscribe, [service, selector]);\n  return state;\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,WAMd,SAIA,YAA6C,MAC3C,GACC;CACH,MAAM,CAAC,OAAO,YAAY,eAAkB,SAAS,QAAQ,KAAK,CAAC;CAEnE,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,SAAS,SAAS,CAAC,GACzC,EACE,SAAS,OAAO,SAAS;EACvB,MAAM,SAAS,SAAS,KAAK;EAC7B,MAAM,QAAQ,SAAS,IAAI;EAC3B,OAAO,UAAU,QAAQ,KAAK;CAChC,EACF,CACF;CAEA,gBAAgB,IAAI,aAAa,CAAC,SAAS,QAAQ,CAAC;CACpD,OAAO;AACT"}
+{"version":3,"file":"useService.js","names":[],"sources":["../src/useService.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app';\nimport type { UseServiceOptions } from './types';\nimport { useCan } from './useCan';\nimport { useIsInside } from './useIsInside';\nimport { useState } from './useState';\n\nexport function useService<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n>(service: {\n  subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n  state: State<Eo, Tc, Ta>;\n  canEvent: (event: Eo['type']) => boolean;\n}) {\n  return {\n    state: <T = State<Eo, Tc, Ta>>(\n      options?: UseServiceOptions<Tc, Ta, Eo, T>,\n    ) => useState<Tc, Ta, Eo, T>(service, options),\n\n    can: useCan(service),\n    isInside: useIsInside(service),\n  };\n}\n\nexport const createHooks = useService;\n"],"mappings":";;;;AAWA,SAAgB,WAId,SAIC;CACD,OAAO;EACL,QACE,YACG,SAAwB,SAAS,OAAO;EAE7C,KAAK,OAAO,OAAO;EACnB,UAAU,YAAY,OAAO;CAC/B;AACF;AAEA,MAAa,cAAc"}

package/lib/useState.cjs

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _bemedev_app = require("@bemedev/app");
+let react = require("react");
+//#region src/useState.ts
+/**
+* A hook that creates a React state from a service with a subscribe function.
+*
+* @param service - The service containing the state and subscribe method.
+* @param options - Optional configuration options for selection and equality comparison.
+* @returns The selected state.
+*/
+function useState(service, options) {
+	const { selector = (s) => s, equals = _bemedev_app.deepEqual } = options ?? {};
+	const [_state, setState] = (0, react.useState)(() => selector(service.state));
+	(0, react.useEffect)(() => {
+		return service.subscribe((nextState) => {
+			setState(selector(nextState));
+		}, { equals: (first, next) => {
+			const _first = selector(first);
+			const _next = selector(next);
+			return equals(_first, _next);
+		} }).unsubscribe;
+	}, [
+		_state,
+		setState,
+		selector,
+		equals,
+		service
+	]);
+	return _state;
+}
+//#endregion
+exports.useState = useState;
+
+//# sourceMappingURL=useState.cjs.map

package/lib/useState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useState.cjs","names":["deepEqual","useReactState"],"sources":["../src/useState.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app';\nimport { deepEqual } from '@bemedev/app';\nimport { useEffect, useState as useReactState } from 'react';\nimport type { UseServiceOptions } from './types';\n\n/**\n * A hook that creates a React state from a service with a subscribe function.\n *\n * @param service - The service containing the state and subscribe method.\n * @param options - Optional configuration options for selection and equality comparison.\n * @returns The selected state.\n */\nexport function useState<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n  T = State<Eo, Tc, Ta>,\n>(\n  service: {\n    subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n    state: State<Eo, Tc, Ta>;\n  },\n  options?: UseServiceOptions<Tc, Ta, Eo, T>,\n): T {\n  const {\n    selector = (s: State<Eo, Tc, Ta>) => s as T,\n    equals = deepEqual<T>,\n  } = options ?? {};\n\n  const [_state, setState] = useReactState<T>(() =>\n    selector(service.state),\n  );\n\n  useEffect(() => {\n    const sub = service.subscribe(\n      nextState => {\n        setState(selector(nextState));\n      },\n      {\n        equals: (first, next) => {\n          const _first = selector(first);\n          const _next = selector(next);\n          return equals(_first, _next);\n        },\n      },\n    );\n\n    return sub.unsubscribe;\n  }, [_state, setState, selector, equals, service]);\n  return _state;\n}\n"],"mappings":";;;;;;;;;;;AAiBA,SAAgB,SAMd,SAIA,SACG;CACH,MAAM,EACJ,YAAY,MAAyB,GACrC,SAASA,aAAAA,cACP,WAAW,CAAC;CAEhB,MAAM,CAAC,QAAQ,aAAA,GAAYC,MAAAA,SAAAA,OACzB,SAAS,QAAQ,KAAK,CACxB;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EAcd,OAbY,QAAQ,WAClB,cAAa;GACX,SAAS,SAAS,SAAS,CAAC;EAC9B,GACA,EACE,SAAS,OAAO,SAAS;GACvB,MAAM,SAAS,SAAS,KAAK;GAC7B,MAAM,QAAQ,SAAS,IAAI;GAC3B,OAAO,OAAO,QAAQ,KAAK;EAC7B,EACF,CAGO,CAAC,CAAC;CACb,GAAG;EAAC;EAAQ;EAAU;EAAU;EAAQ;CAAO,CAAC;CAChD,OAAO;AACT"}

package/lib/useState.d.ts

@@ -0,0 +1,14 @@
+import type { AddSubscriber_F, EventObject, PrimitiveObject, State } from '@bemedev/app';
+import type { UseServiceOptions } from './types';
+/**
+ * A hook that creates a React state from a service with a subscribe function.
+ *
+ * @param service - The service containing the state and subscribe method.
+ * @param options - Optional configuration options for selection and equality comparison.
+ * @returns The selected state.
+ */
+export declare function useState<Tc extends PrimitiveObject, Ta extends string, Eo extends EventObject, T = State<Eo, Tc, Ta>>(service: {
+    subscribe: AddSubscriber_F<Tc, Ta, Eo>;
+    state: State<Eo, Tc, Ta>;
+}, options?: UseServiceOptions<Tc, Ta, Eo, T>): T;
+//# sourceMappingURL=useState.d.ts.map

package/lib/useState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../src/useState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EACN,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,EAAE,SAAS,eAAe,EAC1B,EAAE,SAAS,MAAM,EACjB,EAAE,SAAS,WAAW,EACtB,CAAC,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAErB,OAAO,EAAE;IACP,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;CAC1B,EACD,OAAO,CAAC,EAAE,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GACzC,CAAC,CA2BH"}

package/lib/useState.js

@@ -0,0 +1,34 @@
+import { deepEqual } from "@bemedev/app";
+import { useEffect, useState as useState$1 } from "react";
+//#region src/useState.ts
+/**
+* A hook that creates a React state from a service with a subscribe function.
+*
+* @param service - The service containing the state and subscribe method.
+* @param options - Optional configuration options for selection and equality comparison.
+* @returns The selected state.
+*/
+function useState(service, options) {
+	const { selector = (s) => s, equals = deepEqual } = options ?? {};
+	const [_state, setState] = useState$1(() => selector(service.state));
+	useEffect(() => {
+		return service.subscribe((nextState) => {
+			setState(selector(nextState));
+		}, { equals: (first, next) => {
+			const _first = selector(first);
+			const _next = selector(next);
+			return equals(_first, _next);
+		} }).unsubscribe;
+	}, [
+		_state,
+		setState,
+		selector,
+		equals,
+		service
+	]);
+	return _state;
+}
+//#endregion
+export { useState };
+
+//# sourceMappingURL=useState.js.map

package/lib/useState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useState.js","names":["useReactState"],"sources":["../src/useState.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app';\nimport { deepEqual } from '@bemedev/app';\nimport { useEffect, useState as useReactState } from 'react';\nimport type { UseServiceOptions } from './types';\n\n/**\n * A hook that creates a React state from a service with a subscribe function.\n *\n * @param service - The service containing the state and subscribe method.\n * @param options - Optional configuration options for selection and equality comparison.\n * @returns The selected state.\n */\nexport function useState<\n  Tc extends PrimitiveObject,\n  Ta extends string,\n  Eo extends EventObject,\n  T = State<Eo, Tc, Ta>,\n>(\n  service: {\n    subscribe: AddSubscriber_F<Tc, Ta, Eo>;\n    state: State<Eo, Tc, Ta>;\n  },\n  options?: UseServiceOptions<Tc, Ta, Eo, T>,\n): T {\n  const {\n    selector = (s: State<Eo, Tc, Ta>) => s as T,\n    equals = deepEqual<T>,\n  } = options ?? {};\n\n  const [_state, setState] = useReactState<T>(() =>\n    selector(service.state),\n  );\n\n  useEffect(() => {\n    const sub = service.subscribe(\n      nextState => {\n        setState(selector(nextState));\n      },\n      {\n        equals: (first, next) => {\n          const _first = selector(first);\n          const _next = selector(next);\n          return equals(_first, _next);\n        },\n      },\n    );\n\n    return sub.unsubscribe;\n  }, [_state, setState, selector, equals, service]);\n  return _state;\n}\n"],"mappings":";;;;;;;;;;AAiBA,SAAgB,SAMd,SAIA,SACG;CACH,MAAM,EACJ,YAAY,MAAyB,GACrC,SAAS,cACP,WAAW,CAAC;CAEhB,MAAM,CAAC,QAAQ,YAAYA,iBACzB,SAAS,QAAQ,KAAK,CACxB;CAEA,gBAAgB;EAcd,OAbY,QAAQ,WAClB,cAAa;GACX,SAAS,SAAS,SAAS,CAAC;EAC9B,GACA,EACE,SAAS,OAAO,SAAS;GACvB,MAAM,SAAS,SAAS,KAAK;GAC7B,MAAM,QAAQ,SAAS,IAAI;GAC3B,OAAO,OAAO,QAAQ,KAAK;EAC7B,EACF,CAGO,CAAC,CAAC;CACb,GAAG;EAAC;EAAQ;EAAU;EAAU;EAAQ;CAAO,CAAC;CAChD,OAAO;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bemedev/app-reactjs",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "Middleware between @bemedev/app and reactjs",
   "keywords": [
     "app",
@@ -47,13 +47,13 @@
     "@bemedev/decompose": "2.3.0",
     "@bemedev/dev-utils": "^1.1.1",
     "@bemedev/sleep": "^0.2.2",
-    "@size-limit/file": "^13.0.2",
+    "@size-limit/file": "^13.0.3",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^26.1.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@vitest/coverage-v8": "^4.1.10",
     "@vitest/ui": "4.1.10",
     "glob": "^13.0.6",
@@ -68,18 +68,18 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "rolldown": "1.2.1",
-    "rolldown-plugin-dts": "^0.27.14",
-    "size-limit": "^13.0.2",
+    "rolldown-plugin-dts": "^0.28.0",
+    "size-limit": "^13.0.3",
     "tslib": "^2.8.1",
     "tsx": "^4.23.1",
     "typescript": "^6.0.3",
     "vitest": "^4.1.10",
-    "@bemedev/app": "^1.8.0",
-    "@bemedev/app-vitest": "^1.8.0"
+    "@bemedev/app": "^1.9.1",
+    "@bemedev/app-vitest": "^1.9.1"
   },
   "peerDependencies": {
     "react": "^19.2.8",
-    "@bemedev/app": "^1.8.0"
+    "@bemedev/app": "^1.9.1"
   },
   "size-limit": [
     {