atom.io 0.32.4 → 0.33.0

package/dist/react-devtools/index.js

@@ -0,0 +1,1274 @@
+import "../devtools-CAg2k57t.js";
+import { IMPLICIT, become, createAtomFamily, createStandaloneAtom, findInStore } from "atom.io/internal";
+import { JSON_DEFAULTS, fromEntries, isJson, stringifyJson, toEntries } from "atom.io/json";
+import { getState, redo, undo } from "atom.io";
+import { Component, Fragment, createContext, forwardRef, useContext, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { StoreContext, useI, useO } from "atom.io/react";
+import { LayoutGroup, motion, spring } from "motion/react";
+import { attachIntrospectionStates, discoverType, jsonRefinery, prettyJson, primitiveRefinery } from "atom.io/introspection";
+import { persistSync } from "atom.io/web";
+
+//#region src/react-devtools/Button.tsx
+const OpenClose = ({ isOpen, setIsOpen, disabled, testid }) => {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-testid": testid,
+		className: `carat ${isOpen ? `open` : `closed`}`,
+		onClick: () => {
+			setIsOpen((prev) => !prev);
+		},
+		disabled,
+		children: "▶"
+	});
+};
+const button = { OpenClose };
+
+//#endregion
+//#region src/react-devtools/elastic-input/ElasticInput.tsx
+const ElasticInput = forwardRef(function ElasticInputFC(props, ref) {
+	const inputRef = useRef(null);
+	const spanRef = useRef(null);
+	const [inputWidth, setInputWidth] = useState(`auto`);
+	useImperativeHandle(ref, () => ({ focus: () => {
+		inputRef.current?.focus();
+	} }));
+	const extraWidth = props.type === `number` ? 15 : 0;
+	useLayoutEffect(() => {
+		if (spanRef.current) {
+			setInputWidth(`${spanRef.current.offsetWidth + extraWidth}px`);
+			const interval = setInterval(() => {
+				if (spanRef.current) setInputWidth(`${spanRef.current.offsetWidth + extraWidth}px`);
+			}, 1e3);
+			return () => {
+				clearInterval(interval);
+			};
+		}
+	}, [inputRef.current?.value, props.value]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: `inline-block`,
+			position: `relative`
+		},
+		children: [/* @__PURE__ */ jsx("input", {
+			...props,
+			ref: inputRef,
+			style: {
+				padding: 0,
+				borderRadius: 0,
+				border: `none`,
+				fontFamily: `inherit`,
+				fontSize: `inherit`,
+				width: inputWidth,
+				...props.style
+			}
+		}), /* @__PURE__ */ jsx("span", {
+			ref: spanRef,
+			style: {
+				padding: props.style?.padding,
+				position: `absolute`,
+				visibility: `hidden`,
+				whiteSpace: `pre`,
+				fontFamily: props.style?.fontFamily ?? `inherit`,
+				fontSize: props.style?.fontSize ?? `inherit`
+			},
+			children: props.value
+		})]
+	});
+});
+
+//#endregion
+//#region src/react-devtools/elastic-input/NumberInput.tsx
+function clampInto(min, max) {
+	return (value) => value < min ? min : value > max ? max : value;
+}
+function round(value, decimalPlaces) {
+	if (decimalPlaces === void 0) return value;
+	const factor = 10 ** decimalPlaces;
+	return Math.round(value * factor) / factor;
+}
+const VALID_NON_NUMBERS = [
+	``,
+	`-`,
+	`.`,
+	`-.`
+];
+const isValidNonNumber = (input) => VALID_NON_NUMBERS.includes(input);
+const VALID_NON_NUMBER_INTERPRETATIONS = {
+	"": null,
+	"-": 0,
+	".": 0,
+	"-.": 0
+};
+const isDecimalInProgress = (input) => input === `0` || !Number.isNaN(Number(input)) && input.includes(`.`);
+const textToValue = (input, allowDecimal) => {
+	if (isValidNonNumber(input)) return VALID_NON_NUMBER_INTERPRETATIONS[input];
+	return allowDecimal ? Number.parseFloat(input) : Math.round(Number.parseFloat(input));
+};
+const DEFAULT_NUMBER_CONSTRAINTS = {
+	max: Number.POSITIVE_INFINITY,
+	min: Number.NEGATIVE_INFINITY,
+	decimalPlaces: 100,
+	nullable: true
+};
+const initRefinery = (constraints) => (input) => {
+	if (input === null && constraints.nullable === true) return null;
+	const { max, min, decimalPlaces } = {
+		...DEFAULT_NUMBER_CONSTRAINTS,
+		...constraints
+	};
+	let constrained = clampInto(min, max)(input ?? 0);
+	if (decimalPlaces) constrained = round(constrained, decimalPlaces);
+	return constrained;
+};
+const valueToText = (numericValue) => {
+	if (numericValue === null || numericValue === void 0) return ``;
+	return numericValue.toString();
+};
+const NumberInput = ({ autoSize = false, decimalPlaces, disabled = false, label, max, min, name, onChange, onClick, placeholder = ``, set = () => null, testid, value = null }) => {
+	const htmlId = useId();
+	const [temporaryEntry, setTemporaryEntry] = useState(null);
+	const userHasMadeDeliberateChange = useRef(false);
+	const refine = initRefinery({
+		max,
+		min,
+		decimalPlaces,
+		nullable: true
+	});
+	const allowDecimal = decimalPlaces === void 0 || decimalPlaces > 0;
+	const handleBlur = () => {
+		if (userHasMadeDeliberateChange.current) {
+			set(refine(value ?? null));
+			setTemporaryEntry(null);
+		}
+		userHasMadeDeliberateChange.current = false;
+	};
+	const handleChange = (event) => {
+		if (onChange) onChange(event);
+		if (set === void 0) return;
+		userHasMadeDeliberateChange.current = true;
+		const input = event.target.value;
+		if (isValidNonNumber(input) || isDecimalInProgress(input)) {
+			setTemporaryEntry(input);
+			const textInterpretation = isDecimalInProgress(input) ? input : min?.toString() ?? `0`;
+			const newValue = textToValue(textInterpretation, allowDecimal);
+			set(refine(newValue));
+			return;
+		}
+		setTemporaryEntry(null);
+		const inputIsNumeric = !Number.isNaN(Number(input)) && !input.includes(` `) || allowDecimal && input === `.` || allowDecimal && input === `-.` || input === `` || input === `-`;
+		const numericValue = textToValue(input, allowDecimal);
+		if (inputIsNumeric) set(refine(numericValue));
+	};
+	const displayValue = temporaryEntry ?? valueToText(value ? refine(value) : value);
+	return /* @__PURE__ */ jsxs("span", { children: [label ? /* @__PURE__ */ jsx("label", {
+		htmlFor: htmlId,
+		children: label
+	}) : null, autoSize ? /* @__PURE__ */ jsx(ElasticInput, {
+		type: "text",
+		value: displayValue,
+		placeholder: placeholder ?? `-`,
+		onChange: handleChange,
+		onBlur: handleBlur,
+		disabled,
+		name: name ?? htmlId,
+		id: htmlId,
+		onClick,
+		"data-testid": testid
+	}) : /* @__PURE__ */ jsx("input", {
+		type: "text",
+		value: displayValue,
+		placeholder: placeholder ?? `-`,
+		onChange: handleChange,
+		onBlur: handleBlur,
+		disabled,
+		name: name ?? htmlId,
+		id: htmlId,
+		onClick,
+		"data-testid": testid
+	})] });
+};
+
+//#endregion
+//#region src/react-devtools/elastic-input/TextInput.tsx
+const TextInput = ({ value, set, label, placeholder, autoSize = false, testid }) => {
+	const htmlId = useId();
+	return /* @__PURE__ */ jsxs("span", { children: [label ? /* @__PURE__ */ jsx("label", {
+		htmlFor: htmlId,
+		children: label
+	}) : null, autoSize ? /* @__PURE__ */ jsx(ElasticInput, {
+		id: htmlId,
+		type: "text",
+		value,
+		onChange: (e) => set?.(e.target.value),
+		disabled: set === void 0,
+		placeholder,
+		"data-testid": testid
+	}) : /* @__PURE__ */ jsx("input", {
+		id: htmlId,
+		type: "text",
+		value,
+		onChange: (e) => set?.(e.target.value),
+		disabled: set === void 0,
+		placeholder,
+		"data-testid": testid
+	})] });
+};
+
+//#endregion
+//#region src/react-devtools/json-editor/editors-by-type/non-json.tsx
+const NonJsonEditor = ({ data, testid }) => {
+	return data === void 0 ? /* @__PURE__ */ jsx(ElasticInput, {
+		disabled: true,
+		value: "undefined",
+		"data-testid": `${testid}-undefined`
+	}) : /* @__PURE__ */ jsx(ElasticInput, {
+		disabled: true,
+		value: Object.getPrototypeOf(data).constructor.name + ` ` + JSON.stringify(data),
+		"data-testid": `${testid}-non-json-${Object.getPrototypeOf(data).constructor.name}`
+	});
+};
+
+//#endregion
+//#region src/react-devtools/json-editor/json-editor-internal.tsx
+const JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [], isReadonly = () => false, isHidden = () => false, className, style, Header: HeaderDisplay, Components, testid }) => {
+	const dataIsJson = isJson(data);
+	const refined = jsonRefinery.refine(data) ?? {
+		type: `non-json`,
+		data
+	};
+	const SubEditor = dataIsJson ? SubEditors[refined.type] : NonJsonEditor;
+	const disabled = isReadonly(path);
+	return isHidden(path) ? null : /* @__PURE__ */ jsx(Components.ErrorBoundary, { children: /* @__PURE__ */ jsxs(Components.EditorWrapper, {
+		className,
+		style,
+		testid,
+		children: [
+			remove ? disabled ? /* @__PURE__ */ jsx(Components.Button, {
+				disabled: true,
+				testid: `${testid}-delete`,
+				children: /* @__PURE__ */ jsx(Components.DeleteIcon, {})
+			}) : /* @__PURE__ */ jsx(Components.Button, {
+				testid: `${testid}-delete`,
+				onClick: () => {
+					remove();
+				},
+				children: /* @__PURE__ */ jsx(Components.DeleteIcon, {})
+			}) : null,
+			HeaderDisplay && /* @__PURE__ */ jsx(HeaderDisplay, { data }),
+			rename && /* @__PURE__ */ jsx(Components.KeyWrapper, { children: /* @__PURE__ */ jsx(ElasticInput, {
+				value: name,
+				onChange: disabled ? void 0 : (e) => {
+					rename(e.target.value);
+				},
+				disabled,
+				"data-testid": `${testid}-rename`
+			}) }),
+			/* @__PURE__ */ jsx(SubEditor, {
+				data: refined.data,
+				set,
+				remove,
+				rename,
+				path,
+				isReadonly,
+				isHidden,
+				Components,
+				testid
+			}),
+			recast && dataIsJson ? /* @__PURE__ */ jsx("select", {
+				onChange: disabled ? void 0 : (e) => {
+					recast(e.target.value);
+				},
+				value: refined.type,
+				disabled,
+				"data-testid": `${testid}-recast`,
+				children: Object.keys(SubEditors).map((type) => /* @__PURE__ */ jsx("option", {
+					value: type,
+					children: type
+				}, type))
+			}) : null
+		]
+	}) });
+};
+
+//#endregion
+//#region src/react-devtools/json-editor/editors-by-type/utilities/array-elements.ts
+const makeElementSetters = (data, set) => data.map((value, index) => (newValue) => {
+	set(() => {
+		const newData = [...data];
+		newData[index] = become(newValue)(value);
+		return newData;
+	});
+});
+
+//#endregion
+//#region src/react-devtools/json-editor/editors-by-type/array-editor.tsx
+const ArrayEditor = ({ path = [], isReadonly = () => false, isHidden = () => false, data, set, Components, testid }) => {
+	const setElement = makeElementSetters(data, set);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: data.map((element, index) => {
+		const newPath = [...path, index];
+		return /* @__PURE__ */ jsx(JsonEditor_INTERNAL, {
+			path: newPath,
+			isReadonly,
+			isHidden,
+			data: element,
+			set: setElement[index],
+			Components,
+			className: "json_editor_element",
+			testid: `${testid}-element-${index}`
+		}, newPath.join(``));
+	}) });
+};
+
+//#endregion
+//#region src/react-devtools/json-editor/editors-by-type/utilities/cast-json.ts
+const stringToBoolean = (str) => str === `true`;
+const stringToNumber = (str) => Number(str);
+const stringToArray = (str) => str.split(`,`);
+const stringToObject = (str) => {
+	try {
+		return JSON.parse(str);
+	} catch (e) {
+		return { [str]: str };
+	}
+};
+const objectToString = (obj) => JSON.stringify(obj);
+const objectToBoolean = (obj) => obj[`true`] === true;
+const objectToNumber = (obj) => Number(obj[`number`] ?? obj[`size`] ?? obj[`count`] ?? 0);
+const objectToArray = (obj) => Object.entries(obj);
+const booleanToString = (bool) => bool.toString();
+const booleanToNumber = (bool) => +bool;
+const booleanToObject = (bool) => ({ [bool.toString()]: bool });
+const booleanToArray = (bool) => [bool];
+const numberToString = (num) => num.toString();
+const numberToBoolean = (num) => num === 1;
+const numberToObject = (num) => ({ number: num });
+const numberToArray = (num) => Array(num).fill(null);
+const arrayToString = (arr) => arr.join(`,`);
+const arrayToNumber = (arr) => arr.length;
+const arrayToBoolean = (arr) => typeof arr[0] === `boolean` ? arr[0] : arr.length > 0;
+const arrayToObject = (arr) => arr.reduce((acc, cur, idx) => {
+	acc[`${idx}`] = cur;
+	return acc;
+}, {});
+const nullToString = () => ``;
+const nullToNumber = () => 0;
+const nullToBoolean = () => false;
+const nullToArray = () => [];
+const nullToObject = () => ({});
+
+//#endregion
+//#region src/react-devtools/json-editor/editors-by-type/utilities/cast-to-json.ts
+const castToJson = (input) => {
+	const refined = jsonRefinery.refine(input);
+	switch (refined?.type) {
+		case `array`: {
+			const data = refined.data;
+			return {
+				get array() {
+					return data;
+				},
+				get boolean() {
+					return arrayToBoolean(data);
+				},
+				get number() {
+					return arrayToNumber(data);
+				},
+				get object() {
+					return arrayToObject(data);
+				},
+				get string() {
+					return arrayToString(data);
+				},
+				get null() {
+					return null;
+				}
+			};
+		}
+		case `boolean`: {
+			const data = refined.data;
+			return {
+				get array() {
+					return booleanToArray(data);
+				},
+				get boolean() {
+					return data;
+				},
+				get number() {
+					return booleanToNumber(data);
+				},
+				get object() {
+					return booleanToObject(data);
+				},
+				get string() {
+					return booleanToString(data);
+				},
+				get null() {
+					return null;
+				}
+			};
+		}
+		case `number`: {
+			const data = refined.data;
+			return {
+				get array() {
+					return numberToArray(data);
+				},
+				get boolean() {
+					return numberToBoolean(data);
+				},
+				get number() {
+					return data;
+				},
+				get object() {
+					return numberToObject(data);
+				},
+				get string() {
+					return numberToString(data);
+				},
+				get null() {
+					return null;
+				}
+			};
+		}
+		case `object`: {
+			const data = refined.data;
+			return {
+				get array() {
+					return objectToArray(data);
+				},
+				get boolean() {
+					return objectToBoolean(data);
+				},
+				get number() {
+					return objectToNumber(data);
+				},
+				get object() {
+					return data;
+				},
+				get string() {
+					return objectToString(data);
+				},
+				get null() {
+					return null;
+				}
+			};
+		}
+		case `string`: {
+			const data = refined.data;
+			return {
+				get array() {
+					return stringToArray(data);
+				},
+				get boolean() {
+					return stringToBoolean(data);
+				},
+				get number() {
+					return stringToNumber(data);
+				},
+				get object() {
+					return stringToObject(data);
+				},
+				get string() {
+					return data;
+				},
+				get null() {
+					return null;
+				}
+			};
+		}
+		case `null`:
+		case void 0: return {
+			get array() {
+				return nullToArray();
+			},
+			get boolean() {
+				return nullToBoolean();
+			},
+			get number() {
+				return nullToNumber();
+			},
+			get object() {
+				return nullToObject();
+			},
+			get string() {
+				return nullToString();
+			},
+			get null() {
+				return null;
+			}
+		};
+	}
+};
+
+//#endregion
+//#region src/react-devtools/json-editor/editors-by-type/utilities/object-properties.ts
+const makePropertySetters = (data, set) => fromEntries(toEntries(data).map(([key, value]) => [key, (newValue) => {
+	set({
+		...data,
+		[key]: become(newValue)(value)
+	});
+}]));
+const makePropertyRenamers = (data, set, stableKeyMapRef) => fromEntries(toEntries(data).map(([key, value]) => [key, (newKey) => {
+	if (!Object.hasOwn(data, newKey)) set(() => {
+		const entries = Object.entries(data);
+		const index = entries.findIndex(([k]) => k === key);
+		entries[index] = [newKey, value];
+		const stableKeyMap = stableKeyMapRef.current;
+		stableKeyMapRef.current = {
+			...stableKeyMap,
+			[newKey]: stableKeyMap[key]
+		};
+		return Object.fromEntries(entries);
+	});
+}]));
+const makePropertyRemovers = (data, set) => fromEntries(toEntries(data).map(([key]) => [key, () => {
+	set(() => {
+		const { [key]: _,...rest } = data;
+		return rest;
+	});
+}]));
+const makePropertyRecasters = (data, set) => fromEntries(toEntries(data).map(([key, value]) => [key, (newType) => {
+	set(() => ({
+		...data,
+		[key]: castToJson(value)[newType]
+	}));
+}]));
+const makePropertyCreationInterface = (data, set) => (key, type) => (value) => {
+	set({
+		...data,
+		[key]: value ?? JSON_DEFAULTS[type]
+	});
+};
+const makePropertySorter = (data, set, sortFn) => () => {
+	const sortedKeys = Object.keys(data).sort(sortFn);
+	const sortedObj = {};
+	for (const key of sortedKeys) sortedObj[key] = data[key];
+	set(sortedObj);
+};
+
+//#endregion
+//#region src/react-devtools/json-editor/editors-by-type/object-editor.tsx
+const ObjectEditor = ({ path = [], isReadonly = () => false, isHidden = () => false, data, set, Components, testid }) => {
+	const disabled = isReadonly(path);
+	const stableKeyMap = useRef(Object.keys(data).reduce((acc, key) => {
+		acc[key] = key;
+		return acc;
+	}, {}));
+	const setProperty = makePropertySetters(data, set);
+	const renameProperty = makePropertyRenamers(data, set, stableKeyMap);
+	const removeProperty = makePropertyRemovers(data, set);
+	const recastProperty = makePropertyRecasters(data, set);
+	const sortProperties = makePropertySorter(data, set);
+	const makePropertyAdder = makePropertyCreationInterface(data, set);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Components.Button, {
+		testid: `${testid}-sort-properties`,
+		onClick: () => {
+			sortProperties();
+		},
+		disabled,
+		children: "Sort"
+	}), /* @__PURE__ */ jsxs(Components.ObjectWrapper, { children: [/* @__PURE__ */ jsx("div", {
+		className: "json_editor_properties",
+		children: Object.keys(data).map((key) => {
+			const originalKey = stableKeyMap.current[key];
+			const newPath = [...path, key];
+			const originalPath = [...path, originalKey];
+			return /* @__PURE__ */ jsx(JsonEditor_INTERNAL, {
+				path: newPath,
+				name: key,
+				isReadonly,
+				isHidden,
+				data: data[key],
+				set: setProperty[key],
+				rename: renameProperty[key],
+				remove: removeProperty[key],
+				recast: recastProperty[key],
+				className: "json_editor_property",
+				Components,
+				testid: `${testid}-property-${key}`
+			}, originalPath.join(`.`));
+		})
+	}), disabled ? /* @__PURE__ */ jsx(Components.Button, {
+		disabled: true,
+		testid: `${testid}-add-property`,
+		children: "+"
+	}) : /* @__PURE__ */ jsx(Components.Button, {
+		testid: `${testid}-add-property`,
+		onClick: () => {
+			makePropertyAdder(`new_property`, `string`)();
+		},
+		children: "+"
+	})] })] });
+};
+
+//#endregion
+//#region src/react-devtools/json-editor/editors-by-type/primitive-editors.tsx
+const BooleanEditor = ({ data, set, Components, testid }) => /* @__PURE__ */ jsx(Components.BooleanWrapper, { children: /* @__PURE__ */ jsx("input", {
+	"data-testid": `${testid}-boolean-input`,
+	type: "checkbox",
+	checked: data,
+	onChange: (event) => {
+		set(event.target.checked);
+	}
+}) });
+const NullEditor = ({ Components, testid }) => /* @__PURE__ */ jsx(Components.Null, { testid: `${testid}-null` });
+const NumberEditor = ({ path = [], isReadonly = () => false, data, set, Components, testid }) => /* @__PURE__ */ jsx(Components.NumberWrapper, { children: /* @__PURE__ */ jsx(NumberInput, {
+	testid: `${testid}-number-input`,
+	value: data,
+	set: isReadonly(path) ? void 0 : (newValue) => {
+		set(Number(newValue));
+	},
+	autoSize: true
+}) });
+const StringEditor = ({ path = [], isReadonly = () => false, data, set, Components, testid }) => {
+	return /* @__PURE__ */ jsx(Components.StringWrapper, { children: /* @__PURE__ */ jsx(TextInput, {
+		testid: `${testid}-string-input`,
+		value: data,
+		set: isReadonly(path) ? void 0 : set,
+		autoSize: true
+	}) });
+};
+
+//#endregion
+//#region src/react-devtools/error-boundary/DefaultFallback.tsx
+const DefaultFallback = ({ error, errorInfo }) => {
+	const component = errorInfo?.componentStack?.split(` `).filter(Boolean)[2];
+	const message = error?.toString() ?? errorInfo?.componentStack ?? `Unknown error`;
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": "error-boundary",
+		style: {
+			flex: `1`,
+			background: `black`,
+			backgroundImage: `url(./src/assets/kablooey.gif)`,
+			backgroundPosition: `center`,
+			backgroundSize: `overlay`
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				margin: `50px`,
+				marginTop: `0`,
+				padding: `50px`,
+				border: `1px solid dashed`
+			},
+			children: /* @__PURE__ */ jsxs("span", {
+				style: {
+					background: `black`,
+					color: `white`,
+					padding: 10,
+					paddingTop: 5
+				},
+				children: [
+					`⚠️ `,
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							color: `#fc0`,
+							fontWeight: 700
+						},
+						children: component
+					}),
+					` ⚠️ `,
+					message
+				]
+			})
+		})
+	});
+};
+
+//#endregion
+//#region src/react-devtools/error-boundary/ReactErrorBoundary.tsx
+var ErrorBoundary = class extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
+	componentDidCatch(error, errorInfo) {
+		this.props.onError?.(error, errorInfo);
+		this.setState({
+			error,
+			errorInfo
+		});
+	}
+	render() {
+		const { error, errorInfo } = this.state;
+		const { children, Fallback = DefaultFallback } = this.props;
+		return errorInfo ? /* @__PURE__ */ jsx(Fallback, {
+			error,
+			errorInfo
+		}) : children;
+	}
+};
+
+//#endregion
+//#region src/react-devtools/json-editor/default-components.tsx
+const DEFAULT_JSON_EDITOR_COMPONENTS = {
+	ErrorBoundary: ({ children }) => /* @__PURE__ */ jsx(ErrorBoundary, { children }),
+	Button: ({ onClick, children, disabled, testid }) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "json_editor_button",
+		onClick,
+		disabled,
+		"data-testid": testid,
+		children
+	}),
+	EditorWrapper: ({ children, className, testid }) => /* @__PURE__ */ jsx("div", {
+		className: `json_editor` + (className ? ` ${className}` : ``),
+		"data-testid": testid,
+		children
+	}),
+	ArrayWrapper: ({ children, testid }) => /* @__PURE__ */ jsx("div", {
+		className: "json_editor_array",
+		"data-testid": testid,
+		children
+	}),
+	ObjectWrapper: ({ children, testid }) => /* @__PURE__ */ jsx("div", {
+		className: "json_editor_object",
+		"data-testid": testid,
+		children
+	}),
+	StringWrapper: ({ children, testid }) => /* @__PURE__ */ jsx("span", {
+		className: "json_editor_string",
+		"data-testid": testid,
+		children
+	}),
+	NumberWrapper: ({ children, testid }) => /* @__PURE__ */ jsx("span", {
+		className: "json_editor_number",
+		"data-testid": testid,
+		children
+	}),
+	BooleanWrapper: ({ children, testid }) => /* @__PURE__ */ jsx("span", {
+		className: "json_editor_boolean",
+		"data-testid": testid,
+		children
+	}),
+	Null: ({ testid }) => /* @__PURE__ */ jsx("span", {
+		className: "json_editor_null",
+		"data-testid": testid
+	}),
+	DeleteIcon: () => /* @__PURE__ */ jsx("span", {
+		className: "json_editor_icon json_editor_delete",
+		children: "x"
+	}),
+	MissingPropertyWrapper: ({ children, testid }) => /* @__PURE__ */ jsx("span", {
+		className: "json_editor_missing_property",
+		"data-testid": testid,
+		children
+	}),
+	KeyWrapper: ({ children, testid }) => /* @__PURE__ */ jsx("span", {
+		className: "json_editor_key",
+		"data-testid": testid,
+		children
+	})
+};
+
+//#endregion
+//#region src/react-devtools/json-editor/developer-interface.tsx
+const JsonEditor = ({ data, set, name, rename, remove, isReadonly = () => false, isHidden = () => false, className, Header, style, Components: CustomComponents = {}, testid }) => {
+	const Components = {
+		...DEFAULT_JSON_EDITOR_COMPONENTS,
+		...CustomComponents
+	};
+	return /* @__PURE__ */ jsx(JsonEditor_INTERNAL, {
+		data,
+		set,
+		name,
+		rename,
+		remove,
+		path: [],
+		isReadonly,
+		isHidden,
+		className,
+		Header,
+		style,
+		Components,
+		testid
+	});
+};
+
+//#endregion
+//#region src/react-devtools/json-editor/index.ts
+const SubEditors = {
+	array: ArrayEditor,
+	boolean: BooleanEditor,
+	null: NullEditor,
+	number: NumberEditor,
+	object: ObjectEditor,
+	string: StringEditor
+};
+
+//#endregion
+//#region src/react-devtools/StateEditor.tsx
+const StateEditor = ({ token }) => {
+	const set = useI(token);
+	const data = useO(token);
+	return /* @__PURE__ */ jsx(JsonEditor, {
+		testid: `${token.key}-state-editor`,
+		data,
+		set
+	});
+};
+const ReadonlySelectorViewer = ({ token }) => {
+	const data = useO(token);
+	return /* @__PURE__ */ jsx(JsonEditor, {
+		testid: `${token.key}-state-editor`,
+		data,
+		set: () => null,
+		isReadonly: () => true
+	});
+};
+const StoreEditor = ({ token }) => {
+	if (token.type === `readonly_selector`) return /* @__PURE__ */ jsx(ReadonlySelectorViewer, { token });
+	return /* @__PURE__ */ jsx(StateEditor, { token });
+};
+
+//#endregion
+//#region src/react-devtools/store.ts
+function attachDevtoolsStates(store) {
+	const introspectionStates = attachIntrospectionStates(store);
+	const devtoolsAreOpenState = createStandaloneAtom(store, {
+		key: `🔍 Devtools Are Open`,
+		default: true,
+		effects: typeof window === `undefined` ? [] : [persistSync(window.localStorage, JSON, `🔍 Devtools Are Open`)]
+	});
+	const devtoolsViewSelectionState = createStandaloneAtom(store, {
+		key: `🔍 Devtools View Selection`,
+		default: `atoms`,
+		effects: typeof window === `undefined` ? [] : [persistSync(window.localStorage, JSON, `🔍 Devtools View`)]
+	});
+	const devtoolsViewOptionsState = createStandaloneAtom(store, {
+		key: `🔍 Devtools View Options`,
+		default: [
+			`atoms`,
+			`selectors`,
+			`transactions`,
+			`timelines`
+		],
+		effects: typeof window === `undefined` ? [] : [persistSync(window.localStorage, JSON, `🔍 Devtools View Options`)]
+	});
+	const viewIsOpenAtoms = createAtomFamily(store, {
+		key: `🔍 Devtools View Is Open`,
+		default: false,
+		effects: (key) => typeof window === `undefined` ? [] : [persistSync(window.localStorage, JSON, key + `:view-is-open`)]
+	});
+	return {
+		...introspectionStates,
+		devtoolsAreOpenState,
+		devtoolsViewSelectionState,
+		devtoolsViewOptionsState,
+		viewIsOpenAtoms,
+		store
+	};
+}
+const DevtoolsContext = createContext(attachDevtoolsStates(IMPLICIT.STORE));
+
+//#endregion
+//#region src/react-devtools/StateIndex.tsx
+const StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
+	const setIsOpen = useI(isOpenState);
+	const isOpen = useO(isOpenState);
+	const state = useO(node);
+	const stateType = useO(typeState);
+	const isPrimitive = Boolean(primitiveRefinery.refine(state));
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("header", { children: [
+		/* @__PURE__ */ jsx(button.OpenClose, {
+			isOpen: isOpen && !isPrimitive,
+			testid: `open-close-state-${node.key}`,
+			setIsOpen,
+			disabled: isPrimitive
+		}),
+		/* @__PURE__ */ jsxs("main", {
+			onClick: () => {
+				console.log(node, getState(node));
+			},
+			onKeyUp: () => {
+				console.log(node, getState(node));
+			},
+			children: [/* @__PURE__ */ jsx("h2", { children: node.family?.subKey ?? node.key }), /* @__PURE__ */ jsxs("span", {
+				className: "type detail",
+				children: [
+					"(",
+					stateType,
+					")"
+				]
+			})]
+		}),
+		/* @__PURE__ */ jsx(StoreEditor, { token: node })
+	] }), isOpen && !isPrimitive ? /* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsx(StoreEditor, { token: node }) }) : null] });
+};
+const StateIndexTreeNode = ({ node, isOpenState }) => {
+	const setIsOpen = useI(isOpenState);
+	const isOpen = useO(isOpenState);
+	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
+	for (const [key, childNode] of node.familyMembers) {
+		findInStore(store, viewIsOpenAtoms, key);
+		findInStore(store, typeSelectors, childNode.key);
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx(button.OpenClose, {
+		isOpen,
+		testid: `open-close-state-family-${node.key}`,
+		setIsOpen
+	}), /* @__PURE__ */ jsxs("main", { children: [/* @__PURE__ */ jsx("h2", { children: node.key }), /* @__PURE__ */ jsx("span", {
+		className: "type detail",
+		children: " (family)"
+	})] })] }), isOpen ? [...node.familyMembers.entries()].map(([key, childNode]) => /* @__PURE__ */ jsx(StateIndexNode, {
+		node: childNode,
+		isOpenState: findInStore(store, viewIsOpenAtoms, childNode.key),
+		typeState: findInStore(store, typeSelectors, childNode.key)
+	}, key)) : null] });
+};
+const StateIndexNode = ({ node, isOpenState, typeState }) => {
+	return /* @__PURE__ */ jsx("section", {
+		className: "node state",
+		"data-testid": `state-${node.key}`,
+		children: `type` in node ? /* @__PURE__ */ jsx(StateIndexLeafNode, {
+			node,
+			isOpenState,
+			typeState
+		}) : /* @__PURE__ */ jsx(StateIndexTreeNode, {
+			node,
+			isOpenState
+		})
+	});
+};
+const StateIndex = ({ tokenIndex }) => {
+	const tokenIds = useO(tokenIndex);
+	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
+	return /* @__PURE__ */ jsx("article", {
+		className: "index state_index",
+		"data-testid": "state-index",
+		children: [...tokenIds.entries()].filter(([key]) => !key.startsWith(`👁‍🗨`)).sort().map(([key, node]) => {
+			return /* @__PURE__ */ jsx(StateIndexNode, {
+				node,
+				isOpenState: findInStore(store, viewIsOpenAtoms, node.key),
+				typeState: findInStore(store, typeSelectors, node.key)
+			}, key);
+		})
+	});
+};
+
+//#endregion
+//#region src/react-devtools/Updates.tsx
+const AtomUpdateFC = ({ atomUpdate }) => {
+	return /* @__PURE__ */ jsxs("article", {
+		className: "node atom_update",
+		onClick: () => {
+			console.log(atomUpdate);
+		},
+		onKeyUp: () => {
+			console.log(atomUpdate);
+		},
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "detail",
+			children: [atomUpdate.key, ": "]
+		}), /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", {
+			className: "summary",
+			children: prettyJson.diff(atomUpdate.oldValue, atomUpdate.newValue).summary
+		}) })]
+	}, atomUpdate.key);
+};
+const TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
+	return /* @__PURE__ */ jsxs("article", {
+		className: "node transaction_update",
+		"data-testid": `transaction-update-${transactionUpdate.key}-${serialNumber}`,
+		children: [/* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx("h4", { children: serialNumber }) }), /* @__PURE__ */ jsxs("main", { children: [
+			/* @__PURE__ */ jsxs("section", {
+				className: "transaction_params",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "detail",
+					children: "params: "
+				}), transactionUpdate.params.map((param, index) => {
+					return /* @__PURE__ */ jsxs("article", {
+						className: "node transaction_param",
+						onClick: () => {
+							console.log(transactionUpdate);
+						},
+						onKeyUp: () => {
+							console.log(transactionUpdate);
+						},
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "detail",
+							children: [discoverType(param), ": "]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "summary",
+							children: typeof param === `object` && param !== null && `type` in param && `target` in param ? /* @__PURE__ */ jsx(Fragment$1, { children: JSON.stringify(param.type) }) : /* @__PURE__ */ jsx(Fragment$1, { children: JSON.stringify(param) })
+						})]
+					}, `param` + index);
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "node transaction_output",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "detail",
+						children: "output: "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "detail",
+						children: discoverType(transactionUpdate.output)
+					}),
+					transactionUpdate.output ? /* @__PURE__ */ jsxs("span", {
+						className: "summary",
+						children: [": ", JSON.stringify(transactionUpdate.output)]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "transaction_impact",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "detail",
+					children: "impact: "
+				}), transactionUpdate.updates.filter((token) => token.type !== `molecule_creation` && token.type !== `molecule_disposal` && token.type !== `molecule_transfer` && token.type !== `state_creation` && token.type !== `state_disposal` && !token.key.startsWith(`👁‍🗨`)).map((update, index) => {
+					switch (update.type) {
+						case `atom_update`:
+						case `selector_update`: return /* @__PURE__ */ jsx(article.AtomUpdate, {
+							serialNumber: index,
+							atomUpdate: update
+						}, `${transactionUpdate.key}:${index}:${update.key}`);
+						case `transaction_update`: return /* @__PURE__ */ jsx(TransactionUpdateFC, {
+							serialNumber: index,
+							transactionUpdate: update
+						}, `${transactionUpdate.key}:${index}:${update.key}`);
+						case `molecule_creation`:
+						case `molecule_disposal`:
+						case `molecule_transfer`:
+						case `state_creation`:
+						case `state_disposal`: return null;
+					}
+				})]
+			})
+		] })]
+	});
+};
+const TimelineUpdateFC = ({ timelineUpdate, serialNumber }) => {
+	return `key` in timelineUpdate ? /* @__PURE__ */ jsxs("article", {
+		className: "node timeline_update",
+		"data-testid": `timeline-update-${typeof timelineUpdate.key === `string` ? timelineUpdate.key : stringifyJson(timelineUpdate.key)}-${serialNumber}`,
+		children: [/* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsxs("h4", { children: [
+			timelineUpdate.timestamp,
+			": ",
+			timelineUpdate.type,
+			" (",
+			timelineUpdate.key,
+			")"
+		] }) }), /* @__PURE__ */ jsx("main", { children: timelineUpdate.type === `transaction_update` ? timelineUpdate.updates.filter((token) => token.type !== `molecule_creation` && token.type !== `molecule_disposal` && token.type !== `molecule_transfer` && token.type !== `state_creation` && token.type !== `state_disposal` && !token.key.startsWith(`👁‍🗨`)).map((update, index) => {
+			switch (update.type) {
+				case `atom_update`:
+				case `selector_update`: return /* @__PURE__ */ jsx(article.AtomUpdate, {
+					serialNumber: index,
+					atomUpdate: update
+				}, `${timelineUpdate.key}:${index}:${update.key}`);
+				case `transaction_update`: return /* @__PURE__ */ jsx(TransactionUpdateFC, {
+					serialNumber: index,
+					transactionUpdate: update
+				}, `${timelineUpdate.key}:${index}:${update.key}`);
+				case `molecule_creation`:
+				case `molecule_disposal`:
+				case `molecule_transfer`:
+				case `state_creation`:
+				case `state_disposal`: return null;
+			}
+		}) : timelineUpdate.type === `selector_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`👁‍🗨`)).map((atomUpdate, index) => {
+			return /* @__PURE__ */ jsx(article.AtomUpdate, {
+				serialNumber: index,
+				atomUpdate
+			}, `${timelineUpdate.key}:${index}:${atomUpdate.key}`);
+		}) : timelineUpdate.type === `atom_update` ? /* @__PURE__ */ jsx(article.AtomUpdate, {
+			serialNumber: timelineUpdate.timestamp,
+			atomUpdate: timelineUpdate
+		}) : null })]
+	}) : null;
+};
+const article = {
+	AtomUpdate: AtomUpdateFC,
+	TransactionUpdate: TransactionUpdateFC,
+	TimelineUpdate: TimelineUpdateFC
+};
+
+//#endregion
+//#region src/react-devtools/TimelineIndex.tsx
+const YouAreHere = () => {
+	return /* @__PURE__ */ jsx("span", {
+		className: "you_are_here",
+		children: "you are here"
+	});
+};
+const TimelineLog = ({ token, isOpenState, timelineState }) => {
+	const timeline = useO(timelineState);
+	const isOpen = useO(isOpenState);
+	const setIsOpen = useI(isOpenState);
+	return /* @__PURE__ */ jsxs("section", {
+		className: "node timeline_log",
+		"data-testid": `timeline-${token.key}`,
+		children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx(button.OpenClose, {
+			isOpen,
+			testid: `open-close-timeline-${token.key}`,
+			setIsOpen
+		}), /* @__PURE__ */ jsxs("main", { children: [
+			/* @__PURE__ */ jsx("h2", { children: token.key }),
+			/* @__PURE__ */ jsxs("span", {
+				className: "detail length",
+				children: [
+					"(",
+					timeline.at,
+					"/",
+					timeline.history.length,
+					")"
+				]
+			}),
+			/* @__PURE__ */ jsx("span", { className: "gap" }),
+			/* @__PURE__ */ jsxs("nav", { children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => {
+					undo(token);
+				},
+				disabled: timeline.at === 0,
+				children: "undo"
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => {
+					redo(token);
+				},
+				disabled: timeline.at === timeline.history.length,
+				children: "redo"
+			})] })
+		] })] }), isOpen ? /* @__PURE__ */ jsx("main", { children: timeline.history.map((update, index) => update.type !== `molecule_creation` && update.type !== `molecule_disposal` && update.type !== `state_creation` && update.type !== `state_disposal` ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			index === timeline.at ? /* @__PURE__ */ jsx(YouAreHere, {}) : null,
+			/* @__PURE__ */ jsx(article.TimelineUpdate, {
+				timelineUpdate: update,
+				serialNumber: index
+			}),
+			index === timeline.history.length - 1 && timeline.at === timeline.history.length ? /* @__PURE__ */ jsx(YouAreHere, {}) : null
+		] }, update.key + index + timeline.at) : null) }) : null]
+	});
+};
+const TimelineIndex = () => {
+	const { timelineIndex, timelineSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
+	const tokenIds = useO(timelineIndex);
+	return /* @__PURE__ */ jsx("article", {
+		className: "index timeline_index",
+		"data-testid": "timeline-index",
+		children: tokenIds.filter((token) => !token.key.startsWith(`👁‍🗨`)).map((token) => {
+			return /* @__PURE__ */ jsx(TimelineLog, {
+				token,
+				isOpenState: findInStore(store, viewIsOpenAtoms, token.key),
+				timelineState: findInStore(store, timelineSelectors, token.key)
+			}, token.key);
+		})
+	});
+};
+
+//#endregion
+//#region src/react-devtools/TransactionIndex.tsx
+const TransactionLog = ({ token, isOpenState, logState }) => {
+	const log = useO(logState);
+	const isOpen = useO(isOpenState);
+	const setIsOpen = useI(isOpenState);
+	return /* @__PURE__ */ jsxs("section", {
+		className: "node transaction_log",
+		"data-testid": `transaction-${token.key}`,
+		children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx(button.OpenClose, {
+			isOpen,
+			testid: `open-close-transaction-${token.key}`,
+			setIsOpen
+		}), /* @__PURE__ */ jsxs("main", { children: [/* @__PURE__ */ jsx("h2", { children: token.key }), /* @__PURE__ */ jsxs("span", {
+			className: "detail length",
+			children: [
+				"(",
+				log.length,
+				")"
+			]
+		})] })] }), isOpen ? /* @__PURE__ */ jsx("main", { children: log.map((update, index) => /* @__PURE__ */ jsx(article.TransactionUpdate, {
+			serialNumber: index,
+			transactionUpdate: update
+		}, update.key + index)) }) : null]
+	});
+};
+const TransactionIndex = () => {
+	const { transactionIndex, transactionLogSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
+	const tokenIds = useO(transactionIndex);
+	return /* @__PURE__ */ jsx("article", {
+		className: "index transaction_index",
+		"data-testid": "transaction-index",
+		children: tokenIds.filter((token) => !token.key.startsWith(`🔍`)).map((token) => {
+			return /* @__PURE__ */ jsx(TransactionLog, {
+				token,
+				isOpenState: findInStore(store, viewIsOpenAtoms, token.key),
+				logState: findInStore(store, transactionLogSelectors, token.key)
+			}, token.key);
+		})
+	});
+};
+
+//#endregion
+//#region src/react-devtools/AtomIODevtools.tsx
+const AtomIODevtools = () => {
+	const store = useContext(StoreContext);
+	return /* @__PURE__ */ jsx(DevtoolsContext.Provider, {
+		value: attachDevtoolsStates(store),
+		children: /* @__PURE__ */ jsx(AtomIODevtoolsInternal, {})
+	});
+};
+const AtomIODevtoolsInternal = () => {
+	const constraintsRef = useRef(null);
+	const { atomIndex, selectorIndex, devtoolsAreOpenState, devtoolsViewSelectionState, devtoolsViewOptionsState } = useContext(DevtoolsContext);
+	const setDevtoolsAreOpen = useI(devtoolsAreOpenState);
+	const devtoolsAreOpen = useO(devtoolsAreOpenState);
+	const setDevtoolsView = useI(devtoolsViewSelectionState);
+	const devtoolsView = useO(devtoolsViewSelectionState);
+	const devtoolsViewOptions = useO(devtoolsViewOptionsState);
+	const mouseHasMoved = useRef(false);
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			position: `fixed`,
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0
+		},
+		children: [/* @__PURE__ */ jsx(motion.span, {
+			ref: constraintsRef,
+			"data-css": "atom_io_devtools_zone",
+			style: {
+				position: `fixed`,
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				pointerEvents: `none`
+			}
+		}), /* @__PURE__ */ jsxs(motion.main, {
+			drag: true,
+			dragConstraints: constraintsRef,
+			"data-css": "atom_io_devtools",
+			transition: spring,
+			style: devtoolsAreOpen ? {} : {
+				backgroundColor: `#0000`,
+				borderColor: `#0000`,
+				maxHeight: 28,
+				maxWidth: 33
+			},
+			children: [devtoolsAreOpen ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(motion.header, { children: [/* @__PURE__ */ jsx("h1", { children: "atom.io" }), /* @__PURE__ */ jsx("nav", { children: devtoolsViewOptions.map((viewOption) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-testid": `view-${viewOption}`,
+				className: viewOption === devtoolsView ? `active` : ``,
+				onClick: () => {
+					setDevtoolsView(viewOption);
+				},
+				disabled: viewOption === devtoolsView,
+				children: viewOption
+			}, viewOption)) })] }), /* @__PURE__ */ jsx(motion.main, { children: /* @__PURE__ */ jsx(LayoutGroup, { children: devtoolsView === `atoms` ? /* @__PURE__ */ jsx(StateIndex, { tokenIndex: atomIndex }) : devtoolsView === `selectors` ? /* @__PURE__ */ jsx(StateIndex, { tokenIndex: selectorIndex }) : devtoolsView === `transactions` ? /* @__PURE__ */ jsx(TransactionIndex, {}) : /* @__PURE__ */ jsx(TimelineIndex, {}) }) })] }) : null, /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onMouseDown: () => mouseHasMoved.current = false,
+				onMouseMove: () => mouseHasMoved.current = true,
+				onMouseUp: () => {
+					if (!mouseHasMoved.current) setDevtoolsAreOpen((open) => !open);
+				},
+				children: "🔍"
+			}) })]
+		})]
+	});
+};
+
+//#endregion
+export { AtomIODevtools, DEFAULT_JSON_EDITOR_COMPONENTS, DEFAULT_NUMBER_CONSTRAINTS, DefaultFallback, ElasticInput, ErrorBoundary, JsonEditor, NumberInput, SubEditors, TextInput, VALID_NON_NUMBERS, VALID_NON_NUMBER_INTERPRETATIONS, castToJson, clampInto, isDecimalInProgress, isValidNonNumber };
+//# sourceMappingURL=index.js.map