@octanejs/tanstack-router 0.1.2

package/src/internal.ts

@@ -0,0 +1,31 @@
+// Slot mechanics shared by the binding's plain-`.ts` hooks (copied from
+// @octanejs/tanstack-query). The octane compiler injects a per-call-site Symbol slot into
+// every hook call in `.tsrx`/`.tsx`, but these binding files are NOT compiled — so
+// a hook here receives the caller's slot as its trailing argument and derives a
+// distinct sub-slot for each base hook it composes.
+
+// Derive a stable, distinct sub-slot from a wrapper's slot, namespaced per hook so
+// composing multiple base hooks gives each its own identity.
+// Memoized: subSlot runs on EVERY hook call every render, and the naive form
+// pays a string concat + global symbol-registry lookup each time. The cache is
+// keyed by the slot symbol itself; the minted value is byte-identical to the
+// uncached Symbol.for result, so identity is preserved across HMR re-evals and
+// the per-package copies of this helper. Key universe is bounded: slots are
+// per-call-site module constants (never minted per render).
+const subSlotCache = new Map<symbol, Map<string, symbol>>();
+export function subSlot(slot: symbol | undefined, tag: string): symbol | undefined {
+	if (slot === undefined) return undefined;
+	let byTag = subSlotCache.get(slot);
+	if (byTag === undefined) subSlotCache.set(slot, (byTag = new Map()));
+	let sym = byTag.get(tag);
+	if (sym === undefined) byTag.set(tag, (sym = Symbol.for((slot.description ?? '') + ':' + tag)));
+	return sym;
+}
+
+// Split the compiler-injected (or .ts-forwarded) trailing slot off a hook's args,
+// returning the user args (everything before it) and the slot.
+export function splitSlot(args: any[]): [any[], symbol | undefined] {
+	const tail = args[args.length - 1];
+	const slot = typeof tail === 'symbol' ? (tail as symbol) : undefined;
+	return [slot !== undefined ? args.slice(0, -1) : args, slot];
+}

package/src/lazyRouteComponent.ts

@@ -0,0 +1,56 @@
+// Code-split a route's component: wrap a dynamic import as a component that suspends
+// (via octane's `use`) until the module loads, then renders it. Carries `.preload()`
+// for hover/intent preloading, and reloads the page once on a stale-chunk
+// module-not-found error (the same recovery react-router does).
+//
+//   createRoute({ path: 'item/$id', component: lazyRouteComponent(() => import('./Item')) })
+import { use, createElement } from 'octane';
+import { isModuleNotFoundError } from '@tanstack/router-core';
+
+export function lazyRouteComponent(
+	importer: () => Promise<any>,
+	exportName?: string,
+): ((props: any) => any) & { preload: () => Promise<any> | undefined } {
+	let loadPromise: Promise<any> | undefined;
+	let comp: any;
+	let error: any;
+	let reload = false;
+
+	const load = () => {
+		if (!loadPromise) {
+			loadPromise = importer()
+				.then((res) => {
+					loadPromise = undefined;
+					comp = res[exportName ?? 'default'];
+				})
+				.catch((err) => {
+					error = err;
+					if (
+						isModuleNotFoundError(error) &&
+						error instanceof Error &&
+						typeof window !== 'undefined' &&
+						typeof sessionStorage !== 'undefined'
+					) {
+						const key = `tanstack_router_reload:${error.message}`;
+						if (!sessionStorage.getItem(key)) {
+							sessionStorage.setItem(key, '1');
+							reload = true;
+						}
+					}
+				});
+		}
+		return loadPromise;
+	};
+
+	const Lazy = (props: any) => {
+		if (reload) {
+			window.location.reload();
+			throw new Promise(() => {});
+		}
+		if (error) throw error;
+		if (!comp) use(load());
+		return createElement(comp, props);
+	};
+	Lazy.preload = load;
+	return Lazy;
+}

package/src/link.ts

@@ -0,0 +1,383 @@
+// useLinkProps / createLink / linkOptions — 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
+// it: href building (mask-aware via publicHref), external-URL detection with
+// dangerous-protocol blocking, active-state detection (exactPathTest /
+// trailing-slash-aware fuzzy prefix + deepEqual partial search match),
+// preloading ('intent' with delay + touchstart/focus, 'viewport' via
+// 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, createElement } from 'octane';
+import {
+	deepEqual,
+	exactPathTest,
+	functionalUpdate,
+	hasKeys,
+	isDangerousProtocol,
+	preloadWarning,
+	removeTrailingSlash,
+} from '@tanstack/router-core';
+import { useRouter } from './context';
+import { useStore } from './useStore';
+import { splitSlot, subSlot } from './internal';
+import { Link } from './Link.tsrx';
+
+const STATIC_EMPTY_OBJECT = {};
+const STATIC_ACTIVE_OBJECT = { class: 'active' };
+const STATIC_DISABLED_PROPS = { role: 'link', 'aria-disabled': true };
+const STATIC_ACTIVE_PROPS = { 'data-status': 'active', 'aria-current': 'page' };
+const STATIC_TRANSITIONING_PROPS = { 'data-transitioning': 'transitioning' };
+
+const timeoutMap = new WeakMap<EventTarget, ReturnType<typeof setTimeout>>();
+
+const composeHandlers = (handlers: Array<undefined | ((e: any) => void)>) => (e: Event) => {
+	for (const handler of handlers) {
+		if (!handler) continue;
+		if (e.defaultPrevented) return;
+		handler(e);
+	}
+};
+
+function getHrefOption(
+	publicHref: string,
+	external: boolean,
+	history: any,
+	disabled: boolean | undefined,
+): { href: string; external: boolean } | undefined {
+	if (disabled) return undefined;
+	// Full URL means a rewrite changed the origin — treat as external-like.
+	if (external) return { href: publicHref, external: true };
+	return { href: history.createHref(publicHref) || '/', external: false };
+}
+
+function isSafeInternal(to: unknown): boolean {
+	if (typeof to !== 'string') return false;
+	const zero = to.charCodeAt(0);
+	if (zero === 47) return to.charCodeAt(1) !== 47; // '/' but not '//'
+	return zero === 46; // '.', '..', './', '../'
+}
+
+function isCtrlEvent(e: MouseEvent): boolean {
+	return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+}
+
+// Merge base/active/inactive styles. Objects merge like upstream; if any is a
+// string the parts join with ';' (octane host styles accept both forms).
+function mergeStyles(base: any, active: any, inactive: any): any {
+	if (!base && !active && !inactive) return undefined;
+	const parts = [base, active, inactive].filter(Boolean);
+	if (parts.length === 1) return parts[0];
+	if (parts.some((p) => typeof p === 'string')) {
+		return parts
+			.map((p) =>
+				typeof p === 'string'
+					? p.replace(/;\s*$/, '')
+					: Object.entries(p)
+							.map(([k, v]) => `${k.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase())}:${v}`)
+							.join(';'),
+			)
+			.join(';');
+	}
+	return Object.assign({}, ...parts);
+}
+
+export function useLinkProps(...args: any[]): Record<string, any> {
+	const [user, slot] = splitSlot(args);
+	const options = (user[0] ?? {}) as Record<string, any>;
+	const router = useRouter();
+
+	const {
+		// custom props
+		activeProps,
+		inactiveProps,
+		activeOptions,
+		to,
+		preload: userPreload,
+		preloadDelay: userPreloadDelay,
+		preloadIntentProximity: _preloadIntentProximity,
+		hashScrollIntoView,
+		replace,
+		startTransition,
+		resetScroll,
+		viewTransition,
+		// element props
+		children: _children,
+		target,
+		disabled,
+		style,
+		class: klass,
+		className,
+		onClick,
+		onBlur,
+		onFocus,
+		onMouseEnter,
+		onMouseLeave,
+		onTouchStart,
+		ignoreBlocker,
+		ref: userRef,
+		// consumed by buildLocation — not spread onto the element
+		params: _params,
+		search: _search,
+		hash: _hash,
+		state: _state,
+		mask: _mask,
+		reloadDocument: _reloadDocument,
+		unsafeRelative: _unsafeRelative,
+		from: _from,
+		_fromLocation,
+		...propsSafeToSpread
+	} = options;
+
+	// Subscribe to the location (by href) — active state re-derives per commit.
+	const currentLocation: any = useStore(
+		router.stores.location,
+		(l: any) => l,
+		(prev: any, next: any) => prev.href === next.href,
+		subSlot(slot, 'lp:loc'),
+	);
+
+	const next = router.buildLocation({ _fromLocation: currentLocation, ...options } as any);
+
+	const hrefOptionPublicHref = next.maskedLocation
+		? next.maskedLocation.publicHref
+		: next.publicHref;
+	const hrefOptionExternal = next.maskedLocation ? next.maskedLocation.external : next.external;
+	const hrefOption = getHrefOption(
+		hrefOptionPublicHref,
+		hrefOptionExternal,
+		router.history,
+		disabled,
+	);
+
+	// External URL detection + dangerous-protocol blocking (javascript:, data:…).
+	const externalLink = (() => {
+		if (hrefOption?.external) {
+			if (isDangerousProtocol(hrefOption.href, router.protocolAllowlist)) return undefined;
+			return hrefOption.href;
+		}
+		if (isSafeInternal(to)) return undefined;
+		if (typeof to !== 'string' || to.indexOf(':') === -1) return undefined;
+		try {
+			new URL(to);
+			if (isDangerousProtocol(to, router.protocolAllowlist)) return undefined;
+			return to;
+		} catch {
+			/* not an absolute URL */
+		}
+		return undefined;
+	})();
+
+	const isActive = (() => {
+		if (externalLink) return false;
+		if (activeOptions?.exact) {
+			if (!exactPathTest(currentLocation.pathname, next.pathname, router.basepath)) {
+				return false;
+			}
+		} else {
+			const currentPathSplit = removeTrailingSlash(currentLocation.pathname, router.basepath);
+			const nextPathSplit = removeTrailingSlash(next.pathname, router.basepath);
+			const pathIsFuzzyEqual =
+				currentPathSplit.startsWith(nextPathSplit) &&
+				(currentPathSplit.length === nextPathSplit.length ||
+					currentPathSplit[nextPathSplit.length] === '/');
+			if (!pathIsFuzzyEqual) return false;
+		}
+		if (activeOptions?.includeSearch ?? true) {
+			const searchTest = deepEqual(currentLocation.search, next.search, {
+				partial: !activeOptions?.exact,
+				ignoreUndefined: !activeOptions?.explicitUndefined,
+			});
+			if (!searchTest) return false;
+		}
+		if (activeOptions?.includeHash) return currentLocation.hash === next.hash;
+		return true;
+	})();
+
+	const resolvedActiveProps: Record<string, any> = isActive
+		? (functionalUpdate(activeProps, {}) ?? STATIC_ACTIVE_OBJECT)
+		: STATIC_EMPTY_OBJECT;
+	const resolvedInactiveProps: Record<string, any> = isActive
+		? STATIC_EMPTY_OBJECT
+		: (functionalUpdate(inactiveProps, {}) ?? STATIC_EMPTY_OBJECT);
+
+	// Class composes clsx-style (octane normalizeClass folds arrays + falsy).
+	const resolvedClass = [
+		klass ?? className,
+		resolvedActiveProps.class ?? resolvedActiveProps.className,
+		resolvedInactiveProps.class ?? resolvedInactiveProps.className,
+	].filter(Boolean);
+	const resolvedStyle = mergeStyles(style, resolvedActiveProps.style, resolvedInactiveProps.style);
+
+	const [isTransitioning, setIsTransitioning] = useState(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 ? false : (userPreload ?? router.options.defaultPreload);
+	const preloadDelay = userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0;
+
+	const doPreload = useCallback(
+		() => {
+			router.preloadRoute({ ...options, _builtLocation: next } as any).catch((err: unknown) => {
+				console.warn(err);
+				console.warn(preloadWarning);
+			});
+		},
+		[router, next.href],
+		subSlot(slot, 'lp:dp'),
+	);
+
+	// preload="viewport": preload when the anchor scrolls into view (100px margin).
+	useEffect(
+		() => {
+			if (disabled || preload !== 'viewport') return;
+			const el = elRef.current;
+			if (!el || typeof IntersectionObserver === 'undefined') return;
+			const io = new IntersectionObserver(
+				(entries) => {
+					for (const entry of entries) {
+						if (entry.isIntersecting) doPreload();
+					}
+				},
+				{ rootMargin: '100px' },
+			);
+			io.observe(el);
+			return () => io.disconnect();
+		},
+		[disabled, preload, doPreload],
+		subSlot(slot, 'lp:io'),
+	);
+
+	// preload="render": preload once on mount.
+	useEffect(
+		() => {
+			if (hasRenderFetched.current) return;
+			if (!disabled && preload === 'render') {
+				doPreload();
+				hasRenderFetched.current = true;
+			}
+		},
+		[disabled, doPreload, preload],
+		subSlot(slot, 'lp:pr'),
+	);
+
+	const handleClick = (e: MouseEvent) => {
+		const elementTarget = (e.currentTarget as Element | null)?.getAttribute?.('target');
+		const effectiveTarget = target !== undefined ? target : elementTarget;
+		if (
+			!disabled &&
+			!isCtrlEvent(e) &&
+			!e.defaultPrevented &&
+			(!effectiveTarget || effectiveTarget === '_self') &&
+			e.button === 0
+		) {
+			e.preventDefault();
+
+			flushSync(() => {
+				setIsTransitioning(true);
+			});
+			const unsub = router.subscribe('onResolved', () => {
+				unsub();
+				setIsTransitioning(false);
+			});
+
+			router.navigate({
+				...options,
+				replace,
+				resetScroll,
+				hashScrollIntoView,
+				startTransition,
+				viewTransition,
+				ignoreBlocker,
+			});
+		}
+	};
+
+	const captureRef = (el: Element | null) => {
+		elRef.current = el;
+	};
+	const composedRef = userRef ? [captureRef, userRef] : captureRef;
+
+	if (externalLink) {
+		return {
+			...propsSafeToSpread,
+			ref: composedRef,
+			href: externalLink,
+			...(target !== undefined && { target }),
+			...(disabled !== undefined && { disabled }),
+			...(resolvedStyle !== undefined && { style: resolvedStyle }),
+			...(resolvedClass.length > 0 && { class: resolvedClass }),
+			...(onClick && { onClick }),
+			...(onBlur && { onBlur }),
+			...(onFocus && { onFocus }),
+			...(onMouseEnter && { onMouseEnter }),
+			...(onMouseLeave && { onMouseLeave }),
+			...(onTouchStart && { onTouchStart }),
+		};
+	}
+
+	const enqueueIntentPreload = (e: MouseEvent | FocusEvent) => {
+		if (disabled || preload !== 'intent') return;
+		if (!preloadDelay) {
+			doPreload();
+			return;
+		}
+		const eventTarget = e.currentTarget as EventTarget;
+		if (timeoutMap.has(eventTarget)) return;
+		const id = setTimeout(() => {
+			timeoutMap.delete(eventTarget);
+			doPreload();
+		}, preloadDelay);
+		timeoutMap.set(eventTarget, id);
+	};
+
+	const handleTouchStart = () => {
+		if (disabled || preload !== 'intent') return;
+		doPreload();
+	};
+
+	const handleLeave = (e: MouseEvent | FocusEvent) => {
+		if (disabled || !preload || !preloadDelay) return;
+		const eventTarget = e.currentTarget as EventTarget;
+		const id = timeoutMap.get(eventTarget);
+		if (id) {
+			clearTimeout(id);
+			timeoutMap.delete(eventTarget);
+		}
+	};
+
+	return {
+		...propsSafeToSpread,
+		...resolvedActiveProps,
+		...resolvedInactiveProps,
+		href: hrefOption?.href,
+		ref: composedRef,
+		onClick: composeHandlers([onClick, handleClick]),
+		onBlur: composeHandlers([onBlur, handleLeave]),
+		onFocus: composeHandlers([onFocus, enqueueIntentPreload]),
+		onMouseEnter: composeHandlers([onMouseEnter, enqueueIntentPreload]),
+		onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+		onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
+		disabled: !!disabled,
+		...(target !== undefined && { target }),
+		...(resolvedStyle !== undefined && { style: resolvedStyle }),
+		...(resolvedClass.length > 0 && { class: resolvedClass }),
+		...(disabled && STATIC_DISABLED_PROPS),
+		...(isActive && STATIC_ACTIVE_PROPS),
+		...(isTransitioning && STATIC_TRANSITIONING_PROPS),
+	};
+}
+
+// Wrap a design-system component so it navigates like <Link> — the component
+// receives the fully-built link props (href, handlers, data-status, …).
+export function createLink(Comp: any): any {
+	return function CreatedLink(props: any) {
+		return createElement(Link as any, { ...props, _asChild: Comp });
+	};
+}
+
+// Identity helper for pre-validating navigation options (type-level upstream).
+export function linkOptions(options: any): any {
+	return options;
+}

package/src/not-found.tsrx

@@ -0,0 +1,39 @@
+// CatchNotFound — a CatchBoundary specialized to `notFound()` errors (port of
+// react-router's not-found.tsx). Anything that isn't a NotFoundError is rethrown
+// (from onCatch during the catch render) so it reaches the next error boundary
+// up; the reset key is `not-found-${pathname}-${status}` so navigating away (or a
+// new load settling) clears the not-found UI.
+import { isNotFound } from '@tanstack/router-core';
+import { useRouter } from './context.ts';
+import { useStore } from './useStore.ts';
+import { CatchBoundary } from './CatchBoundary.tsrx';
+
+function NotFoundFallback(props) {
+	if (isNotFound(props.error)) {
+		return props.render ? props.render(props.error) : null;
+	}
+	throw props.error;
+}
+
+export function CatchNotFound(props) @{
+	const router = useRouter();
+	const pathname = useStore(router.stores.location, (l) => l.pathname);
+	const status = useStore(router.stores.status, (s) => s);
+	const resetKey = `not-found-${pathname}-${status}`;
+
+	<CatchBoundary
+		getResetKey={() => resetKey}
+		onCatch={(error, errorInfo) => {
+			if (isNotFound(error)) {
+				if (props.onCatch) props.onCatch(error, errorInfo);
+			} else {
+				throw error;
+			}
+		}}
+		errorComponent={(p) => NotFoundFallback({ error: p.error, render: props.fallback })}
+	>{props.children}</CatchBoundary>
+}
+
+export function DefaultGlobalNotFound() @{
+	<p>Not Found</p>
+}

package/src/not-found.tsrx.d.ts

@@ -0,0 +1,7 @@
+// Type declaration for the .tsrx components (resolved by relative path).
+export declare const CatchNotFound: (props: {
+	fallback?: (error: any) => unknown;
+	onCatch?: (error: any, errorInfo: { componentStack: string }) => void;
+	children?: unknown;
+}) => unknown;
+export declare const DefaultGlobalNotFound: () => unknown;

package/src/route.ts

@@ -0,0 +1,147 @@
+// Route factories + the route-bound hook accessors. `@tanstack/router-core`
+// ships the `BaseRoute`/`BaseRootRoute`/`BaseRouteApi` classes but NOT the
+// ergonomic factories or the React-side hook accessors (`Route.useLoaderData()`,
+// `getRouteApi(id).useParams()`, …) — those live in react-router's route.tsx and
+// are ported here 1:1 on octane's hooks. The accessors are this-bound instance
+// closures (upstream uses arrow-function class fields) and follow the binding's
+// slot convention: the octane compiler wraps method-style `use*()` calls in
+// `withSlot` and passes the call-site symbol as the trailing argument, which
+// each accessor forwards to the hooks it composes.
+import { BaseRoute, BaseRootRoute, BaseRouteApi, notFound } from '@tanstack/router-core';
+import { createElement } from 'octane';
+import {
+	useMatch,
+	useParams,
+	useSearch,
+	useLoaderData,
+	useLoaderDeps,
+	useRouteContext,
+	useNavigate,
+} from './hooks';
+import { useRouter } from './context';
+import { splitSlot, subSlot } from './internal';
+import { Link } from './Link.tsrx';
+
+// Attach the hook accessors to a route-shaped instance (Route / RootRoute /
+// RouteApi). `strictLoaderHooks: false` is RouteApi's mode — its loader hooks
+// pass `strict: false` upstream (the api may be read from ancestor layouts).
+function attachRouteHooks(self: any, strictLoaderHooks: boolean): void {
+	self.useMatch = (...args: any[]) => {
+		const [user, slot] = splitSlot(args);
+		const opts = user[0] ?? {};
+		return useMatch(
+			{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
+			subSlot(slot, 'r:m'),
+		);
+	};
+	self.useRouteContext = (...args: any[]) => {
+		const [user, slot] = splitSlot(args);
+		const opts = user[0] ?? {};
+		return useRouteContext({ ...opts, from: self.id }, subSlot(slot, 'r:ctx'));
+	};
+	self.useSearch = (...args: any[]) => {
+		const [user, slot] = splitSlot(args);
+		const opts = user[0] ?? {};
+		return useSearch(
+			{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
+			subSlot(slot, 'r:s'),
+		);
+	};
+	self.useParams = (...args: any[]) => {
+		const [user, slot] = splitSlot(args);
+		const opts = user[0] ?? {};
+		return useParams(
+			{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
+			subSlot(slot, 'r:p'),
+		);
+	};
+	self.useLoaderDeps = (...args: any[]) => {
+		const [user, slot] = splitSlot(args);
+		const opts = user[0] ?? {};
+		return useLoaderDeps(
+			strictLoaderHooks ? { ...opts, from: self.id } : { ...opts, from: self.id, strict: false },
+			subSlot(slot, 'r:d'),
+		);
+	};
+	self.useLoaderData = (...args: any[]) => {
+		const [user, slot] = splitSlot(args);
+		const opts = user[0] ?? {};
+		return useLoaderData(
+			strictLoaderHooks ? { ...opts, from: self.id } : { ...opts, from: self.id, strict: false },
+			subSlot(slot, 'r:l'),
+		);
+	};
+}
+
+export class Route extends (BaseRoute as any) {
+	constructor(options?: any) {
+		super(options);
+		attachRouteHooks(this, true);
+		(this as any).useNavigate = (...args: any[]) => {
+			const [, slot] = splitSlot(args);
+			return useNavigate({ from: (this as any).fullPath }, subSlot(slot, 'r:n'));
+		};
+		(this as any).Link = (props: any) =>
+			createElement(Link as any, { from: (this as any).fullPath, ...props });
+	}
+}
+
+export class RootRoute extends (BaseRootRoute as any) {
+	constructor(options?: any) {
+		super(options);
+		attachRouteHooks(this, true);
+		(this as any).useNavigate = (...args: any[]) => {
+			const [, slot] = splitSlot(args);
+			return useNavigate({ from: (this as any).fullPath }, subSlot(slot, 'r:n'));
+		};
+		(this as any).Link = (props: any) =>
+			createElement(Link as any, { from: (this as any).fullPath, ...props });
+	}
+}
+
+export function createRoute(options: any): any {
+	return new (Route as any)(options);
+}
+
+export function createRootRoute(options?: any): any {
+	return new (RootRoute as any)(options);
+}
+
+// `createRootRouteWithContext<TContext>()` is a curried type-only helper that just
+// returns `createRootRoute` — the context is a compile-time concern.
+export function createRootRouteWithContext<_TContext>() {
+	return (options?: any) => createRootRoute(options);
+}
+
+// getRouteApi — route-bound hooks without importing the route (avoids circular
+// imports in code-split files). Port of react-router's RouteApi class.
+export class RouteApi extends (BaseRouteApi as any) {
+	/** @deprecated Use the `getRouteApi` function instead. */
+	constructor({ id }: { id: any }) {
+		super({ id });
+		attachRouteHooks(this, false);
+		(this as any).useNavigate = (...args: any[]) => {
+			const [, slot] = splitSlot(args);
+			const router = useRouter();
+			return useNavigate(
+				{ from: router.routesById[(this as any).id].fullPath },
+				subSlot(slot, 'r:n'),
+			);
+		};
+		(this as any).notFound = (opts?: any) => notFound({ routeId: (this as any).id, ...opts });
+		(this as any).Link = (props: any) => {
+			const router = useRouter();
+			const fullPath = router.routesById[(this as any).id].fullPath;
+			return createElement(Link as any, { from: fullPath, ...props });
+		};
+	}
+}
+
+export function getRouteApi(id: any): any {
+	return new (RouteApi as any)({ id });
+}
+
+// Identity at runtime (the shape is a RouteMask; types constrain it upstream).
+export function createRouteMask(opts: any): any {
+	return opts;
+}