@sprawlify/react 0.0.1

package/dist/index.cjs

@@ -0,0 +1,384 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let __sprawlify_primitives_core = require("@sprawlify/primitives/core");
+let __sprawlify_primitives_utils = require("@sprawlify/primitives/utils");
+let react = require("react");
+react = __toESM(react);
+let react_dom = require("react-dom");
+let __sprawlify_primitives_types = require("@sprawlify/primitives/types");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/core/use-layout-effect.ts
+const useSafeLayoutEffect = typeof globalThis.document !== "undefined" ? react.useLayoutEffect : react.useEffect;
+
+//#endregion
+//#region src/core/bindable.ts
+function useBindable(props) {
+	const initial = props().value ?? props().defaultValue;
+	const eq = props().isEqual ?? Object.is;
+	const [initialValue] = (0, react.useState)(initial);
+	const [value, setValue] = (0, react.useState)(initialValue);
+	const controlled = props().value !== void 0;
+	const valueRef = (0, react.useRef)(value);
+	valueRef.current = controlled ? props().value : value;
+	const prevValue = (0, react.useRef)(valueRef.current);
+	useSafeLayoutEffect(() => {
+		prevValue.current = valueRef.current;
+	}, [value, props().value]);
+	const setFn = (value$1) => {
+		const prev = prevValue.current;
+		const next = (0, __sprawlify_primitives_utils.isFunction)(value$1) ? value$1(prev) : value$1;
+		if (props().debug) console.log(`[bindable > ${props().debug}] setValue`, {
+			next,
+			prev
+		});
+		if (!controlled) setValue(next);
+		if (!eq(next, prev)) props().onChange?.(next, prev);
+	};
+	function get() {
+		return controlled ? props().value : value;
+	}
+	return {
+		initial: initialValue,
+		ref: valueRef,
+		get,
+		set(value$1) {
+			(props().sync ? react_dom.flushSync : __sprawlify_primitives_utils.identity)(() => setFn(value$1));
+		},
+		invoke(nextValue, prevValue$1) {
+			props().onChange?.(nextValue, prevValue$1);
+		},
+		hash(value$1) {
+			return props().hash?.(value$1) ?? String(value$1);
+		}
+	};
+}
+useBindable.cleanup = (fn) => {
+	(0, react.useEffect)(() => fn, []);
+};
+useBindable.ref = (defaultValue) => {
+	const value = (0, react.useRef)(defaultValue);
+	return {
+		get: () => value.current,
+		set: (next) => {
+			value.current = next;
+		}
+	};
+};
+
+//#endregion
+//#region src/core/refs.ts
+function useRefs(refs) {
+	const ref = (0, react.useRef)(refs);
+	return {
+		get(key) {
+			return ref.current[key];
+		},
+		set(key, value) {
+			ref.current[key] = value;
+		}
+	};
+}
+
+//#endregion
+//#region src/core/track.ts
+const useTrack = (deps, effect) => {
+	const render = (0, react.useRef)(false);
+	const called = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (render.current && called.current) return effect();
+		called.current = true;
+	}, [...(deps ?? []).map((d) => typeof d === "function" ? d() : d)]);
+	(0, react.useEffect)(() => {
+		render.current = true;
+		return () => {
+			render.current = false;
+		};
+	}, []);
+};
+
+//#endregion
+//#region src/core/machine.ts
+function useMachine(machine, userProps = {}) {
+	const scope = (0, react.useMemo)(() => {
+		const { id, ids, getRootNode } = userProps;
+		return (0, __sprawlify_primitives_core.createScope)({
+			id,
+			ids,
+			getRootNode
+		});
+	}, [userProps]);
+	const debug = (...args) => {
+		if (machine.debug) console.log(...args);
+	};
+	const prop = useProp(machine.props?.({
+		props: (0, __sprawlify_primitives_utils.compact)(userProps),
+		scope
+	}) ?? userProps);
+	const context = machine.context?.({
+		prop,
+		bindable: useBindable,
+		scope,
+		flush,
+		getContext() {
+			return ctx;
+		},
+		getComputed() {
+			return computed;
+		},
+		getRefs() {
+			return refs;
+		},
+		getEvent() {
+			return getEvent();
+		}
+	});
+	const contextRef = useLiveRef(context);
+	const ctx = {
+		get(key) {
+			return contextRef.current?.[key].ref.current;
+		},
+		set(key, value) {
+			contextRef.current?.[key].set(value);
+		},
+		initial(key) {
+			return contextRef.current?.[key].initial;
+		},
+		hash(key) {
+			const current = contextRef.current?.[key].get();
+			return contextRef.current?.[key].hash(current);
+		}
+	};
+	const effects = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const transitionRef = (0, react.useRef)(null);
+	const previousEventRef = (0, react.useRef)(null);
+	const eventRef = (0, react.useRef)({ type: "" });
+	const getEvent = () => ({
+		...eventRef.current,
+		current() {
+			return eventRef.current;
+		},
+		previous() {
+			return previousEventRef.current;
+		}
+	});
+	const getState = () => ({
+		...state,
+		matches(...values) {
+			return values.includes(state.ref.current);
+		},
+		hasTag(tag) {
+			return !!machine.states[state.ref.current]?.tags?.includes(tag);
+		}
+	});
+	const refs = useRefs(machine.refs?.({
+		prop,
+		context: ctx
+	}) ?? {});
+	const getParams = () => ({
+		state: getState(),
+		context: ctx,
+		event: getEvent(),
+		prop,
+		send,
+		action,
+		guard,
+		track: useTrack,
+		refs,
+		computed,
+		flush,
+		scope,
+		choose
+	});
+	const action = (keys) => {
+		const strs = (0, __sprawlify_primitives_utils.isFunction)(keys) ? keys(getParams()) : keys;
+		if (!strs) return;
+		const fns = strs.map((s) => {
+			const fn = machine.implementations?.actions?.[s];
+			if (!fn) (0, __sprawlify_primitives_utils.warn)(`[sprawlify-js] No implementation found for action "${JSON.stringify(s)}"`);
+			return fn;
+		});
+		for (const fn of fns) fn?.(getParams());
+	};
+	const guard = (str) => {
+		if ((0, __sprawlify_primitives_utils.isFunction)(str)) return str(getParams());
+		return machine.implementations?.guards?.[str](getParams());
+	};
+	const effect = (keys) => {
+		const strs = (0, __sprawlify_primitives_utils.isFunction)(keys) ? keys(getParams()) : keys;
+		if (!strs) return;
+		const fns = strs.map((s) => {
+			const fn = machine.implementations?.effects?.[s];
+			if (!fn) (0, __sprawlify_primitives_utils.warn)(`[sprawlify-js] No implementation found for effect "${JSON.stringify(s)}"`);
+			return fn;
+		});
+		const cleanups = [];
+		for (const fn of fns) {
+			const cleanup = fn?.(getParams());
+			if (cleanup) cleanups.push(cleanup);
+		}
+		return () => cleanups.forEach((fn) => fn?.());
+	};
+	const choose = (transitions) => {
+		return (0, __sprawlify_primitives_utils.toArray)(transitions).find((t) => {
+			let result = !t.guard;
+			if ((0, __sprawlify_primitives_utils.isString)(t.guard)) result = !!guard(t.guard);
+			else if ((0, __sprawlify_primitives_utils.isFunction)(t.guard)) result = t.guard(getParams());
+			return result;
+		});
+	};
+	const computed = (key) => {
+		(0, __sprawlify_primitives_utils.ensure)(machine.computed, () => `[sprawlify-js] No computed object found on machine`);
+		const fn = machine.computed[key];
+		return fn({
+			context: ctx,
+			event: getEvent(),
+			prop,
+			refs,
+			scope,
+			computed
+		});
+	};
+	const state = useBindable(() => ({
+		defaultValue: machine.initialState({ prop }),
+		onChange(nextState, prevState) {
+			if (prevState) {
+				effects.current.get(prevState)?.();
+				effects.current.delete(prevState);
+			}
+			if (prevState) action(machine.states[prevState]?.exit);
+			action(transitionRef.current?.actions);
+			const cleanup = effect(machine.states[nextState]?.effects);
+			if (cleanup) effects.current.set(nextState, cleanup);
+			if (prevState === __sprawlify_primitives_core.INIT_STATE) {
+				action(machine.entry);
+				const cleanup$1 = effect(machine.effects);
+				if (cleanup$1) effects.current.set(__sprawlify_primitives_core.INIT_STATE, cleanup$1);
+			}
+			action(machine.states[nextState]?.entry);
+		}
+	}));
+	const hydratedStateRef = (0, react.useRef)(void 0);
+	const statusRef = (0, react.useRef)(__sprawlify_primitives_core.MachineStatus.NotStarted);
+	useSafeLayoutEffect(() => {
+		queueMicrotask(() => {
+			const started = statusRef.current === __sprawlify_primitives_core.MachineStatus.Started;
+			statusRef.current = __sprawlify_primitives_core.MachineStatus.Started;
+			debug(started ? "rehydrating..." : "initializing...");
+			const initialState = hydratedStateRef.current ?? state.initial;
+			state.invoke(initialState, started ? state.get() : __sprawlify_primitives_core.INIT_STATE);
+		});
+		const fns = effects.current;
+		const currentState = state.ref.current;
+		return () => {
+			debug("unmounting...");
+			hydratedStateRef.current = currentState;
+			statusRef.current = __sprawlify_primitives_core.MachineStatus.Stopped;
+			fns.forEach((fn) => fn?.());
+			effects.current = /* @__PURE__ */ new Map();
+			transitionRef.current = null;
+			queueMicrotask(() => {
+				action(machine.exit);
+			});
+		};
+	}, []);
+	const getCurrentState = () => {
+		if ("ref" in state) return state.ref.current;
+		return state.get();
+	};
+	const send = (event) => {
+		queueMicrotask(() => {
+			if (statusRef.current !== __sprawlify_primitives_core.MachineStatus.Started) return;
+			previousEventRef.current = eventRef.current;
+			eventRef.current = event;
+			const currentState = getCurrentState();
+			const transition = choose(machine.states[currentState].on?.[event.type] ?? machine.on?.[event.type]);
+			if (!transition) return;
+			transitionRef.current = transition;
+			const target = transition.target ?? currentState;
+			debug("transition", event.type, transition.target || currentState, `(${transition.actions})`);
+			const changed = target !== currentState;
+			if (changed) (0, react_dom.flushSync)(() => state.set(target));
+			else if (transition.reenter && !changed) state.invoke(currentState, currentState);
+			else action(transition.actions ?? []);
+		});
+	};
+	machine.watch?.(getParams());
+	return {
+		state: getState(),
+		send,
+		context: ctx,
+		prop,
+		scope,
+		refs,
+		computed,
+		event: getEvent(),
+		getStatus: () => statusRef.current
+	};
+}
+function useLiveRef(value) {
+	const ref = (0, react.useRef)(value);
+	ref.current = value;
+	return ref;
+}
+function useProp(value) {
+	const ref = useLiveRef(value);
+	return function get(key) {
+		return ref.current[key];
+	};
+}
+function flush(fn) {
+	queueMicrotask(() => {
+		(0, react_dom.flushSync)(() => fn());
+	});
+}
+
+//#endregion
+//#region src/core/normalize-props.ts
+const normalizeProps = (0, __sprawlify_primitives_types.createNormalizer)((v) => v);
+
+//#endregion
+//#region src/core/portal.tsx
+const Portal = (props) => {
+	const { children, container, disabled, getRootNode } = props;
+	if (typeof window === "undefined" || disabled) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children });
+	const doc = getRootNode?.().ownerDocument ?? document;
+	const mountNode = container?.current ?? doc.body;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: react.Children.map(children, (child) => (0, react_dom.createPortal)(child, mountNode)) });
+};
+
+//#endregion
+exports.Portal = Portal;
+Object.defineProperty(exports, 'mergeProps', {
+  enumerable: true,
+  get: function () {
+    return __sprawlify_primitives_core.mergeProps;
+  }
+});
+exports.normalizeProps = normalizeProps;
+exports.useMachine = useMachine;

package/dist/index.d.cts

@@ -0,0 +1,25 @@
+import { Machine, MachineSchema, Service, mergeProps } from "@sprawlify/primitives/core";
+import * as _sprawlify_primitives_types0 from "@sprawlify/primitives/types";
+import { CSSProperties, HTMLAttributes, JSX, PropsWithChildren, RefObject } from "react";
+
+//#region src/core/machine.d.ts
+declare function useMachine<T extends MachineSchema>(machine: Machine<T>, userProps?: Partial<T["props"]>): Service<T>;
+//#endregion
+//#region src/core/normalize-props.d.ts
+type WithoutRef<T> = Omit<T, "ref">;
+type ElementsWithoutRef = { [K in keyof JSX.IntrinsicElements]: WithoutRef<JSX.IntrinsicElements[K]> };
+type PropTypes = ElementsWithoutRef & {
+  element: WithoutRef<HTMLAttributes<HTMLElement>>;
+  style: CSSProperties;
+};
+declare const normalizeProps: _sprawlify_primitives_types0.NormalizeProps<PropTypes>;
+//#endregion
+//#region src/core/portal.d.ts
+interface PortalProps {
+  disabled?: boolean | undefined;
+  container?: RefObject<HTMLElement> | undefined;
+  getRootNode?: (() => ShadowRoot | Document | Node) | undefined;
+}
+declare const Portal: (props: PropsWithChildren<PortalProps>) => JSX.Element;
+//#endregion
+export { Portal, PortalProps, PropTypes, mergeProps, normalizeProps, useMachine };

package/dist/index.d.mts

@@ -0,0 +1,25 @@
+import { Machine, MachineSchema, Service, mergeProps } from "@sprawlify/primitives/core";
+import { CSSProperties, HTMLAttributes, JSX, PropsWithChildren, RefObject } from "react";
+import * as _sprawlify_primitives_types0 from "@sprawlify/primitives/types";
+
+//#region src/core/machine.d.ts
+declare function useMachine<T extends MachineSchema>(machine: Machine<T>, userProps?: Partial<T["props"]>): Service<T>;
+//#endregion
+//#region src/core/normalize-props.d.ts
+type WithoutRef<T> = Omit<T, "ref">;
+type ElementsWithoutRef = { [K in keyof JSX.IntrinsicElements]: WithoutRef<JSX.IntrinsicElements[K]> };
+type PropTypes = ElementsWithoutRef & {
+  element: WithoutRef<HTMLAttributes<HTMLElement>>;
+  style: CSSProperties;
+};
+declare const normalizeProps: _sprawlify_primitives_types0.NormalizeProps<PropTypes>;
+//#endregion
+//#region src/core/portal.d.ts
+interface PortalProps {
+  disabled?: boolean | undefined;
+  container?: RefObject<HTMLElement> | undefined;
+  getRootNode?: (() => ShadowRoot | Document | Node) | undefined;
+}
+declare const Portal: (props: PropsWithChildren<PortalProps>) => JSX.Element;
+//#endregion
+export { Portal, PortalProps, PropTypes, mergeProps, normalizeProps, useMachine };

package/dist/index.mjs

@@ -0,0 +1,349 @@
+import { INIT_STATE, MachineStatus, createScope, mergeProps } from "@sprawlify/primitives/core";
+import { compact, ensure, identity, isFunction, isString, toArray, warn } from "@sprawlify/primitives/utils";
+import * as React from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal, flushSync } from "react-dom";
+import { createNormalizer } from "@sprawlify/primitives/types";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/core/use-layout-effect.ts
+const useSafeLayoutEffect = typeof globalThis.document !== "undefined" ? useLayoutEffect : useEffect;
+
+//#endregion
+//#region src/core/bindable.ts
+function useBindable(props) {
+	const initial = props().value ?? props().defaultValue;
+	const eq = props().isEqual ?? Object.is;
+	const [initialValue] = useState(initial);
+	const [value, setValue] = useState(initialValue);
+	const controlled = props().value !== void 0;
+	const valueRef = useRef(value);
+	valueRef.current = controlled ? props().value : value;
+	const prevValue = useRef(valueRef.current);
+	useSafeLayoutEffect(() => {
+		prevValue.current = valueRef.current;
+	}, [value, props().value]);
+	const setFn = (value$1) => {
+		const prev = prevValue.current;
+		const next = isFunction(value$1) ? value$1(prev) : value$1;
+		if (props().debug) console.log(`[bindable > ${props().debug}] setValue`, {
+			next,
+			prev
+		});
+		if (!controlled) setValue(next);
+		if (!eq(next, prev)) props().onChange?.(next, prev);
+	};
+	function get() {
+		return controlled ? props().value : value;
+	}
+	return {
+		initial: initialValue,
+		ref: valueRef,
+		get,
+		set(value$1) {
+			(props().sync ? flushSync : identity)(() => setFn(value$1));
+		},
+		invoke(nextValue, prevValue$1) {
+			props().onChange?.(nextValue, prevValue$1);
+		},
+		hash(value$1) {
+			return props().hash?.(value$1) ?? String(value$1);
+		}
+	};
+}
+useBindable.cleanup = (fn) => {
+	useEffect(() => fn, []);
+};
+useBindable.ref = (defaultValue) => {
+	const value = useRef(defaultValue);
+	return {
+		get: () => value.current,
+		set: (next) => {
+			value.current = next;
+		}
+	};
+};
+
+//#endregion
+//#region src/core/refs.ts
+function useRefs(refs) {
+	const ref = useRef(refs);
+	return {
+		get(key) {
+			return ref.current[key];
+		},
+		set(key, value) {
+			ref.current[key] = value;
+		}
+	};
+}
+
+//#endregion
+//#region src/core/track.ts
+const useTrack = (deps, effect) => {
+	const render = useRef(false);
+	const called = useRef(false);
+	useEffect(() => {
+		if (render.current && called.current) return effect();
+		called.current = true;
+	}, [...(deps ?? []).map((d) => typeof d === "function" ? d() : d)]);
+	useEffect(() => {
+		render.current = true;
+		return () => {
+			render.current = false;
+		};
+	}, []);
+};
+
+//#endregion
+//#region src/core/machine.ts
+function useMachine(machine, userProps = {}) {
+	const scope = useMemo(() => {
+		const { id, ids, getRootNode } = userProps;
+		return createScope({
+			id,
+			ids,
+			getRootNode
+		});
+	}, [userProps]);
+	const debug = (...args) => {
+		if (machine.debug) console.log(...args);
+	};
+	const prop = useProp(machine.props?.({
+		props: compact(userProps),
+		scope
+	}) ?? userProps);
+	const context = machine.context?.({
+		prop,
+		bindable: useBindable,
+		scope,
+		flush,
+		getContext() {
+			return ctx;
+		},
+		getComputed() {
+			return computed;
+		},
+		getRefs() {
+			return refs;
+		},
+		getEvent() {
+			return getEvent();
+		}
+	});
+	const contextRef = useLiveRef(context);
+	const ctx = {
+		get(key) {
+			return contextRef.current?.[key].ref.current;
+		},
+		set(key, value) {
+			contextRef.current?.[key].set(value);
+		},
+		initial(key) {
+			return contextRef.current?.[key].initial;
+		},
+		hash(key) {
+			const current = contextRef.current?.[key].get();
+			return contextRef.current?.[key].hash(current);
+		}
+	};
+	const effects = useRef(/* @__PURE__ */ new Map());
+	const transitionRef = useRef(null);
+	const previousEventRef = useRef(null);
+	const eventRef = useRef({ type: "" });
+	const getEvent = () => ({
+		...eventRef.current,
+		current() {
+			return eventRef.current;
+		},
+		previous() {
+			return previousEventRef.current;
+		}
+	});
+	const getState = () => ({
+		...state,
+		matches(...values) {
+			return values.includes(state.ref.current);
+		},
+		hasTag(tag) {
+			return !!machine.states[state.ref.current]?.tags?.includes(tag);
+		}
+	});
+	const refs = useRefs(machine.refs?.({
+		prop,
+		context: ctx
+	}) ?? {});
+	const getParams = () => ({
+		state: getState(),
+		context: ctx,
+		event: getEvent(),
+		prop,
+		send,
+		action,
+		guard,
+		track: useTrack,
+		refs,
+		computed,
+		flush,
+		scope,
+		choose
+	});
+	const action = (keys) => {
+		const strs = isFunction(keys) ? keys(getParams()) : keys;
+		if (!strs) return;
+		const fns = strs.map((s) => {
+			const fn = machine.implementations?.actions?.[s];
+			if (!fn) warn(`[sprawlify-js] No implementation found for action "${JSON.stringify(s)}"`);
+			return fn;
+		});
+		for (const fn of fns) fn?.(getParams());
+	};
+	const guard = (str) => {
+		if (isFunction(str)) return str(getParams());
+		return machine.implementations?.guards?.[str](getParams());
+	};
+	const effect = (keys) => {
+		const strs = isFunction(keys) ? keys(getParams()) : keys;
+		if (!strs) return;
+		const fns = strs.map((s) => {
+			const fn = machine.implementations?.effects?.[s];
+			if (!fn) warn(`[sprawlify-js] No implementation found for effect "${JSON.stringify(s)}"`);
+			return fn;
+		});
+		const cleanups = [];
+		for (const fn of fns) {
+			const cleanup = fn?.(getParams());
+			if (cleanup) cleanups.push(cleanup);
+		}
+		return () => cleanups.forEach((fn) => fn?.());
+	};
+	const choose = (transitions) => {
+		return toArray(transitions).find((t) => {
+			let result = !t.guard;
+			if (isString(t.guard)) result = !!guard(t.guard);
+			else if (isFunction(t.guard)) result = t.guard(getParams());
+			return result;
+		});
+	};
+	const computed = (key) => {
+		ensure(machine.computed, () => `[sprawlify-js] No computed object found on machine`);
+		const fn = machine.computed[key];
+		return fn({
+			context: ctx,
+			event: getEvent(),
+			prop,
+			refs,
+			scope,
+			computed
+		});
+	};
+	const state = useBindable(() => ({
+		defaultValue: machine.initialState({ prop }),
+		onChange(nextState, prevState) {
+			if (prevState) {
+				effects.current.get(prevState)?.();
+				effects.current.delete(prevState);
+			}
+			if (prevState) action(machine.states[prevState]?.exit);
+			action(transitionRef.current?.actions);
+			const cleanup = effect(machine.states[nextState]?.effects);
+			if (cleanup) effects.current.set(nextState, cleanup);
+			if (prevState === INIT_STATE) {
+				action(machine.entry);
+				const cleanup$1 = effect(machine.effects);
+				if (cleanup$1) effects.current.set(INIT_STATE, cleanup$1);
+			}
+			action(machine.states[nextState]?.entry);
+		}
+	}));
+	const hydratedStateRef = useRef(void 0);
+	const statusRef = useRef(MachineStatus.NotStarted);
+	useSafeLayoutEffect(() => {
+		queueMicrotask(() => {
+			const started = statusRef.current === MachineStatus.Started;
+			statusRef.current = MachineStatus.Started;
+			debug(started ? "rehydrating..." : "initializing...");
+			const initialState = hydratedStateRef.current ?? state.initial;
+			state.invoke(initialState, started ? state.get() : INIT_STATE);
+		});
+		const fns = effects.current;
+		const currentState = state.ref.current;
+		return () => {
+			debug("unmounting...");
+			hydratedStateRef.current = currentState;
+			statusRef.current = MachineStatus.Stopped;
+			fns.forEach((fn) => fn?.());
+			effects.current = /* @__PURE__ */ new Map();
+			transitionRef.current = null;
+			queueMicrotask(() => {
+				action(machine.exit);
+			});
+		};
+	}, []);
+	const getCurrentState = () => {
+		if ("ref" in state) return state.ref.current;
+		return state.get();
+	};
+	const send = (event) => {
+		queueMicrotask(() => {
+			if (statusRef.current !== MachineStatus.Started) return;
+			previousEventRef.current = eventRef.current;
+			eventRef.current = event;
+			const currentState = getCurrentState();
+			const transition = choose(machine.states[currentState].on?.[event.type] ?? machine.on?.[event.type]);
+			if (!transition) return;
+			transitionRef.current = transition;
+			const target = transition.target ?? currentState;
+			debug("transition", event.type, transition.target || currentState, `(${transition.actions})`);
+			const changed = target !== currentState;
+			if (changed) flushSync(() => state.set(target));
+			else if (transition.reenter && !changed) state.invoke(currentState, currentState);
+			else action(transition.actions ?? []);
+		});
+	};
+	machine.watch?.(getParams());
+	return {
+		state: getState(),
+		send,
+		context: ctx,
+		prop,
+		scope,
+		refs,
+		computed,
+		event: getEvent(),
+		getStatus: () => statusRef.current
+	};
+}
+function useLiveRef(value) {
+	const ref = useRef(value);
+	ref.current = value;
+	return ref;
+}
+function useProp(value) {
+	const ref = useLiveRef(value);
+	return function get(key) {
+		return ref.current[key];
+	};
+}
+function flush(fn) {
+	queueMicrotask(() => {
+		flushSync(() => fn());
+	});
+}
+
+//#endregion
+//#region src/core/normalize-props.ts
+const normalizeProps = createNormalizer((v) => v);
+
+//#endregion
+//#region src/core/portal.tsx
+const Portal = (props) => {
+	const { children, container, disabled, getRootNode } = props;
+	if (typeof window === "undefined" || disabled) return /* @__PURE__ */ jsx(React.Fragment, { children });
+	const doc = getRootNode?.().ownerDocument ?? document;
+	const mountNode = container?.current ?? doc.body;
+	return /* @__PURE__ */ jsx(React.Fragment, { children: React.Children.map(children, (child) => createPortal(child, mountNode)) });
+};
+
+//#endregion
+export { Portal, mergeProps, normalizeProps, useMachine };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@sprawlify/react",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "React wrapper for primitives.",
+  "author": "sprawlify <npm@sprawlify.com>",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sprawlify/primitives": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --fix"
+  }
+}