@bemedev/app-reactjs 1.9.4 → 1.10.0

package/lib/types.d.ts

@@ -1,4 +1,15 @@
 import type { EventObject, State, PrimitiveObject } from '@bemedev/app';
+/**
+ * Options for configuring the `useService` hook.
+ *
+ * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+ * @template {string} Ta - Tag type extending `string`.
+ * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+ * @template T - Selected state type, defaults to type {@linkcode State}<{@linkcode Eo}, {@linkcode Tc}, {@linkcode Ta}>.
+ *
+ * @property selector - Optional selector function to project the state into a sub-state.
+ * @property equals - Optional equality comparator function to compare previous and next selected state.
+ */
 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;

package/lib/types.d.ts.map

@@ -1 +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"}
+{"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;;;;;;;;;;GAUG;AACH,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

@@ -1,19 +1,32 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _bemedev_app_utils = require("@bemedev/app/utils");
-let react = require("react");
+let _bemedev_react_sync = require("@bemedev/react-sync");
 let _bemedev_app_bemedev = require("@bemedev/app/bemedev");
 //#region src/useCan.ts
+/**
+* React hook that creates reactive helpers for querying event capabilities from a service.
+*
+* @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+* @template {string} Ta - Tag type extending `string`.
+* @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+*
+* @param service - Service object containing `subscribe`, `state`, and `canEvents`.
+* @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.
+* @param service.state - Current state of type {@linkcode State}.
+* @param service.canEvents - Function checking if event types can be accepted.
+*
+* @returns Object helper with `or` and `and` methods to check event availability.
+*/
 function useCan(service) {
-	const dispatch = (matcher) => {
-		return (...events) => {
-			const selector = (_state) => {
-				return events[matcher]((event) => service.canEvents(event));
-			};
-			const [_state, setState] = (0, react.useState)(selector(service.state));
-			const sub = service.subscribe(() => setState(selector(service.state)), { equals: (first, next) => (0, _bemedev_app_utils.deepEqual)(first.value, next.value) });
-			(0, react.useEffect)(() => sub.unsubscribe, []);
-			return _state;
-		};
+	const dispatch = (matcher) => (...events) => {
+		const selector = () => events[matcher]((event) => service.canEvents(event));
+		return (0, _bemedev_react_sync.useSync)((listener) => {
+			const { unsubscribe } = service.subscribe(listener, {
+				equals: (first, next) => (0, _bemedev_app_utils.deepEqual)(first.value, next.value),
+				firstTime: true
+			});
+			return unsubscribe;
+		}, selector, selector, _bemedev_app_utils.identity);
 	};
 	const or = dispatch("some");
 	const and = dispatch("every");

package/lib/useCan.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCan.cjs","names":["useState","deepEqual","expandFn"],"sources":["../src/useCan.ts"],"sourcesContent":["import {\n  type AddSubscriber_F,\n  type EventObject,\n  type PrimitiveObject,\n  type State,\n} from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { deepEqual } from '@bemedev/app/utils';\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  canEvents: (...events: 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.canEvents(event));\n      };\n\n      const [_state, setState] = useState(selector(service.state));\n\n      const sub = service.subscribe(\n        () => setState(selector(service.state)),\n        { equals: (first, next) => deepEqual(first.value, next.value) },\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,OAId,SAIC;CACD,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAyB;GAClC,MAAM,YAAY,WAA8B;IAC9C,OAAO,OAAO,QAAQ,EAAC,UAAS,QAAQ,UAAU,KAAK,CAAC;GAC1D;GAEA,MAAM,CAAC,QAAQ,aAAA,GAAYA,MAAAA,SAAAA,CAAS,SAAS,QAAQ,KAAK,CAAC;GAE3D,MAAM,MAAM,QAAQ,gBACZ,SAAS,SAAS,QAAQ,KAAK,CAAC,GACtC,EAAE,SAAS,OAAO,UAAA,GAASC,mBAAAA,UAAAA,CAAU,MAAM,OAAO,KAAK,KAAK,EAAE,CAChE;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"}
+{"version":3,"file":"useCan.cjs","names":["useSync","deepEqual","identity","expandFn"],"sources":["../src/useCan.ts"],"sourcesContent":["import {\n  type AddSubscriber_F,\n  type EventObject,\n  type PrimitiveObject,\n  type State,\n} from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { deepEqual, identity } from '@bemedev/app/utils';\nimport { useSync } from '@bemedev/react-sync';\n\n/**\n * React hook that creates reactive helpers for querying event capabilities from a service.\n *\n * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.\n * @template {string} Ta - Tag type extending `string`.\n * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.\n *\n * @param service - Service object containing `subscribe`, `state`, and `canEvents`.\n * @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.\n * @param service.state - Current state of type {@linkcode State}.\n * @param service.canEvents - Function checking if event types can be accepted.\n *\n * @returns Object helper with `or` and `and` methods to check event availability.\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  canEvents: (...events: Eo['type'][]) => boolean;\n}) {\n  const dispatch =\n    (matcher: 'some' | 'every') =>\n    (...events: Eo['type'][]) => {\n      const selector = () =>\n        events[matcher](event => service.canEvents(event));\n      return useSync(\n        listener => {\n          const { unsubscribe } = service.subscribe(listener, {\n            equals: (first, next) => deepEqual(first.value, next.value),\n            firstTime: true,\n          });\n          return unsubscribe;\n        },\n        selector,\n        selector,\n        identity,\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":";;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,OAId,SAIC;CACD,MAAM,YACH,aACA,GAAG,WAAyB;EAC3B,MAAM,iBACJ,OAAO,QAAQ,EAAC,UAAS,QAAQ,UAAU,KAAK,CAAC;EACnD,QAAA,GAAOA,oBAAAA,QAAAA,EACL,aAAY;GACV,MAAM,EAAE,gBAAgB,QAAQ,UAAU,UAAU;IAClD,SAAS,OAAO,UAAA,GAASC,mBAAAA,UAAAA,CAAU,MAAM,OAAO,KAAK,KAAK;IAC1D,WAAW;GACb,CAAC;GACD,OAAO;EACT,GACA,UACA,UACAC,mBAAAA,QACF;CACF;CAEF,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

@@ -1,4 +1,18 @@
 import { type AddSubscriber_F, type EventObject, type PrimitiveObject, type State } from '@bemedev/app';
+/**
+ * React hook that creates reactive helpers for querying event capabilities from a service.
+ *
+ * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+ * @template {string} Ta - Tag type extending `string`.
+ * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+ *
+ * @param service - Service object containing `subscribe`, `state`, and `canEvents`.
+ * @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.
+ * @param service.state - Current state of type {@linkcode State}.
+ * @param service.canEvents - Function checking if event types can be accepted.
+ *
+ * @returns Object helper with `or` and `and` methods to check event availability.
+ */
 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>;

package/lib/useCan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCan.d.ts","sourceRoot":"","sources":["../src/useCan.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,KAAK,EACX,MAAM,cAAc,CAAC;AAKtB,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,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,OAAO,CAAC;CACjD,sDAEsB,EAAE,CAAC,MAAM,CAAC,EAAE;6BAAZ,EAAE,CAAC,MAAM,CAAC,EAAE;8BAAZ,EAAE,CAAC,MAAM,CAAC,EAAE;GAqBlC"}
+{"version":3,"file":"useCan.d.ts","sourceRoot":"","sources":["../src/useCan.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,KAAK,EACX,MAAM,cAAc,CAAC;AAKtB;;;;;;;;;;;;;GAaG;AACH,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,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,OAAO,CAAC;CACjD,sDAGe,EAAE,CAAC,MAAM,CAAC,EAAE;6BAAZ,EAAE,CAAC,MAAM,CAAC,EAAE;8BAAZ,EAAE,CAAC,MAAM,CAAC,EAAE;GAqB3B"}

package/lib/useCan.js

@@ -1,18 +1,31 @@
-import { deepEqual } from "@bemedev/app/utils";
-import { useEffect, useState } from "react";
+import { deepEqual, identity } from "@bemedev/app/utils";
+import { useSync } from "@bemedev/react-sync";
 import { expandFn } from "@bemedev/app/bemedev";
 //#region src/useCan.ts
+/**
+* React hook that creates reactive helpers for querying event capabilities from a service.
+*
+* @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+* @template {string} Ta - Tag type extending `string`.
+* @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+*
+* @param service - Service object containing `subscribe`, `state`, and `canEvents`.
+* @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.
+* @param service.state - Current state of type {@linkcode State}.
+* @param service.canEvents - Function checking if event types can be accepted.
+*
+* @returns Object helper with `or` and `and` methods to check event availability.
+*/
 function useCan(service) {
-	const dispatch = (matcher) => {
-		return (...events) => {
-			const selector = (_state) => {
-				return events[matcher]((event) => service.canEvents(event));
-			};
-			const [_state, setState] = useState(selector(service.state));
-			const sub = service.subscribe(() => setState(selector(service.state)), { equals: (first, next) => deepEqual(first.value, next.value) });
-			useEffect(() => sub.unsubscribe, []);
-			return _state;
-		};
+	const dispatch = (matcher) => (...events) => {
+		const selector = () => events[matcher]((event) => service.canEvents(event));
+		return useSync((listener) => {
+			const { unsubscribe } = service.subscribe(listener, {
+				equals: (first, next) => deepEqual(first.value, next.value),
+				firstTime: true
+			});
+			return unsubscribe;
+		}, selector, selector, identity);
 	};
 	const or = dispatch("some");
 	const and = dispatch("every");

package/lib/useCan.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCan.js","names":[],"sources":["../src/useCan.ts"],"sourcesContent":["import {\n  type AddSubscriber_F,\n  type EventObject,\n  type PrimitiveObject,\n  type State,\n} from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { deepEqual } from '@bemedev/app/utils';\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  canEvents: (...events: 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.canEvents(event));\n      };\n\n      const [_state, setState] = useState(selector(service.state));\n\n      const sub = service.subscribe(\n        () => setState(selector(service.state)),\n        { equals: (first, next) => deepEqual(first.value, next.value) },\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,OAId,SAIC;CACD,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAyB;GAClC,MAAM,YAAY,WAA8B;IAC9C,OAAO,OAAO,QAAQ,EAAC,UAAS,QAAQ,UAAU,KAAK,CAAC;GAC1D;GAEA,MAAM,CAAC,QAAQ,YAAY,SAAS,SAAS,QAAQ,KAAK,CAAC;GAE3D,MAAM,MAAM,QAAQ,gBACZ,SAAS,SAAS,QAAQ,KAAK,CAAC,GACtC,EAAE,SAAS,OAAO,SAAS,UAAU,MAAM,OAAO,KAAK,KAAK,EAAE,CAChE;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"}
+{"version":3,"file":"useCan.js","names":[],"sources":["../src/useCan.ts"],"sourcesContent":["import {\n  type AddSubscriber_F,\n  type EventObject,\n  type PrimitiveObject,\n  type State,\n} from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { deepEqual, identity } from '@bemedev/app/utils';\nimport { useSync } from '@bemedev/react-sync';\n\n/**\n * React hook that creates reactive helpers for querying event capabilities from a service.\n *\n * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.\n * @template {string} Ta - Tag type extending `string`.\n * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.\n *\n * @param service - Service object containing `subscribe`, `state`, and `canEvents`.\n * @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.\n * @param service.state - Current state of type {@linkcode State}.\n * @param service.canEvents - Function checking if event types can be accepted.\n *\n * @returns Object helper with `or` and `and` methods to check event availability.\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  canEvents: (...events: Eo['type'][]) => boolean;\n}) {\n  const dispatch =\n    (matcher: 'some' | 'every') =>\n    (...events: Eo['type'][]) => {\n      const selector = () =>\n        events[matcher](event => service.canEvents(event));\n      return useSync(\n        listener => {\n          const { unsubscribe } = service.subscribe(listener, {\n            equals: (first, next) => deepEqual(first.value, next.value),\n            firstTime: true,\n          });\n          return unsubscribe;\n        },\n        selector,\n        selector,\n        identity,\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":";;;;;;;;;;;;;;;;;;AAwBA,SAAgB,OAId,SAIC;CACD,MAAM,YACH,aACA,GAAG,WAAyB;EAC3B,MAAM,iBACJ,OAAO,QAAQ,EAAC,UAAS,QAAQ,UAAU,KAAK,CAAC;EACnD,OAAO,SACL,aAAY;GACV,MAAM,EAAE,gBAAgB,QAAQ,UAAU,UAAU;IAClD,SAAS,OAAO,SAAS,UAAU,MAAM,OAAO,KAAK,KAAK;IAC1D,WAAW;GACb,CAAC;GACD,OAAO;EACT,GACA,UACA,UACA,QACF;CACF;CAEF,MAAM,KAAK,SAAS,MAAM;CAC1B,MAAM,MAAM,SAAS,OAAO;CAE5B,OADY,SAAS,KAAK;EAAE;EAAI;CAAI,CAC3B;AACX"}

package/lib/useIsInside.cjs

@@ -1,21 +1,37 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _bemedev_app_utils = require("@bemedev/app/utils");
-let react = require("react");
+let _bemedev_react_sync = require("@bemedev/react-sync");
 let _bemedev_app_bemedev = require("@bemedev/app/bemedev");
 //#region src/useIsInside.ts
+/**
+* React hook that creates reactive helpers for checking active state hierarchy.
+*
+* @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+* @template {string} Ta - Tag type extending `string`.
+* @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+*
+* @param service - Service object containing `subscribe` and `state`.
+* @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.
+* @param service.state - Current state of type {@linkcode State}.
+*
+* @returns Object helper with `or` and `and` methods to check state hierarchy.
+*/
 function useIsInside(service) {
-	const selector1 = (_state) => {
-		return (0, _bemedev_app_utils.decomposeSV)(_state.value);
+	const selector1 = (value) => {
+		return (0, _bemedev_app_utils.decomposeSV)(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) => (0, _bemedev_app_utils.deepEqual)(first.value, next.value) });
-			(0, react.useEffect)(() => sub.unsubscribe, []);
-			return _state;
+			const selector = () => states[matcher]((state) => selector1(service.state.value).includes(state));
+			return (0, _bemedev_react_sync.useSync)((listener) => {
+				const { unsubscribe } = service.subscribe(listener, {
+					equals: (first, next) => {
+						return (0, _bemedev_app_utils.deepEqual)(first.value, next.value);
+					},
+					firstTime: true
+				});
+				return unsubscribe;
+			}, selector, selector, _bemedev_app_utils.identity);
 		};
 	};
 	const or = dispatch("some");

package/lib/useIsInside.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsInside.cjs","names":["decomposeSV","useState","deepEqual","expandFn"],"sources":["../src/useIsInside.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n} from '@bemedev/app';\nimport { decomposeSV, deepEqual } from '@bemedev/app/utils';\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 => setState(selector(nextState)),\n        { equals: (first, next) => deepEqual(first.value, next.value) },\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,mBAAAA,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,CAAS,SAAS,QAAQ,KAAK,CAAC;GAE3D,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,SAAS,SAAS,CAAC,GACzC,EAAE,SAAS,OAAO,UAAA,GAASC,mBAAAA,UAAAA,CAAU,MAAM,OAAO,KAAK,KAAK,EAAE,CAChE;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"}
+{"version":3,"file":"useIsInside.cjs","names":["decomposeSV","useSync","deepEqual","identity","expandFn"],"sources":["../src/useIsInside.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n  StateValue,\n} from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { decomposeSV, deepEqual, identity } from '@bemedev/app/utils';\nimport { useSync } from '@bemedev/react-sync';\n\n/**\n * React hook that creates reactive helpers for checking active state hierarchy.\n *\n * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.\n * @template {string} Ta - Tag type extending `string`.\n * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.\n *\n * @param service - Service object containing `subscribe` and `state`.\n * @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.\n * @param service.state - Current state of type {@linkcode State}.\n *\n * @returns Object helper with `or` and `and` methods to check state hierarchy.\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 = (value: StateValue) => {\n    return decomposeSV(value);\n  };\n\n  const dispatch = (matcher: 'some' | 'every') => {\n    return (...states: string[]) => {\n      const selector = () =>\n        states[matcher](state =>\n          selector1(service.state.value).includes(state),\n        );\n      return useSync(\n        listener => {\n          const { unsubscribe } = service.subscribe(listener, {\n            equals: (first, next) => {\n              return deepEqual(first.value, next.value);\n            },\n            firstTime: true,\n          });\n\n          return unsubscribe;\n        },\n        selector,\n        selector,\n        identity,\n      );\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":";;;;;;;;;;;;;;;;;;AAwBA,SAAgB,YAId,SAGC;CACD,MAAM,aAAa,UAAsB;EACvC,QAAA,GAAOA,mBAAAA,YAAAA,CAAY,KAAK;CAC1B;CAEA,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAqB;GAC9B,MAAM,iBACJ,OAAO,QAAQ,EAAC,UACd,UAAU,QAAQ,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,CAC/C;GACF,QAAA,GAAOC,oBAAAA,QAAAA,EACL,aAAY;IACV,MAAM,EAAE,gBAAgB,QAAQ,UAAU,UAAU;KAClD,SAAS,OAAO,SAAS;MACvB,QAAA,GAAOC,mBAAAA,UAAAA,CAAU,MAAM,OAAO,KAAK,KAAK;KAC1C;KACA,WAAW;IACb,CAAC;IAED,OAAO;GACT,GACA,UACA,UACAC,mBAAAA,QACF;EACF;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

@@ -1,4 +1,17 @@
 import type { AddSubscriber_F, EventObject, PrimitiveObject, State } from '@bemedev/app';
+/**
+ * React hook that creates reactive helpers for checking active state hierarchy.
+ *
+ * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+ * @template {string} Ta - Tag type extending `string`.
+ * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+ *
+ * @param service - Service object containing `subscribe` and `state`.
+ * @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.
+ * @param service.state - Current state of type {@linkcode State}.
+ *
+ * @returns Object helper with `or` and `and` methods to check state hierarchy.
+ */
 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>;

package/lib/useIsInside.d.ts.map

@@ -1 +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;GAqB9B"}
+{"version":3,"file":"useIsInside.d.ts","sourceRoot":"","sources":["../src/useIsInside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,KAAK,EAEN,MAAM,cAAc,CAAC;AAKtB;;;;;;;;;;;;GAYG;AACH,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;GA2B9B"}

package/lib/useIsInside.js

@@ -1,20 +1,36 @@
-import { decomposeSV, deepEqual } from "@bemedev/app/utils";
-import { useEffect, useState } from "react";
+import { decomposeSV, deepEqual, identity } from "@bemedev/app/utils";
+import { useSync } from "@bemedev/react-sync";
 import { expandFn } from "@bemedev/app/bemedev";
 //#region src/useIsInside.ts
+/**
+* React hook that creates reactive helpers for checking active state hierarchy.
+*
+* @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+* @template {string} Ta - Tag type extending `string`.
+* @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+*
+* @param service - Service object containing `subscribe` and `state`.
+* @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.
+* @param service.state - Current state of type {@linkcode State}.
+*
+* @returns Object helper with `or` and `and` methods to check state hierarchy.
+*/
 function useIsInside(service) {
-	const selector1 = (_state) => {
-		return decomposeSV(_state.value);
+	const selector1 = (value) => {
+		return decomposeSV(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) => deepEqual(first.value, next.value) });
-			useEffect(() => sub.unsubscribe, []);
-			return _state;
+			const selector = () => states[matcher]((state) => selector1(service.state.value).includes(state));
+			return useSync((listener) => {
+				const { unsubscribe } = service.subscribe(listener, {
+					equals: (first, next) => {
+						return deepEqual(first.value, next.value);
+					},
+					firstTime: true
+				});
+				return unsubscribe;
+			}, selector, selector, identity);
 		};
 	};
 	const or = dispatch("some");

package/lib/useIsInside.js.map

@@ -1 +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, deepEqual } from '@bemedev/app/utils';\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 => setState(selector(nextState)),\n        { equals: (first, next) => deepEqual(first.value, next.value) },\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,SAAS,SAAS,QAAQ,KAAK,CAAC;GAE3D,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,SAAS,SAAS,CAAC,GACzC,EAAE,SAAS,OAAO,SAAS,UAAU,MAAM,OAAO,KAAK,KAAK,EAAE,CAChE;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"}
+{"version":3,"file":"useIsInside.js","names":[],"sources":["../src/useIsInside.ts"],"sourcesContent":["import type {\n  AddSubscriber_F,\n  EventObject,\n  PrimitiveObject,\n  State,\n  StateValue,\n} from '@bemedev/app';\nimport { expandFn } from '@bemedev/app/bemedev';\nimport { decomposeSV, deepEqual, identity } from '@bemedev/app/utils';\nimport { useSync } from '@bemedev/react-sync';\n\n/**\n * React hook that creates reactive helpers for checking active state hierarchy.\n *\n * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.\n * @template {string} Ta - Tag type extending `string`.\n * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.\n *\n * @param service - Service object containing `subscribe` and `state`.\n * @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.\n * @param service.state - Current state of type {@linkcode State}.\n *\n * @returns Object helper with `or` and `and` methods to check state hierarchy.\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 = (value: StateValue) => {\n    return decomposeSV(value);\n  };\n\n  const dispatch = (matcher: 'some' | 'every') => {\n    return (...states: string[]) => {\n      const selector = () =>\n        states[matcher](state =>\n          selector1(service.state.value).includes(state),\n        );\n      return useSync(\n        listener => {\n          const { unsubscribe } = service.subscribe(listener, {\n            equals: (first, next) => {\n              return deepEqual(first.value, next.value);\n            },\n            firstTime: true,\n          });\n\n          return unsubscribe;\n        },\n        selector,\n        selector,\n        identity,\n      );\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":";;;;;;;;;;;;;;;;;AAwBA,SAAgB,YAId,SAGC;CACD,MAAM,aAAa,UAAsB;EACvC,OAAO,YAAY,KAAK;CAC1B;CAEA,MAAM,YAAY,YAA8B;EAC9C,QAAQ,GAAG,WAAqB;GAC9B,MAAM,iBACJ,OAAO,QAAQ,EAAC,UACd,UAAU,QAAQ,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,CAC/C;GACF,OAAO,SACL,aAAY;IACV,MAAM,EAAE,gBAAgB,QAAQ,UAAU,UAAU;KAClD,SAAS,OAAO,SAAS;MACvB,OAAO,UAAU,MAAM,OAAO,KAAK,KAAK;KAC1C;KACA,WAAW;IACb,CAAC;IAED,OAAO;GACT,GACA,UACA,UACA,QACF;EACF;CACF;CAEA,MAAM,KAAK,SAAS,MAAM;CAC1B,MAAM,MAAM,SAAS,OAAO;CAE5B,OADY,SAAS,KAAK;EAAE;EAAI;CAAI,CAC3B;AACX"}

package/lib/useService.cjs

@@ -3,6 +3,20 @@ const require_useState = require("./useState.cjs");
 const require_useCan = require("./useCan.cjs");
 const require_useIsInside = require("./useIsInside.cjs");
 //#region src/useService.ts
+/**
+* React hook that binds state management, event checking, and hierarchy querying for a service.
+*
+* @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+* @template {string} Ta - Tag type extending `string`.
+* @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+*
+* @param service - Service instance containing `subscribe`, `state`, and `canEvents`.
+* @param service.subscribe - Subscription function of type {@linkcode AddSubscriber_F}.
+* @param service.state - Current state of type {@linkcode State}.
+* @param service.canEvents - Method to check event execution capability.
+*
+* @returns Service hooks object containing `state`, `can`, and `isInside`.
+*/
 function useService(service) {
 	return {
 		state: (options) => require_useState.useState(service, options),
@@ -10,6 +24,9 @@ function useService(service) {
 		isInside: require_useIsInside.useIsInside(service)
 	};
 }
+/**
+* Alias for function {@linkcode useService}.
+*/
 const createHooks = useService;
 //#endregion
 exports.createHooks = createHooks;

package/lib/useService.cjs.map

@@ -1 +1 @@
-{"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  canEvents: (...events: 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"}
+{"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\n/**\n * React hook that binds state management, event checking, and hierarchy querying for a service.\n *\n * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.\n * @template {string} Ta - Tag type extending `string`.\n * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.\n *\n * @param service - Service instance containing `subscribe`, `state`, and `canEvents`.\n * @param service.subscribe - Subscription function of type {@linkcode AddSubscriber_F}.\n * @param service.state - Current state of type {@linkcode State}.\n * @param service.canEvents - Method to check event execution capability.\n *\n * @returns Service hooks object containing `state`, `can`, and `isInside`.\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  canEvents: (...events: 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\n/**\n * Alias for function {@linkcode useService}.\n */\nexport const createHooks = useService;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,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;;;;AAKA,MAAa,cAAc"}

package/lib/useService.d.ts

@@ -1,5 +1,19 @@
 import type { AddSubscriber_F, EventObject, PrimitiveObject, State } from '@bemedev/app';
 import type { UseServiceOptions } from './types';
+/**
+ * React hook that binds state management, event checking, and hierarchy querying for a service.
+ *
+ * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+ * @template {string} Ta - Tag type extending `string`.
+ * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+ *
+ * @param service - Service instance containing `subscribe`, `state`, and `canEvents`.
+ * @param service.subscribe - Subscription function of type {@linkcode AddSubscriber_F}.
+ * @param service.state - Current state of type {@linkcode State}.
+ * @param service.canEvents - Method to check event execution capability.
+ *
+ * @returns Service hooks object containing `state`, `can`, and `isInside`.
+ */
 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>;
@@ -15,5 +29,8 @@ export declare function useService<Tc extends PrimitiveObject, Ta extends string
         readonly and: (...states: string[]) => boolean;
     }>;
 };
+/**
+ * Alias for function {@linkcode useService}.
+ */
 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,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,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,OAAO,CAAC;CACjD;YAEW,CAAC,gCACG,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;;;;;;;;EAM/C;AAED,eAAO,MAAM,WAAW,mBAAa,CAAC"}
+{"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;;;;;;;;;;;;;GAaG;AACH,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,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,OAAO,CAAC;CACjD;YAEW,CAAC,gCACG,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;;;;;;;;EAM/C;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,mBAAa,CAAC"}

package/lib/useService.js

@@ -2,6 +2,20 @@ import { useState } from "./useState.js";
 import { useCan } from "./useCan.js";
 import { useIsInside } from "./useIsInside.js";
 //#region src/useService.ts
+/**
+* React hook that binds state management, event checking, and hierarchy querying for a service.
+*
+* @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+* @template {string} Ta - Tag type extending `string`.
+* @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+*
+* @param service - Service instance containing `subscribe`, `state`, and `canEvents`.
+* @param service.subscribe - Subscription function of type {@linkcode AddSubscriber_F}.
+* @param service.state - Current state of type {@linkcode State}.
+* @param service.canEvents - Method to check event execution capability.
+*
+* @returns Service hooks object containing `state`, `can`, and `isInside`.
+*/
 function useService(service) {
 	return {
 		state: (options) => useState(service, options),
@@ -9,6 +23,9 @@ function useService(service) {
 		isInside: useIsInside(service)
 	};
 }
+/**
+* Alias for function {@linkcode useService}.
+*/
 const createHooks = useService;
 //#endregion
 export { createHooks, useService };

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';\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  canEvents: (...events: 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"}
+{"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\n/**\n * React hook that binds state management, event checking, and hierarchy querying for a service.\n *\n * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.\n * @template {string} Ta - Tag type extending `string`.\n * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.\n *\n * @param service - Service instance containing `subscribe`, `state`, and `canEvents`.\n * @param service.subscribe - Subscription function of type {@linkcode AddSubscriber_F}.\n * @param service.state - Current state of type {@linkcode State}.\n * @param service.canEvents - Method to check event execution capability.\n *\n * @returns Service hooks object containing `state`, `can`, and `isInside`.\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  canEvents: (...events: 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\n/**\n * Alias for function {@linkcode useService}.\n */\nexport const createHooks = useService;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,SAAgB,WAId,SAIC;CACD,OAAO;EACL,QACE,YACG,SAAwB,SAAS,OAAO;EAE7C,KAAK,OAAO,OAAO;EACnB,UAAU,YAAY,OAAO;CAC/B;AACF;;;;AAKA,MAAa,cAAc"}

package/lib/useState.cjs

@@ -1,26 +1,36 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _bemedev_app_utils = require("@bemedev/app/utils");
-let react = require("react");
+let _bemedev_react_sync = require("@bemedev/react-sync");
 //#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.
+* @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+* @template {string} Ta - Tag type extending `string`.
+* @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+* @template T - Selected state type, defaults to type {@linkcode State}<{@linkcode Eo}, {@linkcode Tc}, {@linkcode Ta}>.
+*
+* @param service - The service containing state and subscribe method.
+* @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.
+* @param service.state - Current state of type {@linkcode State}.
+* @param options - Optional configuration options of type {@linkcode UseServiceOptions}.
+*
+* @returns The selected state of type `T`.
 */
 function useState(service, options) {
-	const { selector = (s) => s, equals = _bemedev_app_utils.deepEqual } = options ?? {};
-	const [_state, setState] = (0, react.useState)(() => selector(service.state));
-	const _selector = (0, react.useCallback)(selector, [selector]);
-	const _equals = (0, react.useCallback)(equals, [equals]);
-	const sub = service.subscribe((nextState) => setState(_selector(nextState)), { equals: (prev, next) => {
-		const _prev = _selector(prev);
-		const _next = _selector(next);
-		return _equals(_prev, _next);
-	} });
-	(0, react.useEffect)(() => sub.unsubscribe, []);
-	return _state;
+	const { selector = _bemedev_app_utils.identity, equals = _bemedev_app_utils.deepEqual } = options ?? {};
+	const _selector = () => selector(service.state);
+	return (0, _bemedev_react_sync.useSync)((listener) => {
+		const { unsubscribe } = service.subscribe(listener, {
+			equals: (prev, next) => {
+				const _prev = selector(prev);
+				const _next = selector(next);
+				return equals(_prev, _next);
+			},
+			firstTime: true
+		});
+		return unsubscribe;
+	}, _selector, _selector, _bemedev_app_utils.identity, equals);
 }
 //#endregion
 exports.useState = useState;

package/lib/useState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useState.cjs","names":["deepEqual","useReactState","useCallback"],"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/utils';\nimport { useCallback, 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  const _selector = useCallback(selector, [selector]);\n  const _equals = useCallback(equals, [equals]);\n\n  const sub = service.subscribe(\n    nextState => setState(_selector(nextState)),\n    {\n      equals: (prev, next) => {\n        const _prev = _selector(prev);\n        const _next = _selector(next);\n        return _equals(_prev, _next);\n      },\n    },\n  );\n\n  useEffect(() => sub.unsubscribe, []);\n  return _state;\n}\n"],"mappings":";;;;;;;;;;;AAiBA,SAAgB,SAMd,SAIA,SACG;CACH,MAAM,EACJ,YAAY,MAAyB,GACrC,SAASA,mBAAAA,cACP,WAAW,CAAC;CAEhB,MAAM,CAAC,QAAQ,aAAA,GAAYC,MAAAA,SAAAA,OACzB,SAAS,QAAQ,KAAK,CACxB;CAEA,MAAM,aAAA,GAAYC,MAAAA,YAAAA,CAAY,UAAU,CAAC,QAAQ,CAAC;CAClD,MAAM,WAAA,GAAUA,MAAAA,YAAAA,CAAY,QAAQ,CAAC,MAAM,CAAC;CAE5C,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,UAAU,SAAS,CAAC,GAC1C,EACE,SAAS,MAAM,SAAS;EACtB,MAAM,QAAQ,UAAU,IAAI;EAC5B,MAAM,QAAQ,UAAU,IAAI;EAC5B,OAAO,QAAQ,OAAO,KAAK;CAC7B,EACF,CACF;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB,IAAI,aAAa,CAAC,CAAC;CACnC,OAAO;AACT"}
+{"version":3,"file":"useState.cjs","names":["identity","deepEqual","useSync"],"sources":["../src/useState.ts"],"sourcesContent":["import {\n  type AddSubscriber_F,\n  type EventObject,\n  type PrimitiveObject,\n  type State,\n} from '@bemedev/app';\nimport { deepEqual, identity } from '@bemedev/app/utils';\nimport { useSync } from '@bemedev/react-sync';\nimport type { UseServiceOptions } from './types';\n\n/**\n * A hook that creates a React state from a service with a subscribe function.\n *\n * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.\n * @template {string} Ta - Tag type extending `string`.\n * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.\n * @template T - Selected state type, defaults to type {@linkcode State}<{@linkcode Eo}, {@linkcode Tc}, {@linkcode Ta}>.\n *\n * @param service - The service containing state and subscribe method.\n * @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.\n * @param service.state - Current state of type {@linkcode State}.\n * @param options - Optional configuration options of type {@linkcode UseServiceOptions}.\n *\n * @returns The selected state of type `T`.\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 { selector = identity, equals = deepEqual<T> } = options ?? {};\n  const _selector = () => selector(service.state);\n\n  return useSync(\n    listener => {\n      const { unsubscribe } = service.subscribe(listener, {\n        equals: (prev, next) => {\n          const _prev = selector(prev);\n          const _next = selector(next);\n          return equals(_prev, _next);\n        },\n        firstTime: true,\n      });\n      return unsubscribe;\n    },\n    _selector,\n    _selector,\n    identity,\n    equals,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,SAMd,SAIA,SACG;CACH,MAAM,EAAE,WAAWA,mBAAAA,UAAU,SAASC,mBAAAA,cAAiB,WAAW,CAAC;CACnE,MAAM,kBAAkB,SAAS,QAAQ,KAAK;CAE9C,QAAA,GAAOC,oBAAAA,QAAAA,EACL,aAAY;EACV,MAAM,EAAE,gBAAgB,QAAQ,UAAU,UAAU;GAClD,SAAS,MAAM,SAAS;IACtB,MAAM,QAAQ,SAAS,IAAI;IAC3B,MAAM,QAAQ,SAAS,IAAI;IAC3B,OAAO,OAAO,OAAO,KAAK;GAC5B;GACA,WAAW;EACb,CAAC;EACD,OAAO;CACT,GACA,WACA,WACAF,mBAAAA,UACA,MACF;AACF"}

package/lib/useState.d.ts

@@ -1,11 +1,19 @@
-import type { AddSubscriber_F, EventObject, PrimitiveObject, State } from '@bemedev/app';
+import { type AddSubscriber_F, type EventObject, type PrimitiveObject, type 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.
+ * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+ * @template {string} Ta - Tag type extending `string`.
+ * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+ * @template T - Selected state type, defaults to type {@linkcode State}<{@linkcode Eo}, {@linkcode Tc}, {@linkcode Ta}>.
+ *
+ * @param service - The service containing state and subscribe method.
+ * @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.
+ * @param service.state - Current state of type {@linkcode State}.
+ * @param options - Optional configuration options of type {@linkcode UseServiceOptions}.
+ *
+ * @returns The selected state of type `T`.
  */
 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>;

package/lib/useState.d.ts.map

@@ -1 +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,CA0BH"}
+{"version":3,"file":"useState.d.ts","sourceRoot":"","sources":["../src/useState.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,KAAK,EACX,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD;;;;;;;;;;;;;;GAcG;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,CAqBH"}

package/lib/useState.js

@@ -1,25 +1,35 @@
-import { deepEqual } from "@bemedev/app/utils";
-import { useCallback, useEffect, useState as useState$1 } from "react";
+import { deepEqual, identity } from "@bemedev/app/utils";
+import { useSync } from "@bemedev/react-sync";
 //#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.
+* @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.
+* @template {string} Ta - Tag type extending `string`.
+* @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.
+* @template T - Selected state type, defaults to type {@linkcode State}<{@linkcode Eo}, {@linkcode Tc}, {@linkcode Ta}>.
+*
+* @param service - The service containing state and subscribe method.
+* @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.
+* @param service.state - Current state of type {@linkcode State}.
+* @param options - Optional configuration options of type {@linkcode UseServiceOptions}.
+*
+* @returns The selected state of type `T`.
 */
 function useState(service, options) {
-	const { selector = (s) => s, equals = deepEqual } = options ?? {};
-	const [_state, setState] = useState$1(() => selector(service.state));
-	const _selector = useCallback(selector, [selector]);
-	const _equals = useCallback(equals, [equals]);
-	const sub = service.subscribe((nextState) => setState(_selector(nextState)), { equals: (prev, next) => {
-		const _prev = _selector(prev);
-		const _next = _selector(next);
-		return _equals(_prev, _next);
-	} });
-	useEffect(() => sub.unsubscribe, []);
-	return _state;
+	const { selector = identity, equals = deepEqual } = options ?? {};
+	const _selector = () => selector(service.state);
+	return useSync((listener) => {
+		const { unsubscribe } = service.subscribe(listener, {
+			equals: (prev, next) => {
+				const _prev = selector(prev);
+				const _next = selector(next);
+				return equals(_prev, _next);
+			},
+			firstTime: true
+		});
+		return unsubscribe;
+	}, _selector, _selector, identity, equals);
 }
 //#endregion
 export { useState };

package/lib/useState.js.map

@@ -1 +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/utils';\nimport { useCallback, 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  const _selector = useCallback(selector, [selector]);\n  const _equals = useCallback(equals, [equals]);\n\n  const sub = service.subscribe(\n    nextState => setState(_selector(nextState)),\n    {\n      equals: (prev, next) => {\n        const _prev = _selector(prev);\n        const _next = _selector(next);\n        return _equals(_prev, _next);\n      },\n    },\n  );\n\n  useEffect(() => sub.unsubscribe, []);\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,MAAM,YAAY,YAAY,UAAU,CAAC,QAAQ,CAAC;CAClD,MAAM,UAAU,YAAY,QAAQ,CAAC,MAAM,CAAC;CAE5C,MAAM,MAAM,QAAQ,WAClB,cAAa,SAAS,UAAU,SAAS,CAAC,GAC1C,EACE,SAAS,MAAM,SAAS;EACtB,MAAM,QAAQ,UAAU,IAAI;EAC5B,MAAM,QAAQ,UAAU,IAAI;EAC5B,OAAO,QAAQ,OAAO,KAAK;CAC7B,EACF,CACF;CAEA,gBAAgB,IAAI,aAAa,CAAC,CAAC;CACnC,OAAO;AACT"}
+{"version":3,"file":"useState.js","names":[],"sources":["../src/useState.ts"],"sourcesContent":["import {\n  type AddSubscriber_F,\n  type EventObject,\n  type PrimitiveObject,\n  type State,\n} from '@bemedev/app';\nimport { deepEqual, identity } from '@bemedev/app/utils';\nimport { useSync } from '@bemedev/react-sync';\nimport type { UseServiceOptions } from './types';\n\n/**\n * A hook that creates a React state from a service with a subscribe function.\n *\n * @template {PrimitiveObject} Tc - Context type extending type {@linkcode PrimitiveObject}.\n * @template {string} Ta - Tag type extending `string`.\n * @template {EventObject} Eo - Event object type extending type {@linkcode EventObject}.\n * @template T - Selected state type, defaults to type {@linkcode State}<{@linkcode Eo}, {@linkcode Tc}, {@linkcode Ta}>.\n *\n * @param service - The service containing state and subscribe method.\n * @param service.subscribe - Subscription handler function of type {@linkcode AddSubscriber_F}.\n * @param service.state - Current state of type {@linkcode State}.\n * @param options - Optional configuration options of type {@linkcode UseServiceOptions}.\n *\n * @returns The selected state of type `T`.\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 { selector = identity, equals = deepEqual<T> } = options ?? {};\n  const _selector = () => selector(service.state);\n\n  return useSync(\n    listener => {\n      const { unsubscribe } = service.subscribe(listener, {\n        equals: (prev, next) => {\n          const _prev = selector(prev);\n          const _next = selector(next);\n          return equals(_prev, _next);\n        },\n        firstTime: true,\n      });\n      return unsubscribe;\n    },\n    _selector,\n    _selector,\n    identity,\n    equals,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,SAAgB,SAMd,SAIA,SACG;CACH,MAAM,EAAE,WAAW,UAAU,SAAS,cAAiB,WAAW,CAAC;CACnE,MAAM,kBAAkB,SAAS,QAAQ,KAAK;CAE9C,OAAO,SACL,aAAY;EACV,MAAM,EAAE,gBAAgB,QAAQ,UAAU,UAAU;GAClD,SAAS,MAAM,SAAS;IACtB,MAAM,QAAQ,SAAS,IAAI;IAC3B,MAAM,QAAQ,SAAS,IAAI;IAC3B,OAAO,OAAO,OAAO,KAAK;GAC5B;GACA,WAAW;EACb,CAAC;EACD,OAAO;CACT,GACA,WACA,WACA,UACA,MACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bemedev/app-reactjs",
-  "version": "1.9.4",
+  "version": "1.10.0",
   "description": "Middleware between @bemedev/app and reactjs",
   "keywords": [
     "app",
@@ -48,10 +48,10 @@
     "@bemedev/dev-utils": "^1.1.1",
     "@bemedev/sleep": "^0.2.2",
     "@size-limit/file": "^13.0.3",
-    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^26.1.2",
+    "@testing-library/user-event": "^14.6.3",
+    "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "@vitest/coverage-v8": "^4.1.10",
@@ -61,25 +61,25 @@
     "husky": "^9.1.7",
     "jsdom": "^30.0.1",
     "onchange": "^7.1.0",
-    "oxfmt": "^0.62.0",
-    "oxlint": "^1.77.0",
+    "oxfmt": "^0.63.0",
+    "oxlint": "^1.78.0",
     "prettier": "^3.9.6",
     "pretty-quick": "^4.2.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "rolldown": "1.2.2",
-    "rolldown-plugin-dts": "^0.28.0",
+    "rolldown": "1.2.3",
+    "rolldown-plugin-dts": "^0.28.1",
     "size-limit": "^13.0.3",
     "tslib": "^2.8.1",
-    "tsx": "^4.23.5",
-    "typescript": "^6.0.3",
+    "tsx": "^4.23.12",
+    "typescript": "6.0.3",
     "vitest": "^4.1.10",
-    "@bemedev/app": "^1.9.4",
-    "@bemedev/app-vitest": "^1.9.4"
+    "@bemedev/app": "^1.10.0",
+    "@bemedev/app-vitest": "^1.10.0"
   },
   "peerDependencies": {
     "react": "^19.2.8",
-    "@bemedev/app": "^1.9.4"
+    "@bemedev/app": "^1.10.0"
   },
   "size-limit": [
     {
@@ -89,45 +89,32 @@
     {
       "path": "lib/*.cjs",
       "limit": "10 KB"
+    },
+    {
+      "path": "lib/*.d.ts",
+      "limit": "10 KB"
     }
   ],
   "engines": {
     "node": ">=24"
   },
+  "dependencies": {
+    "@bemedev/react-sync": "^0.1.1"
+  },
   "scripts": {
-    "build": "pnpm run rm:lib && pnpm run rolldown",
-    "_ci": "pnpm run lint && pnpm run test",
-    "ci": "CI_START=$(date +%s) && pnpm run config:off && pnpm run lint && pnpm run test && echo \"\n✅ CI takes $(($(date +%s) - CI_START))s\n\"",
-    "ci:admin": "pnpm run rm && pnpm run upgrade && pnpm run ci",
-    "generate": "app-cli generate -c ./src/__tests__",
-    "clean": "pnpm run rm && pnpm run config",
-    "config": "pnpm install",
-    "config:off": "pnpm run config --offline",
+    "build": "pnpm rm:lib && pnpm run rolldown",
+    "_ci": "pnpm run lint && pnpm run build",
+    "ci": "CI_START=$(date +%s) && pnpm run _ci && pnpm run p-q && echo \"\n✅ CI takes $(($(date +%s) - CI_START))s\n\"",
     "fmt": "oxfmt",
     "fmt:check": "oxfmt --check",
-    "gen:app": "app generate -c ./src/__tests__",
-    "gen:app:watch": "pnpm run gen:app --watch",
     "_lint": "oxlint",
+    "postbuild": "pnpm run size && pnpm run fmt",
     "lint:fix": "oxlint --fix",
     "lint": "pnpm run fmt && pnpm run lint:fix",
-    "lint:watch": "onchange --await-write-finish 5500 \"**/*\" -- pnpm run lint",
-    "posttest": "pnpm run fmt",
-    "pretest": "pnpm run build && pnpm run size",
-    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
     "p-q": "pretty-quick",
-    "rinit": "pnpm run rm && pnpm run config",
-    "rinit:off": "pnpm run rm && pnpm run config:off",
-    "rimraf": "pnpx rimraf -rf",
-    "rm": "pnpm run rimraf -- node_modules pnpm-lock.yaml",
-    "rm:lib": "pnpm run rimraf -- lib",
-    "rolldown": "rolldown -c",
+    "rm": "pnpx rimraf ./node_modules ./pnpm-lock.yaml",
+    "rm:lib": "pnpx rimraf ./lib",
     "size": "size-limit",
-    "test": "pnpm run test:coverage",
-    "test:only": "pnpm run test:coverage --no-coverage",
-    "test:coverage": "vitest run",
-    "test:ui": "vitest ui",
-    "test:watch": "vitest",
-    "upgrade": "pnpm upgrade --latest",
-    "upgrade:safe": "pnpm run upgrade"
+    "rolldown": "rolldown -c"
   }
 }