@octanejs/transition-group 0.0.1

package/LICENSE

@@ -0,0 +1,30 @@
+BSD 3-Clause License
+
+Copyright (c) 2018, React Community
+Forked from React (https://github.com/facebook/react) Copyright 2013-present, Facebook, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,24 @@
+# @octanejs/transition-group
+
+An Octane binding for [`react-transition-group@4.4.5`](https://github.com/reactjs/react-transition-group/tree/v4.4.5).
+
+## Status
+
+The package preserves React Transition Group's six public modules with native Octane components. Timed lifecycle transitions, CSS class phases, keyed group exits, and cloned keyed transitions have executable coverage.
+
+The target public surface is:
+
+- `Transition`
+- `CSSTransition`
+- `TransitionGroup`
+- `SwitchTransition`
+- `ReplaceTransition`
+- `config`
+
+Root imports and the matching documented per-component imports will be supported. See [UPSTREAM.md](./UPSTREAM.md) for provenance, current gaps, and intentional Octane constraints.
+
+Use `nodeRef` for DOM-aware transitions. Octane intentionally has no `findDOMNode` equivalent. Pass dynamic `TransitionGroup` collections as an inspectable value, such as `children={items.map(...)}`.
+
+## License
+
+BSD-3-Clause. The pinned upstream notice is retained in [LICENSE](./LICENSE).

package/UPSTREAM.md

@@ -0,0 +1,52 @@
+# Upstream provenance
+
+This binding is pinned to [`react-transition-group` v4.4.5](https://github.com/reactjs/react-transition-group/tree/v4.4.5), commit `4cb51a9be0ebf508cb8f6506452097f7ebb874fe`. The pristine runtime oracle uses React 18.3.1 (upstream's supported peer range and the last React that still exposes `findDOMNode`); Octane package tests continue to use the workspace React 19 oracle.
+
+The upstream project and this adapted package are licensed under BSD-3-Clause. The upstream notice is retained in `LICENSE` and `upstream/LICENSE`.
+
+## Vendored evidence
+
+`upstream/src` and `upstream/test` are byte-exact copies of the source and tests at the pinned tag. `audit/SHA256SUMS` records every retained artifact and `pnpm upstream:check` rejects drift. `pnpm upstream:verify` also checks `audit/upstream-test-dispositions.json`, `audit/case-crosswalk.json`, `audit/adapted-evidence.SHA256SUMS`, and `audit/adapted-case-contracts.json` so every upstream test artifact, case identity, adapted mapping, assertion body, and upstream probe fixture stays accounted for. File digests alone are not sufficient: the case-contract ledger pins per-case adapted/upstream assertion hashes and fixture exports against each cited upstream scenario, and negative controls refresh `adapted-evidence.SHA256SUMS` after mutation to prove the semantic contract—not a stale digest—rejects deleted assertions or weakened fixtures.
+
+The vendored JavaScript is not published. The maintained implementation is under `src`. Adapted Octane tests are under `tests`. The strongest runtime oracle is the pristine Jest lane: `pnpm test:upstream` runs the pinned suite unchanged against React through the manifest `jest-full` executor and checks every identity against `audit/pristine-runtime.json`.
+
+## DefinitelyTyped type-suite provenance
+
+The React type oracle is [`@types/react-transition-group` 4.4.12](https://www.npmjs.com/package/@types/react-transition-group/v/4.4.12). Its canonical source is DefinitelyTyped repository path `types/react-transition-group`, pinned at commit `cccd2a9ffecb708ac0606faa7f81f0b7ec535bf9`; `typesPublisherContentHash` is `28d8cc9bfe6b15e0291a07b916505b49e5cf57cfd1f331db1d9ad49fd36bfd41`. The npm tarball omits its executable type test, so `upstream-types/react-transition-group-tests.tsx` and `upstream-types/tsconfig.definitelytyped.json` are byte-exact vendored copies from that commit. The pristine runner `upstream-types/tsconfig.json` retains DT's compiler options while resolving declarations from npm rather than vendored `.d.ts` files.
+
+`pnpm test:type-parity` runs the pristine suite with `tsc`, then its one-for-one Octane adaptation in `typetests/react-transition-group-tests.tsx` with `tsrx-tsc`. `audit/type-parity.json` pins the permitted transformations and inventories both suites; its negative controls reject a skipped file, removed JSX assertion group, removed `@ts-expect-error`, or retargeted public import.
+
+## Test-suite disposition
+
+The pinned repository contains seven runtime suites plus four support files under `upstream/test`. Every artifact has a disposition in `audit/upstream-test-dispositions.json` (56 executable cases total). `audit/case-crosswalk.json` maps each upstream case to an adapted identity with a `// Per path:` citation, or records both findDOMNode cases as not-applicable. `audit/adapted-evidence.SHA256SUMS` pins adapted suite bodies and `tests/_fixtures/upstream-probes.tsrx`. `audit/adapted-case-contracts.json` records per-case assertion/fixture contracts for those mappings. Negative controls in `scripts/react-parity/react-transition-group-upstream-lib.test.mjs` reject a missing artifact disposition, a stale `caseCount`, a deleted suite, a removed case, adapted case drift, a missing citation, deleted assertions (after digest refresh), and fixture drift (after digest refresh). Adapted one-for-one coverage lives under `tests/upstream/` with `// Per path:` citations. Port-authored tests are classified in `audit/test-classifications.json`; type lanes follow the DefinitelyTyped suite under `audit/type-parity.json`.
+
+| Upstream artifact | Disposition |
+| --- | --- |
+| `test/Transition-test.js` | Pristine oracle + adapted in `tests/upstream/Transition.test.ts` (both findDOMNode cases are not applicable) |
+| `test/CSSTransition-test.js` | Pristine oracle + adapted in `tests/upstream/CSSTransition.test.ts` |
+| `test/CSSTransitionGroup-test.js` | Pristine oracle + adapted in `tests/upstream/TransitionGroup.test.ts` |
+| `test/TransitionGroup-test.js` | Pristine oracle + adapted in `tests/upstream/TransitionGroup.test.ts` (StrictMode double-appear is divergence `react-transition-group-no-strict-double-appear`) |
+| `test/SwitchTransition-test.js` | Pristine oracle + adapted in `tests/upstream/SwitchTransition.test.ts` |
+| `test/ChildMapping-test.js` | Pristine oracle + adapted in `tests/upstream/ChildMapping.test.ts` |
+| `test/SSR-test.js` | Pristine oracle + adapted in `tests/ssr/upstream-import.test.ts` |
+| `test/setup.js`, `setupAfterEnv.js`, `utils.js`, `.eslintrc.yml` | Support artifacts for the pristine Jest runner |
+
+## Public surface
+
+The published React package exposes six root modules and the Octane package preserves each mapping:
+
+| React import | Octane import |
+| --- | --- |
+| `react-transition-group` | `@octanejs/transition-group` |
+| `react-transition-group/Transition` | `@octanejs/transition-group/Transition` |
+| `react-transition-group/CSSTransition` | `@octanejs/transition-group/CSSTransition` |
+| `react-transition-group/TransitionGroup` | `@octanejs/transition-group/TransitionGroup` |
+| `react-transition-group/SwitchTransition` | `@octanejs/transition-group/SwitchTransition` |
+| `react-transition-group/ReplaceTransition` | `@octanejs/transition-group/ReplaceTransition` |
+| `react-transition-group/config` | `@octanejs/transition-group/config` |
+
+## Adaptation notes
+
+Octane has no `ReactDOM.findDOMNode` equivalent. DOM-aware callbacks and `CSSTransition` therefore require `nodeRef`; callers that omit it still receive lifecycle timing and state transitions, but no inferred DOM node. This follows React Transition Group's recommended `nodeRef` path and avoids a legacy API that React Strict Mode deprecates.
+
+Compiler-generated Octane children blocks are distinguished from genuine render props with `isChildrenBlock`. Introspective collection components should pass descriptor collections through the `children` prop (for example, `children={items.map(...)}`), so keys remain inspectable by `TransitionGroup`.

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@octanejs/transition-group",
+  "version": "0.0.1",
+  "license": "BSD-3-Clause",
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=22.22.2"
+  },
+  "description": "React Transition Group-compatible transition components for Octane.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/transition-group"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "LICENSE",
+    "README.md",
+    "UPSTREAM.md",
+    "status.json"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./Transition": "./src/Transition.tsrx",
+    "./CSSTransition": "./src/CSSTransition.tsrx",
+    "./TransitionGroup": "./src/TransitionGroup.tsrx",
+    "./SwitchTransition": "./src/SwitchTransition.tsrx",
+    "./ReplaceTransition": "./src/ReplaceTransition.tsrx",
+    "./config": "./src/config.ts"
+  },
+  "peerDependencies": {
+    "octane": "0.1.35"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@testing-library/react": "^14.3.1",
+    "@tsrx/react": "^0.2.56",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "babel-jest": "30.4.1",
+    "babel-plugin-add-module-exports": "^1.0.4",
+    "dom-helpers": "^5.2.1",
+    "jest": "30.4.2",
+    "jest-environment-jsdom": "30.4.1",
+    "jest-environment-node": "30.4.1",
+    "prop-types": "^15.8.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react18": "npm:react@18.3.1",
+    "react-dom18": "npm:react-dom@18.3.1",
+    "react-transition-group": "4.4.5",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.10",
+    "@types/react-transition-group": "^4.4.12",
+    "@octanejs/testing-library": "0.1.32",
+    "octane": "0.1.35"
+  },
+  "scripts": {
+    "test": "pnpm upstream:check && pnpm upstream:verify && pnpm test:upstream && vitest run --root ../.. --project transition-group --project transition-group-ssr",
+    "parity:inventory": "node ../../scripts/react-parity/react-transition-group-runtime-inventory.mjs",
+    "test:upstream": "jest --config tests/upstream-jest.config.cjs --rootDir upstream --runInBand --no-watchman",
+    "upstream:check": "node audit/check-upstream.mjs",
+    "upstream:verify": "node ../../scripts/react-parity/react-transition-group-upstream.mjs",
+    "parity:pristine-inventory": "node ../../scripts/react-parity/react-transition-group-pristine-runtime.mjs --write",
+    "typecheck": "tsrx-tsc --noEmit -p tsconfig.json && tsrx-tsc --noEmit -p typetests/tsconfig.json",
+    "test:type-parity": "tsc --noEmit -p upstream-types/tsconfig.json && tsrx-tsc --noEmit -p typetests/tsconfig.json",
+    "parity:types": "node ../../scripts/react-parity/react-transition-group-types.mjs",
+    "parity:types:write": "node ../../scripts/react-parity/react-transition-group-types.mjs --write"
+  }
+}

package/src/CSSTransition.tsrx

@@ -0,0 +1,112 @@
+import { useRef } from 'octane';
+import Transition from './Transition.tsrx';
+import type { CSSClassNames, CSSTransitionProps } from './types.ts';
+import { forceReflow } from './utils/reflow.ts';
+
+type TransitionType = 'appear' | 'enter' | 'exit';
+type Phase = 'base' | 'active' | 'done';
+type AppliedClasses = Record<TransitionType, Partial<Record<Phase, string>>>;
+
+function classesFor(classNames: CSSClassNames | undefined, type: TransitionType) {
+	if (typeof classNames === 'string' || classNames === undefined) {
+		const prefix = classNames ? `${classNames}-` : '';
+		const base = `${prefix}${type}`;
+		return { base, active: `${base}-active`, done: `${base}-done` };
+	}
+	return {
+		base: classNames[type],
+		active: classNames[`${type}Active`],
+		done: classNames[`${type}Done`],
+	};
+}
+
+function addClasses(node: Element | null | undefined, value: string | undefined) {
+	if (!node || !value) return;
+	for (const className of value.split(' ')) if (className) node.classList.add(className);
+}
+
+function removeClasses(node: Element | null | undefined, value: string | undefined) {
+	if (!node || !value) return;
+	for (const className of value.split(' ')) if (className) node.classList.remove(className);
+}
+
+export function CSSTransition(props: CSSTransitionProps) @{
+	const applied = useRef<AppliedClasses>({ appear: {}, enter: {}, exit: {} });
+	const node = () => props.nodeRef?.current;
+	const resolveEnterArguments = (maybeNode?: Element | boolean, maybeAppearing?: boolean) =>
+		props.nodeRef
+			? { node: props.nodeRef.current, appearing: maybeNode === true }
+			: { node: maybeNode as Element | undefined, appearing: maybeAppearing === true };
+
+	const clear = (type: TransitionType) => {
+		const current = applied.current[type];
+		removeClasses(node(), current.base);
+		removeClasses(node(), current.active);
+		removeClasses(node(), current.done);
+		applied.current[type] = {};
+	};
+
+	const add = (type: TransitionType, phase: Phase) => {
+		let className = classesFor(props.classNames, type)[phase];
+		if (type === 'appear' && phase === 'done') {
+			const enterDone = classesFor(props.classNames, 'enter').done;
+			if (enterDone) className = className ? `${className} ${enterDone}` : enterDone;
+		}
+		if (phase === 'active' && node()) forceReflow(node()!);
+		if (className) {
+			applied.current[type][phase] = className;
+			addClasses(node(), className);
+		}
+	};
+
+	const {
+		children,
+		classNames: _classNames,
+		onEnter,
+		onEntering,
+		onEntered,
+		onExit,
+		onExiting,
+		onExited,
+		...transitionProps
+	} = props;
+
+	<Transition
+		{...transitionProps}
+		onEnter={(maybeNode, maybeAppearing) => {
+			const { appearing } = resolveEnterArguments(maybeNode, maybeAppearing);
+			clear('exit');
+			add(appearing ? 'appear' : 'enter', 'base');
+			onEnter?.(maybeNode, maybeAppearing);
+		}}
+		onEntering={(maybeNode, maybeAppearing) => {
+			const { appearing } = resolveEnterArguments(maybeNode, maybeAppearing);
+			add(appearing ? 'appear' : 'enter', 'active');
+			onEntering?.(maybeNode, maybeAppearing);
+		}}
+		onEntered={(maybeNode, maybeAppearing) => {
+			const { appearing } = resolveEnterArguments(maybeNode, maybeAppearing);
+			const type = appearing ? 'appear' : 'enter';
+			clear(type);
+			add(type, 'done');
+			onEntered?.(maybeNode, maybeAppearing);
+		}}
+		onExit={(maybeNode) => {
+			clear('appear');
+			clear('enter');
+			add('exit', 'base');
+			onExit?.(maybeNode);
+		}}
+		onExiting={(maybeNode) => {
+			add('exit', 'active');
+			onExiting?.(maybeNode);
+		}}
+		onExited={(maybeNode) => {
+			clear('exit');
+			add('exit', 'done');
+			onExited?.(maybeNode);
+		}}
+	>{children}</Transition>
+}
+
+export default CSSTransition;

package/src/ReplaceTransition.tsrx

@@ -0,0 +1,44 @@
+import { Children, cloneElement, type ElementDescriptor } from 'octane';
+import TransitionGroup from './TransitionGroup.tsrx';
+import type { ReplaceTransitionProps, TransitionCallbacks } from './types.ts';
+
+export function ReplaceTransition(props: ReplaceTransitionProps) @{
+	const [first, second] = Children.toArray(props.children) as ElementDescriptor[];
+	if (!first || !second) throw new Error('"children" must be exactly two transition components.');
+
+	const lifecycle = (child: ElementDescriptor, name: keyof TransitionCallbacks) => (
+		...args: unknown[]
+	) => {
+		(child.props[name] as ((...values: unknown[]) => void) | undefined)?.(...args);
+		(props[name] as ((...values: unknown[]) => void) | undefined)?.(undefined);
+	};
+	const {
+		children: _children,
+		in: inProp,
+		onEnter: _onEnter,
+		onEntering: _onEntering,
+		onEntered: _onEntered,
+		onExit: _onExit,
+		onExiting: _onExiting,
+		onExited: _onExited,
+		...groupProps
+	} = props;
+	const selected =
+		inProp
+			? cloneElement(first, {
+					key: 'first',
+					onEnter: lifecycle(first, 'onEnter'),
+					onEntering: lifecycle(first, 'onEntering'),
+					onEntered: lifecycle(first, 'onEntered'),
+				})
+			: cloneElement(second, {
+					key: 'second',
+					onEnter: lifecycle(second, 'onExit'),
+					onEntering: lifecycle(second, 'onExiting'),
+					onEntered: lifecycle(second, 'onExited'),
+				});
+
+	<TransitionGroup {...groupProps} children={[selected]} />
+}
+
+export default ReplaceTransition;

package/src/SwitchTransition.tsrx

@@ -0,0 +1,105 @@
+import {
+	cloneElement,
+	isValidElement,
+	useLayoutEffect,
+	useRef,
+	useState,
+	type ElementDescriptor,
+} from 'octane';
+import { ENTERED, ENTERING, EXITING } from './Transition.tsrx';
+import TransitionGroupContext from './TransitionGroupContext.ts';
+import type { SwitchTransitionProps, TransitionCallbacks, TransitionStatus } from './types.ts';
+
+export const modes = { out: 'out-in', in: 'in-out' } as const;
+
+function different(a: ElementDescriptor | null, b: ElementDescriptor | null | undefined) {
+	if (a === b) return false;
+	return !(isValidElement(a) && isValidElement(b) && a.key != null && a.key === b.key);
+}
+
+function chain(element: ElementDescriptor, name: keyof TransitionCallbacks, callback: () => void) {
+	return (...args: unknown[]) => {
+		(element.props[name] as ((...values: unknown[]) => void) | undefined)?.(...args);
+		callback();
+	};
+}
+
+export function SwitchTransition(props: SwitchTransitionProps) @{
+	const appeared = useRef(false);
+	const status = useRef<TransitionStatus>(ENTERED);
+	const current = useRef<ElementDescriptor | null>(
+		props.children ? cloneElement(props.children, { in: true }) : null,
+	);
+	const [, rerender] = useState(0);
+	const pending = props.children ?? null;
+	const mode = props.mode ?? modes.out;
+
+	useLayoutEffect(() => {
+		appeared.current = true;
+	}, []);
+
+	if (!pending) {
+		current.current = null;
+		status.current = ENTERED;
+	} else if (status.current === ENTERING && mode === modes.in) {
+		// Keep the in-out pair stable until the entering child finishes.
+	} else if (current.current && different(current.current, pending)) {
+		status.current = EXITING;
+	} else {
+		current.current = cloneElement(pending, { in: true });
+	}
+
+	let output: unknown = current.current;
+	if (status.current === EXITING && current.current && pending) {
+		if (mode === modes.out) {
+			output = cloneElement(current.current, {
+				in: false,
+				onExited: chain(current.current, 'onExited', () => {
+					current.current = null;
+					status.current = ENTERING;
+					rerender((value) => value + 1);
+				}),
+			});
+		} else {
+			output = [
+				current.current,
+				cloneElement(pending, {
+					in: true,
+					onEntered: chain(pending, 'onEntered', () => {
+						status.current = ENTERING;
+						rerender((value) => value + 1);
+					}),
+				}),
+			];
+		}
+	} else if (status.current === ENTERING && pending) {
+		if (mode === modes.out) {
+			output = cloneElement(pending, {
+				in: true,
+				onEntered: chain(pending, 'onEntered', () => {
+					current.current = cloneElement(pending, { in: true });
+					status.current = ENTERED;
+					rerender((value) => value + 1);
+				}),
+			});
+		} else if (current.current) {
+			output = [
+				cloneElement(current.current, {
+					in: false,
+					onExited: chain(current.current, 'onExited', () => {
+						current.current = cloneElement(pending, { in: true });
+						status.current = ENTERED;
+						rerender((value) => value + 1);
+					}),
+				}),
+				cloneElement(pending, { in: true }),
+			];
+		}
+	}
+
+	<TransitionGroupContext.Provider
+		value={{ isMounting: !appeared.current }}
+	>{output}</TransitionGroupContext.Provider>
+}
+
+export default SwitchTransition;

package/src/Transition.tsrx

@@ -0,0 +1,267 @@
+import {
+	Children,
+	cloneElement,
+	flushSync,
+	isChildrenBlock,
+	useContext,
+	useLayoutEffect,
+	useRef,
+	useState,
+	type OctaneNode,
+} from 'octane';
+import config from './config.ts';
+import TransitionGroupContext from './TransitionGroupContext.ts';
+import type {
+	TransitionComponent,
+	TransitionProps,
+	TransitionStatus,
+	TransitionTimeout,
+} from './types.ts';
+import { forceReflow } from './utils/reflow.ts';
+
+export const UNMOUNTED = 'unmounted';
+export const EXITED = 'exited';
+export const ENTERING = 'entering';
+export const ENTERED = 'entered';
+export const EXITING = 'exiting';
+
+function getTimeouts(timeout: TransitionTimeout | undefined) {
+	if (typeof timeout === 'number' || timeout === undefined) {
+		return { appear: timeout, enter: timeout, exit: timeout };
+	}
+	return {
+		appear: timeout.appear === undefined ? timeout.enter : timeout.appear,
+		enter: timeout.enter,
+		exit: timeout.exit,
+	};
+}
+
+function callEnterCallback(
+	callback: TransitionProps['onEnter'],
+	nodeRef: TransitionProps['nodeRef'],
+	node: Element | undefined,
+	appearing: boolean,
+) {
+	if (nodeRef) (callback as ((isAppearing: boolean) => void) | undefined)?.(appearing);
+	else callback?.(node, appearing);
+}
+
+function TransitionImpl(props: TransitionProps) @{
+	const group = useContext(TransitionGroupContext);
+	const latestProps = useRef(props);
+	latestProps.current = props;
+	const initial = useRef<
+		{ status: TransitionStatus; appearStatus: TransitionStatus | null } | null
+	>(null);
+	if (initial.current === null) {
+		const appearing =
+			group && !group.isMounting ? props.enter !== false : props.appear === true;
+		if (props.in) {
+			initial.current = appearing
+				? { status: EXITED, appearStatus: ENTERING }
+				: { status: ENTERED, appearStatus: null };
+		} else {
+			initial.current = {
+				status: props.unmountOnExit || props.mountOnEnter ? UNMOUNTED : EXITED,
+				appearStatus: null,
+			};
+		}
+	}
+
+	const [status, setStatus] = useState<TransitionStatus>(initial.current.status);
+	const mounted = useRef(false);
+	const generation = useRef(0);
+	const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const previousIn = useRef(props.in === true);
+	// Upstream calls onEntering/onExiting/onEntered/onExited from setState
+	// callbacks so the committed status is observable. Schedule those after the
+	// matching status commit instead of firing them synchronously with setState.
+	const pendingPhase = useRef<{ status: TransitionStatus; run: () => void } | null>(null);
+
+	const cancelPending = () => {
+		generation.current += 1;
+		pendingPhase.current = null;
+		if (timer.current !== null) {
+			clearTimeout(timer.current);
+			timer.current = null;
+		}
+	};
+
+	const finishAfter = (timeout: number | undefined, done: () => void) => {
+		const run = generation.current;
+		let active = true;
+		const finish = () => {
+			if (!active || run !== generation.current || !mounted.current) return;
+			active = false;
+			timer.current = null;
+			done();
+		};
+		const live = latestProps.current;
+		const node = live.nodeRef?.current ?? undefined;
+		if (live.nodeRef && !node) {
+			timer.current = setTimeout(finish, 0);
+			return;
+		}
+		if (live.addEndListener) {
+			if (live.nodeRef) (live.addEndListener as (done: () => void) => void)(finish);
+			else if (node) (live.addEndListener as (node: Element, done: () => void) => void)(
+				node,
+				finish,
+			);
+		}
+		if (active && timeout !== undefined) timer.current = setTimeout(finish, timeout);
+		else if (active && (!live.addEndListener || !node)) timer.current = setTimeout(finish, 0);
+	};
+
+	const commitStatus = (next: TransitionStatus, run: () => void) => {
+		pendingPhase.current = { status: next, run };
+		setStatus(next);
+	};
+
+	// Final ENTERED/EXITED completions must run before the current timeout
+	// callback yields — otherwise fake-timer suites can fire a slower
+	// addEndListener in the same runAllTimers pass before onEntered.
+	const commitStatusNow = (next: TransitionStatus, run: () => void) => {
+		pendingPhase.current = { status: next, run };
+		flushSync(function applyStatus() {
+			setStatus(next);
+		});
+		if (pendingPhase.current && pendingPhase.current.status === next) {
+			const pending = pendingPhase.current;
+			pendingPhase.current = null;
+			pending.run();
+		}
+	};
+
+	const performEnter = (mounting: boolean) => {
+		cancelPending();
+		const appearing = group ? group.isMounting : mounting;
+		const node = props.nodeRef?.current ?? undefined;
+		if (!mounting && props.enter === false || config.disabled) {
+			commitStatus(ENTERED, function afterEntered() {
+				const live = latestProps.current;
+				callEnterCallback(live.onEntered, live.nodeRef, node, appearing);
+			});
+			return;
+		}
+		callEnterCallback(props.onEnter, props.nodeRef, node, appearing);
+		const timeouts = getTimeouts(props.timeout);
+		commitStatus(ENTERING, function afterEntering() {
+			const live = latestProps.current;
+			callEnterCallback(live.onEntering, live.nodeRef, node, appearing);
+			finishAfter(appearing ? timeouts.appear : timeouts.enter, function enterDone() {
+				commitStatusNow(ENTERED, function afterEntered() {
+					const live = latestProps.current;
+					callEnterCallback(live.onEntered, live.nodeRef, node, appearing);
+				});
+			});
+		});
+	};
+
+	const performExit = () => {
+		cancelPending();
+		const node = props.nodeRef?.current ?? undefined;
+		if (props.exit === false || config.disabled) {
+			commitStatus(EXITED, function afterExited() {
+				const live = latestProps.current;
+				live.onExited?.(live.nodeRef ? undefined : node);
+			});
+			return;
+		}
+		props.onExit?.(props.nodeRef ? undefined : node);
+		commitStatus(EXITING, function afterExiting() {
+			const live = latestProps.current;
+			live.onExiting?.(live.nodeRef ? undefined : node);
+			finishAfter(getTimeouts(live.timeout).exit, function exitDone() {
+				commitStatusNow(EXITED, function afterExited() {
+					const live = latestProps.current;
+					live.onExited?.(live.nodeRef ? undefined : node);
+				});
+			});
+		});
+	};
+
+	useLayoutEffect(() => {
+		mounted.current = true;
+		if (initial.current!.appearStatus === ENTERING) {
+			initial.current!.appearStatus = null;
+			performEnter(true);
+		}
+		return () => {
+			mounted.current = false;
+			cancelPending();
+		};
+	}, []);
+
+	useLayoutEffect(() => {
+		const nextIn = props.in === true;
+		if (nextIn !== previousIn.current) {
+			if (nextIn) {
+				if (status === UNMOUNTED) {
+					setStatus(EXITED);
+					return;
+				}
+				previousIn.current = true;
+				if (props.unmountOnExit || props.mountOnEnter) {
+					const node = props.nodeRef?.current;
+					if (node) forceReflow(node);
+				}
+				performEnter(false);
+			} else if (status === ENTERING || status === ENTERED) {
+				previousIn.current = false;
+				performExit();
+			} else {
+				previousIn.current = false;
+			}
+		} else if (!nextIn && props.unmountOnExit && status === EXITED) {
+			setStatus(UNMOUNTED);
+		}
+	}, null);
+
+	useLayoutEffect(() => {
+		const pending = pendingPhase.current;
+		if (pending && pending.status === status) {
+			pendingPhase.current = null;
+			pending.run();
+		}
+	}, [status]);
+
+	let rendered: OctaneNode = null;
+	if (status !== UNMOUNTED) {
+		const {
+			children,
+			in: _in,
+			mountOnEnter: _mountOnEnter,
+			unmountOnExit: _unmountOnExit,
+			appear: _appear,
+			enter: _enter,
+			exit: _exit,
+			timeout: _timeout,
+			addEndListener: _addEndListener,
+			onEnter: _onEnter,
+			onEntering: _onEntering,
+			onEntered: _onEntered,
+			onExit: _onExit,
+			onExiting: _onExiting,
+			onExited: _onExited,
+			nodeRef: _nodeRef,
+			...childProps
+		} = props;
+		rendered = typeof children === 'function' && !isChildrenBlock(children)
+			? children(status, childProps)
+			: isChildrenBlock(children)
+				? children
+				: cloneElement(Children.only(children), childProps);
+	}
+
+	<TransitionGroupContext.Provider value={null}>{rendered}</TransitionGroupContext.Provider>
+}
+
+export const Transition = TransitionImpl as unknown as TransitionComponent;
+Transition.UNMOUNTED = UNMOUNTED;
+Transition.EXITED = EXITED;
+Transition.ENTERING = ENTERING;
+Transition.ENTERED = ENTERED;
+Transition.EXITING = EXITING;
+
+export default Transition;

package/src/TransitionGroup.tsrx

@@ -0,0 +1,70 @@
+import { createElement, useLayoutEffect, useRef, useState, type ElementDescriptor } from 'octane';
+import TransitionGroupContext from './TransitionGroupContext.ts';
+import type { TransitionGroupProps } from './types.ts';
+import {
+	getChildMapping,
+	getInitialChildMapping,
+	getNextChildMapping,
+	type ChildMapping,
+} from './utils/ChildMapping.ts';
+
+export function TransitionGroup(props: TransitionGroupProps) @{
+	const mounted = useRef(false);
+	const first = useRef(true);
+	const mapping = useRef<ChildMapping>({});
+	const children = useRef(props.children);
+	const [isMounting, setIsMounting] = useState(true);
+	const [, rerender] = useState(0);
+
+	// Match upstream TransitionGroup.handleExited: read live children, forward
+	// onExited, then delete only if the key was not synchronously re-added.
+	// A sync re-add re-renders and rebuilds mapping; deleting afterward would
+	// drop that survivor and force a second enter on the next pass.
+	const handleExited = function handleExited(child: ElementDescriptor, node?: Element) {
+		if (String(child.key) in getChildMapping(children.current)) return;
+		(child.props.onExited as ((node?: Element) => void) | undefined)?.(node);
+		if (String(child.key) in getChildMapping(children.current)) return;
+		if (mounted.current) {
+			delete mapping.current[String(child.key)];
+			rerender(function bump(value: number) {
+				return value + 1;
+			});
+		}
+	};
+
+	if (first.current) {
+		mapping.current = getInitialChildMapping(props, handleExited);
+		children.current = props.children;
+		first.current = false;
+	} else {
+		mapping.current = getNextChildMapping(props, mapping.current, handleExited);
+		children.current = props.children;
+	}
+
+	useLayoutEffect(() => {
+		mounted.current = true;
+		setIsMounting(false);
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+
+	const {
+		children: _children,
+		component = 'div',
+		childFactory = (child: ElementDescriptor) => child,
+		appear: _appear,
+		enter: _enter,
+		exit: _exit,
+		...wrapperProps
+	} = props;
+	const renderedChildren = Object.values(mapping.current).map(childFactory);
+	const output =
+		component === null
+			? renderedChildren
+			: createElement(component, wrapperProps, ...renderedChildren);
+
+	<TransitionGroupContext.Provider value={{ isMounting }}>{output}</TransitionGroupContext.Provider>
+}
+
+export default TransitionGroup;

package/src/TransitionGroupContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'octane';
+
+export interface TransitionGroupContextValue {
+	isMounting: boolean;
+}
+
+const TransitionGroupContext = createContext<TransitionGroupContextValue | null>(null);
+
+export default TransitionGroupContext;

package/src/config.ts

@@ -0,0 +1,3 @@
+const config = { disabled: false };
+
+export default config;

package/src/index.ts

@@ -0,0 +1,19 @@
+export { default as CSSTransition } from './CSSTransition.tsrx';
+export { default as ReplaceTransition } from './ReplaceTransition.tsrx';
+export { default as SwitchTransition } from './SwitchTransition.tsrx';
+export { default as TransitionGroup } from './TransitionGroup.tsrx';
+export { default as Transition } from './Transition.tsrx';
+export { default as config } from './config.ts';
+
+export type {
+	CSSClassNames,
+	CSSTransitionProps,
+	ReplaceTransitionProps,
+	SwitchTransitionProps,
+	TransitionCallbacks,
+	TransitionGroupProps,
+	TransitionNodeRef,
+	TransitionProps,
+	TransitionStatus,
+	TransitionTimeout,
+} from './types.ts';

package/src/types.ts

@@ -0,0 +1,77 @@
+import type { ComponentBody, ElementDescriptor, OctaneNode } from 'octane';
+
+export type TransitionStatus = 'unmounted' | 'exited' | 'entering' | 'entered' | 'exiting';
+export type TransitionTimeout = number | { appear?: number; enter?: number; exit?: number };
+export type TransitionNodeRef = { current: HTMLElement | null };
+
+export interface TransitionCallbacks {
+	onEnter?: (...args: any[]) => void;
+	onEntering?: (...args: any[]) => void;
+	onEntered?: (...args: any[]) => void;
+	onExit?: (...args: any[]) => void;
+	onExiting?: (...args: any[]) => void;
+	onExited?: (...args: any[]) => void;
+}
+
+export interface TransitionProps extends TransitionCallbacks {
+	children?:
+		| ElementDescriptor
+		| ((status: TransitionStatus, childProps?: Record<string, unknown>) => OctaneNode);
+	in?: boolean;
+	mountOnEnter?: boolean;
+	unmountOnExit?: boolean;
+	appear?: boolean;
+	enter?: boolean;
+	exit?: boolean;
+	timeout?: TransitionTimeout;
+	addEndListener?: (...args: any[]) => void;
+	nodeRef?: TransitionNodeRef;
+	[key: string]: unknown;
+}
+
+export type TransitionComponent = ComponentBody<TransitionProps> & {
+	UNMOUNTED: 'unmounted';
+	EXITED: 'exited';
+	ENTERING: 'entering';
+	ENTERED: 'entered';
+	EXITING: 'exiting';
+};
+
+export type CSSClassNames =
+	| string
+	| {
+			appear?: string;
+			appearActive?: string;
+			appearDone?: string;
+			enter?: string;
+			enterActive?: string;
+			enterDone?: string;
+			exit?: string;
+			exitActive?: string;
+			exitDone?: string;
+	  };
+
+export interface CSSTransitionProps extends TransitionProps {
+	classNames?: CSSClassNames;
+}
+
+export interface TransitionGroupProps {
+	children?: OctaneNode;
+	component?: ComponentBody<any> | ((props: any) => unknown) | string | null;
+	childFactory?: (child: ElementDescriptor) => ElementDescriptor;
+	appear?: boolean;
+	enter?: boolean;
+	exit?: boolean;
+	[key: string]: unknown;
+}
+
+export interface SwitchTransitionProps {
+	children?: ElementDescriptor | null;
+	mode?: 'out-in' | 'in-out';
+}
+
+export interface ReplaceTransitionProps extends TransitionCallbacks {
+	children: OctaneNode;
+	in: boolean;
+	[key: string]: unknown;
+}

package/src/utils/ChildMapping.ts

@@ -0,0 +1,112 @@
+import {
+	Children,
+	cloneElement,
+	isValidElement,
+	type ElementDescriptor,
+	type OctaneNode,
+} from 'octane';
+import type { TransitionGroupProps } from '../types.ts';
+
+export type ChildMapping = Record<string, ElementDescriptor>;
+
+export function getChildMapping(
+	children: OctaneNode,
+	mapFn?: (child: ElementDescriptor) => ElementDescriptor,
+): ChildMapping {
+	const result = Object.create(null) as ChildMapping;
+	for (const child of Children.toArray(children)) {
+		if (!isValidElement(child)) continue;
+		const mapped = mapFn ? mapFn(child) : child;
+		result[String(mapped.key)] = mapped;
+	}
+	return result;
+}
+
+export function mergeChildMappings(prev: ChildMapping = {}, next: ChildMapping = {}): ChildMapping {
+	const getValue = (key: string) => (key in next ? next[key] : prev[key]);
+	const pendingBefore: Record<string, string[]> = Object.create(null);
+	let pending: string[] = [];
+	for (const key of Object.keys(prev)) {
+		if (key in next) {
+			if (pending.length) {
+				pendingBefore[key] = pending;
+				pending = [];
+			}
+		} else pending.push(key);
+	}
+	const merged: ChildMapping = {};
+	for (const key of Object.keys(next)) {
+		for (const waiting of pendingBefore[key] ?? []) merged[waiting] = getValue(waiting);
+		merged[key] = getValue(key);
+	}
+	for (const key of pending) merged[key] = getValue(key);
+	return merged;
+}
+
+function inherited(
+	child: ElementDescriptor,
+	name: 'appear' | 'enter' | 'exit',
+	props: TransitionGroupProps,
+) {
+	return props[name] == null ? child.props[name] : props[name];
+}
+
+export function getInitialChildMapping(
+	props: TransitionGroupProps,
+	onExited: (child: ElementDescriptor, node?: Element) => void,
+) {
+	return getChildMapping(props.children, (child) =>
+		cloneElement(child, {
+			appear: inherited(child, 'appear', props),
+			enter: inherited(child, 'enter', props),
+			exit: inherited(child, 'exit', props),
+			in: true,
+			onExited: (node?: Element) => onExited(child, node),
+		}),
+	);
+}
+
+export function getNextChildMapping(
+	nextProps: TransitionGroupProps,
+	previous: ChildMapping,
+	onExited: (child: ElementDescriptor, node?: Element) => void,
+) {
+	const next = getChildMapping(nextProps.children);
+	const children = mergeChildMappings(previous, next);
+	for (const key of Object.keys(children)) {
+		const child = children[key];
+		const hasPrevious = key in previous;
+		const hasNext = key in next;
+		const previousChild = previous[key];
+		const isLeaving = isValidElement(previousChild) && previousChild.props.in === false;
+		if (hasNext && (!hasPrevious || isLeaving)) {
+			children[key] = cloneElement(child, {
+				enter: inherited(child, 'enter', nextProps),
+				exit: inherited(child, 'exit', nextProps),
+				in: true,
+				onExited: (node?: Element) => onExited(child, node),
+			});
+		} else if (!hasNext && hasPrevious && !isLeaving) {
+			// Apply the group's current exit/enter flags when a child begins
+			// leaving so switching TransitionGroup.exit from false → true keeps
+			// the outgoing node for the exit transition (upstream only sets
+			// `in: false`, which leaves a stale exit=false from the prior enter).
+			// Do not rebind onExited: the enter-time handleExited wrapper must
+			// remain so TransitionGroup.handleExited can forward to the user's
+			// original callback instead of calling itself again.
+			children[key] = cloneElement(child, {
+				in: false,
+				enter: inherited(child, 'enter', nextProps),
+				exit: inherited(child, 'exit', nextProps),
+			});
+		} else if (hasNext && hasPrevious && isValidElement(previousChild)) {
+			children[key] = cloneElement(child, {
+				enter: inherited(child, 'enter', nextProps),
+				exit: inherited(child, 'exit', nextProps),
+				in: previousChild.props.in,
+				onExited: (node?: Element) => onExited(child, node),
+			});
+		}
+	}
+	return children;
+}

package/src/utils/reflow.ts

@@ -0,0 +1,3 @@
+export function forceReflow(node: Element): number {
+	return (node as HTMLElement).scrollTop;
+}

package/status.json

@@ -0,0 +1,15 @@
+{
+  "upstream": {
+    "package": "react-transition-group",
+    "version": "4.4.5",
+    "commit": "4cb51a9be0ebf508cb8f6506452097f7ebb874fe"
+  },
+  "surface": "Transition, CSSTransition, TransitionGroup, SwitchTransition, ReplaceTransition, config, and their documented subpath exports.",
+  "divergences": [
+    "Octane does not implement ReactDOM.findDOMNode; DOM-aware callbacks and CSSTransition require nodeRef.",
+    "TransitionGroup collections must be supplied as inspectable descriptor values, normally with children={items.map(...)}; compiler-generated opaque children blocks cannot be enumerated.",
+    "The complete pinned upstream suite runs unchanged as the pristine Jest oracle; adapted Octane lanes cover the public export surface, DOM transition behavior, switch and replacement sequencing, keyed groups, nodeRef semantics, mount-on-enter sequencing, and server rendering, and are not yet a one-for-one port of every upstream case."
+  ],
+  "ssr": "Transition state and wrapper markup render on the server; DOM class mutation begins only after client mount and requires nodeRef.",
+  "verified": "2026-08-09"
+}