atom.io 0.33.11 → 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,7 +19,10 @@ 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 };
@@ -140,7 +144,11 @@ const DEFAULT_JSON_EDITOR_COMPONENTS = {
 	}),
 	DeleteIcon: () => /* @__PURE__ */ jsx("span", {
 		className: "json_editor_icon json_editor_delete",
-		children: "x"
+		children: "×"
+	}),
+	AddIcon: () => /* @__PURE__ */ jsx("span", {
+		className: "json_editor_icon json_editor_add",
+		children: "＋"
 	}),
 	MissingPropertyWrapper: ({ children, testid }) => /* @__PURE__ */ jsx("span", {
 		className: "json_editor_missing_property",
@@ -154,6 +162,46 @@ const DEFAULT_JSON_EDITOR_COMPONENTS = {
 	})
 };
 
+//#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) {
@@ -361,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`,
@@ -369,11 +417,12 @@ 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: [
+		children: [/* @__PURE__ */ jsxs("header", { children: [
 			remove ? /* @__PURE__ */ jsx(Components.Button, {
 				disabled,
 				onClick: () => {
@@ -382,16 +431,34 @@ const JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [
 				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,
@@ -401,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);
 				},
@@ -413,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]
 	}) });
 };
 
@@ -673,7 +749,28 @@ const makePropertySorter = (data, set, sortFn) => () => {
 
 //#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);
@@ -681,22 +778,23 @@ const ArrayEditor = ({ path = [], isReadonly = () => false, isHidden = () => fal
 	return /* @__PURE__ */ jsxs(Components.ArrayWrapper, { children: [/* @__PURE__ */ jsx("div", {
 		className: `json_editor_elements${disabled ? ` readonly` : ``}`,
 		children: data.map((element, index) => {
-			const newPath = [...path, index];
-			return /* @__PURE__ */ jsx(JsonEditor_INTERNAL, {
-				path: newPath,
-				name: `${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],
-				className: "json_editor_element",
 				Components,
-				testid: `${testid}-element-${index}`
-			}, newPath.join(``));
+				testid,
+				viewIsOpenAtom
+			}, pathKey);
 		})
-	}), disabled ? null : /* @__PURE__ */ jsx(Components.Button, {
+	}), /* @__PURE__ */ jsx(Components.Button, {
 		testid: `${testid}-add-element`,
 		disabled,
 		onClick: () => {
@@ -705,13 +803,35 @@ const ArrayEditor = ({ path = [], isReadonly = () => false, isHidden = () => fal
 				return newData;
 			});
 		},
-		children: "+"
+		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;
@@ -727,11 +847,12 @@ const ObjectEditor = ({ path = [], isReadonly = () => false, isHidden = () => fa
 		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],
@@ -739,10 +860,10 @@ 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 ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Components.Button, {
 		disabled,
@@ -750,7 +871,7 @@ const ObjectEditor = ({ path = [], isReadonly = () => false, isHidden = () => fa
 		onClick: () => {
 			makePropertyAdder(`new_property`, `string`)();
 		},
-		children: "+"
+		children: /* @__PURE__ */ jsx(Components.AddIcon, {})
 	}), /* @__PURE__ */ jsx(Components.Button, {
 		testid: `${testid}-sort-properties`,
 		onClick: () => {
@@ -827,8 +948,8 @@ const JsonEditor = ({ data, set, name, rename, remove, isReadonly = () => false,
 //#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,
@@ -836,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,
@@ -855,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: [
@@ -934,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);
@@ -969,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", {
@@ -1132,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}`,
@@ -1182,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",
@@ -1199,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}`,
@@ -1224,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",
@@ -1250,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: {