@octanejs/tanstack-router 0.2.9 → 0.3.0

package/src/compiled/Link.tsrx

@@ -3,10 +3,8 @@
 import { createUseLinkProps } from '../linkBinding';
 import { createLinkComponent } from '../linkComponent.tsrx';
 import { useRouter } from './bindings';
-import type { createLink as StandardCreateLink } from '../link';
+import type { createLink as StandardCreateLink } from '../linkApi';
 
-// The shared hook intentionally retains flushSync's synchronous navigation cue.
-// The compiled entry does not relax its observable event timing.
 export const useLinkProps = createUseLinkProps(useRouter);
 export const Link = createLinkComponent(useLinkProps);
 

package/src/compiled/Matches.tsrx

@@ -1,34 +1,31 @@
+'use strong';
+
 import {
+	__runOnCatch,
 	CompiledOutlet as CompiledComponent,
 	CompiledContext,
+	Hydrate,
+	trustHTML,
 	useContext,
 	useLayoutEffect,
 	useRef,
 } from 'octane';
-import type { NotFoundError } from '@tanstack/router-core';
-import { hasKeys, isNotFound, rootRouteId, setupScrollRestoration } from '@tanstack/router-core';
-import { getScrollRestorationScriptForRouter } from '@tanstack/router-core/scroll-restoration-script';
+import { never } from 'octane/hydration';
+import type { AnyRouter, NotFoundError } from '@tanstack/router-core';
+import { isNotFound, rootRouteId, setupScrollRestoration } from '@tanstack/router-core';
 import { isServer } from '@tanstack/router-core/isServer';
+import { getScrollRestorationScriptForRouter } from '@tanstack/router-core/scroll-restoration-script';
 import { routerContext, matchContext, useRouter } from './bindings';
 import { useStore } from '../useStore';
-import { useTransitioner, settleOwner } from '../Transitioner.tsrx';
+import { useTransitioner, usePresentedMatches } from '../Transitioner.tsrx';
 import { useHydrated } from '../ClientOnly.tsrx';
-import { ErrorComponent } from '../CatchBoundary.tsrx';
-import { createLazyRouteLoader } from '../lazyRouteLoader';
-import type { RouterProps } from '../RouterProvider.tsrx';
+import { ErrorComponent } from '../ErrorComponent.tsrx';
 
-export function CompiledRouterProvider(props: RouterProps) @{
-	const { router, ...rest } = props;
-	if (hasKeys(rest)) {
-		router.update({
-			...router.options,
-			...rest,
-			context: { ...router.options.context, ...rest.context },
-		});
-	}
+export function PreconfiguredRouterProvider(props: { router: AnyRouter }) @{
+	const router = props.router;
 	if (router.options.Wrap || router.options.InnerWrap) {
 		throw new Error(
-			'CompiledRouterProvider does not accept Wrap or InnerWrap. Use RouterProvider for renderable wrappers.',
+			'Compiled providers do not accept Wrap or InnerWrap. Use RouterProvider from @octanejs/tanstack-router for renderable wrappers.',
 		);
 	}
 	<CompiledContext context={routerContext} value={router}>
@@ -36,41 +33,36 @@ export function CompiledRouterProvider(props: RouterProps) @{
 	</CompiledContext>
 }
 
-function CompiledWrap(props: { component?: any; children?: unknown }) @{
-	@if (props.component) {
-		<CompiledComponent component={props.component} props={{ children: props.children }} />
-	} @else {
-		<>{props.children}</>
-	}
+function setupRouterScrollRestoration(router: AnyRouter) {
+	if (router.options.scrollRestoration) setupScrollRestoration(router);
 }
 
 function CompiledMatches() @{
 	const router = useRouter();
 	const rootRoute = (router.routesById as any)[rootRouteId];
-	useLayoutEffect(() => {
-		if (router.options.scrollRestoration) setupScrollRestoration(router);
-	}, [router]);
-	const expectedMatches = useTransitioner(router);
+	useLayoutEffect(() => setupRouterScrollRestoration(router));
+	useTransitioner(router);
 	@try {
-		<CompiledMatchesInner expectedMatches={expectedMatches} />
+		<CompiledMatchesInner />
 	} @pending {
 		<CompiledPending route={rootRoute} />
 	} @catch (error, reset) {
 		if (router.options.disableGlobalCatchBoundary) throw error;
-		<CompiledFailure error={error} reset={reset} route={rootRoute} global={true} />
+		const failure = resolveFailure(error, rootRoute, router, true);
+		<CompiledFailure
+			error={error}
+			reset={reset}
+			route={rootRoute}
+			router={router}
+			failure={failure}
+		/>
 	}
 }
 
-function CompiledMatchesInner(props: { expectedMatches: unknown }) @{
+function CompiledMatchesInner() @{
 	const router = useRouter();
-	const acknowledgement: Array<any> = ((router as any)._rendered ??= []);
-	const matches = useStore(router.stores.matches, (m: any) =>
-		acknowledgement[0] === props.expectedMatches ? (props.expectedMatches ?? m) : m,
-	) as any;
+	const matches = usePresentedMatches(router);
 	const rootMatch = matches[0];
-	useLayoutEffect(() => {
-		if (acknowledgement[0] === matches) settleOwner(acknowledgement, true);
-	}, [acknowledgement, matches]);
 	@if (rootMatch) {
 		<CompiledContext context={matchContext} value={rootMatch.routeId}>
 			<CompiledMatch routeId={rootMatch.routeId} />
@@ -78,7 +70,31 @@ function CompiledMatchesInner(props: { expectedMatches: unknown }) @{
 	}
 }
 
-function CompiledMatch(props: { routeId: string }) @{
+function CompiledPending(props: { route?: any; waitForTransition?: boolean }) @{
+	const router = useRouter();
+	if (props.waitForTransition) {
+		// Observe the transaction with the pending match it owns, not through the
+		// stable router identity during Strong render.
+		const transition = useStore(router.stores.getMatchStore(props.route.id), () => router._tx?.[5]);
+		if (transition) throw transition;
+	}
+	const Pending = props.route?.options.pendingComponent ?? router.options.defaultPendingComponent;
+	@if (Pending) {
+		<CompiledComponent component={Pending} props={{}} />
+	}
+}
+
+// Route IDs enter this tree from published match snapshots. Router-core has
+// already created their stable presentation stores before notifying readers.
+function CompiledWrap(props: { component?: any; children?: unknown }) @{
+	@if (props.component) {
+		<CompiledComponent component={props.component} props={{ children: props.children }} />
+	} @else {
+		<>{props.children}</>
+	}
+}
+
+export function CompiledMatch(props: { routeId: string }) @{
 	const router = useRouter();
 	const store = router.stores.getMatchStore(props.routeId);
 	const ssr = useStore(store, (match: any) => match.ssr);
@@ -107,16 +123,88 @@ function CompiledMatch(props: { routeId: string }) @{
 	</CompiledWrap>
 }
 
+function CompiledScrollRestoration() @{
+	const router = useRouter();
+	const hydrated = useHydrated();
+	const option = router.options.scrollRestoration;
+	const script = getScrollRestorationScriptForRouter(router);
+	// Keep the location predicate live: the router identity survives location changes.
+	let rendersScript = true;
+	if (typeof option === 'function') rendersScript = option({ location: router.latestLocation });
+	@if ((script !== null || rendersScript) && ((isServer ?? router.isServer) || !hydrated)) {
+		<Hydrate split={false} when={never()}>
+			<script nonce={router.options.ssr?.nonce} dangerouslySetInnerHTML={trustHTML(script ?? '')} />
+		</Hydrate>
+	}
+}
+
 // Without a configured Suspense boundary, both lazy imports and loader promises
 // pass through to the next ancestor boundary. The match still owns its errors.
 function CompiledMatchContent(props: { route: any; routeId: string; noSsr: boolean }) @{
 	@try {
 		<CompiledMatchInner routeId={props.routeId} noSsr={props.noSsr} />
 	} @catch (error, reset) {
-		<CompiledFailure error={error} reset={reset} route={props.route} />
+		const router = useRouter();
+		const failure = resolveFailure(error, props.route, router, false);
+		<CompiledFailure
+			error={error}
+			reset={reset}
+			route={props.route}
+			router={router}
+			failure={failure}
+		/>
 	}
 }
 
+function resolveFailure(error: any, route: any, router: AnyRouter, global: boolean) {
+	const errorComponent = global
+		? ErrorComponent
+		: (route.options.errorComponent ?? router.options.defaultErrorComponent);
+	const notFoundComponent = route.isRoot
+		? (route.options.notFoundComponent ?? router.options.notFoundRoute?.options.component)
+		: route.options.notFoundComponent;
+	const missing = isNotFound(error);
+	if (missing) {
+		error.routeId ??= route.id;
+		if (!notFoundComponent || error.routeId !== route.id) throw error;
+	} else {
+		if (!errorComponent) throw error;
+		// The compatibility owner initializes its reported-error ref to null.
+		if (!global && error !== null) {
+			__runOnCatch(() => {
+				const onCatch = route.options.onCatch ?? router.options.defaultOnCatch;
+				onCatch?.(error, { componentStack: '' });
+			});
+		}
+	}
+	return { component: missing ? notFoundComponent : errorComponent, missing };
+}
+
+function CompiledFailure(props: {
+	error: any;
+	reset: () => void;
+	route: any;
+	router: AnyRouter;
+	failure: ReturnType<typeof resolveFailure>;
+}) @{
+	const match = useStore(props.router.stores.getMatchStore(props.route.id), (value: any) => value);
+	const firstMatch = useRef(match);
+	useLayoutEffect(() => {
+		if (firstMatch.current !== match) {
+			firstMatch.current = match;
+			props.reset();
+		}
+	});
+	<CompiledComponent
+		component={props.failure.component}
+		props={
+			props.failure.missing
+				? props.error
+				: { error: props.error, reset: props.reset, info: { componentStack: '' } }
+		}
+	/>
+}
+
 function CompiledMatchInner(props: { routeId: string; noSsr: boolean }) @{
 	const router = useRouter();
 	const match = useStore(router.stores.getMatchStore(props.routeId), (m: any) => m);
@@ -131,11 +219,8 @@ function CompiledMatchInner(props: { routeId: string; noSsr: boolean }) @{
 		search: match._strictSearch,
 	});
 	const key = remountDeps ? JSON.stringify(remountDeps) : undefined;
-	if (match.status === 'pending' && !props.noSsr && (router as any)._tx) {
-		throw (router as any)._tx[5];
-	}
 	@if ((props.noSsr && !hydrated) || match.status === 'pending') {
-		<CompiledPending route={route} />
+		<CompiledPending route={route} waitForTransition={match.status === 'pending' && !props.noSsr} />
 	} @else if (match.status === 'notFound') {
 		<CompiledNotFound route={route} error={match.error} />
 	} @else if (match.status === 'error') {
@@ -187,14 +272,6 @@ export function CompiledOutlet() @{
 	}
 }
 
-function CompiledPending(props: { route?: any }) @{
-	const router = useRouter();
-	const Pending = props.route?.options.pendingComponent ?? router.options.defaultPendingComponent;
-	@if (Pending) {
-		<CompiledComponent component={Pending} props={{}} />
-	}
-}
-
 function CompiledNotFound(props: { route: any; error?: NotFoundError }) @{
 	const router = useRouter();
 	const NotFound = props.route.options.notFoundComponent ?? router.options.defaultNotFoundComponent;
@@ -204,72 +281,3 @@ function CompiledNotFound(props: { route: any; error?: NotFoundError }) @{
 		<p>Not Found</p>
 	}
 }
-
-function CompiledFailure(props: { error: any; reset: () => void; route: any; global?: boolean }) @{
-	const router = useRouter();
-	const errorComponent = props.global
-		? ErrorComponent
-		: (props.route.options.errorComponent ?? router.options.defaultErrorComponent);
-	const notFoundComponent = props.route.isRoot
-		? (props.route.options.notFoundComponent ?? router.options.notFoundRoute?.options.component)
-		: props.route.options.notFoundComponent;
-	const isMissing = isNotFound(props.error);
-	if (isMissing) {
-		const missing = props.error as NotFoundError;
-		missing.routeId ??= props.route.id;
-		if (!notFoundComponent || missing.routeId !== props.route.id) throw missing;
-	} else if (!errorComponent) {
-		throw props.error;
-	}
-
-	// Report an error only at the boundary that owns it and retry after its
-	// TanStack match identity changes, just like the normal binding.
-	const reported = useRef<unknown>(null);
-	if (!isMissing && !props.global && reported.current !== props.error) {
-		reported.current = props.error;
-		const onCatch = props.route.options.onCatch ?? router.options.defaultOnCatch;
-		onCatch?.(props.error, { componentStack: '' });
-	}
-	const store = router.stores.getMatchStore(props.route.id);
-	const match = useStore(store, (m: any) => m);
-	const firstMatch = useRef(match);
-	useLayoutEffect(() => {
-		if (firstMatch.current !== match) {
-			firstMatch.current = match;
-			props.reset();
-		}
-	}, [match]);
-
-	@if (isMissing) {
-		<CompiledComponent component={notFoundComponent} props={props.error} />
-	} @else {
-		<CompiledComponent
-			component={errorComponent}
-			props={{ error: props.error, reset: props.reset, info: { componentStack: '' } }}
-		/>
-	}
-}
-
-function CompiledScrollRestoration() @{
-	const router = useRouter();
-	const hydrated = useHydrated();
-	const option = router.options.scrollRestoration;
-	const script = getScrollRestorationScriptForRouter(router);
-	const rendersScript = typeof option !== 'function' || option({ location: router.latestLocation });
-	@if ((script !== null || rendersScript) && ((isServer ?? router.isServer) || !hydrated)) {
-		<script
-			nonce={router.options.ssr?.nonce}
-			suppressHydrationWarning
-			dangerouslySetInnerHTML={{ __html: script ?? '' }}
-		/>
-	}
-}
-
-export function lazyCompiledRouteComponent(importer: () => Promise<any>, exportName?: string) {
-	const loader = createLazyRouteLoader(importer, exportName);
-	function Lazy(props: any) @{
-		<CompiledComponent component={loader.read()} props={props} />
-	}
-	Lazy.preload = loader.preload;
-	return Lazy;
-}

package/src/compiled/RouterProvider.tsrx

@@ -0,0 +1,27 @@
+import { CompiledOutlet as CompiledComponent } from 'octane';
+import { hasKeys } from '@tanstack/router-core';
+import { createLazyRouteLoader } from '../lazyRouteLoader';
+import type { RouterProps } from '../RouterProvider.tsrx';
+import { PreconfiguredRouterProvider } from './Matches.tsrx';
+
+export function CompiledRouterProvider(props: RouterProps) @{
+	const { router, ...rest } = props;
+	// Option props must apply before descendants render, including during SSR.
+	if (hasKeys(rest)) {
+		router.update({
+			...router.options,
+			...rest,
+			context: { ...router.options.context, ...rest.context },
+		});
+	}
+	<PreconfiguredRouterProvider router={router} />
+}
+
+export function lazyCompiledRouteComponent(importer: () => Promise<any>, exportName?: string) {
+	const loader = createLazyRouteLoader(importer, exportName);
+	function Lazy(props: any) @{
+		<CompiledComponent component={loader.read()} props={props} />
+	}
+	Lazy.preload = loader.preload;
+	return Lazy;
+}

package/src/compiled.ts

@@ -37,13 +37,16 @@ export {
 } from './compiled/bindings';
 export type { UseRouterStateOptions, UseRouterStateResult } from './routerStateBinding';
 export {
-	CompiledRouterProvider,
-	CompiledRouterProvider as RouterProvider,
 	CompiledOutlet,
 	CompiledOutlet as Outlet,
+	PreconfiguredRouterProvider,
+} from './compiled/Matches.tsrx';
+export {
+	CompiledRouterProvider,
+	CompiledRouterProvider as RouterProvider,
 	lazyCompiledRouteComponent,
 	lazyCompiledRouteComponent as lazyRouteComponent,
-} from './compiled/Matches.tsrx';
+} from './compiled/RouterProvider.tsrx';
 export {
 	createRoute,
 	createRootRoute,

package/src/core.ts

@@ -0,0 +1,8 @@
+export * from '@tanstack/router-core';
+export { Router, createRouter } from './router';
+export {
+	createHistory,
+	createBrowserHistory,
+	createHashHistory,
+	createMemoryHistory,
+} from './history';

package/src/externalHydration.ts

@@ -2,8 +2,8 @@ const EXTERNAL_HYDRATION_PROMISE = Symbol.for('octane.external-hydration-promise
 
 type ExternalHydrationThenable<T> = PromiseLike<T> & {
 	[EXTERNAL_HYDRATION_PROMISE]: true;
-	status?: ThenableStatus;
-	value?: T;
+	status?: ThenableStatus | undefined;
+	value?: T | undefined;
 	reason?: unknown;
 };
 

package/src/fileRoute.ts

@@ -70,7 +70,7 @@ export class FileRoute<
 	TPath extends RouteConstraints['TPath'] = FileRoutesByPath[TFilePath]['path'],
 	TFullPath extends RouteConstraints['TFullPath'] = FileRoutesByPath[TFilePath]['fullPath'],
 > {
-	silent?: boolean;
+	silent?: boolean | undefined;
 
 	constructor(
 		public path?: TFilePath,

package/src/headContentBinding.ts

@@ -111,10 +111,11 @@ function buildTagsFromMatches(
 		}
 
 		if (manifest.inlineStyle) {
+			const children = manifest.inlineStyle.children;
 			manifestTags.push({
 				tag: 'style',
 				attrs: { ...manifest.inlineStyle.attrs, nonce },
-				children: manifest.inlineStyle.children,
+				...(children === undefined ? undefined : { children }),
 				inlineCss: true,
 			});
 		}
@@ -123,25 +124,19 @@ function buildTagsFromMatches(
 	const styles = matches
 		.flatMap((match) => match.styles ?? [])
 		.filter((style) => style !== undefined)
-		.map(
-			({ children, ...attrs }) =>
-				({
-					tag: 'style',
-					attrs: { ...attrs, nonce },
-					children: children,
-				}) satisfies RouterManagedTag,
+		.map(({ children, ...attrs }): RouterManagedTag =>
+			children === undefined
+				? { tag: 'style', attrs: { ...attrs, nonce } }
+				: { tag: 'style', attrs: { ...attrs, nonce }, children },
 		);
 
 	const headScripts = matches
 		.flatMap((match) => match.headScripts ?? [])
 		.filter((script) => script !== undefined)
-		.map(
-			({ children, ...attrs }) =>
-				({
-					tag: 'script',
-					attrs: { ...attrs, nonce },
-					children: children,
-				}) satisfies RouterManagedTag,
+		.map(({ children, ...attrs }): RouterManagedTag =>
+			children === undefined
+				? { tag: 'script', attrs: { ...attrs, nonce } }
+				: { tag: 'script', attrs: { ...attrs, nonce }, children },
 		);
 
 	const tags: Array<RouterManagedTag> = [];

package/src/history.ts

@@ -1,10 +1,18 @@
-// `@tanstack/history` is a separate framework-agnostic dependency (the browser/
-// hash/memory history abstractions). react-router re-exports it from `./history`;
-// we mirror that so `@octanejs/tanstack-router/history` and the bare entry both resolve it.
-export {
-	createHistory,
-	createBrowserHistory,
-	createHashHistory,
-	createMemoryHistory,
+import {
+	createBrowserHistory as createTanStackBrowserHistory,
+	createHashHistory as createTanStackHashHistory,
 } from '@tanstack/history';
+import { prepareInitialHistoryState } from './historyState';
+
+export { createHistory, createMemoryHistory } from '@tanstack/history';
 export type * from '@tanstack/history';
+
+export const createBrowserHistory: typeof createTanStackBrowserHistory = (options) => {
+	prepareInitialHistoryState(options?.window);
+	return createTanStackBrowserHistory(options);
+};
+
+export const createHashHistory: typeof createTanStackHashHistory = (options) => {
+	prepareInitialHistoryState(options?.window);
+	return createTanStackHashHistory(options);
+};

package/src/historyState.ts

@@ -0,0 +1,37 @@
+import { parseHref } from '@tanstack/history';
+
+type NavigationWindow = Window & {
+	navigation?: {
+		currentEntry?: { key: string; getState(): unknown } | null;
+		updateCurrentEntry(options: { state: unknown }): void;
+	};
+};
+
+export function prepareInitialHistoryState(
+	win: NavigationWindow | undefined = typeof document === 'undefined' ? undefined : window,
+): void {
+	if (!win) return;
+	const state = win.history.state;
+	if (state?.__TSR_key || state?.key) return;
+
+	const navigation = win.navigation;
+	const entry = navigation?.currentEntry;
+	const navigationState =
+		entry && typeof navigation?.updateCurrentEntry === 'function' ? entry.getState() : undefined;
+	if (state == null && navigationState === undefined) return;
+	const entryKey = entry?.key;
+
+	// Seed TanStack's metadata before its constructor replaces the entry. The
+	// History API and Navigation API store independent state for the same entry.
+	const metadata = parseHref('/', undefined).state;
+	win.history.replaceState(
+		{ ...state, ...metadata, __TSR_index: state?.__TSR_index ?? metadata.__TSR_index },
+		'',
+	);
+	if (navigation && navigationState !== undefined) {
+		const currentEntry = navigation.currentEntry;
+		if (currentEntry && currentEntry.key === entryKey && currentEntry.getState() === undefined) {
+			navigation.updateCurrentEntry({ state: navigationState });
+		}
+	}
+}

package/src/hookBindings.ts

@@ -1,3 +1,5 @@
+'use strong';
+
 // The read hooks — ports of react-router's useMatch.tsx / useParams / useSearch /
 // useLoaderData / useLoaderDeps / useRouteContext / useNavigate / useCanGoBack /
 // Matches.tsx (useMatches / useParentMatches / useChildMatches). Everything match-

package/src/index.ts

@@ -122,8 +122,8 @@ export type {
 } from './routeHookTypes';
 export { useAwaited } from './useAwaited';
 export type { AwaitOptions } from './useAwaited';
-export { useLinkProps, createLink, linkOptions } from './link';
-export type { LinkOptionsFn, LinkOptionsFnOptions } from './link';
+export { useLinkProps, createLink, linkOptions } from './linkApi';
+export type { LinkOptionsFn, LinkOptionsFnOptions } from './linkApi';
 export type {
 	ActiveLinkOptionProps,
 	ActiveLinkOptions,
@@ -166,8 +166,8 @@ export { Scripts } from './Scripts.tsrx';
 export { ScriptOnce } from './ScriptOnce.tsrx';
 export { Asset } from './Asset.tsrx';
 export type { AssetProps } from './Asset.tsrx';
-export { getAssetKeys } from './assetKeys.ts';
-export type { AssetKeys } from './assetKeys.ts';
+export { getAssetKeys } from './assetKeys';
+export type { AssetKeys } from './assetKeys';
 export { useTags } from './headContentUtils';
 export { Html } from './Html';
 export type { HtmlProps } from './Html';

package/src/{link.ts → linkApi.ts}

@@ -1,13 +1,11 @@
 import { createElement } from 'octane';
 import type { ComponentBody } from 'octane';
 import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core';
-import { useRouter } from './context';
 import { Link } from './Link.tsrx';
-import { createUseLinkProps } from './linkBinding';
 import type { LinkComponent } from './linkTypes';
 import type { ValidateLinkOptions, ValidateLinkOptionsArray } from './typePrimitives';
 
-export const useLinkProps = createUseLinkProps(useRouter);
+export { useLinkProps } from './Link.tsrx';
 
 // Wrap a design-system component so it navigates like <Link> — the component
 // receives the fully-built link props (href, handlers, data-status, …).

package/src/linkBinding.ts

@@ -1,3 +1,5 @@
+'use strong';
+
 // Shared useLinkProps behavior — port of react-router's link.tsx
 // (client path; SSR link rendering arrives with the SSR entries). All of Link's
 // behavior lives here so both `<Link>` and custom `createLink` components share
@@ -8,7 +10,7 @@
 // IntersectionObserver, 'render' once on mount), the click handler (navigate
 // with replace/resetScroll/hashScrollIntoView/viewTransition/startTransition/
 // ignoreBlocker forwarded), and data-status/data-transitioning reflection.
-import { useRef, useState, useEffect, useCallback, flushSync } from 'octane';
+import { __useCommittedState, useRef, useEffect, useCallback } from 'octane';
 import {
 	deepEqual,
 	exactPathTest,
@@ -216,21 +218,24 @@ export function createUseLinkProps(useRouter: typeof UseRouter) {
 		// Class composes clsx-style (octane normalizeClass folds arrays + falsy).
 		const resolvedClass = [
 			klass ?? className,
-			resolvedActiveProps.class ?? resolvedActiveProps.className,
-			resolvedInactiveProps.class ?? resolvedInactiveProps.className,
+			resolvedActiveProps['class'] ?? resolvedActiveProps['className'],
+			resolvedInactiveProps['class'] ?? resolvedInactiveProps['className'],
 		].filter(Boolean);
 		const resolvedStyle = mergeStyles(
 			style,
-			resolvedActiveProps.style,
-			resolvedInactiveProps.style,
+			resolvedActiveProps['style'],
+			resolvedInactiveProps['style'],
 		);
 
-		const [isTransitioning, setIsTransitioning] = useState(false, subSlot(slot, 'lp:t'));
+		const [isTransitioning, setIsTransitioning, commitIsTransitioning] = __useCommittedState(
+			false,
+			subSlot(slot, 'lp:t'),
+		);
 		const hasRenderFetched = useRef(false, subSlot(slot, 'lp:rf'));
 		const elRef = useRef<Element | null>(null, subSlot(slot, 'lp:el'));
 
 		const preload =
-			options.reloadDocument || externalLink
+			options['reloadDocument'] || externalLink
 				? false
 				: (userPreload ?? router.options.defaultPreload);
 		const preloadDelay = userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0;
@@ -246,6 +251,7 @@ export function createUseLinkProps(useRouter: typeof UseRouter) {
 			subSlot(slot, 'lp:dp'),
 		);
 
+		// This manually slotted module retains explicit effect dependencies.
 		// preload="viewport": preload when the anchor scrolls into view (100px margin).
 		useEffect(
 			() => {
@@ -292,9 +298,7 @@ export function createUseLinkProps(useRouter: typeof UseRouter) {
 			) {
 				e.preventDefault();
 
-				flushSync(() => {
-					setIsTransitioning(true);
-				});
+				commitIsTransitioning(true);
 				const unsub = router.subscribe('onResolved', () => {
 					unsub();
 					setIsTransitioning(false);

package/src/linkComponent.tsrx

@@ -11,9 +11,9 @@
 // no forwardRef); `disabled` renders without an href + role="link" (upstream
 // drops the anchor's disabled attribute; the aria props carry the state).
 import { isChildrenBlock } from 'octane';
-import type { useLinkProps as UseLinkProps } from './link.ts';
+import type { useLinkProps as UseLinkProps } from './linkApi';
 import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core';
-import type { LinkComponentProps, OctaneAnchorProps, UseLinkPropsOptions } from './linkTypes.ts';
+import type { LinkComponentProps, OctaneAnchorProps, UseLinkPropsOptions } from './linkTypes';
 
 // Keep the generic implementation signature visible to `.tsrx` consumers so
 // route-aware `to`/`params`/`search` inference and native anchor event types are
@@ -51,7 +51,7 @@ export function createLinkComponent(useLinkProps: typeof UseLinkProps) {
 				: children;
 
 		@if (AsChild) {
-			<AsChild {...linkProps}>{resolvedChildren}</AsChild>
+			<AsChild {...linkProps} children={resolvedChildren} />
 		} @else {
 			<a {...(aProps as Record<string, any>)}>{resolvedChildren}</a>
 		}