atom.io 0.33.11 → 0.33.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atom.io",
-  "version": "0.33.11",
+  "version": "0.33.13",
   "description": "Composable and testable reactive data library.",
   "homepage": "https://atom.io.fyi",
   "sideEffects": false,
@@ -65,16 +65,16 @@
     "@storybook/addon-onboarding": "9.0.17",
     "@storybook/react-vite": "9.0.17",
     "@testing-library/react": "16.3.0",
-    "@types/bun": "npm:bun-types@1.2.18",
+    "@types/bun": "npm:bun-types@1.2.19",
     "@types/eslint": "9.6.1",
     "@types/estree": "1.0.8",
     "@types/http-proxy": "1.17.16",
     "@types/npmlog": "7.0.0",
     "@types/react": "19.1.8",
     "@types/tmp": "0.2.6",
-    "@typescript-eslint/parser": "8.37.0",
-    "@typescript-eslint/rule-tester": "8.37.0",
-    "@typescript-eslint/utils": "8.37.0",
+    "@typescript-eslint/parser": "8.38.0",
+    "@typescript-eslint/rule-tester": "8.38.0",
+    "@typescript-eslint/utils": "8.38.0",
     "@vitest/coverage-v8": "3.2.4",
     "@vitest/ui": "3.2.4",
     "concurrently": "9.2.0",

package/src/react-devtools/Button.tsx

@@ -3,21 +3,29 @@ import type { FC } from "react"
 
 export const OpenClose: FC<{
 	isOpen: boolean
-	setIsOpen: (next: Modify<boolean> | boolean) => void
+	setIsOpen?: ((next: Modify<boolean> | boolean) => void) | undefined
+	onShiftClick?: (
+		event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+	) => boolean
 	disabled?: boolean
 	testid: string
-}> = ({ isOpen, setIsOpen, disabled, testid }) => {
+}> = ({ isOpen, setIsOpen, onShiftClick, disabled, testid }) => {
 	return (
 		<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={disabled}
 		>
-			▶
+			<span className="json_editor_icon json_editor_carat">▶</span>
 		</button>
 	)
 }

package/src/react-devtools/StateEditor.tsx

@@ -9,8 +9,16 @@ export const StateEditor: FC<{
 }> = ({ token }) => {
 	const set = useI(token)
 	const data = useO(token)
+	const metaPath = token.family
+		? [token.family.key, token.family.subKey]
+		: [token.key]
 	return (
-		<JsonEditor testid={`${token.key}-state-editor`} data={data} set={set} />
+		<JsonEditor
+			testid={`${token.key}-state-editor`}
+			data={data}
+			set={set}
+			path={metaPath}
+		/>
 	)
 }
 
@@ -18,12 +26,16 @@ export const ReadonlySelectorViewer: FC<{
 	token: ReadonlySelectorToken<unknown>
 }> = ({ token }) => {
 	const data = useO(token)
+	const metaPath = token.family
+		? [token.family.key, token.family.subKey]
+		: [token.key]
 	return (
 		<JsonEditor
 			testid={`${token.key}-state-editor`}
 			data={data}
 			set={() => null}
 			isReadonly={() => true}
+			path={metaPath}
 		/>
 	)
 }

package/src/react-devtools/StateIndex.tsx

@@ -4,8 +4,12 @@ import type {
 	ReadonlyPureSelectorToken,
 	RegularAtomToken,
 } from "atom.io"
-import { getState } from "atom.io"
-import { findInStore } from "atom.io/internal"
+import {
+	actUponStore,
+	arbitrary,
+	findInStore,
+	getFromStore,
+} from "atom.io/internal"
 import type { FamilyNode, WritableTokenIndex } from "atom.io/introspection"
 import { primitiveRefinery } from "atom.io/introspection"
 import { useI, useO } from "atom.io/react"
@@ -22,6 +26,8 @@ export const StateIndexLeafNode: FC<{
 	isOpenState: RegularAtomToken<boolean>
 	typeState: ReadonlyPureSelectorToken<Loadable<string>>
 }> = ({ node, isOpenState, typeState }) => {
+	const { openCloseAllTX, store } = useContext(DevtoolsContext)
+
 	const setIsOpen = useI(isOpenState)
 	const isOpen = useO(isOpenState)
 
@@ -32,23 +38,29 @@ export const StateIndexLeafNode: FC<{
 
 	const isPrimitive = Boolean(primitiveRefinery.refine(state))
 
+	const path = node.family ? [node.family.key, node.family.subKey] : [node.key]
+
 	return (
 		<>
 			<header>
-				<button.OpenClose
-					isOpen={isOpen && !isPrimitive}
-					testid={`open-close-state-${node.key}`}
-					setIsOpen={setIsOpen}
-					disabled={isPrimitive}
-				/>
 				<main
 					onClick={() => {
-						console.log(node, getState(node))
+						console.log(node, getFromStore(store, node))
 					}}
 					onKeyUp={() => {
-						console.log(node, getState(node))
+						console.log(node, getFromStore(store, node))
 					}}
 				>
+					<button.OpenClose
+						isOpen={isOpen && !isPrimitive}
+						testid={`open-close-state-${node.key}`}
+						onShiftClick={() => {
+							actUponStore(store, openCloseAllTX, arbitrary())(path, isOpen)
+							return false
+						}}
+						setIsOpen={setIsOpen}
+						disabled={isPrimitive}
+					/>
 					<h2>{node.family?.subKey ?? node.key}</h2>
 					<span className="type detail">({stateType})</span>
 				</main>
@@ -73,21 +85,30 @@ export const StateIndexTreeNode: FC<{
 	const setIsOpen = useI(isOpenState)
 	const isOpen = useO(isOpenState)
 
-	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext)
+	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 (
 		<>
 			<header>
-				<button.OpenClose
-					isOpen={isOpen}
-					testid={`open-close-state-family-${node.key}`}
-					setIsOpen={setIsOpen}
-				/>
 				<main>
+					<button.OpenClose
+						isOpen={isOpen}
+						testid={`open-close-state-family-${node.key}`}
+						onShiftClick={() => {
+							actUponStore(
+								store,
+								openCloseAllTX,
+								arbitrary(),
+							)([node.key], isOpen)
+							return false
+						}}
+						setIsOpen={setIsOpen}
+					/>
 					<h2>{node.key}</h2>
 					<span className="type detail"> (family)</span>
 				</main>
@@ -97,7 +118,7 @@ export const StateIndexTreeNode: FC<{
 						<StateIndexNode
 							key={key}
 							node={childNode}
-							isOpenState={findInStore(store, viewIsOpenAtoms, childNode.key)}
+							isOpenState={findInStore(store, viewIsOpenAtoms, [node.key, key])}
 							typeState={findInStore(store, typeSelectors, childNode.key)}
 						/>
 					))
@@ -135,7 +156,6 @@ export const StateIndex: FC<{
 
 	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext)
 
-	console.log(tokenIds)
 	return (
 		<article className="index state_index" data-testid="state-index">
 			{[...tokenIds.entries()].map(([key, node]) => {
@@ -143,7 +163,7 @@ export const StateIndex: FC<{
 					<StateIndexNode
 						key={key}
 						node={node}
-						isOpenState={findInStore(store, viewIsOpenAtoms, node.key)}
+						isOpenState={findInStore(store, viewIsOpenAtoms, [node.key])}
 						typeState={findInStore(store, typeSelectors, node.key)}
 					/>
 				)

package/src/react-devtools/TimelineIndex.tsx

@@ -102,7 +102,7 @@ export const TimelineIndex: FC = () => {
 						<TimelineLog
 							key={token.key}
 							token={token}
-							isOpenState={findInStore(store, viewIsOpenAtoms, token.key)}
+							isOpenState={findInStore(store, viewIsOpenAtoms, [token.key])}
 							timelineState={findInStore(store, timelineSelectors, token.key)}
 						/>
 					)

package/src/react-devtools/TransactionIndex.tsx

@@ -66,7 +66,7 @@ export const TransactionIndex: FC = () => {
 						<TransactionLog
 							key={token.key}
 							token={token}
-							isOpenState={findInStore(store, viewIsOpenAtoms, token.key)}
+							isOpenState={findInStore(store, viewIsOpenAtoms, [token.key])}
 							logState={findInStore(store, transactionLogSelectors, token.key)}
 						/>
 					)

package/src/react-devtools/devtools.css

@@ -1,9 +1,9 @@
 main[data-css="atom_io_devtools"] {
 	--fg-color: #ccc;
 	--fg-light: #aaa;
-	--fg-soft: #777;
-	--fg-faint: #555;
-	--fg-hint: #333;
+	--fg-soft: #888;
+	--fg-faint: #777;
+	--fg-hint: #4a4a4a;
 	--fg-max: #fff;
 	--bg-color: #111;
 	--bg-accent: #00f;
@@ -12,6 +12,7 @@ main[data-css="atom_io_devtools"] {
 	--bg-tint2: #333;
 	--fg-border: 1px solid var(--fg-color);
 	--fg-border-soft: 1px solid var(--fg-soft);
+	--fg-border-hint: 1px solid var(--fg-hint);
 	@media (prefers-color-scheme: light) {
 		--fg-color: #444;
 		--fg-light: #777;
@@ -25,6 +26,9 @@ main[data-css="atom_io_devtools"] {
 		--bg-tint1: #e3e3e3;
 		--bg-tint2: #f3f3f3;
 	}
+	* {
+		box-sizing: border-box;
+	}
 	& {
 		pointer-events: all;
 		box-sizing: border-box;
@@ -43,7 +47,7 @@ main[data-css="atom_io_devtools"] {
 		overflow-y: scroll;
 	}
 	* {
-		font-size: 16px;
+		font-size: 14px;
 		font-family: theia, monospace;
 		line-height: 1em;
 		color: var(--fg-color);
@@ -89,13 +93,15 @@ main[data-css="atom_io_devtools"] {
 		background-color: black;
 		height: 10px;
 	}
-	main {
+	> main {
 		overflow-y: scroll;
 		flex-grow: 1;
 		display: flex;
 		flex-flow: column;
 		gap: 0;
 		article.index {
+			margin-bottom: 24px;
+			border-bottom: var(--fg-border);
 			.node .node {
 				border-right: var(--fg-border);
 				padding-right: 0;
@@ -105,47 +111,26 @@ main[data-css="atom_io_devtools"] {
 				}
 			}
 			.node > .node {
-				margin: 0px 2px 2px 18px;
+				margin: 0px 0px 0px 9px;
 				border-left: var(--fg-border-soft);
-				&:last-of-type {
-					margin-bottom: 6px;
-				}
 			}
 			.node {
 				border-top: var(--fg-border);
 				overflow: visible;
-				&:last-of-type {
-					border-bottom: var(--fg-border);
-				}
+
 				&.transaction_update {
 					padding: 0;
 				}
-				header {
+				> header {
 					display: flex;
 					flex-flow: row;
+					justify-content: space-between;
 					position: sticky;
 					z-index: 999;
 					top: 0;
 					height: 22px;
 					background: var(--bg-tint2);
-					border-bottom: var(--fg-border-soft);
-					button.carat {
-						cursor: pointer;
-						background: none;
-						border: none;
-						width: 20px;
-						color: var(--fg-light);
-						&.open {
-							transform: rotate(90deg);
-						}
-						&:disabled {
-							cursor: default;
-						}
-						&:focus-within {
-							outline: 2px solid var(--fg-max);
-							background: var(--bg-max);
-						}
-					}
+					border-bottom: none;
 					> main {
 						display: flex;
 						flex-flow: row;
@@ -170,22 +155,31 @@ main[data-css="atom_io_devtools"] {
 							}
 						}
 					}
+					> .json_editor {
+						border-left: var(--fg-border-soft);
+						padding: 3px 0px;
+					}
 					> .json_viewer {
 						color: var(--fg-light);
+						font-size: 14px;
+						flex-shrink: 1;
 					}
 					> .json_editor,
 					> .json_viewer {
+						margin-left: 3px;
 						display: flex;
 						flex-shrink: 1;
 						z-index: -1;
 						overflow-x: scroll;
 						align-items: center;
-						border-left: var(--fg-border-soft);
 						white-space: pre;
 						background: var(--bg-tint2);
 						&:focus-within {
 							background-color: var(--bg-max);
 							outline: 2px solid var(--fg-max);
+							* {
+								color: var(--fg-max);
+							}
 						}
 						&.nu * {
 							display: flex;
@@ -197,6 +191,7 @@ main[data-css="atom_io_devtools"] {
 						}
 						input {
 							outline: none;
+							min-width: 10px;
 						}
 					}
 				}
@@ -295,7 +290,7 @@ main[data-css="atom_io_devtools"] {
 			}
 		}
 	}
-	footer {
+	> footer {
 		display: flex;
 		justify-content: flex-end;
 		button {
@@ -310,6 +305,51 @@ main[data-css="atom_io_devtools"] {
 	}
 
 	.json_editor {
+		display: flex;
+		flex-flow: column;
+		align-items: flex-start;
+		> header {
+			width: 100%;
+			display: flex;
+			flex-flow: row;
+			align-items: center;
+			overflow: hidden;
+			white-space: nowrap;
+			justify-content: space-between;
+			&:has(> main > button.carat) {
+				height: 21px;
+			}
+			> main {
+				display: flex;
+				flex-flow: row;
+				align-items: center;
+				flex-shrink: 1;
+				overflow-x: hidden;
+				align-self: center;
+				> .json_viewer {
+					flex-shrink: 1;
+					overflow-x: scroll;
+					height: 21px;
+					font-size: 14px;
+					display: flex;
+					align-items: center;
+					margin-left: 0px;
+					color: var(--fg-soft);
+				}
+				> button {
+					padding: 0;
+					&.carat {
+						line-height: 0.5em;
+						font-size: 14px;
+					}
+				}
+			}
+		}
+		> .json_editor_array,
+		> .json_editor_object {
+			width: 100%;
+			flex-grow: 1;
+		}
 		input {
 			font-family: theia, monospace;
 			background: none;
@@ -318,13 +358,14 @@ main[data-css="atom_io_devtools"] {
 			}
 		}
 		input,
-		button,
 		select {
 			&:focus-within {
 				outline: 2px solid var(--fg-max);
 				background: var(--bg-max);
+				color: var(--fg-max);
 			}
 		}
+
 		button:disabled {
 			cursor: default;
 			> span.json_editor_icon {
@@ -345,13 +386,25 @@ main[data-css="atom_io_devtools"] {
 			font-family: theia, monospace;
 			font-size: 14px;
 			height: 21px;
+			min-width: 21px;
 			margin: none;
 			padding: 4px;
 			padding-bottom: 6px;
 			cursor: pointer;
-			&:hover {
-				color: #333;
-				background-color: #aaa;
+			&:hover,
+			&:focus-within {
+				background-color: var(--fg-faint);
+				&,
+				> * {
+					color: var(--bg-color);
+				}
+			}
+			&:active {
+				background: var(--fg-color);
+				&,
+				> * {
+					color: var(--bg-color);
+				}
 			}
 		}
 		select {
@@ -377,32 +430,45 @@ main[data-css="atom_io_devtools"] {
 			padding-right: 0px;
 			&::after {
 				content: ":";
+				color: var(--fg-soft);
 			}
 			input {
-				color: #999;
-				@media (prefers-color-scheme: light) {
-					color: #777;
-				}
+				color: var(--fg-color);
 			}
 		}
 		.json_editor_object,
 		.json_editor_array {
 			border-left: var(--fg-border-soft);
-			padding-left: 12px;
-			margin-left: 8px;
+			margin-left: 9px;
+			width: calc(100% - 9px);
+			> footer {
+				display: flex;
+				flex-flow: row;
+				justify-content: flex-start;
+				justify-items: flex-start;
+				height: 21px;
+				align-items: baseline;
+				position: relative;
+			}
 			.json_editor_properties,
 			.json_editor_elements {
+				border-top: var(--fg-border-soft);
 				.json_editor_property,
 				.json_editor_element {
+					display: flex;
 					border-bottom: var(--fg-border-soft);
-					margin-bottom: 2px;
-					min-height: 23px;
-					> span {
-						input {
-							min-width: 10px;
-						}
-						> * {
-							border: var(--fg-border-soft);
+					margin-bottom: 0;
+					min-height: 21px;
+					> header {
+						> main {
+							> span {
+								input {
+									min-width: 10px;
+								}
+								> * {
+									border: var(--fg-border-hint);
+								}
+							}
 						}
 					}
 				}
@@ -412,7 +478,7 @@ main[data-css="atom_io_devtools"] {
 						&:last-of-type {
 							border-bottom: none;
 						}
-						> span > * {
+						span > * {
 							border: 1px solid transparent;
 						}
 					}
@@ -420,4 +486,26 @@ main[data-css="atom_io_devtools"] {
 			}
 		}
 	}
+
+	.json_editor_icon {
+		color: var(--fg-soft);
+	}
+
+	button.carat {
+		border: none;
+		cursor: pointer;
+		background: none;
+		> .json_editor_icon {
+			line-height: 4px;
+		}
+		&.open {
+			transform: rotate(90deg);
+		}
+		&:disabled {
+			> .json_editor_icon {
+				cursor: default;
+				color: var(--fg-hint);
+			}
+		}
+	}
 }

package/src/react-devtools/json-editor/default-components.tsx

@@ -18,6 +18,7 @@ export type JsonEditorComponents = {
 		disabled?: boolean
 	}>
 	DeleteIcon: FC
+	AddIcon: FC
 
 	EditorWrapper: WC<{
 		style?: CSSProperties | undefined
@@ -86,8 +87,10 @@ export const DEFAULT_JSON_EDITOR_COMPONENTS: JsonEditorComponents = {
 		<span className="json_editor_null" data-testid={testid} />
 	),
 	DeleteIcon: () => (
-		<span className="json_editor_icon json_editor_delete">x</span>
+		<span className="json_editor_icon json_editor_delete">×</span>
 	),
+	// big plus
+	AddIcon: () => <span className="json_editor_icon json_editor_add">＋</span>,
 	MissingPropertyWrapper: ({ children, testid }) => (
 		<span className="json_editor_missing_property" data-testid={testid}>
 			{children}

package/src/react-devtools/json-editor/developer-interface.tsx

@@ -48,6 +48,7 @@ export const JsonEditor = <T,>({
 	name,
 	rename,
 	remove,
+	path = [],
 	isReadonly = () => false,
 	isHidden = () => false,
 	className,
@@ -68,7 +69,7 @@ export const JsonEditor = <T,>({
 			name={name}
 			rename={rename}
 			remove={remove}
-			path={[]}
+			path={path}
 			isReadonly={isReadonly}
 			isHidden={isHidden}
 			className={className}