atom.io 0.32.2 → 0.32.3

package/internal/src/index.ts

@@ -40,6 +40,7 @@ export * from "./mutable"
 export * from "./not-found-error"
 export * from "./operation"
 export * from "./pretty-print"
+export * from "./reserved-keys"
 export * from "./selector"
 export * from "./set-state"
 export * from "./store"
@@ -67,7 +68,7 @@ export type MutableAtom<
 > = AtomIOState &
 	JsonInterface<T, J> & {
 		type: `mutable_atom`
-		default: T | (() => T)
+		default: () => T
 		cleanup?: () => void
 	}
 export type Atom<T> =

package/internal/src/ingest-updates/ingest-creation-disposal.ts

@@ -93,18 +93,6 @@ export function ingestMoleculeDisposalEvent(
 
 		case `oldValue`:
 			{
-				// let first = t rue
-				// for (const ownerString of update.provenance) {
-				// 	// const owner = parseJson(ownerString)
-				// 	// if (first) {
-				// 	// 	first = false
-				// 	// 	allocateIntoStore<any, any, any>(store, owner, update.key)
-				// 	// 	continue
-				// 	// }
-
-				// 	// claimWithinStore<any, any, any>(store, owner, update.key)
-
-				// }
 				const provenanceJson = update.provenance.map(parseJson)
 				allocateIntoStore<any, any, any>(store, provenanceJson, update.key)
 				for (const [familyKey, value] of update.values) {

package/internal/src/reserved-keys.ts

@@ -0,0 +1,7 @@
+export type ReservedIntrospectionKey = `🔍 ${string}`
+
+export function isReservedIntrospectionKey(
+	value: string,
+): value is ReservedIntrospectionKey {
+	return value.startsWith(`🔍 `)
+}

package/internal/src/set-state/copy-mutable-if-needed.ts

@@ -10,17 +10,18 @@ export function copyMutableIfNeeded<T extends Transceiver<any>>(
 	const originValue = origin.valueMap.get(atom.key)
 	const targetValue = target.valueMap.get(atom.key)
 
-	if (originValue === targetValue) {
-		if (originValue === undefined) {
-			return typeof atom.default === `function` ? atom.default() : atom.default
-		}
+	if (originValue !== targetValue) {
+		return targetValue
+	}
 
-		origin.logger.info(`📃`, `atom`, atom.key, `copying`)
-		const jsonValue = atom.toJson(originValue)
-		const copiedValue = atom.fromJson(jsonValue)
-		target.valueMap.set(atom.key, copiedValue)
-		new Tracker(atom, origin)
-		return copiedValue
+	if (originValue === undefined) {
+		return atom.default()
 	}
-	return targetValue
+
+	origin.logger.info(`📃`, `atom`, atom.key, `copying`)
+	const jsonValue = atom.toJson(originValue)
+	const copiedValue = atom.fromJson(jsonValue)
+	target.valueMap.set(atom.key, copiedValue)
+	new Tracker(atom, origin)
+	return copiedValue
 }

package/internal/src/set-state/set-atom-or-selector.ts

@@ -10,7 +10,7 @@ export const setAtomOrSelector = <T>(
 	switch (state.type) {
 		case `atom`:
 		case `mutable_atom`:
-			setAtom(state, value, store)
+			setAtom(store, state, value)
 			break
 		case `selector`:
 			state.set(value)

package/internal/src/set-state/set-atom.ts

@@ -1,21 +1,21 @@
-import type { Atom } from ".."
+import type { KeyedStateUpdate } from "atom.io"
+
+import type { Atom, Store } from ".."
 import { isAtomDefault, markAtomAsNotDefault } from "../atom"
 import { cacheValue } from "../caching"
 import { readOrComputeValue } from "../get-state/read-or-compute-value"
-import type { Transceiver } from "../mutable"
+import { isTransceiver, type Transceiver } from "../mutable"
 import { markDone } from "../operation"
-import type { Store } from "../store"
-import { isChildStore, isRootStore } from "../transaction/is-root-store"
+import { isChildStore } from "../transaction/is-root-store"
 import { become } from "./become"
 import { copyMutableIfNeeded } from "./copy-mutable-if-needed"
 import { emitUpdate } from "./emit-update"
 import { evictDownStream } from "./evict-downstream"
-import { stowUpdate } from "./stow-update"
 
 export const setAtom = <T>(
+	target: Store,
 	atom: Atom<T>,
 	next: T | ((oldValue: T) => T),
-	target: Store,
 ): void => {
 	const oldValue = readOrComputeValue(target, atom)
 	let newValue = oldValue
@@ -33,22 +33,44 @@ export const setAtom = <T>(
 	markDone(target, atom.key)
 	evictDownStream(target, atom)
 	const update = { oldValue, newValue }
-	if (isRootStore(target)) {
+	if (!isChildStore(target)) {
 		emitUpdate(target, atom, update)
-	} else if (target.parent) {
-		if (target.on.transactionApplying.state === null) {
-			stowUpdate(target, atom, update)
-		} else if (atom.key.startsWith(`*`)) {
-			const mutableKey = atom.key.slice(1)
-			const mutableAtom = target.atoms.get(mutableKey) as Atom<any>
-			let transceiver: Transceiver<any> = target.valueMap.get(mutableKey)
-			if (mutableAtom.type === `mutable_atom` && isChildStore(target)) {
-				const { parent } = target
-				const copiedValue = copyMutableIfNeeded(target, mutableAtom, parent)
-				transceiver = copiedValue
-			}
-			const accepted = transceiver.do(update.newValue) === null
-			if (accepted) evictDownStream(target, mutableAtom)
+		return
+	}
+	if (target.on.transactionApplying.state === null) {
+		const { key } = atom
+		if (isTransceiver(update.newValue)) {
+			return
+		}
+		const atomUpdate: KeyedStateUpdate<T> = {
+			type: `atom_update`,
+			key,
+			...update,
+		}
+		if (atom.family) {
+			atomUpdate.family = atom.family
+		}
+		target.transactionMeta.update.updates.push(atomUpdate)
+		target.logger.info(
+			`📁`,
+			`atom`,
+			key,
+			`stowed (`,
+			update.oldValue,
+			`->`,
+			update.newValue,
+			`)`,
+		)
+	} else if (atom.key.startsWith(`*`)) {
+		const mutableKey = atom.key.slice(1)
+		const mutableAtom = target.atoms.get(mutableKey) as Atom<any>
+		let transceiver: Transceiver<any> = target.valueMap.get(mutableKey)
+		if (mutableAtom.type === `mutable_atom` && isChildStore(target)) {
+			const { parent } = target
+			const copiedValue = copyMutableIfNeeded(target, mutableAtom, parent)
+			transceiver = copiedValue
 		}
+		const accepted = transceiver.do(update.newValue) === null
+		if (accepted) evictDownStream(target, mutableAtom)
 	}
 }

package/internal/src/store/store.ts

@@ -20,6 +20,7 @@ import type {
 	WritableSelector,
 	WritableSelectorFamily,
 } from ".."
+import { isReservedIntrospectionKey } from ".."
 import type { Join } from "../join"
 import { Junction } from "../junction"
 import type { Lineage } from "../lineage"
@@ -177,7 +178,7 @@ export class Store implements Lineage {
 	}
 
 	public loggers: AtomIOLogger[] = [
-		new AtomIOLogger(`warn`, (_, __, key) => !key.includes(`🔍`)),
+		new AtomIOLogger(`warn`, (_, __, key) => !isReservedIntrospectionKey(key)),
 	]
 	public logger: Logger = {
 		error: (...messages) => {

package/internal/src/transaction/get-epoch-number.ts

@@ -1,26 +1,22 @@
 import type { Store } from "../store"
+import type { RootStore } from "./is-root-store"
 import { isRootStore } from "./is-root-store"
 
 export function getContinuityKey(
-	store: Store,
+	store: RootStore,
 	transactionKey: string,
 ): string | undefined {
-	const isRoot = isRootStore(store)
-	const continuity = isRoot
-		? store.transactionMeta.actionContinuities.getRelatedKey(transactionKey)
-		: undefined
+	const continuity =
+		store.transactionMeta.actionContinuities.getRelatedKey(transactionKey)
+
 	return continuity
 }
 
 export function getEpochNumberOfContinuity(
-	store: Store,
+	store: RootStore,
 	continuityKey: string,
 ): number | undefined {
-	const isRoot = isRootStore(store)
-	const epoch =
-		isRoot && continuityKey
-			? store.transactionMeta.epoch.get(continuityKey)
-			: undefined
+	const epoch = store.transactionMeta.epoch.get(continuityKey)
 	return epoch
 }
 
@@ -29,12 +25,12 @@ export function getEpochNumberOfAction(
 	transactionKey: string,
 ): number | undefined {
 	const isRoot = isRootStore(store)
-	const continuity = isRoot
-		? store.transactionMeta.actionContinuities.getRelatedKey(transactionKey)
-		: undefined
-	const epoch =
-		isRoot && continuity !== undefined
-			? store.transactionMeta.epoch.get(continuity)
-			: undefined
-	return epoch
+	if (!isRoot) {
+		return undefined
+	}
+	const continuityKey = getContinuityKey(store, transactionKey)
+	if (continuityKey === undefined) {
+		return undefined
+	}
+	return getEpochNumberOfContinuity(store, continuityKey)
 }

package/internal/src/transaction/set-epoch-number.ts

@@ -1,4 +1,5 @@
 import type { Store } from "../store"
+import { getContinuityKey } from "./get-epoch-number"
 import { isRootStore } from "./is-root-store"
 
 export function setEpochNumberOfContinuity(
@@ -21,8 +22,7 @@ export function setEpochNumberOfAction(
 	if (!isRoot) {
 		return
 	}
-	const continuityKey =
-		store.transactionMeta.actionContinuities.getRelatedKey(transactionKey)
+	const continuityKey = getContinuityKey(store, transactionKey)
 
 	if (continuityKey !== undefined) {
 		store.transactionMeta.epoch.set(continuityKey, newEpoch)

package/introspection/dist/index.js

@@ -1,3 +1,3 @@
-export { Auditor, Differ, Refinery, attachIntrospectionStates, diffArray, diffBoolean, diffNumber, diffObject, diffString, discoverType, isPlainObject, jsonRefinery, jsonTreeRefinery, prettyJson, primitiveRefinery, sprawl } from '../../dist/chunk-KMBRCA5Q.js';
-import '../../dist/chunk-RXQWAO26.js';
+export { Auditor, Differ, Refinery, attachIntrospectionStates, diffArray, diffBoolean, diffNumber, diffObject, diffString, discoverType, isPlainObject, jsonRefinery, jsonTreeRefinery, prettyJson, primitiveRefinery, sprawl } from '../../dist/chunk-RGUNRT72.js';
+import '../../dist/chunk-35NB2XZU.js';
 import '../../dist/chunk-XWL6SNVU.js';

package/introspection/src/attach-atom-index.ts

@@ -4,6 +4,7 @@ import {
 	createRegularAtom,
 	createStandaloneSelector,
 	deposit,
+	isReservedIntrospectionKey,
 } from "atom.io/internal"
 
 import type { WritableTokenIndex } from "."
@@ -20,21 +21,22 @@ export const attachAtomIndex = (
 			default: () => {
 				const base: AtomTokenIndex = new Map()
 				for (const [key, val] of store.atoms) {
-					if (!key.includes(`🔍`)) {
-						const token = deposit(val)
-						if (val.family) {
-							let familyNode = base.get(val.family.key)
-							if (!familyNode || !(`familyMembers` in familyNode)) {
-								familyNode = {
-									key: val.family.key,
-									familyMembers: new Map(),
-								}
-								base.set(val.family.key, familyNode)
+					if (isReservedIntrospectionKey(key)) {
+						continue
+					}
+					const token = deposit(val)
+					if (val.family) {
+						let familyNode = base.get(val.family.key)
+						if (!familyNode || !(`familyMembers` in familyNode)) {
+							familyNode = {
+								key: val.family.key,
+								familyMembers: new Map(),
 							}
-							familyNode.familyMembers.set(val.family.subKey, token)
-						} else {
-							base.set(key, token)
+							base.set(val.family.key, familyNode)
 						}
+						familyNode.familyMembers.set(val.family.subKey, token)
+					} else {
+						base.set(key, token)
 					}
 				}
 				return base
@@ -42,7 +44,7 @@ export const attachAtomIndex = (
 			effects: [
 				({ setSelf }) => {
 					store.on.atomCreation.subscribe(`introspection`, (atomToken) => {
-						if (atomToken.key.includes(`🔍`)) {
+						if (isReservedIntrospectionKey(atomToken.key)) {
 							return
 						}
 

package/introspection/src/attach-selector-index.ts

@@ -4,6 +4,7 @@ import {
 	createRegularAtom,
 	createStandaloneSelector,
 	deposit,
+	isReservedIntrospectionKey,
 } from "atom.io/internal"
 
 import type { WritableTokenIndex } from "."
@@ -23,21 +24,22 @@ export const attachSelectorIndex = (
 					const base: SelectorTokenIndex = new Map()
 					for (const map of [store.readonlySelectors, store.selectors]) {
 						for (const [key, val] of map) {
-							if (!key.includes(`🔍`)) {
-								const token = deposit(val)
-								if (val.family) {
-									let familyNode = base.get(val.family.key)
-									if (!familyNode || !(`familyMembers` in familyNode)) {
-										familyNode = {
-											key: val.family.key,
-											familyMembers: new Map(),
-										}
-										base.set(val.family.key, familyNode)
+							if (isReservedIntrospectionKey(key)) {
+								continue
+							}
+							const token = deposit(val)
+							if (val.family) {
+								let familyNode = base.get(val.family.key)
+								if (!familyNode || !(`familyMembers` in familyNode)) {
+									familyNode = {
+										key: val.family.key,
+										familyMembers: new Map(),
 									}
-									familyNode.familyMembers.set(val.family.subKey, token)
-								} else {
-									base.set(key, token)
+									base.set(val.family.key, familyNode)
 								}
+								familyNode.familyMembers.set(val.family.subKey, token)
+							} else {
+								base.set(key, token)
 							}
 						}
 					}
@@ -48,7 +50,7 @@ export const attachSelectorIndex = (
 						store.on.selectorCreation.subscribe(
 							`introspection`,
 							(selectorToken) => {
-								if (selectorToken.key.includes(`🔍`)) {
+								if (isReservedIntrospectionKey(selectorToken.key)) {
 									return
 								}
 

package/json/dist/index.js

@@ -1,2 +1,2 @@
-export { JSON_DEFAULTS, JSON_TYPE_NAMES, fromEntries, isJson, parseJson, selectJson, selectJsonFamily, stringifyJson, toEntries } from '../../dist/chunk-RXQWAO26.js';
+export { JSON_DEFAULTS, JSON_TYPE_NAMES, fromEntries, isJson, parseJson, selectJson, selectJsonFamily, stringifyJson, toEntries } from '../../dist/chunk-35NB2XZU.js';
 import '../../dist/chunk-XWL6SNVU.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atom.io",
-  "version": "0.32.2",
+  "version": "0.32.3",
   "description": "Composable and testable reactive data library.",
   "homepage": "https://atom.io.fyi",
   "sideEffects": false,
@@ -59,38 +59,38 @@
     "@types/npmlog": "7.0.0",
     "@types/react": "19.0.10",
     "@types/tmp": "0.2.6",
-    "@typescript-eslint/parser": "8.25.0",
-    "@typescript-eslint/rule-tester": "8.25.0",
-    "@typescript-eslint/utils": "8.25.0",
-    "@vitest/coverage-v8": "3.0.7",
-    "@vitest/ui": "3.0.7",
-    "bun-types": "1.2.4",
+    "@typescript-eslint/parser": "8.26.1",
+    "@typescript-eslint/rule-tester": "8.26.1",
+    "@typescript-eslint/utils": "8.26.1",
+    "@vitest/coverage-v8": "3.0.8",
+    "@vitest/ui": "3.0.8",
+    "bun-types": "1.2.5",
     "concurrently": "9.1.2",
     "drizzle-kit": "0.30.5",
     "drizzle-orm": "0.40.0",
-    "eslint": "9.21.0",
-    "happy-dom": "17.1.8",
+    "eslint": "9.22.0",
+    "happy-dom": "17.4.4",
     "http-proxy": "1.18.1",
-    "motion": "12.4.7",
+    "motion": "12.5.0",
     "npmlog": "7.0.1",
     "nyc": "17.1.0",
     "postgres": "3.4.5",
-    "preact": "10.26.3",
+    "preact": "10.26.4",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-router-dom": "7.2.0",
+    "react-router-dom": "7.3.0",
     "socket.io": "4.8.1",
     "socket.io-client": "4.8.1",
     "tmp": "0.2.3",
     "tsup": "8.4.0",
     "tsx": "4.19.3",
     "typescript": "5.8.2",
-    "vite": "6.2.0",
+    "vite": "6.2.2",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.0.7",
+    "vitest": "3.0.8",
     "zod": "3.24.2",
-    "recoverage": "0.0.7",
-    "break-check": "0.6.6"
+    "break-check": "0.6.7",
+    "recoverage": "0.1.3"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -243,7 +243,9 @@
     "watch:types": "tsc --watch --noEmit",
     "lint": "concurrently \"bun:lint:*\"",
     "test": "vitest",
-    "test:coverage": "vitest run --coverage && recoverage",
+    "test:coverage": "pnpm test:coverage:once && pnpm test:coverage:increased",
+    "test:coverage:once": "vitest run --coverage",
+    "test:coverage:increased": "recoverage",
     "test:build": "bun run test:manifest && cross-env IMPORT=dist vitest run",
     "test:once": "echo tested built code",
     "test:once:public": "cross-env IMPORT=dist vitest run public",

package/react/dist/index.js

@@ -1,3 +1,3 @@
-export { StoreContext, StoreProvider, useI, useJSON, useO, useTL } from '../../dist/chunk-HEEVASKG.js';
-import '../../dist/chunk-RXQWAO26.js';
+export { StoreContext, StoreProvider, useI, useJSON, useO, useTL } from '../../dist/chunk-MENOYVPP.js';
+import '../../dist/chunk-35NB2XZU.js';
 import '../../dist/chunk-XWL6SNVU.js';

package/react-devtools/dist/index.js

@@ -1,7 +1,7 @@
 import { persistSync } from '../../dist/chunk-4LWKCEW3.js';
-import { attachIntrospectionStates, jsonRefinery, primitiveRefinery, discoverType, prettyJson } from '../../dist/chunk-KMBRCA5Q.js';
-import { StoreContext, useI, useO } from '../../dist/chunk-HEEVASKG.js';
-import { IMPLICIT, createStandaloneAtom, createAtomFamily, fromEntries, become, isJson, toEntries, JSON_DEFAULTS, findInStore, undo, redo, getState, stringifyJson } from '../../dist/chunk-RXQWAO26.js';
+import { attachIntrospectionStates, jsonRefinery, primitiveRefinery, discoverType, prettyJson } from '../../dist/chunk-RGUNRT72.js';
+import { StoreContext, useI, useO } from '../../dist/chunk-MENOYVPP.js';
+import { IMPLICIT, createStandaloneAtom, createAtomFamily, fromEntries, become, isJson, toEntries, JSON_DEFAULTS, findInStore, undo, redo, getState, stringifyJson } from '../../dist/chunk-35NB2XZU.js';
 import '../../dist/chunk-XWL6SNVU.js';
 import { motion, spring, LayoutGroup } from 'motion/react';
 import { forwardRef, useRef, useState, useImperativeHandle, useLayoutEffect, createContext, useId, Component, useContext, Fragment as Fragment$1 } from 'react';
@@ -1396,74 +1396,86 @@ var AtomIODevtoolsInternal = () => {
   const devtoolsView = useO(devtoolsViewSelectionState);
   const devtoolsViewOptions = useO(devtoolsViewOptionsState);
   const mouseHasMoved = useRef(false);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      motion.span,
-      {
-        ref: constraintsRef,
-        "data-css": "atom_io_devtools_zone",
-        style: {
-          position: `fixed`,
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          pointerEvents: `none`
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      motion.main,
-      {
-        drag: true,
-        dragConstraints: constraintsRef,
-        "data-css": "atom_io_devtools",
-        transition: spring,
-        style: devtoolsAreOpen ? {} : {
-          backgroundColor: `#0000`,
-          borderColor: `#0000`,
-          maxHeight: 28,
-          maxWidth: 33
-        },
-        children: [
-          devtoolsAreOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(motion.header, { children: [
-              /* @__PURE__ */ jsx("h1", { children: "atom.io" }),
-              /* @__PURE__ */ jsx("nav", { children: devtoolsViewOptions.map((viewOption) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: {
+        position: `fixed`,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            ref: constraintsRef,
+            "data-css": "atom_io_devtools_zone",
+            style: {
+              position: `fixed`,
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              pointerEvents: `none`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          motion.main,
+          {
+            drag: true,
+            dragConstraints: constraintsRef,
+            "data-css": "atom_io_devtools",
+            transition: spring,
+            style: devtoolsAreOpen ? {} : {
+              backgroundColor: `#0000`,
+              borderColor: `#0000`,
+              maxHeight: 28,
+              maxWidth: 33
+            },
+            children: [
+              devtoolsAreOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(motion.header, { children: [
+                  /* @__PURE__ */ jsx("h1", { children: "atom.io" }),
+                  /* @__PURE__ */ jsx("nav", { children: devtoolsViewOptions.map((viewOption) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-testid": `view-${viewOption}`,
+                      className: viewOption === devtoolsView ? `active` : ``,
+                      onClick: () => {
+                        setDevtoolsView(viewOption);
+                      },
+                      disabled: viewOption === devtoolsView,
+                      children: viewOption
+                    },
+                    viewOption
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsx(motion.main, { children: /* @__PURE__ */ jsx(LayoutGroup, { children: devtoolsView === `atoms` ? /* @__PURE__ */ jsx(StateIndex, { tokenIndex: atomIndex }) : devtoolsView === `selectors` ? /* @__PURE__ */ jsx(StateIndex, { tokenIndex: selectorIndex }) : devtoolsView === `transactions` ? /* @__PURE__ */ jsx(TransactionIndex, {}) : /* @__PURE__ */ jsx(TimelineIndex, {}) }) })
+              ] }) : null,
+              /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
-                  "data-testid": `view-${viewOption}`,
-                  className: viewOption === devtoolsView ? `active` : ``,
-                  onClick: () => {
-                    setDevtoolsView(viewOption);
+                  onMouseDown: () => mouseHasMoved.current = false,
+                  onMouseMove: () => mouseHasMoved.current = true,
+                  onMouseUp: () => {
+                    if (!mouseHasMoved.current) {
+                      setDevtoolsAreOpen((open) => !open);
+                    }
                   },
-                  disabled: viewOption === devtoolsView,
-                  children: viewOption
-                },
-                viewOption
-              )) })
-            ] }),
-            /* @__PURE__ */ jsx(motion.main, { children: /* @__PURE__ */ jsx(LayoutGroup, { children: devtoolsView === `atoms` ? /* @__PURE__ */ jsx(StateIndex, { tokenIndex: atomIndex }) : devtoolsView === `selectors` ? /* @__PURE__ */ jsx(StateIndex, { tokenIndex: selectorIndex }) : devtoolsView === `transactions` ? /* @__PURE__ */ jsx(TransactionIndex, {}) : /* @__PURE__ */ jsx(TimelineIndex, {}) }) })
-          ] }) : null,
-          /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onMouseDown: () => mouseHasMoved.current = false,
-              onMouseMove: () => mouseHasMoved.current = true,
-              onMouseUp: () => {
-                if (!mouseHasMoved.current) {
-                  setDevtoolsAreOpen((open) => !open);
+                  children: "\u{1F50D}"
                 }
-              },
-              children: "\u{1F50D}"
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 
 export { AtomIODevtools, DEFAULT_JSON_EDITOR_COMPONENTS, DEFAULT_NUMBER_CONSTRAINTS, DefaultFallback, ElasticInput, ErrorBoundary, JsonEditor, NumberInput, SubEditors, TextInput, VALID_NON_NUMBERS, VALID_NON_NUMBER_INTERPRETATIONS, castToJson, clampInto, isDecimalInProgress, isValidNonNumber };

package/react-devtools/src/AtomIODevtools.tsx

@@ -38,7 +38,15 @@ const AtomIODevtoolsInternal = (): React.ReactNode => {
 	const mouseHasMoved = useRef(false)
 
 	return (
-		<>
+		<span
+			style={{
+				position: `fixed`,
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+			}}
+		>
 			<motion.span
 				ref={constraintsRef}
 				data-css="atom_io_devtools_zone"
@@ -118,6 +126,6 @@ const AtomIODevtoolsInternal = (): React.ReactNode => {
 					</button>
 				</footer>
 			</motion.main>
-		</>
+		</span>
 	)
 }