@homebound/form-state 2.33.0 → 3.0.0

package/dist/index.js

@@ -1,14 +1,1109 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFormStates = exports.useFormState = exports.required = exports.fragment = exports.createObjectState = exports.f = void 0;
-var configBuilders_1 = require("./configBuilders");
-Object.defineProperty(exports, "f", { enumerable: true, get: function () { return configBuilders_1.f; } });
-var objectField_1 = require("./fields/objectField");
-Object.defineProperty(exports, "createObjectState", { enumerable: true, get: function () { return objectField_1.createObjectState; } });
-Object.defineProperty(exports, "fragment", { enumerable: true, get: function () { return objectField_1.fragment; } });
-var rules_1 = require("./rules");
-Object.defineProperty(exports, "required", { enumerable: true, get: function () { return rules_1.required; } });
-var useFormState_1 = require("./useFormState");
-Object.defineProperty(exports, "useFormState", { enumerable: true, get: function () { return useFormState_1.useFormState; } });
-var useFormStates_1 = require("./useFormStates");
-Object.defineProperty(exports, "useFormStates", { enumerable: true, get: function () { return useFormStates_1.useFormStates; } });
+import { action, computed, isObservable, makeAutoObservable, observable, reaction, toJS } from "mobx";
+import { isPlainObject } from "is-plain-object";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import hash from "object-hash";
+//#region src/proxies.ts
+/**
+* Creates a new combined object with keys in `overrides` taking precedence, and then
+* any other keys falling back to `delegate`.
+*/
+function newDelegateProxy(delegate, overrides) {
+	function pickTarget(key) {
+		return Reflect.has(overrides, key) ? overrides : delegate;
+	}
+	return new Proxy(delegate, {
+		get(object, key) {
+			return Reflect.get(pickTarget(key), key);
+		},
+		set(object, key, value) {
+			return Reflect.set(pickTarget(key), key, value);
+		}
+	});
+}
+//#endregion
+//#region src/rules.ts
+/** A rule that validates `value` is not `undefined`, `null`, or empty string. */
+const required = action(({ value: v }) => {
+	const isEmptyString = typeof v === "string" ? v.trim() === "" : false;
+	return v !== void 0 && v !== null && !isEmptyString ? void 0 : "Required";
+});
+//#endregion
+//#region src/temporal.ts
+const temporalPlainDateTag = "Temporal.PlainDate";
+const temporalZonedDateTimeTag = "Temporal.ZonedDateTime";
+/** Detects the Temporal value types that form-state treats as builtins. */
+function isSupportedTemporal(value) {
+	if (!value || typeof value !== "object") return false;
+	const record = value;
+	return isSupportedTemporalTag(record[Symbol.toStringTag]) && typeof record.equals === "function" && typeof record.toJSON === "function";
+}
+/** Compares supported Temporal values with Temporal's `.equals(...)` semantics. */
+function areSupportedTemporalValuesEqual(a, b) {
+	const aIsTemporal = isSupportedTemporal(a);
+	const bIsTemporal = isSupportedTemporal(b);
+	if (!aIsTemporal && !bIsTemporal) return;
+	if (!aIsTemporal || !bIsTemporal || a[Symbol.toStringTag] !== b[Symbol.toStringTag]) return false;
+	return a.equals(b);
+}
+function isSupportedTemporalTag(value) {
+	return value === temporalPlainDateTag || value === temporalZonedDateTimeTag;
+}
+//#endregion
+//#region src/fields/deepEquals.ts
+/**
+* Our own `deepEquals` because either `fast-deep-equals` or `dequal` or etc actually
+* handle cyclic data structures, despite ChatGTP's assertions/hallucinations.
+*
+* Ported from https://github.com/KoryNunn/cyclic-deep-equal which is ISC.
+*/
+function deepEquals(a, b, visited = /* @__PURE__ */ new Set()) {
+	const temporalEquals = areSupportedTemporalValuesEqual(a, b);
+	if (temporalEquals !== void 0) return temporalEquals;
+	const aType = typeof a;
+	if (aType !== typeof b) return false;
+	if (a == null || b == null || !(aType === "object" || aType === "function")) {
+		if (aType === "number" && isNaN(a) && isNaN(b)) return true;
+		return a === b;
+	}
+	if (hasToJSON$1(a) || hasToJSON$1(b)) return deepEquals(hasToJSON$1(a) ? a.toJSON() : a, hasToJSON$1(b) ? b.toJSON() : b, visited);
+	if (Array.isArray(a) !== Array.isArray(b)) return false;
+	const aKeys = Object.keys(a), bKeys = Object.keys(b);
+	if (aKeys.length !== bKeys.length) return false;
+	let equal = true;
+	for (const key of aKeys) {
+		if (!(key in b)) {
+			equal = false;
+			break;
+		}
+		if (a[key] && a[key] instanceof Object) {
+			if (visited.has(a[key])) break;
+			visited.add(a[key]);
+		}
+		if (!deepEquals(a[key], b[key], visited)) {
+			equal = false;
+			break;
+		}
+	}
+	return equal;
+}
+function hasToJSON$1(o) {
+	return !!(o && typeof o === "object" && "toJSON" in o);
+}
+//#endregion
+//#region src/useFormState.ts
+let isAutoSaving$1 = false;
+let pendingAutoSave = false;
+/**
+* Creates a formState instance for editing in a form.
+*/
+function useFormState(opts) {
+	const { config, init, addRules, readOnly = false, loading, autoSave } = opts;
+	const autoSaveRef = useRef(autoSave);
+	autoSaveRef.current = autoSave;
+	const initRef = useRef(init);
+	initRef.current = init;
+	const firstRunRef = useRef(true);
+	const [firstInitValue] = useState(() => initValue(config, init));
+	const isWrappingMobxProxy = !isPlainObject(firstInitValue);
+	const dep = isInput(init) ? init.onlyOnce ? [] : makeArray(init.input) : isQuery(init) ? [init.query.data, init.query.loading] : [];
+	const form = useMemo(() => {
+		function maybeAutoSave() {
+			if (isAutoSaving$1 === "in-flight") pendingAutoSave = true;
+			else if (isAutoSaving$1 === "queued") return;
+			if (autoSaveRef.current && form.dirty && !isAutoSaving$1) {
+				if (!form.valid) {
+					console.debug("Skipping auto-save b/c form is invalid: ", form.errors);
+					return;
+				}
+				isAutoSaving$1 = "queued";
+				setTimeout(async () => {
+					try {
+						form._isAutoSaving = true;
+						const promise = autoSaveRef.current(form);
+						isAutoSaving$1 = "in-flight";
+						await promise;
+					} catch (e) {
+						throw e;
+					} finally {
+						isAutoSaving$1 = false;
+						form._isAutoSaving = false;
+						if (pendingAutoSave) {
+							pendingAutoSave = false;
+							setTimeout(maybeAutoSave, 0);
+						}
+					}
+				}, 0);
+			}
+		}
+		const value = firstRunRef.current ? firstInitValue : initValue(config, init);
+		const form = createObjectState(config, value, { maybeAutoSave });
+		form.update = function update(input) {
+			const init = initRef.current;
+			const updateInit = isInput(init) ? {
+				...init,
+				input
+			} : isQuery(init) ? {
+				input,
+				map: init.map,
+				ifUndefined: init.ifUndefined
+			} : { input };
+			form.set(initValue(config, updateInit), { refreshing: true });
+		};
+		form.readOnly = readOnly;
+		setLoading(form, opts);
+		(addRules || (() => {}))(form);
+		firstRunRef.current = true;
+		return form;
+	}, [config, ...isWrappingMobxProxy ? dep : []]);
+	useEffect(() => {
+		if (firstRunRef.current || isWrappingMobxProxy) {
+			firstRunRef.current = false;
+			return;
+		}
+		setLoading(form, opts);
+		form.set(initValue(config, init), { refreshing: true });
+	}, [form, ...dep]);
+	useEffect(() => {
+		form.readOnly = readOnly;
+		if (loading !== void 0) form.loading = loading;
+	}, [
+		form,
+		readOnly,
+		loading
+	]);
+	return form;
+}
+function setLoading(form, opts) {
+	const { loading, init } = opts;
+	if (loading !== void 0) form.loading = loading;
+	else if (isInput(init) && !init.ifUndefined) form.loading = init.input === void 0;
+	else if (isQuery(init)) form.loading = init.query.loading;
+}
+function makeArray(input) {
+	return Array.isArray(input) ? input : [input];
+}
+//#endregion
+//#region src/utils.ts
+function fail(message) {
+	throw new Error(message || "Failed");
+}
+function assertNever(x) {
+	throw new Error("Unexpected object: " + x);
+}
+/** Introspects the `init` prop to see if it has a `map` function/etc. and returns the form value. */
+function initValue(config, init) {
+	let value;
+	if (isInput(init)) value = init.input ? init.map ? init.map(init.input) : init.input : init.ifUndefined;
+	else if (isQuery(init)) value = init.query.data ? init.map(init.query.data) : init.ifUndefined;
+	else if (init === void 0) {} else throw new Error("init must have an input or query key");
+	return pickFields(config, value ?? {});
+}
+function isInput(init) {
+	return !!init && typeof init === "object" && "input" in init;
+}
+function isQuery(init) {
+	return !!init && typeof init === "object" && "query" in init && "map" in init;
+}
+/**
+* Picks ony fields out of `instance` that are in the `formConfig`.
+*
+* This is useful for creating a form input from a GraphQL query result,
+* but ignoring extra data in the query that we don't want/need in the form.
+*
+* (Especially because the form.value will become our mutation's input type
+* that goes on the wire, we don't want superfluous data in it.)
+*/
+function pickFields(formConfig, instance) {
+	if (!isPlainObject(instance)) return instance;
+	return Object.fromEntries(Object.entries(formConfig).map(([key, _keyConfig]) => {
+		const keyConfig = _keyConfig;
+		const value = instance[key];
+		if (keyConfig.type === "object") {
+			if (value) return [key, pickFields(keyConfig.config, value)];
+			else return [key, value];
+		} else if (keyConfig.type === "list") {
+			if (isObservable(value)) return [key, value];
+			else if (value) return [key, value.map((u) => pickFields(keyConfig.config, u))];
+			else return [key, value];
+		} else if (keyConfig.type === "value") return [key, value];
+		else if (keyConfig.type === "fragment") return [key, value];
+		else return assertNever(keyConfig);
+	}));
+}
+function isNotUndefined(value) {
+	return value !== void 0;
+}
+function isEmpty(value) {
+	return value === void 0 || value === null || value === "";
+}
+/**
+* An equals that does deep-ish equality.
+*
+* We only do non-identity equals for:
+*
+* - "plain" objects that have no custom prototype/i.e. are object literals
+* - objects that implement `toJSON`
+* - arrays
+*/
+function areEqual(a, b, strictOrder) {
+	const temporalEquals = areSupportedTemporalValuesEqual(a, b);
+	if (temporalEquals !== void 0) return temporalEquals;
+	if (isPlainObject(a)) return deepEquals(toJS(a), toJS(b));
+	if (hasToJSON(a) || hasToJSON(b)) return deepEquals(hasToJSON(a) ? a.toJSON() : a, hasToJSON(b) ? b.toJSON() : b);
+	if (a && b && a instanceof Array && b instanceof Array) {
+		if (strictOrder !== false) return deepEquals(a, b);
+		if (a.length !== b.length) return false;
+		return a.every((a1) => b.some((b1) => areEqual(a1, b1)));
+	}
+	return a === b;
+}
+function hasToJSON(o) {
+	return !!(o && typeof o === "object" && "toJSON" in o);
+}
+/** Normalizes values into stable object-hash-safe data using our existing `toJSON` semantics. */
+function normalizeHashValue(value, seen = /* @__PURE__ */ new WeakMap()) {
+	if (hasToJSON(value)) return normalizeHashValue(value.toJSON(), seen);
+	if (Array.isArray(value)) {
+		if (seen.has(value)) return seen.get(value);
+		const result = [];
+		seen.set(value, result);
+		value.forEach((entry) => result.push(normalizeHashValue(entry, seen)));
+		return result;
+	}
+	if (value && typeof value === "object" && isPlainObject(value)) {
+		if (seen.has(value)) return seen.get(value);
+		const result = {};
+		seen.set(value, result);
+		Object.entries(value).forEach(([key, entry]) => {
+			result[key] = normalizeHashValue(entry, seen);
+		});
+		return result;
+	}
+	return value;
+}
+/** Make a clone of `obj`, but only recurse into POJOs and Arrays...and stores. */
+function deepClone(obj, map = /* @__PURE__ */ new WeakMap()) {
+	if (obj && typeof obj === "object" && (isPlainObject(obj) || Array.isArray(obj) || isObservable(obj))) {
+		if (map.has(obj)) return map.get(obj);
+		const result = Array.isArray(obj) ? [] : {};
+		map.set(obj, result);
+		Object.assign(result, ...getAllPropertyNames(obj).map((key) => ({ [key]: deepClone(obj[key], map) })));
+		return result;
+	} else return obj;
+}
+function groupBy(list, fn, valueFn) {
+	const result = /* @__PURE__ */ new Map();
+	list.forEach((o) => {
+		const group = fn(o);
+		if (!result.has(group)) result.set(group, []);
+		result.get(group).push(valueFn === void 0 ? o : valueFn(o));
+	});
+	return result;
+}
+/** Returns all property names, including mobx computeds (non-enumerable) & inherited. */
+function getAllPropertyNames(obj) {
+	const proto = Object.getPrototypeOf(obj);
+	const inherited = proto && proto !== Object.prototype && !Array.isArray(obj) ? getAllPropertyNames(proto) : [];
+	return [...new Set(Object.getOwnPropertyNames(obj).concat(inherited))];
+}
+//#endregion
+//#region src/fields/valueField.ts
+function newValueFieldState(parentCopy, parentInstance, parentState, key, rules, isIdKey, isDeleteKey, isReadOnlyKey, isLocalOnly, computed, readOnly, strictOrder, maybeAutoSave) {
+	const _tick = observable({ value: 1 });
+	const _originalValueTick = observable({ value: 1 });
+	let hasInflightChangedValue = false;
+	let lastChangedValue = void 0;
+	const field = {
+		key,
+		touched: false,
+		/** Current readOnly value. */
+		_readOnly: readOnly || false,
+		_loading: false,
+		_kind: "value",
+		_computed: computed,
+		_focused: false,
+		_isIdKey: isIdKey,
+		_isDeleteKey: isDeleteKey,
+		_isReadOnlyKey: isReadOnlyKey,
+		_isLocalOnly: isLocalOnly,
+		rules,
+		get value() {
+			const value = _tick.value > 0 ? parentInstance[key] : fail();
+			return value === null && isEmpty(parentCopy[key]) ? void 0 : value;
+		},
+		set value(v) {
+			this.set(v);
+		},
+		get focused() {
+			return this._focused;
+		},
+		get dirty() {
+			return !areEqual(this.originalValue, this.value, strictOrder);
+		},
+		/** Returns whether this field is readOnly, although if our parent is readOnly then it trumps. */
+		get readOnly() {
+			return parentState().readOnly || this._readOnly;
+		},
+		/** Sets the field readOnly, but `loading` will still be or-d with the parent's readOnly state. */
+		set readOnly(readOnly) {
+			this._readOnly = readOnly;
+		},
+		/** Returns whether this field is loading, or if our parent is loading. */
+		get loading() {
+			return parentState().loading || this._loading;
+		},
+		/** Sets the field loading, but `loading` will still be or-d with the parent's loading state. */
+		set loading(loading) {
+			this._loading = loading;
+		},
+		get changedValue() {
+			hasInflightChangedValue = true;
+			lastChangedValue = this.value;
+			if (this.value === void 0 && this.originalValue !== void 0) return null;
+			return this.value;
+		},
+		get valid() {
+			const opts = {
+				value: this.value,
+				key,
+				originalValue: this.originalValue,
+				object: parentState()
+			};
+			return this.rules.every((r) => r(opts) === void 0);
+		},
+		get errors() {
+			const opts = {
+				value: this.value,
+				key,
+				originalValue: this.originalValue,
+				object: parentState()
+			};
+			return this.rules.map((r) => r(opts)).filter(isNotUndefined);
+		},
+		get required() {
+			return this.rules.some((rule) => rule === required);
+		},
+		get isNewEntity() {
+			return parentState().isNewEntity;
+		},
+		focus() {
+			this._focused = true;
+		},
+		blur() {
+			this.maybeAutoSave();
+			this._focused = false;
+		},
+		maybeAutoSave() {
+			this.maybeTrim();
+			this.touched = true;
+			maybeAutoSave();
+		},
+		set(value, opts = {}) {
+			if (this.readOnly && !opts.resetting && !opts.refreshing) throw new Error(`${String(key)} is currently readOnly`);
+			if (opts.refreshing && this.dirty) {
+				const isAckingUnset = this.value === null && (value === null || value === void 0);
+				const acceptServerAck = hasInflightChangedValue && this.value === lastChangedValue && value !== this.originalValue;
+				if (!areEqual(this.value, value, strictOrder) && !isAckingUnset && !acceptServerAck) return;
+			} else if (computed && (opts.resetting || opts.refreshing)) return;
+			const keepNull = !isEmpty(this.originalValue) && isEmpty(value) && !opts.refreshing;
+			const coerceEmptyList = value && value instanceof Array && value.length === 0 && isEmpty(this.originalValue);
+			const newValue = keepNull ? null : isEmpty(value) || coerceEmptyList ? void 0 : value;
+			hasInflightChangedValue = false;
+			const changed = !areEqual(newValue, this.value, strictOrder);
+			parentInstance[key] = newValue;
+			_tick.value++;
+			if (opts.refreshing) this.originalValue = newValue;
+			if (!this._focused && !opts.refreshing && !opts.resetting && this.dirty && changed && opts.autoSave !== false) this.maybeAutoSave();
+		},
+		adapt(adapter) {
+			return adapt(this, adapter);
+		},
+		revertChanges() {
+			if (!computed) this.set(this.originalValue, { resetting: true });
+			this.touched = false;
+		},
+		commitChanges() {
+			if (isPlainObject(this.originalValue)) this.originalValue = toJS(this.value);
+			else this.originalValue = this.value;
+			this.touched = false;
+		},
+		get originalValue() {
+			const value = _originalValueTick.value > -1 ? parentCopy[key] : parentCopy[key];
+			return value === null ? void 0 : value;
+		},
+		set originalValue(v) {
+			if (!(v === void 0 && !(key in parentCopy))) parentCopy[key] = v;
+			_originalValueTick.value++;
+		},
+		maybeTrim() {
+			if (typeof this.value === "string") {
+				let newValue = this.value.trim();
+				if (newValue === "") newValue = void 0;
+				if (newValue !== this.value) this.set(newValue);
+			}
+		}
+	};
+	if (isObservable(parentInstance)) reaction(() => parentInstance[key], () => {
+		if (!parentState().focused) maybeAutoSave();
+	});
+	return field;
+}
+/**
+* Returns a proxy that looks exactly like the original `field`, in terms of valid/touched/errors/etc., but
+* has any methods that use `V` overridden to use be `V2`.
+*
+* Note that `V2` can be a new type, like string -> number, or just a transformation on the same
+* type, i.e. feet -> inches where both are `number`s.
+*/
+function adapt(field, adapter) {
+	return newDelegateProxy(field, {
+		rules: [],
+		get value() {
+			return adapter.toValue(field.value);
+		},
+		set value(v) {
+			field.value = adapter.fromValue(v);
+		},
+		set: (v) => {
+			field.value = adapter.fromValue(v);
+		},
+		get changedValue() {
+			return this.value;
+		},
+		adapt(adapter) {
+			return adapt(this, adapter);
+		},
+		get originalValue() {
+			return adapter.toValue(field.originalValue);
+		}
+	});
+}
+//#endregion
+//#region src/fields/fragmentField.ts
+function newFragmentField(parentInstance, key) {
+	const _tick = observable({ value: 1 });
+	let value = parentInstance[key];
+	delete parentInstance[key];
+	return makeAutoObservable({
+		key,
+		_isIdKey: false,
+		_isDeleteKey: false,
+		_isReadOnlyKey: false,
+		_isLocalOnly: false,
+		touched: false,
+		valid: true,
+		readOnly: true,
+		required: false,
+		loading: false,
+		dirty: false,
+		focused: false,
+		originalValue: void 0,
+		changedValue: void 0,
+		errors: [],
+		rules: [],
+		isNewEntity: false,
+		focus: () => {},
+		blur: () => {},
+		maybeAutoSave: () => {},
+		commitChanges: () => {},
+		revertChanges: () => {},
+		get value() {
+			if (key in parentInstance) {
+				value = parentInstance[key];
+				delete parentInstance[key];
+			}
+			_tick.value > 0 || fail();
+			return value;
+		},
+		set value(v) {
+			value = v;
+			_tick.value++;
+		},
+		set(value) {
+			this.value = value;
+		},
+		adapt(value) {
+			throw new Error("FragmentField does not support adapt");
+		}
+	}, { value: false });
+}
+//#endregion
+//#region src/fields/listField.ts
+function newListFieldState(parentCopy, parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeAutoSave, deepExhaustive) {
+	const rowMap = /* @__PURE__ */ new Map();
+	const addedRows = /* @__PURE__ */ new Set();
+	const _tick = observable({ value: 1 });
+	const _originalValueTick = observable({ value: 1 });
+	const _childTick = observable({ value: 1 });
+	const copyMap = /* @__PURE__ */ new Map();
+	(parentCopy[key] ?? []).forEach((copy, i) => {
+		copyMap.set(copy, parentInstance[key][i]);
+	});
+	function getOrCreateChildState(child, opts) {
+		let childState = rowMap.get(child);
+		if (!childState && copyMap.has(child)) childState = rowMap.get(copyMap.get(child));
+		if (!childState) {
+			for (const [, otherState] of rowMap.entries()) if (otherState.isSameEntity(child)) {
+				if (!opts?.skipSet) otherState.set(child, opts);
+				rowMap.set(child, otherState);
+				return otherState;
+			}
+		}
+		if (!childState) {
+			childState = newObjectState(config, parentState, void 0, list, child, void 0, maybeAutoSave, listConfig.update === "deep-exhaustive");
+			rowMap.set(child, childState);
+		}
+		return childState;
+	}
+	const list = {
+		key,
+		get value() {
+			return _tick.value > 0 && _childTick.value > 0 ? parentInstance[key] ?? [] : fail();
+		},
+		_kind: "list",
+		_focused: false,
+		_readOnly: false,
+		_loading: false,
+		get readOnly() {
+			return this._readOnly || parentState().readOnly;
+		},
+		set readOnly(readOnly) {
+			this._readOnly = readOnly;
+		},
+		get loading() {
+			return this._loading || parentState().loading;
+		},
+		set loading(loading) {
+			this._loading = loading;
+		},
+		set value(v) {
+			this.set(v);
+		},
+		get dirty() {
+			return this.rows.some((r) => r.dirty) || this.hasChanged();
+		},
+		get hasNewEntity() {
+			return this.rows.some((r) => r.isNewEntity);
+		},
+		get focused() {
+			return this.rows.some((r) => r.focused);
+		},
+		get required() {
+			return this.rules.some((rule) => rule === required);
+		},
+		get isNewEntity() {
+			return parentState().isNewEntity;
+		},
+		/** Returns whether a row has been added/removed. */
+		hasChanged() {
+			const [current, original] = [this.value || [], this.originalValue];
+			if (current.length !== original.length) return true;
+			if (strictOrder) return original.some((e, idx) => current[idx] !== copyMap.get(e));
+			else return !original.every((e) => current.includes(copyMap.get(e)));
+		},
+		get rows() {
+			if (_tick.value < 0) fail();
+			return (parentInstance[key] || []).map((child) => getOrCreateChildState(child, { skipSet: true }));
+		},
+		get touched() {
+			return this.rows.some((r) => r.touched) || this.hasChanged();
+		},
+		set touched(touched) {
+			this.rows.forEach((r) => r.touched = touched);
+		},
+		rules,
+		get valid() {
+			const opts = {
+				value: this.rows,
+				key,
+				originalValue: this.originalValue,
+				object: parentState()
+			};
+			const collectionValid = this.rules.every((r) => r(opts) === void 0);
+			const entriesValid = this.rows.filter((r) => !r._considerDeleted()).every((r) => r.valid);
+			return collectionValid && entriesValid;
+		},
+		get errors() {
+			if (_tick.value < 0) fail();
+			const opts = {
+				value: this.rows,
+				key,
+				originalValue: this.originalValue,
+				object: parentState()
+			};
+			return this.rules.map((r) => r(opts)).filter(isNotUndefined);
+		},
+		get changedValue() {
+			const result = [];
+			const hasOpKey = Object.keys(listConfig.config).includes("op");
+			const hasLegacyOpKey = Object.keys(listConfig.config).some((key) => key === "delete" || key === "remove");
+			const incremental = listConfig.update === "incremental" || listConfig.update === void 0 && (hasOpKey || hasLegacyOpKey);
+			const exhaustive = !incremental;
+			this.rows.forEach((r) => {
+				if (exhaustive || r.dirty || r.isNewEntity) {
+					const changed = r.changedValue;
+					if (incremental && hasOpKey) changed.op ??= "include";
+					result.push(changed);
+				}
+			});
+			return result;
+		},
+		focus() {
+			this._focused = true;
+		},
+		blur() {
+			this._focused = false;
+			this.maybeAutoSave();
+		},
+		maybeAutoSave() {
+			this.touched = true;
+			maybeAutoSave();
+		},
+		set(values, opts = {}) {
+			if (this.readOnly && !opts.resetting && !opts.refreshing) throw new Error(`${String(key)} is currently readOnly`);
+			if ((this.dirty || this.hasNewEntity) && opts.refreshing) {
+				const currentItems = this.value || [];
+				const incomingItems = values || [];
+				const mergedItems = [];
+				const idKey = this.rows.length > 0 && this.rows[0].idKey;
+				const contentKeys = Object.entries(config.config).filter(([key, cfg]) => key !== idKey && cfg.type === "value").map(([key]) => key);
+				const hashByContent = (item) => hashValue(normalizeHashValue(Object.fromEntries(Object.entries(item).filter(([key]) => contentKeys.includes(key)))));
+				const hashById = (item) => {
+					const idValue = idKey ? item[idKey] : void 0;
+					return idValue === void 0 ? hashByContent(item) : idValue;
+				};
+				const currentById = groupBy(currentItems, hashById);
+				const incomingById = groupBy(incomingItems, hashById);
+				const incomingByContent = idKey && currentItems.some((item) => !item[idKey]) && groupBy(incomingItems, hashByContent);
+				const hasOpKey = Object.keys(listConfig.config).includes("op");
+				for (const currentItem of currentItems) {
+					const childState = rowMap.get(currentItem);
+					const hash = hashById(currentItem);
+					const match = incomingById.get(hash)?.[0] ?? (!!idKey && !currentItem[idKey] && !!incomingByContent && incomingByContent?.get(hash)?.[0]);
+					if (match) {
+						childState.set(match, opts);
+						mergedItems.push(childState.value);
+						addedRows.delete(currentItem);
+					} else if (!childState.dirty && !childState.isNewEntity && !addedRows.has(currentItem)) {} else if (hasOpKey && currentItem.op === "delete") {} else if (currentItems.length === incomingItems.length && !!idKey && currentItem[idKey] === void 0) {} else mergedItems.push(currentItem);
+				}
+				for (const incomingItem of incomingItems) if (!(currentById.get(hashById(incomingItem))?.[0] || currentById.get(hashByContent(incomingItem))?.[0])) {
+					const childState = getOrCreateChildState(incomingItem, opts);
+					mergedItems.push(childState.value);
+				}
+				parentInstance[key] = mergedItems;
+				_tick.value++;
+				this.setOriginalValue(incomingItems);
+			} else {
+				parentInstance[key] = (values ?? []).map((child) => getOrCreateChildState(child, opts).value);
+				_tick.value++;
+				if (opts.refreshing) this.setOriginalValue();
+			}
+		},
+		add(value, spliceIndex) {
+			const childState = getOrCreateChildState(value);
+			rowMap.set(value, childState);
+			addedRows.add(value);
+			this.ensureSet();
+			this.value.splice(typeof spliceIndex === "number" ? spliceIndex : this.value.length, 0, childState.value);
+			_tick.value++;
+			maybeAutoSave();
+		},
+		remove(indexOrValue) {
+			this.ensureSet();
+			if (typeof indexOrValue === "number") this.value.splice(indexOrValue, 1);
+			else {
+				const index = this.value.findIndex((v) => v === indexOrValue);
+				if (index > -1) this.value.splice(index, 1);
+			}
+			_tick.value++;
+			maybeAutoSave();
+		},
+		revertChanges() {
+			this.set(this.originalValue, { resetting: true });
+			this.rows.forEach((r) => r.revertChanges());
+			this.touched = false;
+		},
+		commitChanges() {
+			this.rows.forEach((r) => r.commitChanges());
+			this.setOriginalValue();
+			this.touched = false;
+			_tick.value++;
+		},
+		get originalValue() {
+			return (_originalValueTick.value > -1 ? parentCopy[key] : parentCopy[key]) ?? [];
+		},
+		setOriginalValue(incomingItems) {
+			parentCopy[key] = incomingItems ?? this.rows.map((r) => r.originalValue);
+			parentCopy[key].forEach((copy, i) => {
+				copyMap.set(copy, parentInstance[key][i]);
+			});
+			_originalValueTick.value++;
+		},
+		ensureSet() {
+			if (!parentInstance[key]) parentInstance[key] = [];
+			_tick.value++;
+		}
+	};
+	const proxy = makeAutoObservable(list, { value: computed({ equals: () => false }) });
+	reaction(() => proxy.rows.map((r) => r.value), () => _childTick.value++);
+	return proxy;
+}
+function hashValue(value) {
+	return hash(value);
+}
+//#endregion
+//#region src/fields/objectField.ts
+function fragment(value) {
+	return value;
+}
+/**
+* Creates a new `ObjectState` for a given form object `T` given config rules in `config`.
+*
+* The returned `ObjectState` can be used in a mobx `useLocalObservable` to drive an
+* interactive form that tracks the current valid/touched/etc. state of both each
+* individual fields as well as the top-level form/object itself.
+*/
+function createObjectState(config, instance, opts = {}) {
+	const noop = () => {};
+	return newObjectState({
+		type: "object",
+		config
+	}, void 0, void 0, void 0, instance, void 0, opts.maybeAutoSave || noop, false);
+}
+/** A more internal version of `createObjectState`. */
+function newObjectState(config, parentState, parentInstance, parentListState, instance, key, maybeAutoSave, deepExhaustive) {
+	let proxy = void 0;
+	function getObjectState() {
+		if (!proxy) throw new Error("Race condition");
+		return proxy;
+	}
+	const originalCopy = deepClone(instance);
+	const objectConfig = config.config;
+	const fieldStates = Object.entries(objectConfig).map(([_key, _config]) => {
+		const key = _key;
+		const config = _config;
+		let field;
+		if (config.type === "value") field = newValueFieldState(originalCopy, instance, getObjectState, key, config.rules || [], config.isIdKey || key === "id" && !("isIdKey" in config) && !Object.entries(objectConfig).some(([other, c]) => other !== key && c.isIdKey), config.isDeleteKey || false, config.isReadOnlyKey || false, config.isLocalOnly || false, config.computed ?? (isObservable(instance) ? !(key in originalCopy) : false), config.readOnly ?? false, config.strictOrder ?? true, maybeAutoSave);
+		else if (config.type === "list") field = newListFieldState(originalCopy, instance, getObjectState, key, config.rules || [], config, {
+			type: "object",
+			config: config.config
+		}, config.strictOrder ?? true, maybeAutoSave, deepExhaustive);
+		else if (config.type === "object") {
+			if (!instance[key]) instance[key] = {};
+			field = newObjectState(config, getObjectState, instance, void 0, instance[key], key, maybeAutoSave, deepExhaustive);
+		} else if (config.type === "fragment") field = newFragmentField(instance, key);
+		else throw new Error(`Invalid type value ${config.type}`);
+		return [key, field];
+	});
+	const _tick = observable({ value: 1 });
+	const fieldNames = Object.keys(objectConfig);
+	function getFields(proxyThis) {
+		return fieldNames.map((name) => proxyThis[name]);
+	}
+	const obj = {
+		...Object.fromEntries(fieldStates),
+		key,
+		get value() {
+			_tick.value > 0 || fail();
+			return instance;
+		},
+		set value(value) {
+			this.set(value);
+		},
+		_kind: "object",
+		_readOnly: false,
+		_loading: false,
+		_isAutoSaving: false,
+		_considerDeleted() {
+			return !!getFields(this).find((f) => f._isDeleteKey)?.value;
+		},
+		_considerReadOnly() {
+			return !!getFields(this).find((f) => f._isReadOnlyKey)?.value;
+		},
+		get focused() {
+			return getFields(this).some((f) => f.focused);
+		},
+		get touched() {
+			return getFields(this).some((f) => f.touched);
+		},
+		set touched(touched) {
+			getFields(this).forEach((f) => f.touched = touched);
+		},
+		get readOnly() {
+			return this._readOnly || this._considerReadOnly() || parentState && parentState().readOnly || !!parentListState?.readOnly;
+		},
+		set readOnly(readOnly) {
+			this._readOnly = readOnly;
+		},
+		get loading() {
+			return this._loading || parentState && parentState().loading || !!parentListState?.loading;
+		},
+		set loading(loading) {
+			this._loading = loading;
+		},
+		get valid() {
+			return getFields(this).every((f) => {
+				return f.valid;
+			});
+		},
+		get errors() {
+			return getFields(this).flatMap((f) => f.errors.map((e) => `${f.key}: ${e}`));
+		},
+		get dirty() {
+			return getFields(this).some((f) => f.dirty && !f._isLocalOnly) || this.isUnset() && !areEqual(this.value, {});
+		},
+		get isNewEntity() {
+			const idField = getFields(this).find((f) => f._isIdKey);
+			if (!idField && parentState) return parentState().isNewEntity;
+			return idField !== void 0 && (idField.value === null || idField.value === void 0);
+		},
+		canSave() {
+			this.touched = true;
+			return this.valid;
+		},
+		set(value, opts = {}) {
+			if (this.readOnly && !opts.resetting && !opts.refreshing) throw new Error(`${String(key) || "formState"} is currently readOnly`);
+			if (value && this.isUnset()) parentInstance[key] = instance;
+			if (!value && parentInstance) parentInstance[key] = void 0;
+			getFields(this).forEach((field) => {
+				if (value && typeof value === "object" && field.key in value) field.set(value[field.key], opts);
+			});
+		},
+		revertChanges() {
+			getFields(this).forEach((f) => f.revertChanges());
+		},
+		commitChanges() {
+			if (this._isAutoSaving) throw new Error("When using autoSave, you should not manually call commitChanges, instead have init.map/input update the form state");
+			getFields(this).forEach((f) => f.commitChanges());
+		},
+		get changedValue() {
+			const result = {};
+			if (this.isUnset()) {
+				if (getFields(this).find((f) => f._isIdKey) && config.reference) return { id: null };
+				return null;
+			}
+			getFields(this).forEach((f) => {
+				if (f._computed) return;
+				if (config.reference) return;
+				if (f._isLocalOnly) return;
+				if (f.dirty || this.isNewEntity && f._kind === "value" && f.value !== void 0 || this.isNewEntity && f._kind === "object" && f.changedValue && Object.entries(f.changedValue).length > 0 || this.isNewEntity && f._kind === "list" && f.value?.length > 0 || deepExhaustive) result[f.key] = f.changedValue;
+			});
+			const idField = getFields(this).find((f) => f._isIdKey);
+			if (idField && idField.value !== void 0) result[idField.key] = idField.value;
+			return result;
+		},
+		get originalValue() {
+			getFields(proxy).map((f) => f.originalValue);
+			return originalCopy;
+		},
+		isSameEntity(other) {
+			const idField = getFields(this).find((f) => f._isIdKey);
+			if (!idField) return false;
+			const ourIdValue = idField.value;
+			const otherIdValue = other[idField.key];
+			return otherIdValue !== void 0 && areEqual(otherIdValue, ourIdValue);
+		},
+		isUnset() {
+			return !!parentInstance && parentInstance[key] === void 0;
+		},
+		get idKey() {
+			return getFields(this).find((f) => f._isIdKey)?.key;
+		}
+	};
+	proxy = makeAutoObservable(obj, {
+		value: computed({ equals: () => false }),
+		originalValue: computed({ equals: () => false })
+	});
+	reaction(() => getFields(proxy).map((f) => f.value), () => _tick.value++);
+	return proxy;
+}
+//#endregion
+//#region src/configBuilders.ts
+/**
+* Provides a Zod-ish API for building form configs.
+*/
+const f = {
+	/** Creates the top-level config for a form, like an author or book. */
+	config(fields) {
+		return new ObjectConfigBuilder(fields).build().config;
+	},
+	/** Creates the config DSL for an object, like an author or book. */
+	object(fields) {
+		return new ObjectConfigBuilder(fields);
+	},
+	/** Creates the config DSL for an list of objects, like an author's list of books. */
+	list(fields) {
+		return new ListFieldConfigBuilder(fields);
+	},
+	/** Creates the config DSL for a primitive value, like a first name or phone number. */
+	value() {
+		return new ValueFieldConfigBuilder();
+	},
+	/** A shortcut for creating a child object with a single `id` key. */
+	reference(fields) {
+		return f.object({
+			id: f.value(),
+			...fields
+		}).ref();
+	},
+	/** A shorthand for creating a computed value. */
+	computed() {
+		return this.value().computed();
+	}
+};
+/** Provides a fluent DSL for building up an object's config. */
+var ObjectConfigBuilder = class {
+	config = {
+		type: "object",
+		config: {}
+	};
+	constructor(fields) {
+		for (const [key, value] of Object.entries(fields)) this.config.config[key] = value.build();
+	}
+	ref() {
+		this.config.reference = true;
+		return this;
+	}
+	build() {
+		return this.config;
+	}
+};
+/** Provides a fluent DSL for building up a value's config. */
+var ValueFieldConfigBuilder = class {
+	config = {
+		type: "value",
+		rules: []
+	};
+	/** Marks the field as required. */
+	req() {
+		this.config.rules = [required];
+		return this;
+	}
+	/** Marks the field as read only. */
+	readOnly() {
+		this.config.readOnly = true;
+		return this;
+	}
+	/** Marks the field as local only. */
+	localOnly() {
+		this.config.isLocalOnly = true;
+		return this;
+	}
+	/** Appends `rules` to the field's validation rules. */
+	rules(rules) {
+		(this.config.rules ??= []).push(...rules);
+		return this;
+	}
+	/** Marks the field as computed. */
+	computed() {
+		this.config.computed = true;
+		return this;
+	}
+	build() {
+		return this.config;
+	}
+};
+/** Provides a fluent DSL for building up a list's config. */
+var ListFieldConfigBuilder = class {
+	config;
+	constructor(fields) {
+		const config = {};
+		for (const [key, value] of Object.entries(fields)) config[key] = value.build();
+		this.config = {
+			type: "list",
+			rules: [],
+			config
+		};
+	}
+	/** Appends `rule` to the field's validation rules. */
+	rule(rule) {
+		(this.config.rules ??= []).push(rule);
+		return this;
+	}
+	/** Appends `rules` to the field's validation rules. */
+	rules(rules) {
+		(this.config.rules ??= []).push(...rules);
+		return this;
+	}
+	build() {
+		return this.config;
+	}
+};
+//#endregion
+//#region src/useFormStates.ts
+/**
+* A hook to manage many "mini-forms" on a single page, typically one form per row
+* in a table.
+*
+* This hook basically provides the page/table with a cache, so each table row naively ask "what's
+* the form state for this given row's data?" and get back a new-or-existing `ObjectState` instance
+* that, if already existing, still has any of the user's WIP changes.
+*
+* Each mini-form/row can have its own autoSave calls, independent of the other rows.
+*
+* @typeparam T the form type, which is usually as close as possible to your *GraphQL input*
+* @typeparam I the *form input* type, which is usually the *GraphQL output* type, i.e. the type of the response from your GraphQL query
+*/
+function useFormStates(opts) {
+	const { config, autoSave, getId, map, addRules, readOnly = false } = opts;
+	const objectStateCache = useMemo(() => ({}), [config]);
+	const pendingAutoSaves = useRef(/* @__PURE__ */ new Set());
+	const autoSaveRef = useRef(autoSave);
+	autoSaveRef.current = autoSave;
+	const readOnlyRef = useRef(readOnly);
+	readOnlyRef.current = readOnly;
+	return { getFormState: useCallback((input, opts = {}) => {
+		const existing = objectStateCache[getId(input)];
+		let form = existing?.[0];
+		async function maybeAutoSave(form) {
+			if (autoSaveRef.current && form.dirty) {
+				if (!form.valid) {
+					console.debug("Skipping auto-save b/c form is invalid: ", form.errors);
+					return;
+				}
+				const { current: pending } = pendingAutoSaves;
+				if (isAutoSaving) {
+					pending.add(form);
+					return;
+				}
+				try {
+					isAutoSaving = true;
+					await new Promise((resolve) => setTimeout(resolve, 0));
+					pending.delete(form);
+					await autoSaveRef.current(form);
+				} catch (e) {
+					throw e;
+				} finally {
+					isAutoSaving = false;
+					if (pending.size > 0) {
+						const first = pending.values().next().value;
+						pending.delete(first);
+						await maybeAutoSave(first);
+					}
+				}
+			}
+		}
+		if (!form) {
+			form = createObjectState(config, initValue(config, {
+				map,
+				input
+			}), { maybeAutoSave: () => maybeAutoSave(form) });
+			if (addRules) addRules(form);
+			objectStateCache[getId(input)] = [form, input];
+		}
+		if (existing && existing[1] !== input) {
+			form.set(initValue(config, {
+				map,
+				input
+			}), { refreshing: true });
+			existing[1] = input;
+		}
+		form.readOnly = readOnlyRef.current || !!opts.readOnly;
+		return form;
+	}, [objectStateCache, config]) };
+}
+let isAutoSaving = false;
+//#endregion
+export { createObjectState, f, fragment, required, useFormState, useFormStates };
+
+//# sourceMappingURL=index.js.map