atom.io 0.33.11 → 0.33.13

package/dist/react-devtools/index.js

@@ -1,24 +1,31 @@
-import { IMPLICIT, become, createAtomFamily, createStandaloneAtom, findInStore } from "atom.io/internal";
+import { useI, useO } from "../use-o-BrXc7Qro.js";
+import { IMPLICIT, actUponStore, arbitrary, become, createAtomFamily, createStandaloneAtom, createTransaction, findInStore, getFromStore } from "atom.io/internal";
 import { JSON_DEFAULTS, fromEntries, isJson, stringifyJson, toEntries } from "atom.io/json";
-import { getState, redo, undo } from "atom.io";
+import { 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 { attachIntrospectionStates, discoverType, isPlainObject, 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 }) => {
+const OpenClose = ({ isOpen, setIsOpen, onShiftClick, disabled, testid }) => {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"data-testid": testid,
 		className: `carat ${isOpen ? `open` : `closed`}`,
-		onClick: () => {
-			setIsOpen((prev) => !prev);
+		onClick: (event) => {
+			if (onShiftClick && event.shiftKey) {
+				if (!onShiftClick(event)) return;
+			}
+			setIsOpen?.((prev) => !prev);
 		},
 		disabled,
-		children: "▶"
+		children: /* @__PURE__ */ jsx("span", {
+			className: "json_editor_icon json_editor_carat",
+			children: "▶"
+		})
 	});
 };
 const button = { OpenClose };
@@ -140,7 +147,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 +165,92 @@ 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, `view-is-open:${key.join()}`)]
+	});
+	const openCloseAllTX = createTransaction(store, {
+		key: `openCloseMultiView`,
+		do: ({ get, set }, path, current) => {
+			const currentView = get(devtoolsViewSelectionState);
+			let states;
+			switch (currentView) {
+				case `atoms`:
+					states = get(introspectionStates.atomIndex);
+					break;
+				case `selectors`:
+					states = get(introspectionStates.selectorIndex);
+					break;
+				case `transactions`:
+				case `timelines`: return;
+			}
+			switch (path.length) {
+				case 1:
+					for (const [key] of states) set(viewIsOpenAtoms, [key], !current);
+					break;
+				default: {
+					const item = states.get(path[0]);
+					let value;
+					let segments;
+					if (item) {
+						if (`familyMembers` in item) {
+							if (path.length === 2) {
+								for (const [subKey] of item.familyMembers) set(viewIsOpenAtoms, [path[0], subKey], !current);
+								return;
+							}
+							const token = item.familyMembers.get(path[1]);
+							value = get(token);
+							segments = path.slice(2, -1);
+						} else {
+							value = get(item);
+							segments = path.slice(1, -1);
+						}
+						for (const segment of segments) if (value && typeof value === `object`) value = value[segment];
+						const head = path.slice(0, -1);
+						if (Array.isArray(value)) for (let i = 0; i < value.length; i++) set(viewIsOpenAtoms, [...head, i], !current);
+						else if (isPlainObject(value)) for (const key of Object.keys(value)) set(viewIsOpenAtoms, [...head, key], !current);
+					}
+				}
+			}
+		}
+	});
+	return {
+		...introspectionStates,
+		devtoolsAreOpenState,
+		devtoolsViewSelectionState,
+		devtoolsViewOptionsState,
+		viewIsOpenAtoms,
+		openCloseAllTX,
+		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 +458,8 @@ 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 { openCloseAllTX, store } = useContext(DevtoolsContext);
 	const dataIsJson = isJson(data);
 	const refined = jsonRefinery.refine(data) ?? {
 		type: `non-json`,
@@ -369,29 +467,46 @@ 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`;
+	const dataIsExpandable = dataIsTree && isOpen !== void 0 && setIsOpen;
 	return isHidden(path) ? null : /* @__PURE__ */ jsx(Components.ErrorBoundary, { children: /* @__PURE__ */ jsxs(Components.EditorWrapper, {
 		className,
 		style,
 		testid,
-		children: [
-			remove ? /* @__PURE__ */ jsx(Components.Button, {
-				disabled,
-				onClick: () => {
-					remove();
+		children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsxs("main", { children: [
+			remove || dataIsExpandable ? /* @__PURE__ */ jsx(button.OpenClose, {
+				isOpen: isOpen ?? false,
+				testid: `${testid}-open-close`,
+				onShiftClick: () => {
+					actUponStore(store, openCloseAllTX, arbitrary())(path, isOpen);
+					return false;
 				},
-				testid: `${testid}-delete`,
-				children: /* @__PURE__ */ jsx(Components.DeleteIcon, {})
+				setIsOpen,
+				disabled: !dataIsExpandable
 			}) : null,
-			HeaderDisplay && /* @__PURE__ */ jsx(HeaderDisplay, { data }),
 			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: [isOpen !== void 0 && setIsOpen ? /* @__PURE__ */ jsx("span", {
+				className: "json_viewer",
+				children: JSON.stringify(data)
+			}) : null, 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] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SubEditor, {
 				data: refined.data,
 				set,
 				remove,
@@ -401,8 +516,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 +527,25 @@ const JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [
 					value: type,
 					children: type
 				}, type))
-			}) : null
-		]
+			}) : null] })
+		] }), remove ? /* @__PURE__ */ jsx(Components.Button, {
+			disabled,
+			onClick: () => {
+				remove();
+			},
+			testid: `${testid}-delete`,
+			children: /* @__PURE__ */ jsx(Components.DeleteIcon, {})
+		}) : null] }), dataIsTree && isOpen !== false ? /* @__PURE__ */ jsx(SubEditor, {
+			data: refined.data,
+			set,
+			remove,
+			rename,
+			path,
+			isReadonly,
+			isHidden,
+			Components,
+			testid
+		}) : null]
 	}) });
 };
 
@@ -673,30 +804,52 @@ 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);
 	const recastElement = makePropertyRecasters(data, set);
-	return /* @__PURE__ */ jsxs(Components.ArrayWrapper, { children: [/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Components.ArrayWrapper, { children: [/* @__PURE__ */ jsx("main", {
 		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, [...path, index]);
+			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, {
+	}), !disabled ? /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(Components.Button, {
 		testid: `${testid}-add-element`,
 		disabled,
 		onClick: () => {
@@ -705,13 +858,35 @@ const ArrayEditor = ({ path = [], isReadonly = () => false, isHidden = () => fal
 				return newData;
 			});
 		},
-		children: "+"
-	})] });
+		children: /* @__PURE__ */ jsx(Components.AddIcon, {})
+	}) }) : null] });
 };
 
 //#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 +902,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, [...path, key]);
+			return /* @__PURE__ */ jsx(ObjectProperty, {
+				path: propertyPath,
 				isReadonly,
 				isHidden,
 				data: data[key],
@@ -739,18 +915,18 @@ 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 ? null : /* @__PURE__ */ jsxs("footer", { 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: () => {
@@ -802,7 +978,7 @@ const SubEditors = {
 	object: ObjectEditor,
 	string: StringEditor
 };
-const JsonEditor = ({ data, set, name, rename, remove, isReadonly = () => false, isHidden = () => false, className, Header, style, Components: CustomComponents = {}, testid }) => {
+const JsonEditor = ({ data, set, name, rename, remove, path = [], isReadonly = () => false, isHidden = () => false, className, Header, style, Components: CustomComponents = {}, testid }) => {
 	const Components = {
 		...DEFAULT_JSON_EDITOR_COMPONENTS,
 		...CustomComponents
@@ -813,7 +989,7 @@ const JsonEditor = ({ data, set, name, rename, remove, isReadonly = () => false,
 		name,
 		rename,
 		remove,
-		path: [],
+		path,
 		isReadonly,
 		isHidden,
 		className,
@@ -827,21 +1003,25 @@ 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);
+	const metaPath = token.family ? [token.family.key, token.family.subKey] : [token.key];
 	return /* @__PURE__ */ jsx(JsonEditor, {
 		testid: `${token.key}-state-editor`,
 		data,
-		set
+		set,
+		path: metaPath
 	});
 };
 const ReadonlySelectorViewer = ({ token }) => {
-	const data = useO(token);
+	const data = useO$1(token);
+	const metaPath = token.family ? [token.family.key, token.family.subKey] : [token.key];
 	return /* @__PURE__ */ jsx(JsonEditor, {
 		testid: `${token.key}-state-editor`,
 		data,
 		set: () => null,
-		isReadonly: () => true
+		isReadonly: () => true,
+		path: metaPath
 	});
 };
 const StoreEditor = ({ token }) => {
@@ -855,102 +1035,76 @@ 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 { openCloseAllTX, store } = useContext(DevtoolsContext);
+	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: [
-		/* @__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", {
+	const path = node.family ? [node.family.key, node.family.subKey] : [node.key];
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsxs("main", {
+		onClick: () => {
+			console.log(node, getFromStore(store, node));
+		},
+		onKeyUp: () => {
+			console.log(node, getFromStore(store, node));
+		},
+		children: [
+			/* @__PURE__ */ jsx(button.OpenClose, {
+				isOpen: isOpen && !isPrimitive,
+				testid: `open-close-state-${node.key}`,
+				onShiftClick: () => {
+					actUponStore(store, openCloseAllTX, arbitrary())(path, isOpen);
+					return false;
+				},
+				setIsOpen,
+				disabled: isPrimitive
+			}),
+			/* @__PURE__ */ jsx("h2", { children: node.family?.subKey ?? node.key }),
+			/* @__PURE__ */ jsxs("span", {
 				className: "type detail",
 				children: [
 					"(",
 					stateType,
 					")"
 				]
-			})]
-		}),
-		isPrimitive ? /* @__PURE__ */ jsx(StoreEditor, { token: node }) : /* @__PURE__ */ jsx("div", {
-			className: "json_viewer",
-			children: JSON.stringify(state)
-		})
-	] }), isOpen && !isPrimitive ? /* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsx(StoreEditor, { token: node }) }) : null] });
+			})
+		]
+	}), isPrimitive ? /* @__PURE__ */ jsx(StoreEditor, { token: node }) : /* @__PURE__ */ jsx("div", {
+		className: "json_viewer",
+		children: JSON.stringify(state)
+	})] }), 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);
+	const setIsOpen = useI$1(isOpenState);
+	const isOpen = useO$1(isOpenState);
+	const { typeSelectors, viewIsOpenAtoms, openCloseAllTX, store } = useContext(DevtoolsContext);
 	for (const [key, childNode] of node.familyMembers) {
-		findInStore(store, viewIsOpenAtoms, key);
+		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, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsxs("main", { children: [
+		/* @__PURE__ */ jsx(button.OpenClose, {
+			isOpen,
+			testid: `open-close-state-family-${node.key}`,
+			onShiftClick: () => {
+				actUponStore(store, openCloseAllTX, arbitrary())([node.key], isOpen);
+				return false;
+			},
+			setIsOpen
+		}),
+		/* @__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),
+		isOpenState: findInStore(store, viewIsOpenAtoms, [node.key, key]),
 		typeState: findInStore(store, typeSelectors, childNode.key)
 	}, key)) : null] });
 };
@@ -969,16 +1123,15 @@ 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", {
 		className: "index state_index",
 		"data-testid": "state-index",
 		children: [...tokenIds.entries()].map(([key, node]) => {
 			return /* @__PURE__ */ jsx(StateIndexNode, {
 				node,
-				isOpenState: findInStore(store, viewIsOpenAtoms, node.key),
+				isOpenState: findInStore(store, viewIsOpenAtoms, [node.key]),
 				typeState: findInStore(store, typeSelectors, node.key)
 			}, key);
 		})
@@ -1132,9 +1285,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,14 +1335,14 @@ 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",
 		children: tokenIds.filter((token) => !token.key.startsWith(`👁‍🗨`)).map((token) => {
 			return /* @__PURE__ */ jsx(TimelineLog, {
 				token,
-				isOpenState: findInStore(store, viewIsOpenAtoms, token.key),
+				isOpenState: findInStore(store, viewIsOpenAtoms, [token.key]),
 				timelineState: findInStore(store, timelineSelectors, token.key)
 			}, token.key);
 		})
@@ -1199,9 +1352,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,14 +1377,14 @@ 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",
 		children: tokenIds.filter((token) => !token.key.startsWith(`🔍`)).map((token) => {
 			return /* @__PURE__ */ jsx(TransactionLog, {
 				token,
-				isOpenState: findInStore(store, viewIsOpenAtoms, token.key),
+				isOpenState: findInStore(store, viewIsOpenAtoms, [token.key]),
 				logState: findInStore(store, transactionLogSelectors, token.key)
 			}, token.key);
 		})
@@ -1250,11 +1403,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: {