atom.io 0.33.10 → 0.33.12

package/dist/react-devtools/index.js

@@ -1,9 +1,10 @@
+import { useI, useO } from "../use-o-BrXc7Qro.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 { StoreContext, useI as useI$1, useO as useO$1 } from "atom.io/react";
 import { LayoutGroup, motion } from "motion/react";
 import { attachIntrospectionStates, discoverType, jsonRefinery, prettyJson, primitiveRefinery } from "atom.io/introspection";
 import { persistSync } from "atom.io/web";
@@ -18,11 +19,189 @@ const OpenClose = ({ isOpen, setIsOpen, disabled, testid }) => {
 			setIsOpen((prev) => !prev);
 		},
 		disabled,
-		children: "▶"
+		children: /* @__PURE__ */ jsx("span", {
+			className: "json_editor_icon json_editor_carat",
+			children: "▶"
+		})
 	});
 };
 const button = { OpenClose };
 
+//#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: "×"
+	}),
+	AddIcon: () => /* @__PURE__ */ jsx("span", {
+		className: "json_editor_icon json_editor_add",
+		children: "＋"
+	}),
+	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/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/elastic-input/ElasticInput.tsx
 const ElasticInput = forwardRef(function ElasticInputFC(props, ref) {
@@ -230,7 +409,7 @@ const NonJsonEditor = ({ data, testid }) => {
 
 //#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 JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [], isReadonly = () => false, isHidden = () => false, className, style, Components, isOpen, setIsOpen, testid }) => {
 	const dataIsJson = isJson(data);
 	const refined = jsonRefinery.refine(data) ?? {
 		type: `non-json`,
@@ -238,32 +417,48 @@ const JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [
 	};
 	const SubEditor = dataIsJson ? SubEditors[refined.type] : NonJsonEditor;
 	const disabled = isReadonly(path);
+	const dataIsTree = refined.type === `array` || refined.type === `object`;
 	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`,
+		children: [/* @__PURE__ */ jsxs("header", { children: [
+			remove ? /* @__PURE__ */ jsx(Components.Button, {
+				disabled,
 				onClick: () => {
 					remove();
 				},
+				testid: `${testid}-delete`,
 				children: /* @__PURE__ */ jsx(Components.DeleteIcon, {})
 			}) : null,
-			HeaderDisplay && /* @__PURE__ */ jsx(HeaderDisplay, { data }),
+			dataIsTree && isOpen !== void 0 && setIsOpen ? /* @__PURE__ */ jsx(button.OpenClose, {
+				isOpen,
+				testid: `${testid}-open-close`,
+				setIsOpen
+			}) : null,
 			rename && /* @__PURE__ */ jsx(Components.KeyWrapper, { children: /* @__PURE__ */ jsx(ElasticInput, {
 				value: name,
-				onChange: disabled ? void 0 : (e) => {
+				onChange: (e) => {
 					rename(e.target.value);
 				},
 				disabled,
 				"data-testid": `${testid}-rename`
 			}) }),
-			/* @__PURE__ */ jsx(SubEditor, {
+			dataIsTree ? /* @__PURE__ */ jsxs(Fragment$1, { children: [recast ? /* @__PURE__ */ jsx("select", {
+				onChange: (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, isOpen !== void 0 && setIsOpen ? /* @__PURE__ */ jsx("span", {
+				className: "json_viewer",
+				children: JSON.stringify(data)
+			}) : null] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SubEditor, {
 				data: refined.data,
 				set,
 				remove,
@@ -273,8 +468,7 @@ const JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [
 				isHidden,
 				Components,
 				testid
-			}),
-			recast && dataIsJson ? /* @__PURE__ */ jsx("select", {
+			}), recast && dataIsJson ? /* @__PURE__ */ jsx("select", {
 				onChange: disabled ? void 0 : (e) => {
 					recast(e.target.value);
 				},
@@ -285,8 +479,18 @@ const JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [
 					value: type,
 					children: type
 				}, type))
-			}) : null
-		]
+			}) : null] })
+		] }), dataIsTree && isOpen !== false ? /* @__PURE__ */ jsx(SubEditor, {
+			data: refined.data,
+			set,
+			remove,
+			rename,
+			path,
+			isReadonly,
+			isHidden,
+			Components,
+			testid
+		}) : null]
 	}) });
 };
 
@@ -300,25 +504,6 @@ const makeElementSetters = (data, set) => data.map((value, index) => (newValue)
 	});
 });
 
-//#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`;
@@ -523,15 +708,31 @@ const makePropertyRenamers = (data, set, stableKeyMapRef) => fromEntries(toEntri
 }]));
 const makePropertyRemovers = (data, set) => fromEntries(toEntries(data).map(([key]) => [key, () => {
 	set(() => {
-		const { [key]: _,...rest } = data;
-		return rest;
+		let next;
+		if (Array.isArray(data)) {
+			const copy = [...data];
+			copy.splice(key, 1);
+			next = copy;
+		} else {
+			const { [key]: _,...rest } = data;
+			next = rest;
+		}
+		return next;
 	});
 }]));
 const makePropertyRecasters = (data, set) => fromEntries(toEntries(data).map(([key, value]) => [key, (newType) => {
-	set(() => ({
-		...data,
-		[key]: castToJson(value)[newType]
-	}));
+	set(() => {
+		let next;
+		if (Array.isArray(data)) {
+			const copy = [...data];
+			copy[key] = castToJson(value)[newType];
+			next = copy;
+		} else next = {
+			...data,
+			[key]: castToJson(value)[newType]
+		};
+		return next;
+	});
 }]));
 const makePropertyCreationInterface = (data, set) => (key, type) => (value) => {
 	set({
@@ -546,9 +747,91 @@ const makePropertySorter = (data, set, sortFn) => () => {
 	set(sortedObj);
 };
 
+//#endregion
+//#region src/react-devtools/json-editor/editors-by-type/array-editor.tsx
+const ArrayElement = ({ path, isReadonly, isHidden, data, set, remove, recast, Components, testid, viewIsOpenAtom }) => {
+	const index = path[path.length - 1];
+	const viewIsOpen = useO$1(viewIsOpenAtom);
+	const setViewIsOpen = useI$1(viewIsOpenAtom);
+	return /* @__PURE__ */ jsx(JsonEditor_INTERNAL, {
+		path,
+		name: `${index}`,
+		isReadonly,
+		isHidden,
+		data,
+		set,
+		remove,
+		recast,
+		className: "json_editor_element",
+		Components,
+		isOpen: viewIsOpen,
+		setIsOpen: setViewIsOpen,
+		testid: `${testid}-element-${index}`
+	});
+};
+const ArrayEditor = ({ path = [], isReadonly = () => false, isHidden = () => false, data, set, Components, testid }) => {
+	const { viewIsOpenAtoms, store } = useContext(DevtoolsContext);
+	const disabled = isReadonly(path);
+	const setElement = makeElementSetters(data, set);
+	const removeElement = makePropertyRemovers(data, set);
+	const recastElement = makePropertyRecasters(data, set);
+	return /* @__PURE__ */ jsxs(Components.ArrayWrapper, { children: [/* @__PURE__ */ jsx("div", {
+		className: `json_editor_elements${disabled ? ` readonly` : ``}`,
+		children: data.map((element, index) => {
+			const elementPath = [...path, index];
+			const pathKey = elementPath.join(`,`);
+			const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, `${testid}__${pathKey}`);
+			return /* @__PURE__ */ jsx(ArrayElement, {
+				path: elementPath,
+				isReadonly,
+				isHidden,
+				data: element,
+				set: setElement[index],
+				remove: removeElement[index],
+				recast: recastElement[index],
+				Components,
+				testid,
+				viewIsOpenAtom
+			}, pathKey);
+		})
+	}), /* @__PURE__ */ jsx(Components.Button, {
+		testid: `${testid}-add-element`,
+		disabled,
+		onClick: () => {
+			set((current) => {
+				const newData = [...current, JSON_DEFAULTS.string];
+				return newData;
+			});
+		},
+		children: /* @__PURE__ */ jsx(Components.AddIcon, {})
+	})] });
+};
+
 //#endregion
 //#region src/react-devtools/json-editor/editors-by-type/object-editor.tsx
+const ObjectProperty = ({ path, isReadonly, isHidden, data, set, rename, remove, recast, Components, testid, viewIsOpenAtom }) => {
+	const key = path[path.length - 1];
+	const viewIsOpen = useO(viewIsOpenAtom);
+	const setViewIsOpen = useI(viewIsOpenAtom);
+	return /* @__PURE__ */ jsx(JsonEditor_INTERNAL, {
+		path,
+		name: `${key}`,
+		isReadonly,
+		isHidden,
+		data,
+		set,
+		rename,
+		remove,
+		recast,
+		className: "json_editor_property",
+		Components,
+		isOpen: viewIsOpen,
+		setIsOpen: setViewIsOpen,
+		testid: `${testid}-property-${key}`
+	});
+};
 const ObjectEditor = ({ path = [], isReadonly = () => false, isHidden = () => false, data, set, Components, testid }) => {
+	const { viewIsOpenAtoms, store } = useContext(DevtoolsContext);
 	const disabled = isReadonly(path);
 	const stableKeyMap = useRef(Object.keys(data).reduce((acc, key) => {
 		acc[key] = key;
@@ -560,22 +843,16 @@ const ObjectEditor = ({ path = [], isReadonly = () => false, isHidden = () => fa
 	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",
+	return /* @__PURE__ */ jsxs(Components.ObjectWrapper, { children: [/* @__PURE__ */ jsx("div", {
+		className: `json_editor_properties${disabled ? ` readonly` : ``}`,
 		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,
+			const propertyPath = [...path, key];
+			const originalPropertyPath = [...path, originalKey];
+			const stablePathKey = originalPropertyPath.join(`.`);
+			const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, `${testid}__${stablePathKey}`);
+			return /* @__PURE__ */ jsx(ObjectProperty, {
+				path: propertyPath,
 				isReadonly,
 				isHidden,
 				data: data[key],
@@ -583,27 +860,32 @@ const ObjectEditor = ({ path = [], isReadonly = () => false, isHidden = () => fa
 				rename: renameProperty[key],
 				remove: removeProperty[key],
 				recast: recastProperty[key],
-				className: "json_editor_property",
 				Components,
-				testid: `${testid}-property-${key}`
-			}, originalPath.join(`.`));
+				testid,
+				viewIsOpenAtom
+			}, stablePathKey);
 		})
-	}), disabled ? /* @__PURE__ */ jsx(Components.Button, {
-		disabled: true,
-		testid: `${testid}-add-property`,
-		children: "+"
-	}) : /* @__PURE__ */ jsx(Components.Button, {
+	}), disabled ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Components.Button, {
+		disabled,
 		testid: `${testid}-add-property`,
 		onClick: () => {
 			makePropertyAdder(`new_property`, `string`)();
 		},
-		children: "+"
+		children: /* @__PURE__ */ jsx(Components.AddIcon, {})
+	}), /* @__PURE__ */ jsx(Components.Button, {
+		testid: `${testid}-sort-properties`,
+		onClick: () => {
+			sortProperties();
+		},
+		disabled,
+		children: "Sort"
 	})] })] });
 };
 
 //#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", {
+const BooleanEditor = ({ path = [], isReadonly = () => false, data, set, Components, testid }) => /* @__PURE__ */ jsx(Components.BooleanWrapper, { children: /* @__PURE__ */ jsx("input", {
+	disabled: isReadonly(path),
 	"data-testid": `${testid}-boolean-input`,
 	type: "checkbox",
 	checked: data,
@@ -613,6 +895,7 @@ const BooleanEditor = ({ data, set, Components, testid }) => /* @__PURE__ */ jsx
 }) });
 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, {
+	disabled: isReadonly(path),
 	testid: `${testid}-number-input`,
 	value: data,
 	set: isReadonly(path) ? void 0 : (newValue) => {
@@ -622,6 +905,7 @@ const NumberEditor = ({ path = [], isReadonly = () => false, data, set, Componen
 }) });
 const StringEditor = ({ path = [], isReadonly = () => false, data, set, Components, testid }) => {
 	return /* @__PURE__ */ jsx(Components.StringWrapper, { children: /* @__PURE__ */ jsx(TextInput, {
+		readOnly: isReadonly(path),
 		testid: `${testid}-string-input`,
 		value: data,
 		set: isReadonly(path) ? void 0 : set,
@@ -629,139 +913,16 @@ const StringEditor = ({ path = [], isReadonly = () => false, data, set, Componen
 	}) });
 };
 
-//#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 SubEditors = {
+	array: ArrayEditor,
+	boolean: BooleanEditor,
+	null: NullEditor,
+	number: NumberEditor,
+	object: ObjectEditor,
+	string: StringEditor
+};
 const JsonEditor = ({ data, set, name, rename, remove, isReadonly = () => false, isHidden = () => false, className, Header, style, Components: CustomComponents = {}, testid }) => {
 	const Components = {
 		...DEFAULT_JSON_EDITOR_COMPONENTS,
@@ -784,22 +945,11 @@ const JsonEditor = ({ data, set, name, rename, remove, isReadonly = () => false,
 	});
 };
 
-//#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);
+	const set = useI$1(token);
+	const data = useO$1(token);
 	return /* @__PURE__ */ jsx(JsonEditor, {
 		testid: `${token.key}-state-editor`,
 		data,
@@ -807,7 +957,7 @@ const StateEditor = ({ token }) => {
 	});
 };
 const ReadonlySelectorViewer = ({ token }) => {
-	const data = useO(token);
+	const data = useO$1(token);
 	return /* @__PURE__ */ jsx(JsonEditor, {
 		testid: `${token.key}-state-editor`,
 		data,
@@ -826,53 +976,13 @@ const StoreEditor = ({ 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 stateTypeLoadable = useO(typeState);
+	const setIsOpen = useI$1(isOpenState);
+	const isOpen = useO$1(isOpenState);
+	const state = useO$1(node);
+	const stateTypeLoadable = useO$1(typeState);
 	const stateType = stateTypeLoadable instanceof Promise ? `Promise` : stateTypeLoadable;
 	const isPrimitive = Boolean(primitiveRefinery.refine(state));
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("header", { children: [
@@ -905,8 +1015,8 @@ const StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
 	] }), 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 setIsOpen = useI$1(isOpenState);
+	const isOpen = useO$1(isOpenState);
 	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
 	for (const [key, childNode] of node.familyMembers) {
 		findInStore(store, viewIsOpenAtoms, key);
@@ -940,7 +1050,7 @@ const StateIndexNode = ({ node, isOpenState, typeState }) => {
 	});
 };
 const StateIndex = ({ tokenIndex }) => {
-	const tokenIds = useO(tokenIndex);
+	const tokenIds = useO$1(tokenIndex);
 	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
 	console.log(tokenIds);
 	return /* @__PURE__ */ jsx("article", {
@@ -1103,9 +1213,9 @@ const YouAreHere = () => {
 	});
 };
 const TimelineLog = ({ token, isOpenState, timelineState }) => {
-	const timeline = useO(timelineState);
-	const isOpen = useO(isOpenState);
-	const setIsOpen = useI(isOpenState);
+	const timeline = useO$1(timelineState);
+	const isOpen = useO$1(isOpenState);
+	const setIsOpen = useI$1(isOpenState);
 	return /* @__PURE__ */ jsxs("section", {
 		className: "node timeline_log",
 		"data-testid": `timeline-${token.key}`,
@@ -1153,7 +1263,7 @@ const TimelineLog = ({ token, isOpenState, timelineState }) => {
 };
 const TimelineIndex = () => {
 	const { timelineIndex, timelineSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
-	const tokenIds = useO(timelineIndex);
+	const tokenIds = useO$1(timelineIndex);
 	return /* @__PURE__ */ jsx("article", {
 		className: "index timeline_index",
 		"data-testid": "timeline-index",
@@ -1170,9 +1280,9 @@ const TimelineIndex = () => {
 //#endregion
 //#region src/react-devtools/TransactionIndex.tsx
 const TransactionLog = ({ token, isOpenState, logState }) => {
-	const log = useO(logState);
-	const isOpen = useO(isOpenState);
-	const setIsOpen = useI(isOpenState);
+	const log = useO$1(logState);
+	const isOpen = useO$1(isOpenState);
+	const setIsOpen = useI$1(isOpenState);
 	return /* @__PURE__ */ jsxs("section", {
 		className: "node transaction_log",
 		"data-testid": `transaction-${token.key}`,
@@ -1195,7 +1305,7 @@ const TransactionLog = ({ token, isOpenState, logState }) => {
 };
 const TransactionIndex = () => {
 	const { transactionIndex, transactionLogSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
-	const tokenIds = useO(transactionIndex);
+	const tokenIds = useO$1(transactionIndex);
 	return /* @__PURE__ */ jsx("article", {
 		className: "index transaction_index",
 		"data-testid": "transaction-index",
@@ -1221,11 +1331,11 @@ const AtomIODevtools = () => {
 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 setDevtoolsAreOpen = useI$1(devtoolsAreOpenState);
+	const devtoolsAreOpen = useO$1(devtoolsAreOpenState);
+	const setDevtoolsView = useI$1(devtoolsViewSelectionState);
+	const devtoolsView = useO$1(devtoolsViewSelectionState);
+	const devtoolsViewOptions = useO$1(devtoolsViewOptionsState);
 	const mouseHasMoved = useRef(false);
 	return /* @__PURE__ */ jsxs("span", {
 		style: {