atom.io 0.36.3 → 0.37.0

package/dist/react-devtools/index.js

@@ -1,10 +1,10 @@
-import { useI, useO } from "../use-o-DXPncKmZ.js";
+import { useI as useI$1, useO as useO$1 } from "../use-o-DXPncKmZ.js";
 import { actUponStore, arbitrary, become, createRegularAtom, createRegularAtomFamily, createTransaction, disposeFromStore, findInStore, getFromStore } from "atom.io/internal";
 import { JSON_DEFAULTS, fromEntries, isJson, stringifyJson, toEntries } from "atom.io/json";
 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 as useI$1, useO as useO$1 } from "atom.io/react";
+import { StoreContext, useI, useO } from "atom.io/react";
 import { LayoutGroup, motion } from "motion/react";
 import { attachIntrospectionStates, discoverType, isPlainObject, jsonRefinery, prettyJson, primitiveRefinery } from "atom.io/introspection";
 import { persistSync } from "atom.io/web";
@@ -819,8 +819,8 @@ const makePropertySorter = (data, set, sortFn) => () => {
 //#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);
+	const viewIsOpen = useO(viewIsOpenAtom);
+	const setViewIsOpen = useI(viewIsOpenAtom);
 	return /* @__PURE__ */ jsx(JsonEditor_INTERNAL, {
 		path,
 		name: `${index}`,
@@ -879,8 +879,8 @@ const ArrayEditor = ({ path = [], isReadonly = () => false, isHidden = () => fal
 //#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);
+	const viewIsOpen = useO$1(viewIsOpenAtom);
+	const setViewIsOpen = useI$1(viewIsOpenAtom);
 	return /* @__PURE__ */ jsx(JsonEditor_INTERNAL, {
 		path,
 		name: `${key}`,
@@ -1016,8 +1016,8 @@ const JsonEditor = ({ data, set, name, rename, remove, path = [], isReadonly = (
 //#endregion
 //#region src/react-devtools/StateEditor.tsx
 const StateEditor = ({ token }) => {
-	const set = useI$1(token);
-	const data = useO$1(token);
+	const set = useI(token);
+	const data = useO(token);
 	const metaPath = token.family ? [token.family.key, token.family.subKey] : [token.key];
 	return /* @__PURE__ */ jsx(JsonEditor, {
 		testid: `${token.key}-state-editor`,
@@ -1027,7 +1027,7 @@ const StateEditor = ({ token }) => {
 	});
 };
 const ReadonlySelectorViewer = ({ token }) => {
-	const data = useO$1(token);
+	const data = useO(token);
 	const metaPath = token.family ? [token.family.key, token.family.subKey] : [token.key];
 	return /* @__PURE__ */ jsx(JsonEditor, {
 		testid: `${token.key}-state-editor`,
@@ -1052,10 +1052,10 @@ const StoreEditor = ({ token }) => {
 //#region src/react-devtools/StateIndex.tsx
 const StateIndexLeafNode = ({ node, isOpenState, typeState, dispose }) => {
 	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 setIsOpen = useI(isOpenState);
+	const isOpen = useO(isOpenState);
+	const state = useO(node);
+	const stateTypeLoadable = useO(typeState);
 	const stateType = stateTypeLoadable instanceof Promise ? `Promise` : stateTypeLoadable;
 	const isPrimitive = Boolean(primitiveRefinery.refine(state));
 	const path = node.family ? [node.family.key, node.family.subKey] : [node.key];
@@ -1099,8 +1099,8 @@ const StateIndexLeafNode = ({ node, isOpenState, typeState, dispose }) => {
 	}) : null] })] }), isOpen && !isPrimitive ? /* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsx(StoreEditor, { token: node }) }) : null] });
 };
 const StateIndexTreeNode = ({ node, isOpenState }) => {
-	const setIsOpen = useI$1(isOpenState);
-	const isOpen = useO$1(isOpenState);
+	const setIsOpen = useI(isOpenState);
+	const isOpen = useO(isOpenState);
 	const { typeSelectors, viewIsOpenAtoms, openCloseAllTX, store } = useContext(DevtoolsContext);
 	for (const [key, childNode] of node.familyMembers) {
 		findInStore(store, viewIsOpenAtoms, [key]);
@@ -1146,7 +1146,7 @@ const StateIndexNode = ({ node, isOpenState, typeState, dispose }) => {
 	});
 };
 const StateIndex = ({ tokenIndex }) => {
-	const tokenIds = useO$1(tokenIndex);
+	const tokenIds = useO(tokenIndex);
 	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
 	const statesName = tokenIndex.key.includes(`Atom`) ? `atoms` : `selectors`;
 	return /* @__PURE__ */ jsx("article", {
@@ -1182,17 +1182,17 @@ const AtomUpdateFC = ({ atomUpdate }) => {
 		},
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: "detail",
-			children: [atomUpdate.key, ": "]
+			children: [atomUpdate.token.key, ": "]
 		}), /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", {
 			className: "summary",
-			children: prettyJson.diff(atomUpdate.oldValue, atomUpdate.newValue).summary
+			children: prettyJson.diff(atomUpdate.update.oldValue, atomUpdate.update.newValue).summary
 		}) })]
-	}, atomUpdate.key);
+	}, atomUpdate.token.key);
 };
 const TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
 	return /* @__PURE__ */ jsxs("article", {
 		className: "node transaction_update",
-		"data-testid": `transaction-update-${transactionUpdate.key}-${serialNumber}`,
+		"data-testid": `transaction-update-${transactionUpdate.token.key}-${serialNumber}`,
 		children: [/* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx("h4", { children: serialNumber }) }), /* @__PURE__ */ jsxs("main", { children: [
 			/* @__PURE__ */ jsxs("section", {
 				className: "transaction_params",
@@ -1240,17 +1240,16 @@ const TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
 				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) => {
+				}), transactionUpdate.subEvents.filter((txSubEvent) => txSubEvent.type !== `molecule_creation` && txSubEvent.type !== `molecule_disposal` && txSubEvent.type !== `molecule_transfer` && txSubEvent.type !== `state_creation` && txSubEvent.type !== `state_disposal` && !txSubEvent.token.key.startsWith(`👁‍🗨`)).map((update, index) => {
 					switch (update.type) {
-						case `atom_update`:
-						case `selector_update`: return /* @__PURE__ */ jsx(article.AtomUpdate, {
+						case `atom_update`: return /* @__PURE__ */ jsx(article.AtomUpdate, {
 							serialNumber: index,
 							atomUpdate: update
-						}, `${transactionUpdate.key}:${index}:${update.key}`);
-						case `transaction_update`: return /* @__PURE__ */ jsx(TransactionUpdateFC, {
+						}, `${transactionUpdate.token.key}:${index}:${update.token.key}`);
+						case `transaction_outcome`: return /* @__PURE__ */ jsx(TransactionUpdateFC, {
 							serialNumber: index,
 							transactionUpdate: update
-						}, `${transactionUpdate.key}:${index}:${update.key}`);
+						}, `${transactionUpdate.token.key}:${index}:${update.token.key}`);
 						case `molecule_creation`:
 						case `molecule_disposal`:
 						case `molecule_transfer`:
@@ -1263,38 +1262,37 @@ const TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
 	});
 };
 const TimelineUpdateFC = ({ timelineUpdate, serialNumber }) => {
-	return `key` in timelineUpdate ? /* @__PURE__ */ jsxs("article", {
+	return timelineUpdate.type === `atom_update` || timelineUpdate.type === `selector_update` || timelineUpdate.type === `transaction_outcome` ? /* @__PURE__ */ jsxs("article", {
 		className: "node timeline_update",
-		"data-testid": `timeline-update-${typeof timelineUpdate.key === `string` ? timelineUpdate.key : stringifyJson(timelineUpdate.key)}-${serialNumber}`,
+		"data-testid": `timeline-update-${typeof timelineUpdate.token.key === `string` ? timelineUpdate.token.key : stringifyJson(timelineUpdate.token.key)}-${serialNumber}`,
 		children: [/* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsxs("h4", { children: [
 			timelineUpdate.timestamp,
 			": ",
 			timelineUpdate.type,
 			" (",
-			timelineUpdate.key,
+			timelineUpdate.token.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, {
+		] }) }), /* @__PURE__ */ jsx("main", { children: timelineUpdate.type === `transaction_outcome` ? timelineUpdate.subEvents.filter((subEvent) => subEvent.type !== `molecule_creation` && subEvent.type !== `molecule_disposal` && subEvent.type !== `molecule_transfer` && subEvent.type !== `state_creation` && subEvent.type !== `state_disposal` && !subEvent.token.key.startsWith(`👁‍🗨`)).map((subEvent, index) => {
+			switch (subEvent.type) {
+				case `atom_update`: return /* @__PURE__ */ jsx(article.AtomUpdate, {
 					serialNumber: index,
-					atomUpdate: update
-				}, `${timelineUpdate.key}:${index}:${update.key}`);
-				case `transaction_update`: return /* @__PURE__ */ jsx(TransactionUpdateFC, {
+					atomUpdate: subEvent
+				}, `${timelineUpdate.token.key}:${index}:${subEvent.token.key}`);
+				case `transaction_outcome`: return /* @__PURE__ */ jsx(TransactionUpdateFC, {
 					serialNumber: index,
-					transactionUpdate: update
-				}, `${timelineUpdate.key}:${index}:${update.key}`);
+					transactionUpdate: subEvent
+				}, `${timelineUpdate.token.key}:${index}:${subEvent.token.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) => {
+		}) : timelineUpdate.type === `selector_update` ? timelineUpdate.atomUpdates.filter((atomUpdateEvent) => !atomUpdateEvent.token.key.startsWith(`👁‍🗨`)).map((atomUpdate, index) => {
 			return /* @__PURE__ */ jsx(article.AtomUpdate, {
 				serialNumber: index,
 				atomUpdate
-			}, `${timelineUpdate.key}:${index}:${atomUpdate.key}`);
+			}, `${timelineUpdate.token.key}:${index}:${atomUpdate.token.key}`);
 		}) : timelineUpdate.type === `atom_update` ? /* @__PURE__ */ jsx(article.AtomUpdate, {
 			serialNumber: timelineUpdate.timestamp,
 			atomUpdate: timelineUpdate
@@ -1316,9 +1314,9 @@ const YouAreHere = () => {
 	});
 };
 const TimelineLog = ({ token, isOpenState, timelineState }) => {
-	const timeline = useO$1(timelineState);
-	const isOpen = useO$1(isOpenState);
-	const setIsOpen = useI$1(isOpenState);
+	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}`,
@@ -1361,12 +1359,12 @@ const TimelineLog = ({ token, isOpenState, timelineState }) => {
 				serialNumber: index
 			}),
 			index === timeline.history.length - 1 && timeline.at === timeline.history.length ? /* @__PURE__ */ jsx(YouAreHere, {}) : null
-		] }, update.key + index + timeline.at) : null) }) : null]
+		] }, update.token.key + index + timeline.at) : null) }) : null]
 	});
 };
 const TimelineIndex = () => {
 	const { timelineIndex, timelineSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
-	const tokenIds = useO$1(timelineIndex);
+	const tokenIds = useO(timelineIndex);
 	return /* @__PURE__ */ jsx("article", {
 		className: "index timeline_index",
 		"data-testid": "timeline-index",
@@ -1386,9 +1384,9 @@ const TimelineIndex = () => {
 //#endregion
 //#region src/react-devtools/TransactionIndex.tsx
 const TransactionLog = ({ token, isOpenState, logState }) => {
-	const log = useO$1(logState);
-	const isOpen = useO$1(isOpenState);
-	const setIsOpen = useI$1(isOpenState);
+	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}`,
@@ -1406,12 +1404,12 @@ const TransactionLog = ({ token, isOpenState, logState }) => {
 		})] }), isOpen ? /* @__PURE__ */ jsx("main", { children: log.map((update, index) => /* @__PURE__ */ jsx(article.TransactionUpdate, {
 			serialNumber: index,
 			transactionUpdate: update
-		}, update.key + index)) }) : null]
+		}, update.token.key + index)) }) : null]
 	});
 };
 const TransactionIndex = () => {
 	const { transactionIndex, transactionLogSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
-	const tokenIds = useO$1(transactionIndex);
+	const tokenIds = useO(transactionIndex);
 	return /* @__PURE__ */ jsx("article", {
 		className: "index transaction_index",
 		"data-testid": "transaction-index",
@@ -1440,12 +1438,12 @@ const AtomIODevtools = ({ hideByDefault = false }) => {
 const AtomIODevtoolsInternal = () => {
 	const constraintsRef = useRef(null);
 	const { atomIndex, selectorIndex, devtoolsAreHiddenAtom, devtoolsAreOpenAtom, devtoolsViewSelectionAtom, devtoolsViewOptionsAtom } = useContext(DevtoolsContext);
-	const devtoolsAreHidden = useO$1(devtoolsAreHiddenAtom);
-	const setDevtoolsAreOpen = useI$1(devtoolsAreOpenAtom);
-	const devtoolsAreOpen = useO$1(devtoolsAreOpenAtom);
-	const setDevtoolsView = useI$1(devtoolsViewSelectionAtom);
-	const devtoolsView = useO$1(devtoolsViewSelectionAtom);
-	const devtoolsViewOptions = useO$1(devtoolsViewOptionsAtom);
+	const devtoolsAreHidden = useO(devtoolsAreHiddenAtom);
+	const setDevtoolsAreOpen = useI(devtoolsAreOpenAtom);
+	const devtoolsAreOpen = useO(devtoolsAreOpenAtom);
+	const setDevtoolsView = useI(devtoolsViewSelectionAtom);
+	const devtoolsView = useO(devtoolsViewSelectionAtom);
+	const devtoolsViewOptions = useO(devtoolsViewOptionsAtom);
 	const mouseHasMoved = useRef(false);
 	return /* @__PURE__ */ jsxs("span", {
 		style: {