atom.io 0.33.13 → 0.33.15

package/src/main/reset-state.ts

@@ -0,0 +1,35 @@
+import * as Internal from "atom.io/internal"
+import type { Canonical } from "atom.io/json"
+
+import type { WritableFamilyToken, WritableToken } from "."
+
+/**
+ * @public
+ * Set the value of a state into the implicit store back to its default value.
+ * @param token - An atom or writable selector token.
+ * @overload Default
+ * @default
+ */
+export function resetState(token: WritableToken<any>): void
+/**
+ * @public
+ * Set the value of a state into the implicit store back to its default value.
+ * @param token - An atom family or writable selector family token.
+ * @param key - The unique key of the state to set.
+ * @overload Streamlined
+ */
+export function resetState<K extends Canonical>(
+	token: WritableFamilyToken<any, K>,
+	key: K,
+): void
+export function resetState(
+	...params:
+		| [token: WritableFamilyToken<any, Canonical>, key: Canonical]
+		| [token: WritableToken<any>]
+): void {
+	if (params.length === 2) {
+		Internal.resetInStore(Internal.IMPLICIT.STORE, ...params)
+	} else {
+		Internal.resetInStore(Internal.IMPLICIT.STORE, ...params)
+	}
+}

package/src/main/silo.ts

@@ -13,6 +13,7 @@ import {
 	getFromStore,
 	IMPLICIT,
 	installIntoStore,
+	resetInStore,
 	setIntoStore,
 	Store,
 	subscribeInStore,
@@ -30,6 +31,7 @@ import type {
 	undo,
 } from "."
 import type { atom, atomFamily } from "./atom"
+import type { resetState } from "./reset-state"
 import type { selector, selectorFamily } from "./selector"
 import type { runTransaction, transaction } from "./transaction"
 
@@ -44,6 +46,7 @@ export class Silo {
 	public findState: typeof findState
 	public getState: typeof getState
 	public setState: typeof setState
+	public resetState: typeof resetState
 	public disposeState: typeof disposeState
 	public subscribe: typeof subscribe
 	public undo: typeof undo
@@ -70,6 +73,9 @@ export class Silo {
 		this.setState = ((...params: Parameters<typeof setState>) => {
 			setIntoStore(s, ...params)
 		}) as typeof setState
+		this.resetState = ((...params: Parameters<typeof resetState>) => {
+			resetInStore(s, ...params)
+		}) as typeof resetState
 		this.disposeState = ((...params: Parameters<typeof disposeState>) => {
 			disposeFromStore(s, ...params)
 		}) as typeof disposeState

package/src/main/transaction.ts

@@ -16,6 +16,7 @@ import type {
 	TokenType,
 	WritablePureSelectorToken,
 } from "."
+import type { resetState } from "./reset-state"
 
 export type TransactionToken<F extends Func> = {
 	key: string
@@ -93,6 +94,7 @@ export type SetterToolkit = Readonly<{
 export type ActorToolkit = Readonly<{
 	get: typeof getState
 	set: typeof setState
+	reset: typeof resetState
 	find: typeof findState
 	json: <T extends Transceiver<any>, J extends Json.Serializable>(
 		state: MutableAtomToken<T, J>,

package/src/react-devtools/StateIndex.tsx

@@ -1,4 +1,5 @@
 import type {
+	AtomToken,
 	Loadable,
 	ReadableToken,
 	ReadonlyPureSelectorToken,
@@ -7,6 +8,7 @@ import type {
 import {
 	actUponStore,
 	arbitrary,
+	disposeFromStore,
 	findInStore,
 	getFromStore,
 } from "atom.io/internal"
@@ -16,6 +18,7 @@ import { useI, useO } from "atom.io/react"
 import { type FC, useContext } from "react"
 
 import { button } from "./Button"
+import { DEFAULT_JSON_EDITOR_COMPONENTS } from "./json-editor"
 import { StoreEditor } from "./StateEditor"
 import { DevtoolsContext } from "./store"
 
@@ -25,7 +28,8 @@ export const StateIndexLeafNode: FC<{
 	node: ReadableToken<unknown>
 	isOpenState: RegularAtomToken<boolean>
 	typeState: ReadonlyPureSelectorToken<Loadable<string>>
-}> = ({ node, isOpenState, typeState }) => {
+	dispose?: (() => void) | undefined
+}> = ({ node, isOpenState, typeState, dispose }) => {
 	const { openCloseAllTX, store } = useContext(DevtoolsContext)
 
 	const setIsOpen = useI(isOpenState)
@@ -64,11 +68,23 @@ export const StateIndexLeafNode: FC<{
 					<h2>{node.family?.subKey ?? node.key}</h2>
 					<span className="type detail">({stateType})</span>
 				</main>
-				{isPrimitive ? (
-					<StoreEditor token={node} />
-				) : (
-					<div className="json_viewer">{JSON.stringify(state)}</div>
-				)}
+				<footer>
+					{isPrimitive ? (
+						<StoreEditor token={node} />
+					) : (
+						<div className="json_viewer">{JSON.stringify(state)}</div>
+					)}
+					{dispose ? (
+						<DEFAULT_JSON_EDITOR_COMPONENTS.Button
+							onClick={() => {
+								dispose?.()
+							}}
+							testid={`${node.key}-dispose`}
+						>
+							<DEFAULT_JSON_EDITOR_COMPONENTS.DeleteIcon />
+						</DEFAULT_JSON_EDITOR_COMPONENTS.Button>
+					) : null}
+				</footer>
 			</header>
 			{isOpen && !isPrimitive ? (
 				<main>
@@ -120,6 +136,9 @@ export const StateIndexTreeNode: FC<{
 							node={childNode}
 							isOpenState={findInStore(store, viewIsOpenAtoms, [node.key, key])}
 							typeState={findInStore(store, typeSelectors, childNode.key)}
+							dispose={() => {
+								disposeFromStore(store, childNode)
+							}}
 						/>
 					))
 				: null}
@@ -131,7 +150,8 @@ export const StateIndexNode: FC<{
 	node: FamilyNode<ReadableToken<unknown>> | ReadableToken<unknown>
 	isOpenState: RegularAtomToken<boolean>
 	typeState: ReadonlyPureSelectorToken<Loadable<string>>
-}> = ({ node, isOpenState, typeState }) => {
+	dispose?: () => void
+}> = ({ node, isOpenState, typeState, dispose }) => {
 	return (
 		<section className="node state" data-testid={`state-${node.key}`}>
 			{`type` in node ? (
@@ -139,6 +159,7 @@ export const StateIndexNode: FC<{
 					node={node}
 					isOpenState={isOpenState}
 					typeState={typeState}
+					dispose={dispose}
 				/>
 			) : (
 				<StateIndexTreeNode node={node} isOpenState={isOpenState} />
@@ -148,26 +169,29 @@ export const StateIndexNode: FC<{
 }
 
 export const StateIndex: FC<{
-	tokenIndex: ReadonlyPureSelectorToken<
-		WritableTokenIndex<ReadableToken<unknown>>
-	>
+	tokenIndex: AtomToken<WritableTokenIndex<ReadableToken<unknown>>>
 }> = ({ tokenIndex }) => {
 	const tokenIds = useO(tokenIndex)
 
 	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext)
+	const statesName = tokenIndex.key.includes(`Atom`) ? `atoms` : `selectors`
 
 	return (
 		<article className="index state_index" data-testid="state-index">
-			{[...tokenIds.entries()].map(([key, node]) => {
-				return (
-					<StateIndexNode
-						key={key}
-						node={node}
-						isOpenState={findInStore(store, viewIsOpenAtoms, [node.key])}
-						typeState={findInStore(store, typeSelectors, node.key)}
-					/>
-				)
-			})}
+			{tokenIds.size === 0 ? (
+				<p className="index-empty-state">(no {statesName})</p>
+			) : (
+				[...tokenIds.entries()].map(([key, node]) => {
+					return (
+						<StateIndexNode
+							key={key}
+							node={node}
+							isOpenState={findInStore(store, viewIsOpenAtoms, [node.key])}
+							typeState={findInStore(store, typeSelectors, node.key)}
+						/>
+					)
+				})
+			)}
 		</article>
 	)
 }

package/src/react-devtools/TimelineIndex.tsx

@@ -95,18 +95,22 @@ export const TimelineIndex: FC = () => {
 
 	return (
 		<article className="index timeline_index" data-testid="timeline-index">
-			{tokenIds
-				.filter((token) => !token.key.startsWith(`👁‍🗨`))
-				.map((token) => {
-					return (
-						<TimelineLog
-							key={token.key}
-							token={token}
-							isOpenState={findInStore(store, viewIsOpenAtoms, [token.key])}
-							timelineState={findInStore(store, timelineSelectors, token.key)}
-						/>
-					)
-				})}
+			{tokenIds.length === 0 ? (
+				<p className="index-empty-state">(no timelines)</p>
+			) : (
+				tokenIds
+					.filter((token) => !token.key.startsWith(`👁‍🗨`))
+					.map((token) => {
+						return (
+							<TimelineLog
+								key={token.key}
+								token={token}
+								isOpenState={findInStore(store, viewIsOpenAtoms, [token.key])}
+								timelineState={findInStore(store, timelineSelectors, token.key)}
+							/>
+						)
+					})
+			)}
 		</article>
 	)
 }

package/src/react-devtools/TransactionIndex.tsx

@@ -27,15 +27,15 @@ export const TransactionLog: FC<{
 			data-testid={`transaction-${token.key}`}
 		>
 			<header>
-				<button.OpenClose
-					isOpen={isOpen}
-					testid={`open-close-transaction-${token.key}`}
-					setIsOpen={setIsOpen}
-				/>
 				<main>
+					<button.OpenClose
+						isOpen={isOpen}
+						testid={`open-close-transaction-${token.key}`}
+						setIsOpen={setIsOpen}
+					/>
 					<h2>{token.key}</h2>
-					<span className="detail length">({log.length})</span>
 				</main>
+				<span className="detail length">({log.length})</span>
 			</header>
 			{isOpen ? (
 				<main>
@@ -59,18 +59,22 @@ export const TransactionIndex: FC = () => {
 	const tokenIds = useO(transactionIndex)
 	return (
 		<article className="index transaction_index" data-testid="transaction-index">
-			{tokenIds
-				.filter((token) => !token.key.startsWith(`🔍`))
-				.map((token) => {
-					return (
-						<TransactionLog
-							key={token.key}
-							token={token}
-							isOpenState={findInStore(store, viewIsOpenAtoms, [token.key])}
-							logState={findInStore(store, transactionLogSelectors, token.key)}
-						/>
-					)
-				})}
+			{tokenIds.length === 0 ? (
+				<p className="index-empty-state">(no transactions)</p>
+			) : (
+				tokenIds
+					.filter((token) => !token.key.startsWith(`🔍`))
+					.map((token) => {
+						return (
+							<TransactionLog
+								key={token.key}
+								token={token}
+								isOpenState={findInStore(store, viewIsOpenAtoms, [token.key])}
+								logState={findInStore(store, transactionLogSelectors, token.key)}
+							/>
+						)
+					})
+			)}
 		</article>
 	)
 }

package/src/react-devtools/devtools.css

@@ -86,42 +86,62 @@ main[data-css="atom_io_devtools"] {
 			}
 		}
 	}
+
 	> main {
 		background: var(--bg-tint1);
-	}
-	> main::before {
-		background-color: black;
-		height: 10px;
-	}
-	> main {
 		overflow-y: scroll;
 		flex-grow: 1;
 		display: flex;
 		flex-flow: column;
 		gap: 0;
 		article.index {
-			margin-bottom: 24px;
-			border-bottom: var(--fg-border);
+			margin-bottom: 0px;
+			padding-bottom: 24px;
+			border-top: var(--fg-border);
+			min-height: calc(100% - 24px);
+			display: flex;
+			flex-shrink: 0;
+			flex-flow: column;
 			.node .node {
-				border-right: var(--fg-border);
+				border-right: none;
 				padding-right: 0;
 				background: #ffffff08;
 				@media (prefers-color-scheme: light) {
 					background: #00000004;
 				}
 			}
+			.index-empty-state {
+				width: 100%;
+				height: 100%;
+				font-style: italic;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
 			.node > .node {
 				margin: 0px 0px 0px 9px;
+				width: calc(100% - 9px);
 				border-left: var(--fg-border-soft);
+				&:first-of-type {
+					border-top: var(--fg-border-soft);
+				}
+				&:last-of-type {
+					border-bottom: none;
+				}
 			}
 			.node {
-				border-top: var(--fg-border);
+				position: relative;
+				border-bottom: var(--fg-border-soft);
 				overflow: visible;
-
+				width: 100%;
+				display: flex;
+				flex-flow: column;
 				&.transaction_update {
 					padding: 0;
 				}
+
 				> header {
+					width: auto;
 					display: flex;
 					flex-flow: row;
 					justify-content: space-between;
@@ -131,7 +151,11 @@ main[data-css="atom_io_devtools"] {
 					height: 22px;
 					background: var(--bg-tint2);
 					border-bottom: none;
+					align-items: center;
+					overflow: hidden;
+
 					> main {
+						height: 100%;
 						display: flex;
 						flex-flow: row;
 						cursor: help;
@@ -147,51 +171,67 @@ main[data-css="atom_io_devtools"] {
 						h2 {
 							margin: 0;
 						}
-						.detail {
-							margin-left: 5px;
-							color: #777;
-							@media (prefers-color-scheme: light) {
-								color: #999;
-							}
-						}
-					}
-					> .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;
+
+					> footer {
+						height: 16px;
+						width: fit-content;
+						min-width: 0;
 						display: flex;
-						flex-shrink: 1;
-						z-index: -1;
-						overflow-x: scroll;
+						justify-content: flex-start;
 						align-items: center;
-						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;
-							height: 100%;
+						flex-shrink: 1;
+						> button {
+							border: none;
+							background: none;
+							border-left: var(--fg-border-soft);
 						}
-						> span {
-							padding: 0px 5px;
-							z-index: 0;
+						> .json_viewer {
+							color: var(--fg-light);
+							flex-shrink: 1;
+							overflow: scroll;
+							align-self: center;
+							align-items: flex-start;
 						}
-						input {
-							outline: none;
+						> .json_editor,
+						> .json_viewer {
+							height: 16px;
 							min-width: 10px;
+							padding-left: 4px;
+							padding-right: 2px;
+							display: flex;
+							flex-flow: row;
+							margin-right: 0px;
+							overflow-x: scroll;
+							align-items: center;
+							justify-content: flex-start;
+							white-space: pre;
+							border-left: var(--fg-border-soft);
+							&:focus-within {
+								background-color: var(--bg-max);
+								outline: 2px solid var(--fg-max);
+								* {
+									color: var(--fg-max);
+								}
+							}
+							main {
+								height: 100%;
+							}
+							> span {
+								padding: 0px 5px;
+								z-index: 0;
+							}
+							input {
+								outline: none;
+							}
+						}
+					}
+
+					.detail {
+						margin-left: 5px;
+						color: #777;
+						@media (prefers-color-scheme: light) {
+							color: #999;
 						}
 					}
 				}
@@ -201,8 +241,8 @@ main[data-css="atom_io_devtools"] {
 				main {
 					display: flex;
 					flex-flow: row wrap;
-					gap: 5px;
-					.transaction_update {
+					gap: 0;
+					article.transaction_update {
 						width: 100%;
 						display: flex;
 						flex-flow: row;
@@ -210,10 +250,14 @@ main[data-css="atom_io_devtools"] {
 						justify-content: flex-start;
 						justify-items: flex-start;
 						align-content: flex-start;
-						border-left: var(--fg-border);
+						border-left: none;
+						border-bottom: none;
 						border-top: var(--fg-border);
 						header {
+							height: 100%;
 							padding: 5px;
+							display: flex;
+							flex-flow: column;
 							h4 {
 								margin: 0;
 								padding: 0;
@@ -224,6 +268,7 @@ main[data-css="atom_io_devtools"] {
 							margin-left: 0;
 							display: flex;
 							flex-flow: column;
+							flex-grow: 1;
 							gap: 0px;
 							border-left: 1px solid #333;
 							section ~ section {
@@ -231,16 +276,22 @@ main[data-css="atom_io_devtools"] {
 							}
 							section {
 								padding: 5px;
+								border-bottom: none;
+								margin: 0;
 								&.transaction_output {
 									border-right: none;
 								}
 								&.transaction_impact {
 									padding: 5px;
 								}
-								margin: 0;
+
 								article {
+									padding: 3px 6px;
 									border-left: var(--fg-border);
 									border-right: var(--fg-border);
+									&:first-of-type {
+										border-top: var(--fg-border);
+									}
 									.summary {
 										white-space: nowrap;
 									}
@@ -250,6 +301,7 @@ main[data-css="atom_io_devtools"] {
 					}
 				}
 			}
+
 			section.timeline_log {
 				header {
 					display: flex;
@@ -290,7 +342,9 @@ main[data-css="atom_io_devtools"] {
 			}
 		}
 	}
+
 	> footer {
+		z-index: 10000;
 		display: flex;
 		justify-content: flex-end;
 		button {
@@ -307,7 +361,6 @@ main[data-css="atom_io_devtools"] {
 	.json_editor {
 		display: flex;
 		flex-flow: column;
-		align-items: flex-start;
 		> header {
 			width: 100%;
 			display: flex;
@@ -323,9 +376,10 @@ main[data-css="atom_io_devtools"] {
 				display: flex;
 				flex-flow: row;
 				align-items: center;
+				align-self: center;
 				flex-shrink: 1;
 				overflow-x: hidden;
-				align-self: center;
+				padding-right: 2px;
 				> .json_viewer {
 					flex-shrink: 1;
 					overflow-x: scroll;

package/src/react-devtools/store.ts

@@ -82,7 +82,7 @@ export function attachDevtoolsStates(
 	> = createTransaction<
 		(path: readonly (number | string)[], current?: boolean) => void
 	>(store, {
-		key: `openCloseMultiView`,
+		key: `🔍 Open Close All`,
 		do: ({ get, set }, path, current) => {
 			const currentView = get(devtoolsViewSelectionState)
 			let states:

package/src/internal/atom/is-default.ts

@@ -1,18 +0,0 @@
-import { newest } from "../lineage"
-import type { Store } from "../store"
-
-export const isAtomDefault = (store: Store, key: string): boolean => {
-	const core = newest(store)
-	return core.atomsThatAreDefault.has(key)
-}
-
-export const markAtomAsDefault = (store: Store, key: string): void => {
-	const core = newest(store)
-	core.atomsThatAreDefault = new Set(core.atomsThatAreDefault).add(key)
-}
-
-export const markAtomAsNotDefault = (store: Store, key: string): void => {
-	const core = newest(store)
-	core.atomsThatAreDefault = new Set(newest(store).atomsThatAreDefault)
-	core.atomsThatAreDefault.delete(key)
-}