atom.io 0.33.12 → 0.33.13

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;
@@ -26,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;
@@ -44,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);
@@ -90,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;
@@ -106,30 +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 {
 					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);
+					border-bottom: none;
 					> main {
 						display: flex;
 						flex-flow: row;
@@ -154,20 +155,23 @@ 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;
-						overflow-x: scroll;
 					}
 					> .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 {
@@ -187,6 +191,7 @@ main[data-css="atom_io_devtools"] {
 						}
 						input {
 							outline: none;
+							min-width: 10px;
 						}
 					}
 				}
@@ -285,7 +290,7 @@ main[data-css="atom_io_devtools"] {
 			}
 		}
 	}
-	footer {
+	> footer {
 		display: flex;
 		justify-content: flex-end;
 		button {
@@ -304,29 +309,39 @@ main[data-css="atom_io_devtools"] {
 		flex-flow: column;
 		align-items: flex-start;
 		> header {
+			width: 100%;
 			display: flex;
 			flex-flow: row;
-			width: 100%;
-			position: relative;
-			align-items: baseline;
+			align-items: center;
 			overflow: hidden;
 			white-space: nowrap;
-			> .json_viewer {
-				flex-shrink: 1;
-				overflow-x: scroll;
+			justify-content: space-between;
+			&:has(> main > button.carat) {
 				height: 21px;
-				font-size: 14px;
+			}
+			> main {
 				display: flex;
+				flex-flow: row;
 				align-items: center;
-				margin-left: 6px;
-				color: var(--fg-light);
-			}
-			> button {
-				padding: 0;
-				&.carat {
-					line-height: 0.5em;
+				flex-shrink: 1;
+				overflow-x: hidden;
+				align-self: center;
+				> .json_viewer {
+					flex-shrink: 1;
+					overflow-x: scroll;
+					height: 21px;
 					font-size: 14px;
-					align-self: flex-start;
+					display: flex;
+					align-items: center;
+					margin-left: 0px;
+					color: var(--fg-soft);
+				}
+				> button {
+					padding: 0;
+					&.carat {
+						line-height: 0.5em;
+						font-size: 14px;
+					}
 				}
 			}
 		}
@@ -343,7 +358,6 @@ main[data-css="atom_io_devtools"] {
 			}
 		}
 		input,
-		button,
 		select {
 			&:focus-within {
 				outline: 2px solid var(--fg-max);
@@ -351,6 +365,7 @@ main[data-css="atom_io_devtools"] {
 				color: var(--fg-max);
 			}
 		}
+
 		button:disabled {
 			cursor: default;
 			> span.json_editor_icon {
@@ -376,9 +391,20 @@ main[data-css="atom_io_devtools"] {
 			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 {
@@ -404,6 +430,7 @@ main[data-css="atom_io_devtools"] {
 			padding-right: 0px;
 			&::after {
 				content: ":";
+				color: var(--fg-soft);
 			}
 			input {
 				color: var(--fg-color);
@@ -412,26 +439,35 @@ main[data-css="atom_io_devtools"] {
 		.json_editor_object,
 		.json_editor_array {
 			border-left: var(--fg-border-soft);
-			padding-left: 10px;
-			margin-left: 10px;
-			width: calc(100% - 21px);
+			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;
+					margin-bottom: 0;
+					min-height: 21px;
 					> header {
-						width: 100%;
-
-						> span {
-							input {
-								min-width: 10px;
-							}
-							> * {
-								border: var(--fg-border-hint);
+						> main {
+							> span {
+								input {
+									min-width: 10px;
+								}
+								> * {
+									border: var(--fg-border-hint);
+								}
 							}
 						}
 					}
@@ -442,7 +478,7 @@ main[data-css="atom_io_devtools"] {
 						&:last-of-type {
 							border-bottom: none;
 						}
-						> span > * {
+						span > * {
 							border: 1px solid transparent;
 						}
 					}
@@ -459,10 +495,6 @@ main[data-css="atom_io_devtools"] {
 		border: none;
 		cursor: pointer;
 		background: none;
-		&:focus-within {
-			outline: none;
-			background: none;
-		}
 		> .json_editor_icon {
 			line-height: 4px;
 		}

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}

package/src/react-devtools/json-editor/editors-by-type/array-editor.tsx

@@ -25,7 +25,7 @@ type ArrayElementProps = {
 	recast: (newType: keyof JsonTypes) => void
 	Components: JsonEditorComponents
 	testid?: string | undefined
-	viewIsOpenAtom: RegularAtomToken<boolean, string>
+	viewIsOpenAtom: RegularAtomToken<boolean, readonly (number | string)[]>
 }
 const ArrayElement = ({
 	path,
@@ -80,15 +80,14 @@ export const ArrayEditor = ({
 
 	return (
 		<Components.ArrayWrapper>
-			<div className={`json_editor_elements${disabled ? ` readonly` : ``}`}>
+			<main className={`json_editor_elements${disabled ? ` readonly` : ``}`}>
 				{data.map((element, index) => {
 					const elementPath = [...path, index]
 					const pathKey = elementPath.join(`,`)
-					const viewIsOpenAtom = findInStore(
-						store,
-						viewIsOpenAtoms,
-						`${testid}__${pathKey}`,
-					)
+					const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, [
+						...path,
+						index,
+					])
 					return (
 						<ArrayElement
 							key={pathKey}
@@ -105,19 +104,23 @@ export const ArrayEditor = ({
 						/>
 					)
 				})}
-			</div>
-			<Components.Button
-				testid={`${testid}-add-element`}
-				disabled={disabled}
-				onClick={() => {
-					set((current) => {
-						const newData = [...current, JSON_DEFAULTS.string]
-						return newData
-					})
-				}}
-			>
-				<Components.AddIcon />
-			</Components.Button>
+			</main>
+			{!disabled ? (
+				<footer>
+					<Components.Button
+						testid={`${testid}-add-element`}
+						disabled={disabled}
+						onClick={() => {
+							set((current) => {
+								const newData = [...current, JSON_DEFAULTS.string]
+								return newData
+							})
+						}}
+					>
+						<Components.AddIcon />
+					</Components.Button>
+				</footer>
+			) : null}
 		</Components.ArrayWrapper>
 	)
 }

package/src/react-devtools/json-editor/editors-by-type/object-editor.tsx

@@ -60,7 +60,7 @@ type ObjectPropertyProps = {
 	recast: (newType: keyof JsonTypes) => void
 	Components: JsonEditorComponents
 	testid?: string | undefined
-	viewIsOpenAtom: RegularAtomToken<boolean, string>
+	viewIsOpenAtom: RegularAtomToken<boolean, readonly (number | string)[]>
 }
 const ObjectProperty = ({
 	path,
@@ -137,28 +137,12 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 					const propertyPath = [...path, key]
 					const originalPropertyPath = [...path, originalKey]
 					const stablePathKey = originalPropertyPath.join(`.`)
-					const viewIsOpenAtom = findInStore(
-						store,
-						viewIsOpenAtoms,
-						`${testid}__${stablePathKey}`,
-					)
+					const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, [
+						...path,
+						key,
+					])
 
 					return (
-						// <JsonEditor_INTERNAL
-						// 	key={originalPath.join(`.`)}
-						// 	path={newPath}
-						// 	name={key}
-						// 	isReadonly={isReadonly}
-						// 	isHidden={isHidden}
-						// 	data={data[key as keyof T]}
-						// 	set={setProperty[key as keyof T]}
-						// 	rename={renameProperty[key as keyof T]}
-						// 	remove={removeProperty[key as keyof T]}
-						// 	recast={recastProperty[key as keyof T]}
-						// 	className="json_editor_property"
-						// 	Components={Components}
-						// 	testid={`${testid}-property-${key}`}
-						// />
 						<ObjectProperty
 							key={stablePathKey}
 							path={propertyPath}
@@ -177,7 +161,7 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 				})}
 			</div>
 			{disabled ? null : (
-				<>
+				<footer>
 					<Components.Button
 						disabled={disabled}
 						testid={`${testid}-add-property`}
@@ -196,7 +180,7 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 					>
 						Sort
 					</Components.Button>
-				</>
+				</footer>
 			)}
 		</Components.ObjectWrapper>
 	)