@virentia/react 0.1.0

package/README.md

@@ -0,0 +1,94 @@
+# @virentia/react
+
+React bindings for Virentia core models.
+
+Keep business logic in `@virentia/core`; use this package at the rendering boundary. Stores become render values, events and effects become callbacks bound to the provided scope.
+
+## Links
+
+- Documentation: [movpushmov.dev/virentia/react](https://movpushmov.dev/virentia/react/)
+
+## Install
+
+```sh
+pnpm add @virentia/react
+```
+
+## ScopeProvider
+
+```tsx
+import { scope } from "@virentia/core";
+import { ScopeProvider } from "@virentia/react";
+
+const appScope = scope();
+
+export function App() {
+  return (
+    <ScopeProvider scope={appScope}>
+      <Routes />
+    </ScopeProvider>
+  );
+}
+```
+
+## useUnit
+
+```tsx
+import { useUnit } from "@virentia/react";
+import { counterModel } from "./counter.model";
+
+export function CounterButton() {
+  const count = useUnit(counterModel.count);
+  const incremented = useUnit(counterModel.incremented);
+
+  return <button onClick={() => incremented(1)}>{count}</button>;
+}
+```
+
+## component
+
+`component` pairs a model factory with a view. The model receives lifecycle units and props through `ModelContext`; the view receives an unwrapped model.
+
+```tsx
+import { event, reaction, store } from "@virentia/core";
+import { component, type ModelContext } from "@virentia/react";
+
+function createCounterModel({ props }: ModelContext<{ step: number }>) {
+  const clicked = event<void>();
+  const count = store(0);
+
+  reaction({
+    on: clicked,
+    run() {
+      count.value += props.step;
+    },
+  });
+
+  return { clicked, count };
+}
+
+export const Counter = component({
+  model: createCounterModel,
+  view({ model }) {
+    return <button onClick={() => model.clicked()}>{model.count}</button>;
+  },
+});
+```
+
+## Model Caches
+
+Use `createModelCache` when a model should survive unmount and be reused by key: chats, tabs, detail screens, media players, or previews.
+
+```ts
+import { createModelCache } from "@virentia/react";
+
+const chatCache = createModelCache<string, ChatProps, ChatModel>();
+```
+
+## Main API
+
+`ScopeProvider`, `useProvidedScope`, `useUnit`, `useModel`, `component`, `createModelCache`.
+
+## License
+
+MIT © 2026 movpushmov

package/dist/index.cjs

@@ -0,0 +1,275 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+let _virentia_core = require("@virentia/core");
+//#region lib/model-cache.ts
+function createModelCache() {
+	const byScope = /* @__PURE__ */ new WeakMap();
+	const maps = /* @__PURE__ */ new Set();
+	const getScopeMap = (scope) => {
+		let map = byScope.get(scope);
+		if (!map) {
+			map = /* @__PURE__ */ new Map();
+			byScope.set(scope, map);
+			maps.add(map);
+		}
+		return map;
+	};
+	const find = (key, scope) => {
+		if (scope) return byScope.get(scope)?.get(key);
+		for (const map of maps) {
+			const instance = map.get(key);
+			if (instance) return instance;
+		}
+	};
+	return {
+		has(key, scope) {
+			return Boolean(find(key, scope));
+		},
+		get(key, scope) {
+			return find(key, scope)?.model;
+		},
+		getInstance(key, scope) {
+			return find(key, scope);
+		},
+		delete(key, scope) {
+			if (scope) {
+				const map = byScope.get(scope);
+				const instance = map?.get(key);
+				if (!instance) return false;
+				instance.dispose();
+				map?.delete(key);
+				return true;
+			}
+			let deleted = false;
+			for (const map of maps) {
+				const instance = map.get(key);
+				if (!instance) continue;
+				instance.dispose();
+				map.delete(key);
+				deleted = true;
+			}
+			return deleted;
+		},
+		clear(scope) {
+			if (scope) {
+				const map = byScope.get(scope);
+				if (!map) return;
+				for (const instance of map.values()) instance.dispose();
+				map.clear();
+				return;
+			}
+			for (const map of maps) {
+				for (const instance of map.values()) instance.dispose();
+				map.clear();
+			}
+		},
+		[modelCacheInternal](scope, key, create) {
+			const map = getScopeMap(scope);
+			let instance = map.get(key);
+			if (!instance) {
+				instance = create();
+				map.set(key, instance);
+			}
+			return instance;
+		}
+	};
+}
+function getOrCreateCachedInstance(cache, scope, key, create) {
+	const internal = cache[modelCacheInternal];
+	if (!internal) throw new Error("[useModel] Unsupported model cache. Use createModelCache().");
+	return internal(scope, key, create);
+}
+const modelCacheInternal = Symbol("virentia.react.modelCacheInternal");
+//#endregion
+//#region lib/scope.ts
+const ScopeContext = (0, react.createContext)(null);
+function ScopeProvider(props) {
+	return (0, react.createElement)(ScopeContext.Provider, { value: props.scope }, props.children);
+}
+function useProvidedScope() {
+	const scope = (0, react.useContext)(ScopeContext);
+	if (!scope) throw new Error("[useProvidedScope] Scope is not provided. Wrap your tree with ScopeProvider.");
+	return scope;
+}
+//#endregion
+//#region lib/utils.ts
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+function readStore(unit, scope) {
+	return (0, _virentia_core.scoped)(scope, () => {
+		const keys = Reflect.ownKeys(unit).filter((key) => !nativeStoreKeys.has(key));
+		if (keys.length === 1 && keys[0] === "value") return Reflect.get(unit, "value");
+		if (isArraySnapshot(unit, keys)) {
+			const length = Reflect.get(unit, "length");
+			return Array.from({ length }, (_value, index) => Reflect.get(unit, String(index)));
+		}
+		return Object.fromEntries(keys.map((key) => [key, Reflect.get(unit, key)]));
+	});
+}
+function writeStore(unit, value, scope) {
+	(0, _virentia_core.run)({
+		unit: unit.node,
+		payload: value,
+		scope
+	});
+}
+function isUnitLike(value) {
+	return isStoreUnit(value) || isCallableUnit(value);
+}
+function isStoreUnit(value) {
+	return Boolean(value && (typeof value === "object" || typeof value === "function") && "node" in value && "subscribe" in value && typeof value.subscribe === "function");
+}
+function isCallableUnit(value) {
+	return Boolean(typeof value === "function" && "node" in value);
+}
+function isPlainObject(value) {
+	if (!value || typeof value !== "object") return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+}
+function getComponentName(view) {
+	return `Virentia(${view.displayName ?? view.name ?? "Component"})`;
+}
+function isArraySnapshot(unit, keys) {
+	return keys.includes("length") && keys.every((key) => key === "length" || typeof key === "string" && arrayIndexPattern.test(key)) && typeof Reflect.get(unit, "length") === "number";
+}
+const arrayIndexPattern = /^(0|[1-9]\d*)$/;
+const nativeStoreKeys = new Set([
+	"node",
+	"writable",
+	"subscribe",
+	"map",
+	"filter",
+	"filterMap"
+]);
+//#endregion
+//#region lib/use-unit.ts
+function useUnit(input) {
+	return useUnitWithScope(input, useProvidedScope());
+}
+function useUnitWithScope(input, scope) {
+	if (Array.isArray(input)) return input.map((unit) => useSingleUnit(unit, scope));
+	if (isUnitLike(input)) return useSingleUnit(input, scope);
+	const result = {};
+	for (const key of Object.keys(input)) result[key] = useSingleUnit(input[key], scope);
+	return result;
+}
+function useSingleUnit(unit, scope) {
+	if (isStoreUnit(unit)) return useStoreUnit(unit, scope);
+	return (0, react.useCallback)((...args) => (0, _virentia_core.scoped)(scope, () => unit(...args)), [scope, unit]);
+}
+function useStoreUnit(unit, scope) {
+	const snapshotRef = (0, react.useRef)(readStore(unit, scope));
+	snapshotRef.current = readStore(unit, scope);
+	const subscribe = (0, react.useCallback)((notify) => {
+		const unsubscribe = unit.subscribe((_value, nextScope) => {
+			if (nextScope !== scope) return;
+			snapshotRef.current = readStore(unit, scope);
+			notify();
+		});
+		snapshotRef.current = readStore(unit, scope);
+		return unsubscribe;
+	}, [scope, unit]);
+	const getSnapshot = (0, react.useCallback)(() => snapshotRef.current, []);
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+}
+//#endregion
+//#region lib/use-model.ts
+function useModel(modelOrFactory, props, options) {
+	const scope = useProvidedScope();
+	if (typeof modelOrFactory !== "function") return useReactiveModel(modelOrFactory, scope);
+	return useReactiveModel(useModelInstance(modelOrFactory, props, scope, options).model, scope);
+}
+function useModelInstance(factory, props, scope, options) {
+	const cache = options?.cache;
+	const key = options?.key;
+	const cached = Boolean(cache);
+	const instance = (0, react.useMemo)(() => {
+		if (cache) return getOrCreateCachedInstance(cache, scope, key, () => createModelInstance(factory, props, scope, key));
+		return createModelInstance(factory, props, scope, void 0);
+	}, [
+		cache,
+		key,
+		scope
+	]);
+	useIsomorphicLayoutEffect(() => {
+		writeStore(instance.props, props, scope);
+	}, [
+		instance,
+		props,
+		scope
+	]);
+	(0, react.useEffect)(() => {
+		(0, _virentia_core.scoped)(scope, () => {
+			instance.mounts.value += 1;
+			instance.mounted();
+		});
+		return () => {
+			(0, _virentia_core.scoped)(scope, () => {
+				instance.mounts.value = Math.max(0, instance.mounts.value - 1);
+				instance.unmounted();
+			});
+			if (!cached) instance.dispose();
+		};
+	}, [
+		cached,
+		instance,
+		scope
+	]);
+	return instance;
+}
+function createModelInstance(factory, props, scope, key) {
+	return (0, _virentia_core.owner)((dispose, modelOwner) => {
+		const context = {
+			scope,
+			owner: modelOwner,
+			props: (0, _virentia_core.store)(props),
+			mounted: (0, _virentia_core.event)(),
+			unmounted: (0, _virentia_core.event)(),
+			mounts: (0, _virentia_core.store)(0),
+			key
+		};
+		const model = (0, _virentia_core.scoped)(scope, () => factory(context));
+		return {
+			...context,
+			model,
+			dispose
+		};
+	});
+}
+function useReactiveModel(model, scope) {
+	const result = {};
+	for (const key of Reflect.ownKeys(model)) {
+		if (key === "dispose" || key === disposeSymbol) continue;
+		result[key] = useModelValue(Reflect.get(model, key), scope);
+	}
+	return result;
+}
+const disposeSymbol = typeof Symbol.dispose === "symbol" ? Symbol.dispose : Symbol.for("Symbol.dispose");
+function useModelValue(value, scope) {
+	if (isUnitLike(value)) return useUnitWithScope(value, scope);
+	if (isPlainObject(value)) return useReactiveModel(value, scope);
+	return value;
+}
+//#endregion
+//#region lib/component.ts
+function component(config) {
+	const VirentiaComponent = (props) => {
+		const model = "cache" in config ? useModel(config.model, props, {
+			cache: config.cache,
+			key: config.key(props)
+		}) : useModel(config.model, props);
+		return (0, react.createElement)(config.view, {
+			...props,
+			model
+		});
+	};
+	VirentiaComponent.displayName = getComponentName(config.view);
+	return VirentiaComponent;
+}
+//#endregion
+exports.ScopeProvider = ScopeProvider;
+exports.component = component;
+exports.createModelCache = createModelCache;
+exports.useModel = useModel;
+exports.useProvidedScope = useProvidedScope;
+exports.useUnit = useUnit;

package/dist/index.d.cts

@@ -0,0 +1,73 @@
+import { ComponentType, FC, ReactNode } from "react";
+import { Effect, EffectCallArgs, EventCallable, EventPayload, Owner, Scope, Store, StoreWritable } from "@virentia/core";
+
+//#region lib/types.d.ts
+type UnitLike = Store<any> | StoreWritable<any> | EventCallable<any> | Effect<any, any, any>;
+type UnitValue<Unit> = Unit extends Store<infer State> | StoreWritable<infer State> ? State : Unit extends EventCallable<infer Payload> ? (...payload: EventPayload<Payload>) => Promise<void> : Unit extends Effect<infer Params, infer Done, any> ? (...args: EffectCallArgs<Params>) => Promise<Done> : never;
+type ReactiveModel<Model> = { readonly [Key in keyof Model as Key extends "dispose" ? never : Key]: Model[Key] extends UnitLike ? UnitValue<Model[Key]> : Model[Key] extends ((...args: any[]) => any) ? Model[Key] : Model[Key] extends object ? ReactiveModel<Model[Key]> : Model[Key] };
+interface ModelContext<Props, Key = undefined> {
+  readonly scope: Scope;
+  readonly owner: Owner;
+  readonly props: StoreWritable<Props>;
+  readonly mounted: EventCallable<void>;
+  readonly unmounted: EventCallable<void>;
+  readonly mounts: StoreWritable<number>;
+  readonly key: Key;
+}
+type ModelFactory<Props, Model extends object, Key = undefined> = (context: ModelContext<Props, Key>) => Model;
+interface ModelInstance<Props, Model extends object, Key = undefined> extends ModelContext<Props, Key> {
+  readonly model: Model;
+  dispose(): void;
+}
+interface ModelCache<Key, Props, Model extends object> {
+  has(key: Key, scope?: Scope): boolean;
+  get(key: Key, scope?: Scope): Model | undefined;
+  getInstance(key: Key, scope?: Scope): ModelInstance<Props, Model, Key> | undefined;
+  delete(key: Key, scope?: Scope): boolean;
+  clear(scope?: Scope): void;
+}
+type UnitShape<Shape> = Shape extends readonly UnitLike[] ? { readonly [Key in keyof Shape]: UnitValue<Shape[Key]> } : Shape extends Record<string, UnitLike> ? { readonly [Key in keyof Shape]: UnitValue<Shape[Key]> } : never;
+type CacheOptions<Props, Key, Model extends object> = {
+  readonly cache: ModelCache<Key, Props, Model>;
+  readonly key: Key;
+};
+type ComponentConfig<Props, Model extends object> = {
+  readonly model: ModelFactory<Props, Model>;
+  readonly view: ComponentType<Props & {
+    model: ReactiveModel<Model>;
+  }>;
+};
+type CachedComponentConfig<Props, Key, Model extends object> = {
+  readonly key: (props: Props) => Key;
+  readonly cache: ModelCache<Key, Props, Model>;
+  readonly model: ModelFactory<Props, Model, Key>;
+  readonly view: ComponentType<Props & {
+    model: ReactiveModel<Model>;
+  }>;
+};
+//#endregion
+//#region lib/component.d.ts
+declare function component<Props, Model extends object>(config: ComponentConfig<Props, Model>): FC<Props>;
+declare function component<Props, Key, Model extends object>(config: CachedComponentConfig<Props, Key, Model>): FC<Props>;
+//#endregion
+//#region lib/model-cache.d.ts
+declare function createModelCache<Key, Props, Model extends object>(): ModelCache<Key, Props, Model>;
+//#endregion
+//#region lib/scope.d.ts
+declare function ScopeProvider(props: {
+  scope: Scope;
+  children?: ReactNode;
+}): ReactNode;
+declare function useProvidedScope(): Scope;
+//#endregion
+//#region lib/use-model.d.ts
+declare function useModel<Model extends object>(model: Model): ReactiveModel<Model>;
+declare function useModel<Props, Model extends object>(factory: ModelFactory<Props, Model>, props: Props): ReactiveModel<Model>;
+declare function useModel<Props, Key, Model extends object>(factory: ModelFactory<Props, Model, Key>, props: Props, options: CacheOptions<Props, Key, Model>): ReactiveModel<Model>;
+//#endregion
+//#region lib/use-unit.d.ts
+declare function useUnit<Unit extends UnitLike>(unit: Unit): UnitValue<Unit>;
+declare function useUnit<Shape extends readonly UnitLike[]>(shape: Shape): UnitShape<Shape>;
+declare function useUnit<Shape extends Record<string, UnitLike>>(shape: Shape): UnitShape<Shape>;
+//#endregion
+export { type ModelCache, type ModelContext, type ModelFactory, type ModelInstance, type ReactiveModel, ScopeProvider, type UnitLike, type UnitValue, component, createModelCache, useModel, useProvidedScope, useUnit };

package/dist/index.d.mts

@@ -0,0 +1,73 @@
+import { ComponentType, FC, ReactNode } from "react";
+import { Effect, EffectCallArgs, EventCallable, EventPayload, Owner, Scope, Store, StoreWritable } from "@virentia/core";
+
+//#region lib/types.d.ts
+type UnitLike = Store<any> | StoreWritable<any> | EventCallable<any> | Effect<any, any, any>;
+type UnitValue<Unit> = Unit extends Store<infer State> | StoreWritable<infer State> ? State : Unit extends EventCallable<infer Payload> ? (...payload: EventPayload<Payload>) => Promise<void> : Unit extends Effect<infer Params, infer Done, any> ? (...args: EffectCallArgs<Params>) => Promise<Done> : never;
+type ReactiveModel<Model> = { readonly [Key in keyof Model as Key extends "dispose" ? never : Key]: Model[Key] extends UnitLike ? UnitValue<Model[Key]> : Model[Key] extends ((...args: any[]) => any) ? Model[Key] : Model[Key] extends object ? ReactiveModel<Model[Key]> : Model[Key] };
+interface ModelContext<Props, Key = undefined> {
+  readonly scope: Scope;
+  readonly owner: Owner;
+  readonly props: StoreWritable<Props>;
+  readonly mounted: EventCallable<void>;
+  readonly unmounted: EventCallable<void>;
+  readonly mounts: StoreWritable<number>;
+  readonly key: Key;
+}
+type ModelFactory<Props, Model extends object, Key = undefined> = (context: ModelContext<Props, Key>) => Model;
+interface ModelInstance<Props, Model extends object, Key = undefined> extends ModelContext<Props, Key> {
+  readonly model: Model;
+  dispose(): void;
+}
+interface ModelCache<Key, Props, Model extends object> {
+  has(key: Key, scope?: Scope): boolean;
+  get(key: Key, scope?: Scope): Model | undefined;
+  getInstance(key: Key, scope?: Scope): ModelInstance<Props, Model, Key> | undefined;
+  delete(key: Key, scope?: Scope): boolean;
+  clear(scope?: Scope): void;
+}
+type UnitShape<Shape> = Shape extends readonly UnitLike[] ? { readonly [Key in keyof Shape]: UnitValue<Shape[Key]> } : Shape extends Record<string, UnitLike> ? { readonly [Key in keyof Shape]: UnitValue<Shape[Key]> } : never;
+type CacheOptions<Props, Key, Model extends object> = {
+  readonly cache: ModelCache<Key, Props, Model>;
+  readonly key: Key;
+};
+type ComponentConfig<Props, Model extends object> = {
+  readonly model: ModelFactory<Props, Model>;
+  readonly view: ComponentType<Props & {
+    model: ReactiveModel<Model>;
+  }>;
+};
+type CachedComponentConfig<Props, Key, Model extends object> = {
+  readonly key: (props: Props) => Key;
+  readonly cache: ModelCache<Key, Props, Model>;
+  readonly model: ModelFactory<Props, Model, Key>;
+  readonly view: ComponentType<Props & {
+    model: ReactiveModel<Model>;
+  }>;
+};
+//#endregion
+//#region lib/component.d.ts
+declare function component<Props, Model extends object>(config: ComponentConfig<Props, Model>): FC<Props>;
+declare function component<Props, Key, Model extends object>(config: CachedComponentConfig<Props, Key, Model>): FC<Props>;
+//#endregion
+//#region lib/model-cache.d.ts
+declare function createModelCache<Key, Props, Model extends object>(): ModelCache<Key, Props, Model>;
+//#endregion
+//#region lib/scope.d.ts
+declare function ScopeProvider(props: {
+  scope: Scope;
+  children?: ReactNode;
+}): ReactNode;
+declare function useProvidedScope(): Scope;
+//#endregion
+//#region lib/use-model.d.ts
+declare function useModel<Model extends object>(model: Model): ReactiveModel<Model>;
+declare function useModel<Props, Model extends object>(factory: ModelFactory<Props, Model>, props: Props): ReactiveModel<Model>;
+declare function useModel<Props, Key, Model extends object>(factory: ModelFactory<Props, Model, Key>, props: Props, options: CacheOptions<Props, Key, Model>): ReactiveModel<Model>;
+//#endregion
+//#region lib/use-unit.d.ts
+declare function useUnit<Unit extends UnitLike>(unit: Unit): UnitValue<Unit>;
+declare function useUnit<Shape extends readonly UnitLike[]>(shape: Shape): UnitShape<Shape>;
+declare function useUnit<Shape extends Record<string, UnitLike>>(shape: Shape): UnitShape<Shape>;
+//#endregion
+export { type ModelCache, type ModelContext, type ModelFactory, type ModelInstance, type ReactiveModel, ScopeProvider, type UnitLike, type UnitValue, component, createModelCache, useModel, useProvidedScope, useUnit };

package/dist/index.mjs

@@ -0,0 +1,269 @@
+import { createContext, createElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { event, owner, run, scoped, store } from "@virentia/core";
+//#region lib/model-cache.ts
+function createModelCache() {
+	const byScope = /* @__PURE__ */ new WeakMap();
+	const maps = /* @__PURE__ */ new Set();
+	const getScopeMap = (scope) => {
+		let map = byScope.get(scope);
+		if (!map) {
+			map = /* @__PURE__ */ new Map();
+			byScope.set(scope, map);
+			maps.add(map);
+		}
+		return map;
+	};
+	const find = (key, scope) => {
+		if (scope) return byScope.get(scope)?.get(key);
+		for (const map of maps) {
+			const instance = map.get(key);
+			if (instance) return instance;
+		}
+	};
+	return {
+		has(key, scope) {
+			return Boolean(find(key, scope));
+		},
+		get(key, scope) {
+			return find(key, scope)?.model;
+		},
+		getInstance(key, scope) {
+			return find(key, scope);
+		},
+		delete(key, scope) {
+			if (scope) {
+				const map = byScope.get(scope);
+				const instance = map?.get(key);
+				if (!instance) return false;
+				instance.dispose();
+				map?.delete(key);
+				return true;
+			}
+			let deleted = false;
+			for (const map of maps) {
+				const instance = map.get(key);
+				if (!instance) continue;
+				instance.dispose();
+				map.delete(key);
+				deleted = true;
+			}
+			return deleted;
+		},
+		clear(scope) {
+			if (scope) {
+				const map = byScope.get(scope);
+				if (!map) return;
+				for (const instance of map.values()) instance.dispose();
+				map.clear();
+				return;
+			}
+			for (const map of maps) {
+				for (const instance of map.values()) instance.dispose();
+				map.clear();
+			}
+		},
+		[modelCacheInternal](scope, key, create) {
+			const map = getScopeMap(scope);
+			let instance = map.get(key);
+			if (!instance) {
+				instance = create();
+				map.set(key, instance);
+			}
+			return instance;
+		}
+	};
+}
+function getOrCreateCachedInstance(cache, scope, key, create) {
+	const internal = cache[modelCacheInternal];
+	if (!internal) throw new Error("[useModel] Unsupported model cache. Use createModelCache().");
+	return internal(scope, key, create);
+}
+const modelCacheInternal = Symbol("virentia.react.modelCacheInternal");
+//#endregion
+//#region lib/scope.ts
+const ScopeContext = createContext(null);
+function ScopeProvider(props) {
+	return createElement(ScopeContext.Provider, { value: props.scope }, props.children);
+}
+function useProvidedScope() {
+	const scope = useContext(ScopeContext);
+	if (!scope) throw new Error("[useProvidedScope] Scope is not provided. Wrap your tree with ScopeProvider.");
+	return scope;
+}
+//#endregion
+//#region lib/utils.ts
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function readStore(unit, scope) {
+	return scoped(scope, () => {
+		const keys = Reflect.ownKeys(unit).filter((key) => !nativeStoreKeys.has(key));
+		if (keys.length === 1 && keys[0] === "value") return Reflect.get(unit, "value");
+		if (isArraySnapshot(unit, keys)) {
+			const length = Reflect.get(unit, "length");
+			return Array.from({ length }, (_value, index) => Reflect.get(unit, String(index)));
+		}
+		return Object.fromEntries(keys.map((key) => [key, Reflect.get(unit, key)]));
+	});
+}
+function writeStore(unit, value, scope) {
+	run({
+		unit: unit.node,
+		payload: value,
+		scope
+	});
+}
+function isUnitLike(value) {
+	return isStoreUnit(value) || isCallableUnit(value);
+}
+function isStoreUnit(value) {
+	return Boolean(value && (typeof value === "object" || typeof value === "function") && "node" in value && "subscribe" in value && typeof value.subscribe === "function");
+}
+function isCallableUnit(value) {
+	return Boolean(typeof value === "function" && "node" in value);
+}
+function isPlainObject(value) {
+	if (!value || typeof value !== "object") return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+}
+function getComponentName(view) {
+	return `Virentia(${view.displayName ?? view.name ?? "Component"})`;
+}
+function isArraySnapshot(unit, keys) {
+	return keys.includes("length") && keys.every((key) => key === "length" || typeof key === "string" && arrayIndexPattern.test(key)) && typeof Reflect.get(unit, "length") === "number";
+}
+const arrayIndexPattern = /^(0|[1-9]\d*)$/;
+const nativeStoreKeys = new Set([
+	"node",
+	"writable",
+	"subscribe",
+	"map",
+	"filter",
+	"filterMap"
+]);
+//#endregion
+//#region lib/use-unit.ts
+function useUnit(input) {
+	return useUnitWithScope(input, useProvidedScope());
+}
+function useUnitWithScope(input, scope) {
+	if (Array.isArray(input)) return input.map((unit) => useSingleUnit(unit, scope));
+	if (isUnitLike(input)) return useSingleUnit(input, scope);
+	const result = {};
+	for (const key of Object.keys(input)) result[key] = useSingleUnit(input[key], scope);
+	return result;
+}
+function useSingleUnit(unit, scope) {
+	if (isStoreUnit(unit)) return useStoreUnit(unit, scope);
+	return useCallback((...args) => scoped(scope, () => unit(...args)), [scope, unit]);
+}
+function useStoreUnit(unit, scope) {
+	const snapshotRef = useRef(readStore(unit, scope));
+	snapshotRef.current = readStore(unit, scope);
+	const subscribe = useCallback((notify) => {
+		const unsubscribe = unit.subscribe((_value, nextScope) => {
+			if (nextScope !== scope) return;
+			snapshotRef.current = readStore(unit, scope);
+			notify();
+		});
+		snapshotRef.current = readStore(unit, scope);
+		return unsubscribe;
+	}, [scope, unit]);
+	const getSnapshot = useCallback(() => snapshotRef.current, []);
+	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+//#endregion
+//#region lib/use-model.ts
+function useModel(modelOrFactory, props, options) {
+	const scope = useProvidedScope();
+	if (typeof modelOrFactory !== "function") return useReactiveModel(modelOrFactory, scope);
+	return useReactiveModel(useModelInstance(modelOrFactory, props, scope, options).model, scope);
+}
+function useModelInstance(factory, props, scope, options) {
+	const cache = options?.cache;
+	const key = options?.key;
+	const cached = Boolean(cache);
+	const instance = useMemo(() => {
+		if (cache) return getOrCreateCachedInstance(cache, scope, key, () => createModelInstance(factory, props, scope, key));
+		return createModelInstance(factory, props, scope, void 0);
+	}, [
+		cache,
+		key,
+		scope
+	]);
+	useIsomorphicLayoutEffect(() => {
+		writeStore(instance.props, props, scope);
+	}, [
+		instance,
+		props,
+		scope
+	]);
+	useEffect(() => {
+		scoped(scope, () => {
+			instance.mounts.value += 1;
+			instance.mounted();
+		});
+		return () => {
+			scoped(scope, () => {
+				instance.mounts.value = Math.max(0, instance.mounts.value - 1);
+				instance.unmounted();
+			});
+			if (!cached) instance.dispose();
+		};
+	}, [
+		cached,
+		instance,
+		scope
+	]);
+	return instance;
+}
+function createModelInstance(factory, props, scope, key) {
+	return owner((dispose, modelOwner) => {
+		const context = {
+			scope,
+			owner: modelOwner,
+			props: store(props),
+			mounted: event(),
+			unmounted: event(),
+			mounts: store(0),
+			key
+		};
+		const model = scoped(scope, () => factory(context));
+		return {
+			...context,
+			model,
+			dispose
+		};
+	});
+}
+function useReactiveModel(model, scope) {
+	const result = {};
+	for (const key of Reflect.ownKeys(model)) {
+		if (key === "dispose" || key === disposeSymbol) continue;
+		result[key] = useModelValue(Reflect.get(model, key), scope);
+	}
+	return result;
+}
+const disposeSymbol = typeof Symbol.dispose === "symbol" ? Symbol.dispose : Symbol.for("Symbol.dispose");
+function useModelValue(value, scope) {
+	if (isUnitLike(value)) return useUnitWithScope(value, scope);
+	if (isPlainObject(value)) return useReactiveModel(value, scope);
+	return value;
+}
+//#endregion
+//#region lib/component.ts
+function component(config) {
+	const VirentiaComponent = (props) => {
+		const model = "cache" in config ? useModel(config.model, props, {
+			cache: config.cache,
+			key: config.key(props)
+		}) : useModel(config.model, props);
+		return createElement(config.view, {
+			...props,
+			model
+		});
+	};
+	VirentiaComponent.displayName = getComponentName(config.view);
+	return VirentiaComponent;
+}
+//#endregion
+export { ScopeProvider, component, createModelCache, useModel, useProvidedScope, useUnit };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@virentia/react",
+  "version": "0.1.0",
+  "description": "",
+  "keywords": [],
+  "homepage": "https://movpushmov.dev/virentia/react/",
+  "bugs": {
+    "url": "https://github.com/movpushmov/virentia/issues"
+  },
+  "license": "MIT",
+  "author": "movpushmov",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/movpushmov/virentia.git",
+    "directory": "packages/react"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@virentia/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "react": "^19.2.1"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "scripts": {
+    "build": "tsdown"
+  }
+}