atom.io 0.22.0 → 0.23.0

package/internal/src/timeline/create-timeline.ts

@@ -1,7 +1,13 @@
 import type {
 	AtomFamilyToken,
 	FamilyMetadata,
+	Flat,
 	Func,
+	MoleculeCreation,
+	MoleculeDisposal,
+	ReadableToken,
+	StateCreation,
+	StateDisposal,
 	StateUpdate,
 	TimelineManageable,
 	TimelineOptions,
@@ -10,6 +16,7 @@ import type {
 	TokenType,
 	TransactionUpdate,
 } from "atom.io"
+import { type Json, stringifyJson } from "atom.io/json"
 
 import { newest } from "../lineage"
 import { getUpdateToken, isMutable } from "../mutable"
@@ -17,31 +24,46 @@ import { type Store, withdraw } from "../store"
 import { Subject } from "../subject"
 import { addAtomToTimeline } from "./add-atom-to-timeline"
 
-export type TimelineAtomUpdate<ManagedAtom extends TimelineManageable> =
+export type TimelineAtomUpdate<ManagedAtom extends TimelineManageable> = Flat<
 	StateUpdate<TokenType<ManagedAtom>> & {
 		key: string
 		type: `atom_update`
 		timestamp: number
 		family?: FamilyMetadata
 	}
+>
 export type TimelineSelectorUpdate<ManagedAtom extends TimelineManageable> = {
 	key: string
 	type: `selector_update`
 	timestamp: number
 	atomUpdates: Omit<TimelineAtomUpdate<ManagedAtom>, `timestamp`>[]
 }
-export type TimelineTransactionUpdate = TransactionUpdate<Func> & {
-	key: string
-	type: `transaction_update`
-	timestamp: number
-}
+export type TimelineTransactionUpdate = Flat<
+	TransactionUpdate<Func> & {
+		key: string
+		type: `transaction_update`
+		timestamp: number
+	}
+>
+export type TimelineStateCreation<T extends ReadableToken<any>> = Flat<
+	StateCreation<T> & { timestamp: number }
+>
+export type TimelineStateDisposal<T extends ReadableToken<any>> = Flat<
+	StateDisposal<T> & { timestamp: number }
+>
+export type TimelineMoleculeCreation<Key extends Json.Serializable> = Flat<
+	MoleculeCreation<Key> & { timestamp: number }
+>
+export type TimelineMoleculeDisposal<Key extends Json.Serializable> = Flat<
+	MoleculeDisposal<Key> & { timestamp: number }
+>
 
 export type Timeline<ManagedAtom extends TimelineManageable> = {
 	type: `timeline`
 	key: string
 	at: number
 	shouldCapture?: (
-		update: TimelineUpdate<TimelineManageable>,
+		update: TimelineUpdate<ManagedAtom>,
 		timeline: Timeline<ManagedAtom>,
 	) => boolean
 	timeTraveling: `into_future` | `into_past` | null
@@ -49,13 +71,8 @@ export type Timeline<ManagedAtom extends TimelineManageable> = {
 	selectorTime: number | null
 	transactionKey: string | null
 	install: (store: Store) => void
-	subject: Subject<
-		| TimelineAtomUpdate<ManagedAtom>
-		| TimelineSelectorUpdate<ManagedAtom>
-		| TimelineTransactionUpdate
-		| `redo`
-		| `undo`
-	>
+	subject: Subject<TimelineUpdate<ManagedAtom> | `redo` | `undo`>
+	subscriptions: Map<string, () => void>
 }
 
 export function createTimeline<ManagedAtom extends TimelineManageable>(
@@ -67,6 +84,7 @@ export function createTimeline<ManagedAtom extends TimelineManageable>(
 		type: `timeline`,
 		key: options.key,
 		at: 0,
+
 		timeTraveling: null,
 		selectorTime: null,
 		transactionKey: null,
@@ -74,62 +92,140 @@ export function createTimeline<ManagedAtom extends TimelineManageable>(
 		history: data?.history.map((update) => ({ ...update })) ?? [],
 		install: (s) => createTimeline(options, s, tl),
 		subject: new Subject(),
+		subscriptions: new Map(),
 	}
 	if (options.shouldCapture) {
 		tl.shouldCapture = options.shouldCapture
 	}
 	const timelineKey = options.key
 	const target = newest(store)
-	for (const tokenOrFamily of options.atoms) {
+	for (const tokenOrFamily of options.scope) {
 		let atomKey = tokenOrFamily.key
-		if (
-			tokenOrFamily.type === `atom_family` ||
-			tokenOrFamily.type === `mutable_atom_family`
-		) {
-			const familyToken: AtomFamilyToken<any> = tokenOrFamily
-			const family = withdraw(familyToken, store)
-			const familyKey = family.key
-			target.timelineAtoms.set({ atomKey: familyKey, timelineKey })
-			family.subject.subscribe(`timeline:${options.key}`, (token) => {
-				addAtomToTimeline(token, tl, store)
-			})
-			for (const atom of target.atoms.values()) {
-				if (atom.family?.key === familyKey) {
+		switch (tokenOrFamily.type) {
+			case `atom_family`:
+			case `mutable_atom_family`:
+				{
+					const familyToken: AtomFamilyToken<any> = tokenOrFamily
+					const family = withdraw(familyToken, store)
+					const familyKey = family.key
+					target.timelineAtoms.set({ atomKey: familyKey, timelineKey })
+					tl.subscriptions.set(
+						family.key,
+						family.subject.subscribe(
+							`timeline:${options.key}`,
+							(creationOrDisposal) => {
+								handleStateLifecycleEvent(creationOrDisposal, tl, store)
+							},
+						),
+					)
+					for (const atom of target.atoms.values()) {
+						if (atom.family?.key === familyKey) {
+							addAtomToTimeline(atom, tl, store)
+						}
+					}
+				}
+				break
+			case `atom`:
+			case `mutable_atom`:
+				{
+					let atom = withdraw(tokenOrFamily, store)
+					if (isMutable(atom)) {
+						const updateAtom = withdraw(getUpdateToken(atom), store)
+						atom = updateAtom
+						atomKey = atom.key
+					}
+					if (`family` in atom) {
+						const familyTimelineKey = target.timelineAtoms.getRelatedKey(
+							atom.family.key,
+						)
+						if (familyTimelineKey) {
+							store.logger.error(
+								`❌`,
+								`timeline`,
+								options.key,
+								`Failed to add atom "${atom.key}" because its family "${atom.family.key}" already belongs to timeline "${familyTimelineKey}"`,
+							)
+							continue
+						}
+					}
+					const existingTimelineKey = target.timelineAtoms.getRelatedKey(atomKey)
+					if (existingTimelineKey) {
+						store.logger.error(
+							`❌`,
+							`timeline`,
+							options.key,
+							`Failed to add atom "${atomKey}" because it already belongs to timeline "${existingTimelineKey}"`,
+						)
+						continue
+					}
 					addAtomToTimeline(atom, tl, store)
 				}
-			}
-		} else {
-			let atom = withdraw(tokenOrFamily, store)
-			if (isMutable(atom)) {
-				const updateAtom = withdraw(getUpdateToken(atom), store)
-				atom = updateAtom
-				atomKey = atom.key
-			}
-			if (`family` in atom) {
-				const familyTimelineKey = target.timelineAtoms.getRelatedKey(
-					atom.family.key,
-				)
-				if (familyTimelineKey) {
-					store.logger.error(
-						`❌`,
-						`timeline`,
-						options.key,
-						`Failed to add atom "${atom.key}" because its family "${atom.family.key}" already belongs to timeline "${familyTimelineKey}"`,
-					)
-					continue
+				break
+			case `molecule_family`:
+				{
+					const family = store.moleculeFamilies.get(tokenOrFamily.key)
+					if (family) {
+						tl.subscriptions.set(
+							tokenOrFamily.key,
+							family.subject.subscribe(
+								`timeline:${options.key}`,
+								(creationOrDisposal) => {
+									switch (creationOrDisposal.type) {
+										case `molecule_creation`:
+											{
+												const molecule = store.molecules.get(
+													stringifyJson(creationOrDisposal.token.key),
+												)
+												if (molecule) {
+													const event = Object.assign(creationOrDisposal, {
+														timestamp: Date.now(),
+													})
+													tl.history.push(event)
+													tl.at = tl.history.length
+													tl.subject.next(event)
+
+													for (const token of molecule.tokens) {
+														switch (token.type) {
+															case `atom`:
+															case `mutable_atom`:
+																addAtomToTimeline(token, tl, store)
+																break
+														}
+													}
+													tl.subscriptions.set(
+														molecule.key,
+														molecule.subject.subscribe(
+															`timeline:${options.key}`,
+															(stateCreationOrDisposal) => {
+																handleStateLifecycleEvent(
+																	stateCreationOrDisposal,
+																	tl,
+																	store,
+																)
+															},
+														),
+													)
+												}
+											}
+											break
+										case `molecule_disposal`:
+											tl.subscriptions.get(creationOrDisposal.token.key)?.()
+											tl.subscriptions.delete(creationOrDisposal.token.key)
+											for (const familyKey of creationOrDisposal.familyKeys) {
+												const stateKey = `${familyKey}(${stringifyJson(
+													creationOrDisposal.token.key,
+												)})`
+												tl.subscriptions.get(stateKey)?.()
+												tl.subscriptions.delete(stateKey)
+											}
+											break
+									}
+								},
+							),
+						)
+					}
 				}
-			}
-			const existingTimelineKey = target.timelineAtoms.getRelatedKey(atomKey)
-			if (existingTimelineKey) {
-				store.logger.error(
-					`❌`,
-					`timeline`,
-					options.key,
-					`Failed to add atom "${atomKey}" because it already belongs to timeline "${existingTimelineKey}"`,
-				)
-				continue
-			}
-			addAtomToTimeline(atom, tl, store)
+				break
 		}
 	}
 
@@ -141,3 +237,28 @@ export function createTimeline<ManagedAtom extends TimelineManageable>(
 	store.on.timelineCreation.next(token)
 	return token
 }
+
+function handleStateLifecycleEvent(
+	event: StateCreation<any> | StateDisposal<any>,
+	tl: Timeline<any>,
+	store: Store,
+): void {
+	const timestamp = Date.now()
+	const timelineEvent = Object.assign(event, {
+		timestamp,
+	}) as TimelineUpdate<any>
+	if (!tl.timeTraveling) {
+		tl.history.push(timelineEvent)
+		tl.at = tl.history.length
+		tl.subject.next(timelineEvent)
+	}
+	switch (event.type) {
+		case `state_creation`:
+			addAtomToTimeline(event.token, tl, store)
+			break
+		case `state_disposal`:
+			tl.subscriptions.get(event.token.key)?.()
+			tl.subscriptions.delete(event.token.key)
+			break
+	}
+}

package/internal/src/timeline/time-travel.ts

@@ -2,6 +2,10 @@ import type { TimelineToken } from "atom.io"
 
 import {
 	ingestAtomUpdate,
+	ingestCreationEvent,
+	ingestDisposalEvent,
+	ingestMoleculeCreationEvent,
+	ingestMoleculeDisposalEvent,
 	ingestSelectorUpdate,
 	ingestTransactionUpdate,
 } from "../ingest-updates"
@@ -64,6 +68,22 @@ export const timeTravel = (
 			ingestTransactionUpdate(applying, update, store)
 			break
 		}
+		case `state_creation`: {
+			ingestCreationEvent(update, applying, store)
+			break
+		}
+		case `state_disposal`: {
+			ingestDisposalEvent(update, applying, store)
+			break
+		}
+		case `molecule_creation`: {
+			ingestMoleculeCreationEvent(update, applying, store)
+			break
+		}
+		case `molecule_disposal`: {
+			ingestMoleculeDisposalEvent(update, applying, store)
+			break
+		}
 	}
 
 	if (action === `redo`) {

package/internal/src/transaction/apply-transaction.ts

@@ -46,19 +46,9 @@ export const applyTransaction = <F extends Func>(
 		}
 		tracker.dispose()
 	}
-	for (const atom of child.atoms.values()) {
-		if (!parent.atoms.has(atom.key)) {
-			parent.atoms.set(atom.key, atom)
-			parent.valueMap.set(atom.key, atom.default)
-			parent.logger.info(
-				`🔨`,
-				`transaction`,
-				child.transactionMeta.update.key,
-				`Adding atom "${atom.key}"`,
-			)
-		}
-	}
+
 	ingestTransactionUpdate(`newValue`, child.transactionMeta.update, parent)
+
 	if (isRootStore(parent)) {
 		setEpochNumberOfAction(
 			child.transactionMeta.update.key,

package/internal/src/transaction/build-transaction.ts

@@ -1,15 +1,16 @@
 import type { Func } from "atom.io"
 import type { findState } from "atom.io/ephemeral"
-import type { seekState } from "atom.io/immortal"
+import { makeMoleculeInStore, type seekState } from "atom.io/immortal"
 
 import { Junction } from "~/packages/rel8/junction/src"
 
 import { arbitrary } from "../arbitrary"
-import { findInStore, seekInStore } from "../families"
+import { disposeFromStore, findInStore, seekInStore } from "../families"
 import { getEnvironmentData } from "../get-environment-data"
 import { getFromStore } from "../get-state"
 import { LazyMap } from "../lazy-map"
 import { newest } from "../lineage"
+import { getJsonToken } from "../mutable"
 import { setIntoStore } from "../set-state"
 import type { Store } from "../store"
 import type { TransactionProgress } from "."
@@ -46,12 +47,14 @@ export const buildTransaction = (
 		selectors: new LazyMap(parent.selectors),
 		valueMap: new LazyMap(parent.valueMap),
 		molecules: new LazyMap(parent.molecules),
+		moleculeFamilies: new LazyMap(parent.moleculeFamilies),
 		miscResources: new LazyMap(parent.miscResources),
 	}
 	const epoch = getEpochNumberOfAction(key, store)
 	const transactionMeta: TransactionProgress<Func> = {
 		phase: `building`,
 		update: {
+			type: `transaction_update`,
 			key,
 			id,
 			epoch: epoch === undefined ? Number.NaN : epoch + 1,
@@ -68,6 +71,12 @@ export const buildTransaction = (
 				actUponStore(token, identifier, child),
 			find: ((token, k) => findInStore(token, k, child)) as typeof findState,
 			seek: ((token, k) => seekInStore(token, k, child)) as typeof seekState,
+			json: (token) => getJsonToken(token, child),
+			make: (context, family, k, ...args) =>
+				makeMoleculeInStore(child, context, family, k, ...args),
+			dispose: (token) => {
+				disposeFromStore(token, child)
+			},
 			env: () => getEnvironmentData(child),
 		},
 	}

package/introspection/dist/index.cjs

@@ -224,7 +224,8 @@ var attachTimelineFamily = (store = Internal2.IMPLICIT.STORE) => {
           transactionKey: null,
           install: () => {
           },
-          subject: new Internal2.Subject()
+          subject: new Internal2.Subject(),
+          subscriptions: /* @__PURE__ */ new Map()
         };
       },
       effects: (key) => [

package/introspection/dist/index.js

@@ -189,7 +189,8 @@ var attachTimelineFamily = (store = IMPLICIT.STORE) => {
           transactionKey: null,
           install: () => {
           },
-          subject: new Subject()
+          subject: new Subject(),
+          subscriptions: /* @__PURE__ */ new Map()
         };
       },
       effects: (key) => [

package/introspection/src/attach-timeline-family.ts

@@ -27,6 +27,7 @@ export const attachTimelineFamily = (
 					transactionKey: null,
 					install: () => {},
 					subject: new Subject(),
+					subscriptions: new Map(),
 				},
 			effects: (key) => [
 				({ setSelf }) => {

package/json/dist/index.cjs

@@ -62,9 +62,9 @@ function selectJsonFamily(family, transform, store = internal.IMPLICIT.STORE) {
   );
   family.subject.subscribe(
     `store=${store.config.name}::json-selector-family`,
-    (token) => {
-      if (token.family) {
-        internal.seekInStore(jsonFamily, parseJson(token.family.subKey), store);
+    (event) => {
+      if (event.token.family) {
+        internal.seekInStore(jsonFamily, parseJson(event.token.family.subKey), store);
       }
     }
   );

package/json/dist/index.js

@@ -1,5 +1,6 @@
-import { stringifyJson, parseJson } from '../../dist/chunk-BF4MVQF6.js';
-export { JSON_DEFAULTS, JSON_TYPE_NAMES, isBoolean, isNull, isNumber, isPrimitive, isString, parseJson, stringSetJsonInterface, stringifyJson } from '../../dist/chunk-BF4MVQF6.js';
+export { isBoolean, isNull, isNumber, isPrimitive, isString } from '../../dist/chunk-6MLFYN32.js';
+import { stringifyJson, parseJson } from '../../dist/chunk-OAYGID5B.js';
+export { JSON_DEFAULTS, JSON_TYPE_NAMES, parseJson, stringSetJsonInterface, stringifyJson } from '../../dist/chunk-OAYGID5B.js';
 import '../../dist/chunk-F2X4B4VY.js';
 import { createStandaloneSelector, IMPLICIT, createSelectorFamily, initFamilyMember, seekInStore } from 'atom.io/internal';
 
@@ -62,9 +63,9 @@ function selectJsonFamily(family, transform, store = IMPLICIT.STORE) {
   );
   family.subject.subscribe(
     `store=${store.config.name}::json-selector-family`,
-    (token) => {
-      if (token.family) {
-        seekInStore(jsonFamily, parseJson(token.family.subKey), store);
+    (event) => {
+      if (event.token.family) {
+        seekInStore(jsonFamily, parseJson(event.token.family.subKey), store);
       }
     }
   );

package/json/src/select-json-family.ts

@@ -64,7 +64,6 @@ export function selectJsonFamily<
 			set:
 				(key) =>
 				({ seek, set }, newValue) => {
-					// set(seek(family, key), transform.fromJson(newValue))
 					const existingState = seek(family, key)
 					if (existingState) {
 						set(existingState, transform.fromJson(newValue))
@@ -90,9 +89,9 @@ export function selectJsonFamily<
 	)
 	family.subject.subscribe(
 		`store=${store.config.name}::json-selector-family`,
-		(token) => {
-			if (token.family) {
-				seekInStore(jsonFamily, parseJson(token.family.subKey) as K, store)
+		(event) => {
+			if (event.token.family) {
+				seekInStore(jsonFamily, parseJson(event.token.family.subKey) as K, store)
 			}
 		},
 	)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atom.io",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Composable and testable reactive data library.",
   "homepage": "https://atom.io.fyi",
   "sideEffects": false,
@@ -56,16 +56,16 @@
     "@types/npmlog": "7.0.0",
     "@types/react": "18.3.2",
     "@types/tmp": "0.2.6",
-    "@typescript-eslint/parser": "7.9.0",
-    "@typescript-eslint/rule-tester": "7.9.0",
+    "@typescript-eslint/parser": "7.10.0",
+    "@typescript-eslint/rule-tester": "7.10.0",
     "@vitest/coverage-v8": "1.6.0",
     "@vitest/ui": "1.6.0",
     "concurrently": "8.2.2",
-    "drizzle-kit": "0.21.2",
+    "drizzle-kit": "0.21.3",
     "drizzle-orm": "0.30.10",
     "eslint": "npm:eslint@8.57.0",
     "eslint-v9": "npm:eslint@9.3.0",
-    "framer-motion": "11.2.4",
+    "framer-motion": "11.2.6",
     "happy-dom": "14.11.0",
     "http-proxy": "1.18.1",
     "npmlog": "7.0.1",

package/react-devtools/dist/index.cjs

@@ -1838,25 +1838,28 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "transaction_impact", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "detail", children: "impact: " }),
-            transactionUpdate.updates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((update, index) => {
-              if (`newValue` in update) {
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  article.AtomUpdate,
-                  {
-                    serialNumber: index,
-                    atomUpdate: update
-                  },
-                  `${transactionUpdate.key}:${index}:${update.key}`
-                );
+            transactionUpdate.updates.filter((token) => `key` in token && !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((update, index) => {
+              switch (update.type) {
+                case `atom_update`:
+                case `selector_update`:
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    article.AtomUpdate,
+                    {
+                      serialNumber: index,
+                      atomUpdate: update
+                    },
+                    `${transactionUpdate.key}:${index}:${update.key}`
+                  );
+                case `transaction_update`:
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    TransactionUpdateFC,
+                    {
+                      serialNumber: index,
+                      transactionUpdate: update
+                    },
+                    `${transactionUpdate.key}:${index}:${update.key}`
+                  );
               }
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                TransactionUpdateFC,
-                {
-                  serialNumber: index,
-                  transactionUpdate: update
-                },
-                `${transactionUpdate.key}:${index}:${update.key}`
-              );
             })
           ] })
         ] })
@@ -1865,7 +1868,7 @@ var TransactionUpdateFC = ({ serialNumber, transactionUpdate }) => {
   );
 };
 var TimelineUpdateFC = ({ timelineUpdate, serialNumber }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return `key` in timelineUpdate ? /* @__PURE__ */ jsxRuntime.jsxs(
     "article",
     {
       className: "node timeline_update",
@@ -1879,22 +1882,28 @@ var TimelineUpdateFC = ({ timelineUpdate, serialNumber }) => {
           timelineUpdate.key,
           ")"
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("main", { children: timelineUpdate.type === `transaction_update` ? timelineUpdate.updates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((update, index) => {
-          return `newValue` in update ? /* @__PURE__ */ jsxRuntime.jsx(
-            article.AtomUpdate,
-            {
-              serialNumber: index,
-              atomUpdate: update
-            },
-            `${timelineUpdate.key}:${index}:${update.key}`
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            TransactionUpdateFC,
-            {
-              serialNumber: index,
-              transactionUpdate: update
-            },
-            `${timelineUpdate.key}:${index}:${update.key}`
-          );
+        /* @__PURE__ */ jsxRuntime.jsx("main", { children: timelineUpdate.type === `transaction_update` ? timelineUpdate.updates.filter((token) => `key` in token && !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((update, index) => {
+          switch (update.type) {
+            case `atom_update`:
+            case `selector_update`:
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                article.AtomUpdate,
+                {
+                  serialNumber: index,
+                  atomUpdate: update
+                },
+                `${timelineUpdate.key}:${index}:${update.key}`
+              );
+            case `transaction_update`:
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                TransactionUpdateFC,
+                {
+                  serialNumber: index,
+                  transactionUpdate: update
+                },
+                `${timelineUpdate.key}:${index}:${update.key}`
+              );
+          }
         }) : timelineUpdate.type === `selector_update` ? timelineUpdate.atomUpdates.filter((token) => !token.key.startsWith(`\u{1F441}\u200D\u{1F5E8}`)).map((atomUpdate, index) => {
           return /* @__PURE__ */ jsxRuntime.jsx(
             article.AtomUpdate,
@@ -1913,7 +1922,7 @@ var TimelineUpdateFC = ({ timelineUpdate, serialNumber }) => {
         ) : null })
       ]
     }
-  );
+  ) : null;
 };
 var article = {
   AtomUpdate: AtomUpdateFC,
@@ -1973,17 +1982,19 @@ var TimelineLog = ({ token, isOpenState, timelineState }) => {
         ] })
       ] })
     ] }),
-    isOpen ? /* @__PURE__ */ jsxRuntime.jsx("main", { children: timeline.history.map((update, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-      index === timeline.at ? /* @__PURE__ */ jsxRuntime.jsx(YouAreHere, {}) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        article.TimelineUpdate,
-        {
-          timelineUpdate: update,
-          serialNumber: index
-        }
-      ),
-      index === timeline.history.length - 1 && timeline.at === timeline.history.length ? /* @__PURE__ */ jsxRuntime.jsx(YouAreHere, {}) : null
-    ] }, update.key + index + timeline.at)) }) : null
+    isOpen ? /* @__PURE__ */ jsxRuntime.jsx("main", { children: timeline.history.map(
+      (update, index) => `key` in update ? /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+        index === timeline.at ? /* @__PURE__ */ jsxRuntime.jsx(YouAreHere, {}) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          article.TimelineUpdate,
+          {
+            timelineUpdate: update,
+            serialNumber: index
+          }
+        ),
+        index === timeline.history.length - 1 && timeline.at === timeline.history.length ? /* @__PURE__ */ jsxRuntime.jsx(YouAreHere, {}) : null
+      ] }, update.key + index + timeline.at) : null
+    ) }) : null
   ] });
 };
 var TimelineIndex = () => {